/* =========================================================
   Tasarım token'ları — tüm renk, tipografi ve boşluk değerleri
   buradan yönetilir. Bileşenler ham hex değil, bu değişkenleri kullanır.
   ========================================================= */
:root {
  color-scheme: light;

  /* Lacivert skala */
  --navy-950: #0B1628;
  --navy-900: #0F1E3D;
  --navy-800: #1B2F5A;
  --navy-700: #2A4275;
  --navy-200: #C7D4EA;
  --navy-100: #E3EAF6;
  --navy-50:  #F1F5FB;

  /* Nötr gri skala */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F9FC;
  --gray-100: #EFF2F7;
  --gray-200: #E6EAF2;
  --gray-300: #D5DBE6;
  --gray-400: #A9B1C2;
  --gray-500: #8A93A6;
  --gray-600: #5B6478;
  --gray-700: #3D4559;

  /* Sınırlı vurgu renkleri */
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-50:  #EEF3FF;
  --teal-600: #0D9488;
  --teal-50:  #E6F6F4;
  --red-600:  #DC2626;
  --red-50:   #FEF2F2;
  --amber-700:#B45309;
  --amber-50: #FFF7E6;
  --green-700:#047857;
  --green-50: #ECFDF5;

  /* Anlamsal roller */
  --color-bg: var(--gray-0);
  --color-bg-alt: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-text: var(--navy-900);
  --color-text-soft: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-primary: var(--navy-900);
  --color-primary-hover: var(--navy-800);
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-accent-soft: var(--blue-50);
  --color-focus: var(--blue-600);

  /* Tipografi */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Boşluk (4px tabanlı) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* Köşe yarıçapı */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Lacivert tonlu yumuşak gölgeler */
  --shadow-xs: 0 1px 2px rgba(15, 30, 61, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 30, 61, 0.06), 0 1px 2px rgba(15, 30, 61, 0.04);
  --shadow-md: 0 6px 20px -4px rgba(15, 30, 61, 0.10), 0 2px 6px rgba(15, 30, 61, 0.05);
  --shadow-lg: 0 20px 44px -12px rgba(15, 30, 61, 0.18), 0 4px 12px rgba(15, 30, 61, 0.06);

  /* Yerleşim */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 64px;
  --tap-min: 44px;

  /* Hareket */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}