/*
 * Fitness Koç: token katmanı (B · Salon tabelası)
 * Üç katman: ilkel (ham değer) → anlamsal (amaç) → bileşen.
 * Bileşen CSS'i yalnızca anlamsal/bileşen token'larını kullanır; ham hex yalnızca burada.
 */

:root {
  /* ---------- 1. İLKEL ---------- */
  /* Mürekkep: zemin ve yüzey basamakları (salon duvarı, gece) */
  --p-ink-950: #0e0f0f;
  --p-ink-900: #151616;
  --p-ink-850: #1a1b1b;
  --p-ink-800: #1f201f;
  --p-ink-700: #2a2b2a;
  --p-ink-600: #3a3b39;
  /* Kül: ikincil metin (kontrast değerleri #0e0f0f üzerinde) */
  --p-ash-500: #6b6b66;  /* 3.58:1  yalnızca ≥24px iri metin ve kontrol kenarı */
  --p-ash-400: #8a8a84;  /* 5.53:1  ikincil metin */
  --p-ash-300: #a8a8a1;  /* 8.03:1 */
  /* Kemik: birincil metin */
  --p-bone-100: #ecebe6; /* 16.08:1 */
  /* Sodyum: tek sinyal rengi (sokak lambası turuncusu) */
  --p-sodium-500: #ff6a1a; /* 6.70:1 zemin üzerinde */
  --p-sodium-400: #ff8a4c;
  --p-sodium-950: #211208; /* sinyalin zemine düşen izi (uyarı şeridi zemini) */

  /* Yazı aileleri */
  --p-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --p-font-text: 'Archivo', system-ui, sans-serif;

  /* 4 tabanlı boşluk ölçeği */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;

  /* ---------- 2. ANLAMSAL ---------- */
  --bg: var(--p-ink-950);
  --surface: var(--p-ink-900);        /* giriş alanı, açılmış satır */
  --surface-2: var(--p-ink-850);      /* basılı durum */
  --line: var(--p-ink-700);           /* 1px bölme */
  --line-soft: var(--p-ink-800);      /* liste satırı ayırıcı */
  --line-strong: var(--p-ash-500);    /* kontrol kenarı, 3:1 üstü */

  --text: var(--p-bone-100);
  --text-muted: var(--p-ash-400);
  --text-faint: var(--p-ash-500);     /* yalnızca iri rakam eki: "/ 2400" */
  --text-soft: var(--p-ash-300);

  --signal: var(--p-sodium-500);
  --signal-hover: var(--p-sodium-400);
  --signal-wash: var(--p-sodium-950);
  --on-signal: var(--p-ink-950);

  --focus: var(--p-sodium-500);
  --selection-bg: var(--p-sodium-500);
  --selection-text: var(--p-ink-950);

  /* Yıkıcı eylem (silme); app.css'ten taşındı */
  --danger: #e5484d;        /* #0e0f0f üzerinde ~5.2:1 */
  --danger-hover: #ef6a6e;
  --on-danger: var(--p-ink-950);

  --font-display: var(--p-font-display);
  --font-text: var(--p-font-text);

  /* Tip ölçeği: rakamlar display, metin Archivo */
  --fs-hero: 96px;       /* günün kcal rakamı */
  --fs-num-xl: 64px;     /* sayaç */
  --fs-num-l: 40px;
  --fs-num-m: 30px;      /* ızgara rakamları */
  --fs-num-s: 20px;      /* satır sonu kcal */
  --fs-title: 26px;      /* ekran başlığı (display) */
  --fs-h2: 20px;         /* bölüm başlığı (display) */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;      /* büyük harf etiket */

  --tracking-label: 0.14em;
  --lh-body: 1.5;
  --lh-tight: 1.15;

  --space-gutter: var(--p-space-4);
  --space-section: var(--p-space-8);

  --dur-fast: 120ms;
  --dur: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-bar: 20;
  --z-toast: 40;

  /* ---------- 3. BİLEŞEN ---------- */
  --col-max: 460px;
  --tap: 44px;               /* dokunma hedefi alt sınırı */
  --btn-h: 48px;
  --btn-bg: var(--signal);
  --btn-text: var(--on-signal);
  --btn-ghost-border: var(--line-strong);
  --input-h: 48px;
  --input-bg: var(--surface);
  --input-border: var(--line-strong);
  --tabbar-h: 64px;
  --topbar-h: 48px;
  --meter-seg-gap: 2px;
  --icon: 20px;
  --icon-s: 16px;
  --chart-line: var(--text);
  --chart-dot: var(--text-muted);
  --chart-grid: var(--line-soft);
  --chart-mark: var(--signal);
}

@media (max-width: 374px) {
  :root {
    --fs-hero: 84px;
    --fs-num-m: 26px;
    --space-gutter: var(--p-space-3);
  }
}