/* EnglishQuest — design tokens. Single source of truth for colour, type, space,
   radius, shadow and layout. Page CSS must never invent values: always reference
   a token declared below with the css var() function. */

:root{
  /* ---------- 1. Palette (DESIGN.md §1) ---------- */
  --brand:#12B886;        --brand-hi:#3DD9A5;   --brand-deep:#0B8F6A;
  --brand-soft:#E6F8F2;   --brand-ink:#065F46;
  /* Button / active-pill faces carry white text, so they use a deeper mint:
     white on #12B886 is only 2.55:1, white on --brand-face is 4.74:1. */
  --brand-face:#0A8362;   --brand-face-deep:#07654B;
  --mango:#FF8A3D;        --mango-deep:#E06A1C; --mango-soft:#FFF1E6;
  --flame:#FF5A1F;        --flame-soft:#FFEBE2;
  --gold:#FFC53D;         --gold-deep:#E0A413;  --gold-soft:#FFF7E2;
  --sky:#4C6FFF;          --sky-deep:#3450D6;   --sky-soft:#EDF1FF;
  --grape:#8B5CF6;        --grape-soft:#F3EEFF;
  --rose:#F43F5E;         --rose-soft:#FFECEF;
  --bg:#F6F8FB;           --bg-2:#EEF2F8;       --surface:#FFFFFF;  --surface-2:#F9FBFD;
  --ink:#132033;          --body:#42526B;
  /* --muted: DESIGN.md §1 asks for ≥4.5:1; #71809A measures 4.0:1 on white and
     3.76:1 on --bg, so the token is two steps deeper at the same hue. */
  --muted:#5B6A82;
  --line:#E4E9F2;         --line-2:#D6DEEA;
  --danger:#EF4444;       --danger-soft:#FEECEC; --success:#12B886;
  --overlay:rgba(19,32,51,.55);

  /* translucent layers (never write raw rgba() in component CSS) */
  --highlight:rgba(255,255,255,.35);
  --highlight-soft:rgba(255,255,255,.25);
  --glass:rgba(255,255,255,.18);
  --unit-track:rgba(19,32,51,.28);

  /* extras derived from the palette (still one source of truth) */
  --white:#FFFFFF;
  --on-brand:#FFFFFF;
  --gold-ink:#6B4E04;
  --sky-ink:#1E2E8F;
  --grape-ink:#4A2FA8;
  --rose-ink:#9F1732;
  --mango-ink:#8A3E0A;
  --flame-ink:#8E2A08;
  --danger-ink:#B91C1C;
  --locked-ink:#8A97AC;

  /* ---------- 2. Type (DESIGN.md §2) ---------- */
  --font-display:"Baloo 2","Nunito",system-ui,sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;

  --t-hero:32px;  --lh-hero:1.15;
  --t-h1:24px;    --lh-h1:1.2;
  --t-h2:20px;    --lh-h2:1.25;
  --t-h3:17px;    --lh-h3:1.3;
  --t-body:16px;  --lh-body:1.55;
  --t-sm:14px;    --lh-sm:1.5;
  --t-xs:12px;    --lh-xs:1.4;
  --track-xs:.04em;

  /* ---------- 3. Space / radius / shadow (DESIGN.md §3) ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  --sh-1:0 1px 2px rgba(19,32,51,.06), 0 1px 3px rgba(19,32,51,.05);
  --sh-2:0 6px 20px -6px rgba(19,32,51,.14), 0 2px 6px rgba(19,32,51,.05);
  --sh-btn:0 4px 0 var(--btn-edge,var(--brand-deep));
  --sh-btn-flat:0 1px 0 var(--btn-edge,var(--brand-deep));

  /* ---------- 4. Layout ---------- */
  --app-max:520px;
  --topbar-h:56px;
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --content-pad:var(--s4);
  --tabbar-space:calc(var(--tabbar-h) + var(--safe-b) + var(--s5));

  /* ---------- 5. Motion (DESIGN.md §7) ---------- */
  --dur-fast:.12s;
  --dur:.18s;
  --dur-slow:.22s;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ---------- 6. Component sizes ---------- */
  --node-size:64px;
  --tap-min:44px;
  --icon-sm:18px;
  --icon-md:20px;
  --icon-lg:24px;
  --avatar-sm:40px;
  --avatar-md:48px;
  --avatar-lg:72px;
  --progress-h:14px;
  --ring-size:132px;
  --ring-width:12px;

  /* ---------- 7. Tweaks (tweaks.json friendly) ---------- */
  --density:1;
  --radius-md:var(--r-md);
  --radius-lg:var(--r-lg);
  --radius-xl:var(--r-xl);
  --gap:calc(var(--s4) * var(--density));
  --gap-sm:calc(var(--s3) * var(--density));
  --gap-lg:calc(var(--s5) * var(--density));
  --pad-card:calc(var(--s4) * var(--density));

  /* ---------- 8. Per-course accents (overridden inline from courses.json).
     45% toward --ink keeps white text ≥4.5:1 for every course colour,
     including the light --gold of the C1 course. ---------- */
  --unit-c:var(--brand);
  --unit-deep:color-mix(in srgb, var(--unit-c) 45%, var(--ink));
  --unit-soft:color-mix(in srgb, var(--unit-c) 12%, var(--surface));
  --accent-c:var(--brand);
  --accent-soft:var(--brand-soft);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}