/* ═══════════════════════════════════════════════════════════════
   AxisAI — DESIGN TOKENS (v1, Phase 1)
   Tek kanonik token kaynağı. _head.html her sayfada BÜTÜN sayfa
   CSS'lerinden ÖNCE yükler. Kurallar:
     • Yeni kod YALNIZCA kanonik isimleri kullanır (--color-*, --space-*,
       --radius-*, --text-*, --duration-* …).
     • "Legacy aliases" bloğundaki eski isimler (--volt, --accent, --s1…)
       yalnızca mevcut kodun kırılmaması içindir — yeni kodda KULLANMA.
     • Görsel değerler mevcut üretim arayüzüyle birebir aynıdır; bu dosya
       görünüm DEĞİŞTİRMEZ, kaynağı merkezileştirir.
   Dokümantasyon: docs/design-system.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. COLOR PRIMITIVES ─────────────────────────────────────
     Ham palet. Sayfalar bunları DOĞRUDAN kullanmaz; semantik
     token'lar (aşağıda) bunlara işaret eder. */
  --gray-950: #0A0A0C;
  --gray-900: #121212;   /* app background */
  --gray-850: #1A1A1A;   /* surface 1 */
  --gray-820: #1E1E1E;   /* surface 2 / card */
  --gray-800: #252525;   /* surface 3 */
  --gray-400: #4D4D4D;   /* text 4 (faint) */
  --gray-300: #909090;   /* text 3 */
  --gray-200: #A6A6A6;   /* text 2 */
  --gray-50:  #F4F4F4;   /* text 1 */

  --blue-300: #60A8FF;
  --blue-400: #3D9EFF;
  --blue-500: #3D8BFF;   /* brand primary (AxisAI electric blue) */
  --blue-600: #1E6FE0;
  --blue-vivid: #007BFF; /* info / secondary blue */

  --red-500:   #FF4D4D;
  --red-400:   #FF7070;
  --green-500: #00C48C;
  --amber-500: #FFB020;

  /* Auth sayfalarının katı (solid) kenarlık grisi — style.css mirası.
     Phase 3+: --color-border-1 ile birleştirilecek. */
  --color-border-solid: #242424;

  /* ── 2. SEMANTIC COLORS (dark = varsayılan tema) ───────────── */
  --color-primary:        var(--blue-500);
  --color-primary-strong: var(--blue-600);
  /* Primary kanal: tüm primary-şeffaf tonlarının TEK kaynağı; light temada
     otomatik döner (aşağıdaki [data-theme="light"] override'ı ile). */
  --color-primary-rgb:    61, 139, 255;
  --color-primary-soft:   rgba(var(--color-primary-rgb), 0.09);
  --color-primary-glow:   rgba(var(--color-primary-rgb), 0.30);
  /* İnce ara-adımlar (coach widget hover/focus/border katmanları) —
     primary-soft(.09)/primary-glow(.30) arasındaki boşlukları doldurur. */
  --color-primary-a06:    rgba(var(--color-primary-rgb), 0.06);
  --color-primary-a12:    rgba(var(--color-primary-rgb), 0.12);
  --color-primary-a20:    rgba(var(--color-primary-rgb), 0.20);
  --color-primary-a38:    rgba(var(--color-primary-rgb), 0.38);
  --color-primary-a50:    rgba(var(--color-primary-rgb), 0.50);
  --color-on-primary:     #121212; /* primary dolgu üstündeki metin/ikon */
  --white:                #FFFFFF; /* tema-değişmez beyaz (renkli/koyu zemin üstü metin: danger butonu, kamera overlay) */

  --color-bg:        var(--gray-900);
  --color-surface-1: var(--gray-850);
  --color-surface-2: var(--gray-820);
  --color-surface-3: var(--gray-800);

  --color-text-1: var(--gray-50);
  --color-text-2: var(--gray-200);
  --color-text-3: var(--gray-300);
  --color-text-4: var(--gray-400);

  --color-success:      var(--green-500);
  --color-success-soft: rgba(0, 196, 140, 0.12);
  --color-warning:      var(--amber-500);
  --color-warning-soft: rgba(255, 176, 32, 0.12);
  --color-danger:       var(--red-500);
  --color-danger-soft:  rgba(255, 77, 77, 0.12);
  --color-danger-light: var(--red-400); /* metin üstü daha açık kırmızı (coach widget) */
  --color-info:         var(--blue-vivid);
  --color-info-soft:    rgba(0, 123, 255, 0.10);
  /* Durum kanalları (toast tint bg/border gibi soft varyantların tek kaynağı) */
  --color-danger-rgb:   255, 77, 77;
  --color-success-rgb:  0, 196, 140;
  --color-info-rgb:     0, 123, 255;
  --black-rgb:          0, 0, 0;   /* tema-değişmez siyah kanal (kamera/modal scrim) */
  --color-overlay-scrim: rgba(18, 18, 18, 0.85); /* koyu yarı-saydam katman (ör. sabit overlay) */
  --color-menu-scrim:    rgba(14, 14, 18, 0.96); /* FAB alt-menü zemini */

  /* Ek kanallar (sayfa CSS'lerinden hoist edilen şeffaf tonların tek kaynağı) */
  --white-rgb:          255, 255, 255; /* beyaz hover/ayraç katmanları */
  --gray-500-rgb:       100, 100, 100;
  --color-gold-rgb:     255, 215, 0;
  --color-warning-rgb:  255, 176, 32;

  /* Sıralama madalyaları (leaderboard podyumu — tema-değişmez) */
  --color-rank-gold:        #FFD700;
  --color-rank-silver:      #D0D6DE;
  --color-rank-bronze:      #CD7F32;
  --color-rank-silver-rgb:  208, 214, 222;
  --color-rank-bronze-rgb:  205, 127, 50;

  /* Koyu yüzey/scrim tonları (kart/modal gradyan zeminleri) + durum-koyu tint'leri */
  --color-scrim-1:       rgba(14, 17, 24, 0.98);
  --color-scrim-2:       rgba(22, 27, 38, 0.98);
  --color-scrim-3:       rgba(20, 24, 34, 0.98);
  --color-scrim-warm:    rgba(20, 24, 8, 0.92);
  --color-scrim-soft:    rgba(18, 18, 18, 0.50);
  --color-surface-deep:    #101318;
  --color-surface-deepest: #050505;
  --color-success-bg-dark: #1a3a2a;
  --color-danger-bg-dark:  #3a1a1a;
  --color-accent-lime:     #e8ff57; /* nadir kullanılan yeşil-sarı aksan */

  /* Yarı-saydam blur nav yüzeyleri (üst nav + alt aksiyon çubuğu) */
  --color-nav-bg:          rgba(18, 18, 18, 0.92);
  --color-actionbar-bg:    rgba(16, 16, 16, 0.97);

  --color-border-1: rgba(255, 255, 255, 0.07); /* hairline */
  --color-border-2: rgba(255, 255, 255, 0.13); /* hover/emphasis */

  /* Etkileşim katmanları (hover/active zeminleri) — tema-farkındalıklı */
  --overlay-2:  rgba(255, 255, 255, 0.02);
  --overlay-3:  rgba(255, 255, 255, 0.03);
  --overlay-4:  rgba(255, 255, 255, 0.04);
  --overlay-6:  rgba(255, 255, 255, 0.06);
  --overlay-10: rgba(255, 255, 255, 0.10);

  /* Coach widget (AI chat) — bileşene özgü, tek-tüketicili paletler.
     Genel semantik/overlay/primary-a* token'ları karşılamıyorsa buraya
     eklenir; yalnızca coach_widget.css tüketir, başka sayfa KULLANMAZ.

     WEB-UX4-PR3 / F-28: the two retired brand-palette entries that used to
     sit at the top of this block are deleted, not just unreferenced. They
     were the last place the old accent survived, and both consumers now use
     the canonical primary pair (--color-primary / --color-primary-strong).
     Nothing outside coach_widget.css ever read them. */
  --color-chat-badge:         #FF3B30;
  --color-chat-badge-glow:    rgba(255, 59, 48, 0.6);
  --color-chat-card-grad-1:   rgba(18, 18, 22, 0.95);
  --color-chat-card-grad-2:   rgba(22, 24, 30, 0.95);

  /* ── 3. TYPOGRAPHY ───────────────────────────────────────────
     UI yazı yüzü: Inter (Phase 1'de DM Sans'ın yerini aldı).
     Display: Bebas Neue — sayfa yeniden tasarımları sonraki fazlarda. */
  /* DM Sans yalnızca 4 öğe render ediyordu ve _head.html'de tam bir aile
     (5 ağırlık + italik) olarak indiriliyordu; WEB-UX4-PR2 / F-32 ile
     kaldırıldı. Yedek yığında bırakılsaydı, artık indirmediğimiz bir aileyi
     yerel olarak kurulu olduğu makinelerde system-ui'ye tercih ederdi. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', var(--font-sans);
  --font-body: var(--font-sans);

  /* Boyut skalası (UI metinleri sabit; display boyutları akışkan) */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-md:   13px;
  --text-base: 14px;
  --text-lg:   15px;
  --text-xl:   17px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-display-sm: clamp(28px, 4vw, 36px);
  --text-display-md: clamp(32px, 5vw, 44px);
  --text-display-lg: clamp(38px, 6vw, 52px);

  /* Metrik ölçeği (PR2) — veri-öncelikli yüzeylerde BİRİNCİL sayı/sonuç.
     Amaç tek bir hiyerarşi merdiveni: sayfa başlığı (--text-display-*) >
     metrik (--text-metric-*) > bölüm başlığı > gövde > metadata. Sayfalar
     kendi tek-seferlik 36px/20px değerlerini uydurmak yerine bu üç rolden
     birini seçer:
       lg → yüzeyin tek hakim sayısı  (Home kalori halkası, Training haftalık istatistik)
       md → bölüm düzeyi başlık metrik (Progress "İlerlemen" durumu)
       sm → kart düzeyi metrik         (Progress "Ne değişti", Home kilo/BMR)
     Akışkan: 390px'te taşmaz, 1440px'te kartın içinde baskın kalır. */
  --text-metric-sm: clamp(22px, 2.4vw, 26px);
  --text-metric-md: clamp(28px, 3.2vw, 34px);
  --text-metric-lg: clamp(34px, 4.2vw, 44px);

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-none:    1;
  /* Headline leading. The scale jumped 1 -> 1.2 with nothing in between, so a
     page headline either sat on its own descenders or read as body copy. */
  --leading-headline: 1.1;
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Optical correction for large type only: at headline sizes the default
     letterfit reads loose. Never for body or micro labels. */
  --tracking-tight:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;
  --tracking-label:  0.16em; /* uppercase mikro etiketler */

  /* ── 4. SPACING (8-pt grid; 4px yarım adım serbest) ────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── 5. RADIUS ──────────────────────────────────────────────── */
  --radius-xs:   4px;   /* badge, mikro parçalar */
  --radius-sm:   8px;   /* chip, ghost buton, input(sm) */
  --radius-md:   12px;  /* buton, input, banner */
  --radius-lg:   16px;  /* kart */
  --radius-xl:   24px;  /* bottom sheet üst köşeleri, hero */
  --radius-full: 9999px;/* pill, avatar, progress bar */

  /* ── 6. BORDER WIDTHS ───────────────────────────────────────── */
  --border-w-1: 1px;
  --border-w-2: 1.5px;
  --border-w-3: 2px;

  /* ── 7. ELEVATION / SHADOWS ─────────────────────────────────── */
  --elevation-1: 0 1px 2px  rgba(0, 0, 0, 0.40);
  --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --elevation-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-primary: 0 2px 10px rgba(var(--color-primary-rgb), 0.14);
  /* Klavye odak halkası — ÜRÜNÜN TEK odak dili (WEB-UX4-PR2 / F-02).
     Eski değer rgba(primary, 0.07) idi ve uygulama yüzeylerine karşı
     1.07–1.09 : 1 ölçüyordu: halka vardı, görünmüyordu. Tam opak primary
     4.62–5.65 : 1 (dark) / 4.28–5.45 : 1 (light) verir; WCAG 2.2 SC 1.4.11
     metin-dışı eşiği 3 : 1'dir. --color-primary tema-farkındalıklı olduğu
     için light temada otomatik döner.
     SÖZDİZİMSEL ROL: bu bir box-shadow DEĞERİDİR. `outline: var(--focus-ring)`
     computed-value anında geçersizdir ve outline'ı `none`'a düşürür — F-03'ün
     beş kontrolü böyle kaybetti. outline gereken yerde
     `2px solid var(--color-primary)` yazılır. */
  --focus-ring: 0 0 0 2px var(--color-primary);
  /* Serbest siyah gölge tonları — --elevation-* tam box-shadow (offset+blur
     dahil) değerleridir; coach widget'ın kendi offset/blur'lu bileşik
     gölgelerine yalnızca RENK bileşeni olarak eklenir. */
  --shadow-color-1: rgba(0, 0, 0, 0.50);
  --shadow-color-2: rgba(0, 0, 0, 0.55);
  --shadow-color-3: rgba(0, 0, 0, 0.60);
  --shadow-color-4: rgba(0, 0, 0, 0.72);

  /* ── 8. OPACITY ─────────────────────────────────────────────── */
  --opacity-disabled: 0.65;
  --opacity-muted:    0.7;
  --opacity-faint:    0.85;

  /* ── 9. ICON SIZES ──────────────────────────────────────────── */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 22px;
  --icon-xl: 26px;

  /* ── 10. MOTION ─────────────────────────────────────────────── */
  --duration-fast:   0.14s;
  --duration-base:   0.2s;
  --duration-slow:   0.28s;
  --duration-slower: 0.32s;
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 11. Z-INDEX ────────────────────────────────────────────── */
  --z-header:          100;
  --z-drawer-backdrop: 199;
  --z-drawer:          200;
  --z-fab:             200;
  --z-overlay:         300;
  --z-toast:           400;

  /* ── 12. LAYOUT & BREAKPOINTS ───────────────────────────────── */
  --content-max:  1280px;
  --header-h:     56px;
  --action-bar-h: 68px;
  --drawer-w:     280px;
  --fab-protrude: 22px;
  /* Floating FAB rail (PR2). The coach FAB (#cw-root, coach_widget.css) and the
     nutrition log FAB both sit on this rail, and `.page-body.has-fab-rail`
     (nav.css) reserves `--fab-rail-h` at the foot of the pages that actually
     carry one, so the last line of content is never underneath them. UX-1 PR3
     made that reserve opt-in rather than global: the coach launcher is no longer
     app-wide chrome, so an unconditional reserve held space for a button that is
     not there. Offsets and button size live here rather than as three copies of
     `15px`/`36px`/`56px`, so the reservation cannot drift away from what it is
     reserving. One size token (`--fab-btn`) for every FAB of this control class;
     `--fab-size` is a legacy alias below. */
  --fab-btn:         56px;
  --fab-rail-inset:  15px;   /* above the bottom action bar */
  --fab-rail-h:      calc(var(--fab-rail-inset) + var(--fab-btn));
  /* Breakpoint referansları — CSS var'ları @media içinde ÇALIŞMAZ;
     media query yazarken bu değerlerle (docs/design-system.md tablosu)
     senkron kal. JS getComputedStyle ile okuyabilir. */
  --bp-sm:  520px;
  --bp-md:  640px;
  --bp-lg:  768px;
  --bp-xl:  1024px;
  --bp-2xl: 1280px;

  /* ═══ 13. LEGACY ALIASES — YENİ KODDA KULLANMA ═══════════════
     theme.css v2 + style.css isimleri; mevcut yüzlerce referans
     kırılmasın diye kanonik token'lara bağlandı. Fazlar ilerledikçe
     kullanım azaltılıp kaldırılacak. */
  /* theme.css v2 */
  --bg:        var(--color-bg);
  --surface:   var(--color-surface-1);
  --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --border:    var(--color-border-1);
  --border-2:  var(--color-border-2);
  --blue:      var(--color-info);
  --blue-dim:  var(--color-info-soft);
  --blue-light: var(--blue-400);
  --red:        var(--color-danger);
  --red-dim:    var(--color-danger-soft);
  --green:      var(--color-success);
  --green-dim:  var(--color-success-soft);
  --orange:     var(--color-warning);
  --orange-dim: var(--color-warning-soft);
  --text:   var(--color-text-1);
  --text-2: var(--color-text-2);
  --text-3: var(--color-text-3);
  --text-4: var(--color-text-4);
  --s1:  var(--space-2);
  --s2:  var(--space-4);
  --s3:  var(--space-6);
  --s4:  var(--space-8);
  --s5:  var(--space-10);
  --s6:  var(--space-12);
  --s8:  var(--space-16);
  --s10: var(--space-20);
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-xl:   var(--radius-xl);
  --r-full: var(--radius-full);
  --shadow-sm:   var(--elevation-1);
  --shadow-md:   var(--elevation-2);
  --shadow-lg:   var(--elevation-3);
  --shadow-volt: var(--shadow-primary);
  --shadow-blue: 0 2px 10px rgba(0, 123, 255, 0.12);
  --t-fast:   var(--duration-fast) var(--ease-standard);
  --t-base:   var(--duration-base) var(--ease-standard);
  --t-spring: var(--duration-slow) var(--ease-out-expo);
  /* style.css (auth/onboarding) */
  --accent:      var(--color-primary);
  --accent2:     var(--color-primary-strong);
  --accent-glow: var(--color-primary-soft);
  --bg2:      var(--color-surface-1);
  --bg3:      var(--color-surface-3);
  --card:     var(--color-surface-2);
  --input-bg: var(--color-surface-1);
  --text2:    var(--color-text-2);
  --text3:    var(--color-text-3);
  --fab-size: var(--fab-btn);
}

/* ── 14. LIGHT THEME (hazırlık) ────────────────────────────────
   <html data-theme="light"> ile sayfa bazında etkinleşir. Bugün tüm
   sayfalar data-theme="dark" basar; değerler style.css'in mevcut
   light temasından taşındı. Alias'lar semantik token'lara baktığı
   için otomatik döner. */
[data-theme="light"] {
  --color-primary:        #1A66D0;
  --color-primary-strong: #1550B8;
  --color-primary-rgb:    26, 102, 208; /* light kanal → primary-şeffaf tonları otomatik döner */
  --color-primary-soft:   rgba(var(--color-primary-rgb), 0.10);
  --color-primary-glow:   rgba(var(--color-primary-rgb), 0.30);
  --color-on-primary:     #FFFFFF;

  --color-bg:        #F5F5F0;
  --color-surface-1: #EEEDE8;
  --color-surface-2: #FFFFFF;
  --color-surface-3: #E5E4DF;

  --color-text-1: #1A1A1A;
  --color-text-2: #5C5C5C;
  --color-text-3: #676767;
  --color-text-4: #A3A3A3;

  --color-danger:  #DD4444;
  --color-warning: #C89800;
  --color-info:    #2A70C0;

  --color-border-1: rgba(0, 0, 0, 0.10);
  --color-border-2: rgba(0, 0, 0, 0.18);
  --color-border-solid: #D5D4CF;

  --overlay-2:  rgba(0, 0, 0, 0.02);
  --overlay-3:  rgba(0, 0, 0, 0.03);
  --overlay-4:  rgba(0, 0, 0, 0.04);
  --overlay-6:  rgba(0, 0, 0, 0.06);
  --overlay-10: rgba(0, 0, 0, 0.10);

  --elevation-1: 0 1px 2px  rgba(0, 0, 0, 0.10);
  --elevation-2: 0 4px 16px rgba(0, 0, 0, 0.12);
  --elevation-3: 0 12px 32px rgba(0, 0, 0, 0.16);

  /* Legacy istisna: input zemini dark'ta surface-1, light'ta surface-2
     (style.css'in tarihsel davranışı — beyaz input kartı). */
  --input-bg: var(--color-surface-2);
}

/* Desktop FAB rail. The bottom action bar is gone above 1024px, so both FABs
   sit 36px off the viewport edge; redefining the inset here keeps the button
   positions and `.page-body`'s reservation derived from one number. */
@media (min-width: 1024px) {
  :root { --fab-rail-inset: 36px; }
}