/* =========================================================
   Çatpat — tasarım token'ları
   Yalnızca :root değişkenleri. Açık tema varsayılan; koyu tema
   sistem tercihiyle (data-theme="light" ile ezilebilir) veya
   data-theme="dark" ile zorla açılır.
   Kontrast notları docs/BRAND.md içinde.
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- Yüzeyler ---- */
  --bg: #F6F9F4;            /* sayfa zemini, hafif yeşil-krem */
  --bg-elev: #FFFFFF;       /* kart */
  --bg-sunken: #EDF2EB;     /* input, ikincil yüzey */
  --border: #D8E2D5;

  /* ---- Metin ---- */
  --text: #14231A;          /* bg üstünde 15.4:1 */
  --text-2: #4A5B51;        /* bg üstünde 6.8:1 */
  --text-3: #5F6F65;        /* bg 5.0:1, bg-sunken 4.7:1 */

  /* ---- Marka (Çatpat yeşili) ---- */
  --brand: #12873F;         /* beyaz yazı 4.6:1 */
  --brand-2: #0A6230;       /* 3D buton alt kenarı, metin olarak brand */
  --brand-soft: #E2F4E7;
  --on-brand: #FFFFFF;
  --brand-text: #0A6230;    /* yeşil link/vurgu metni (bg 7.1:1) */

  /* ---- Vurgu (XP / güneş sarısı) — dolgu rengi, metin değil ---- */
  --accent: #FFB020;
  --accent-2: #D98A00;      /* accent buton alt kenarı */
  --accent-soft: #FFF3D6;
  --on-accent: #3A2600;     /* accent üstünde 7.9:1 */
  --accent-text: #8A5A00;   /* accent-soft üstünde 5.4:1 */

  /* ---- Geri bildirim ---- */
  --ok: #187A36;            /* ok-soft üstünde 4.8:1, beyaz yazı 5.4:1 */
  --ok-2: #0F5C27;
  --ok-soft: #E3F5E7;
  --bad: #C62E2E;           /* bad-soft üstünde 4.7:1, beyaz yazı 5.5:1 */
  --bad-2: #8F1D1D;
  --bad-soft: #FDE9E9;
  --warn: #A15C00;          /* beyaz zemin 5.2:1 */
  --info: #1F6FD1;          /* beyaz zemin 4.9:1 */

  /* ---- Oyunlaştırma ---- */
  --flame: #FF7A1A;         /* seri ateşi (ikon dolgusu) */
  --gold: #F2B200;
  --silver: #A3AEB8;
  --bronze: #C27A3E;

  /* ---- Parkurlar (dolgu; üstünde beyaz yazı AA) ---- */
  --track-daily: #1B76B8;     /* Günlük İngilizce — gökyüzü mavisi, 4.9:1 */
  --track-yds: #6A44D6;       /* YDS / YÖKDİL — mor, 6.2:1 */
  --track-exam: #C24E19;      /* TOEFL / IELTS — kiremit, 4.8:1 */
  --track-business: #0F7C74;  /* İş İngilizcesi — petrol yeşili, 5.1:1 */
  --on-track: #FFFFFF;

  /* ---- Köşe yuvarlaklığı ---- */
  --radius-sm: 10px;        /* chip, küçük buton, input */
  --radius: 16px;           /* buton, kart */
  --radius-lg: 24px;        /* modal, büyük kart, bottom sheet */
  --radius-pill: 999px;

  /* ---- Gölgeler ---- */
  --shadow-1: 0 1px 2px rgba(20, 35, 26, .06), 0 2px 6px rgba(20, 35, 26, .06);
  --shadow-2: 0 4px 10px rgba(20, 35, 26, .08), 0 12px 28px rgba(20, 35, 26, .10);
  --press-depth: 4px;
  --shadow-press: 0 var(--press-depth) 0 var(--brand-2);  /* 3D buton alt kenarı */
  --shadow-press-accent: 0 var(--press-depth) 0 var(--accent-2);
  --shadow-press-ok: 0 var(--press-depth) 0 var(--ok-2);
  --shadow-press-bad: 0 var(--press-depth) 0 var(--bad-2);
  --shadow-press-neutral: 0 var(--press-depth) 0 var(--border);
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--info);

  /* ---- Tipografi ---- */
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Baloo 2", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;                              /* 12px  etiket, rozet altı */
  --fs-sm: 0.875rem;                             /* 14px  yardımcı metin */
  --fs-md: 1rem;                                 /* 16px  gövde, buton */
  --fs-lg: 1.25rem;                              /* 20px  kart başlığı, soru */
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);   /* 24-30px ekran başlığı */
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);     /* 32-44px skor, hero */
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* ---- Boşluk ölçeği (4px tabanlı) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --tap-min: 44px;          /* en küçük dokunma alanı */
}

/* ---------- Koyu tema: sistem tercihi ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0F1713;
    --bg-elev: #17221C;
    --bg-sunken: #0B110E;
    --border: #2A3A31;

    --text: #EAF2EC;        /* bg 16.0:1 */
    --text-2: #B4C3B9;      /* bg-elev 8.9:1 */
    --text-3: #8D9D93;      /* bg-elev 5.8:1 */

    --brand: #3DCB72;       /* koyu yazı 7.5:1+ */
    --brand-2: #1E8A4C;
    --brand-soft: #133A22;
    --on-brand: #06210F;
    --brand-text: #3DCB72;  /* bg-elev 7.8:1 */

    --accent: #FFC048;
    --accent-2: #C98A12;
    --accent-soft: #3A2D10;
    --on-accent: #2A1A00;
    --accent-text: #FFC048;

    --ok: #4ADE80;          /* ok-soft 8.3:1 */
    --ok-2: #1F9A50;
    --ok-soft: #10301C;
    --bad: #FF7B7B;         /* bad-soft 6.4:1 */
    --bad-2: #B83838;
    --bad-soft: #3A1517;
    --warn: #FFB547;
    --info: #6CB3FF;

    --flame: #FF8A3D;
    --gold: #FFD24A;
    --silver: #C5CED6;
    --bronze: #D9955A;

    --track-daily: #1B76B8;
    --track-yds: #6A44D6;
    --track-exam: #C24E19;
    --track-business: #0F7C74;
    --on-track: #FFFFFF;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .40);
    --shadow-press-neutral: 0 var(--press-depth) 0 #0A0F0C;
  }
}

/* ---------- Koyu tema: elle seçilmiş ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F1713;
  --bg-elev: #17221C;
  --bg-sunken: #0B110E;
  --border: #2A3A31;

  --text: #EAF2EC;
  --text-2: #B4C3B9;
  --text-3: #8D9D93;

  --brand: #3DCB72;
  --brand-2: #1E8A4C;
  --brand-soft: #133A22;
  --on-brand: #06210F;
  --brand-text: #3DCB72;

  --accent: #FFC048;
  --accent-2: #C98A12;
  --accent-soft: #3A2D10;
  --on-accent: #2A1A00;
  --accent-text: #FFC048;

  --ok: #4ADE80;
  --ok-2: #1F9A50;
  --ok-soft: #10301C;
  --bad: #FF7B7B;
  --bad-2: #B83838;
  --bad-soft: #3A1517;
  --warn: #FFB547;
  --info: #6CB3FF;

  --flame: #FF8A3D;
  --gold: #FFD24A;
  --silver: #C5CED6;
  --bronze: #D9955A;

  --track-daily: #1B76B8;
  --track-yds: #6A44D6;
  --track-exam: #C24E19;
  --track-business: #0F7C74;
  --on-track: #FFFFFF;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .40);
  --shadow-press-neutral: 0 var(--press-depth) 0 #0A0F0C;
}