:root {
  /* Brand colors */
  --color-brand-yellow: #fec01a;
  --color-brand-orange: #fcb03f;
  --color-brand-coral: #ff7a45;
  --color-brand-navy: #11345f;
  --color-brand-navy-deep: #0b1e38;

  /* Surfaces */
  --color-bg: #fff6e3;
  --color-surface: #ffffff;
  --color-surface-alt: #ffedc7;
  --color-nav-glass: rgba(255, 246, 227, 0.85);
  /* Referans logo kartlarının zemini — karanlık modda karışık renkli/koyu logoların
     hepsinin okunur kalması için beyaz DEĞİL, orta tonlu nötr bir panel (bkz. dark blok). */
  --color-logo-panel: var(--color-surface);
  /* "Aktif" chip (nav aktif sayfa pill'i, tab, segmented, mini-model rozeti) —
     kasıtlı olarak tema-duyarlı: light'ta marka turuncusu, dark'ta mercan (aşağıdaki
     dark blokta override edilir). Metin her iki temada da aynı koyu kahverengi kalır
     (turuncu/mercan zemin üzerinde okunabilirlik için — açık renk metin kullanma).
     Not: --color-brand-navy KULLANMAYIN — o token dark modda maviye kayar ve
     light modda "neden burada gece mavisi var" izlenimi verir. */
  --color-chip-active-bg: var(--color-brand-orange);
  --color-chip-active-text: #2a1608;

  /* Text */
  --color-ink: #241606;
  --color-ink-soft: #5b4a30;
  --color-ink-faint: #8a7554;
  --color-on-navy: #fdf6e3;

  /* Borders */
  --color-border: #f0d29b;
  --color-border-strong: #e0b96c;

  /* Semantic */
  --color-success: #2f9e44;
  --color-danger: #dc2626;
  --color-info: #22c7d9;

  /* Typography */
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow (warm-tinted, not pure black) */
  --shadow-sm: 0 2px 8px rgba(36, 22, 6, 0.08);
  --shadow-md: 0 8px 24px rgba(36, 22, 6, 0.12);
  --shadow-lg: 0 20px 48px rgba(36, 22, 6, 0.16);

  /* Layout */
  --container-max: 1240px;
  /* Nav'ın gerçek render yüksekliği: 72px logo (.site-nav-brand img) + 12px+12px
     dikey padding (.site-nav-inner) + 1px+1px border = 98px. Logo boyutu veya
     nav-inner padding'i değişirse bu değer de güncellenmeli — aksi halde
     hero-video gibi "nav'ın altına kadar tam ekran" bileşenler üstte ince bir
     boşluk/çizgi bırakır (bkz. DESIGN.md "Hero Video"). */
  --nav-height: 98px;
  /* Nav'ın .site-nav margin-top'u dahil toplam kapladığı dikey alan (sticky nav'ın
     "altı" bu noktadır). Tek kaynak: hem hero'nun negatif margin'i hem iç padding'i
     buradan türer, iki yerde ayrı ayrı hesaplanıp birbirinden sapmasın diye. */
  --nav-total-offset: calc(var(--space-3) + var(--nav-height));

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/* ---------- Dark theme ("gece mavisi") ----------
   Eski siteden alınan night-blue palet; aynı marka vurgularıyla (sarı/turuncu/mercan)
   eşleştirilmiş, WCAG AA hedefli metin/zemin çiftleri. */
:root[data-theme="dark"] {
  --color-bg: #0a1830;
  --color-surface: #0e2247;
  --color-surface-alt: #132c58;
  --color-nav-glass: rgba(14, 34, 71, 0.82);
  --color-ink: #f3f7ff;
  --color-ink-soft: #dbe6f8;
  --color-ink-faint: #a9bbd9;
  --color-on-navy: #fdf6e3;
  --color-border: rgba(255,255,255,.14);
  --color-border-strong: rgba(255,255,255,.24);
  --color-brand-navy: #050c1c;
  --color-brand-navy-deep: #050c1c;
  --color-chip-active-bg: var(--color-brand-coral);
  --color-logo-panel: #4b5568;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.38);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.44);
}