/* ===== Design Tokens — Melih Kardeşler ===== */
:root {
  /* Brand */
  --navy-900: #0F2238;
  --navy-800: #163150;
  --navy-700: #1E3A5F;
  --navy-600: #2A4D78;
  --steel-500: #3B5C7E;
  --steel-400: #5B7BA0;
  --steel-300: #94A9C2;

  /* Accent — su yeşili / teal */
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-400: #2DD4BF;
  --teal-50:  #ECFDF5;

  /* Neutrals */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-700: #44403C;
  --stone-900: #1C1917;

  /* Soft slate-blue tint for light mode */
  --slate-tint-50:  #E8EFF7;
  --slate-tint-100: #DDE7F1;
  --slate-tint-200: #C7D4E2;
  --slate-tint-300: #A8B8CC;

  /* Semantic — Light theme (default) */
  --bg:           var(--slate-tint-50);
  --bg-elevated:  #FFFFFF;
  --bg-muted:     var(--slate-tint-100);
  --surface:      #FFFFFF;
  --border:       var(--slate-tint-200);
  --border-strong:var(--slate-tint-300);
  --text:         var(--navy-900);
  --text-muted:   var(--stone-700);
  --text-subtle:  var(--stone-500);
  --brand:        var(--navy-700);
  --brand-hover:  var(--navy-800);
  --on-brand:     #FFFFFF;
  --accent:       var(--teal-600);
  --accent-hover: var(--teal-500);
  --on-accent:    #FFFFFF;
  --ring:         color-mix(in oklch, var(--accent) 60%, transparent);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(15, 34, 56, .06);
  --shadow-md:  0 4px 12px rgba(15, 34, 56, .08);
  --shadow-lg:  0 12px 32px rgba(15, 34, 56, .12);

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Spacing scale */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Type */
  --font-display: 'Lexend', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 360ms;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

[data-theme='dark'] {
  --bg:           #0A1626;
  --bg-elevated:  #0F2238;
  --bg-muted:     #112A45;
  --surface:      #112A45;
  --border:       #1F3A5C;
  --border-strong:#2A4D78;
  --text:         #F1F5F9;
  --text-muted:   #C7D2E1;
  --text-subtle:  #94A3B8;
  --brand:        var(--steel-400);
  --brand-hover:  var(--steel-300);
  --on-brand:     #0A1626;
  --accent:       var(--teal-400);
  --accent-hover: var(--teal-500);
  --on-accent:    #0A1626;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #0A1626;
    --bg-elevated:  #0F2238;
    --bg-muted:     #112A45;
    --surface:      #112A45;
    --border:       #1F3A5C;
    --border-strong:#2A4D78;
    --text:         #F1F5F9;
    --text-muted:   #C7D2E1;
    --text-subtle:  #94A3B8;
    --brand:        var(--steel-400);
    --brand-hover:  var(--steel-300);
    --on-brand:     #0A1626;
    --accent:       var(--teal-400);
    --accent-hover: var(--teal-500);
    --on-accent:    #0A1626;
  }
}