/* ============================================================
   Terry Academy — Design Tokens
   Single source of truth for colour, type, space, motion.
   Light & dark via [data-theme]; respects prefers-color-scheme.
   ============================================================ */

:root {
  /* Type scale (1.2 minor third) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);  /* Typography axis: heading font. Legacy = sans (unchanged); themes override below. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading: 1.6;
  --leading-tight: 1.25;

  /* 8-pt spacing grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-full: 999px;

  --maxw: 1180px;
  --sidebar-w: 248px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: 180ms;

  /* Brand + semantic accents (constant across themes) */
  --brand: #6d5efc;
  --brand-2: #8b7bff;
  --rag-red: #ef5466;
  --rag-amber: #f3a73b;
  --rag-green: #2bb673;
  --info: #3aa0ff;

  /* Subject accents */
  --c-maths: #6d5efc;
  --c-english-lit: #d9655b;
  --c-english-lang: #e08a3c;
  --c-history: #b8863b;
  --c-spanish: #e0b13c;
  --c-science: #2bb673;
  --c-geography: #2f9e8f;
  --c-french: #4a73c4;
  --c-sats-maths: #7c5cd6;
  --c-sats-english: #c96fae;
  --c-alevel-maths: #3f6fd1;
  --c-alevel-english: #b8506b;
  --c-psychology: #8a5cc2;
  /* Triple Science (REQ-SCIENCE-TRIPLE-01) — three hues kept clear of --c-science's green */
  --c-biology: #6aa84f;
  --c-chemistry: #d0558f;
  --c-physics: #3a9bd9;

  /* ---- Theme-controllable styling axes ----
     Each theme (below) may override these. Defaults = Legacy look, so themes
     that don't set them inherit the original appearance. Drive everything from
     tokens — never hardcode theme styling in components. */
  --accent: var(--brand-2);                                                   /* secondary highlight */
  --amber-fg: #b9791b;                                                        /* readable amber tag text (per-theme) */
  --bg-grad: none;                                                            /* Background Style: body atmosphere layer */
  --badge-grad: linear-gradient(135deg, var(--brand), var(--brand-2));        /* Achievement Style: medal fill */
  --rank-grad: linear-gradient(90deg, var(--brand), var(--brand-2));          /* Progress Style: bar fill */
  /* Border Style (--radius*), Typography (--font-display) and Motion (--dur/--ease)
     are defined above and are equally overridable per theme. */
}

/* ---- Light (default) ---- */
:root, [data-theme="light"] {
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-sunken: #eef0f6;
  --surface: #ffffff;
  --surface-2: #f3f4f9;
  --border: #e3e6ef;
  --border-strong: #d2d7e6;
  --text: #1a1c25;
  --text-soft: #4b5066;
  --text-mute: #7c8199;
  --shadow: 0 1px 2px rgba(20,22,40,.04), 0 8px 24px rgba(20,22,40,.06);
  --shadow-lg: 0 12px 40px rgba(20,22,40,.12);
  --ring: rgba(109,94,252,.35);
}

/* ---- Dark ---- */
[data-theme="dark"] {
  --bg: #0e0f17;
  --bg-elev: #161824;
  --bg-sunken: #0a0b12;
  --surface: #181a28;
  --surface-2: #1f2233;
  --border: #2a2e42;
  --border-strong: #3a3f59;
  --text: #eef0f8;
  --text-soft: #b9bed4;
  --text-mute: #8086a0;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --ring: rgba(139,123,255,.45);
  --amber-fg: var(--rag-amber);
}

/* Auto (Legacy): follow the OS only when NO theme is chosen. Scoped to
   :not([data-theme]) so an explicitly-selected theme is never overridden. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e0f17; --bg-elev: #161824; --bg-sunken: #0a0b12;
    --surface: #181a28; --surface-2: #1f2233;
    --border: #2a2e42; --border-strong: #3a3f59;
    --text: #eef0f8; --text-soft: #b9bed4; --text-mute: #8086a0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
    --ring: rgba(139,123,255,.45);
    --amber-fg: var(--rag-amber);
  }
}

/* ============================================================
   THEME PACKS — Maya Theme Evolution Programme
   Each theme controls colours, typography, border style, shadows,
   background atmosphere, achievement (badge) + progress (rank) fills.
   All AA-minded; dark themes raise --amber-fg to the bright accent.
   Vocabulary, archetypes, motion-hooks & lock state live in js/theme.js.
   ============================================================ */

/* Theme 2 — Futuristic Esports (DEFAULT) · Competitor + Strategist
   Dark surfaces, electric blue + purple neon, sharp cards. */
[data-theme="futuristic-esports"] {
  --bg: #080b16; --bg-elev: #0f1424; --bg-sunken: #05070f;
  --surface: #111831; --surface-2: #18213f; --border: #243152; --border-strong: #34467a;
  --text: #eaf1ff; --text-soft: #aebcdf; --text-mute: #8693bb;
  --brand: #5b3df0; --brand-2: #8a4dff; --accent: #28d3ff;   /* button-safe indigo/purple; neon cyan as accent */
  --ring: rgba(40,211,255,.55); --amber-fg: var(--rag-amber);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(5,9,24,.6);
  --shadow-lg: 0 18px 50px rgba(3,7,22,.7), 0 0 40px rgba(40,211,255,.10);
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --font-display: "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #28d3ff, #7b54ff);
  --rank-grad: linear-gradient(90deg, #28d3ff, #7b54ff);
  --bg-grad: radial-gradient(1100px 560px at 82% -8%, rgba(123,84,255,.20), transparent 60%),
             radial-gradient(900px 520px at -8% 6%, rgba(40,211,255,.14), transparent 56%);
}

/* Theme 3 — Superhero Academy · Hero + Competitor
   Deep blue, red accents, gold highlights, bold hero cards. */
[data-theme="superhero"] {
  --bg: #0a1330; --bg-elev: #112048; --bg-sunken: #060d22;
  --surface: #132352; --surface-2: #1b2e66; --border: #294282; --border-strong: #38539e;
  --text: #f4f7ff; --text-soft: #bfccef; --text-mute: #93a3cf;
  --brand: #c41f37; --brand-2: #d6324a; --accent: #ffc23c;   /* button-safe deep reds; gold as accent */
  --ring: rgba(255,194,60,.6); --amber-fg: var(--rag-amber);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(4,10,30,.55);
  --shadow-lg: 0 18px 50px rgba(3,8,24,.65);
  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px;
  --font-display: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #ffd76a, #f5a623);
  --rank-grad: linear-gradient(90deg, #ec3b53, #ffc23c);
  --bg-grad: radial-gradient(1000px 520px at 50% -12%, rgba(236,59,83,.18), transparent 60%),
             radial-gradient(820px 480px at 100% 0%, rgba(255,194,60,.10), transparent 55%);
}

/* Theme 4 — Grimdark Command · Strategist + Competitor
   Black, charcoal, brass, crimson, hard industrial edges. */
[data-theme="grimdark"] {
  --bg: #0c0c0d; --bg-elev: #161513; --bg-sunken: #060605;
  --surface: #191815; --surface-2: #21201b; --border: #34302a; --border-strong: #4b443a;
  --text: #ece7dd; --text-soft: #bcb3a3; --text-mute: #948c7a;
  --brand: #b21f2d; --brand-2: #d4382f; --accent: #b9954f;
  --ring: rgba(185,149,79,.6); --amber-fg: var(--rag-amber);
  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.7);
  --radius-sm: 3px; --radius: 4px; --radius-lg: 6px;
  --font-display: "Arial Narrow", "Impact", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #d9b777, #9c7b3f);
  --rank-grad: linear-gradient(90deg, #8a1620, #b9954f);
  --bg-grad: radial-gradient(1000px 520px at 50% -10%, rgba(185,149,79,.10), transparent 60%);
}

/* Theme 5 — Dark Detective · Strategist + Explorer
   Black, graphite, deep blue, signal-yellow accents. */
[data-theme="dark-detective"] {
  --bg: #0b0d12; --bg-elev: #13161e; --bg-sunken: #06080b;
  --surface: #151922; --surface-2: #1c2230; --border: #2a3242; --border-strong: #3b4557;
  --text: #eef2f8; --text-soft: #b0b9cb; --text-mute: #828ca2;
  --brand: #2f63e0; --brand-2: #2350b5; --accent: #ffd23f;   /* button-safe deep blues; signal-yellow as accent */
  --ring: rgba(255,210,63,.65); --amber-fg: var(--rag-amber);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.65);
  --radius-sm: 7px; --radius: 11px; --radius-lg: 16px;
  --font-display: "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #ffd23f, #f5b300);
  --rank-grad: linear-gradient(90deg, #3f7bff, #ffd23f);
  --bg-grad: radial-gradient(900px 520px at 100% 0%, rgba(255,210,63,.10), transparent 55%),
             radial-gradient(1000px 560px at -5% 8%, rgba(63,123,255,.12), transparent 58%);
}

/* Theme 6 — Builder's Workshop · Builder + Explorer
   Natural greens, stone greys, sky blue, blocky modular edges (light). */
[data-theme="builder"] {
  --bg: #e9ece1; --bg-elev: #ffffff; --bg-sunken: #dde1d2;
  --surface: #ffffff; --surface-2: #f0f2e8; --border: #d2d7c2; --border-strong: #b8bfa2;
  --text: #20251a; --text-soft: #474e3a; --text-mute: #686f57;
  --brand: #3f6e22; --brand-2: #4a7a2e; --accent: #2f7dc4;   /* button-safe greens (white text passes) */
  --ring: rgba(63,110,34,.45);
  --shadow: 0 1px 2px rgba(40,50,20,.06), 0 8px 22px rgba(40,50,20,.08);
  --shadow-lg: 0 12px 36px rgba(40,50,20,.14);
  --radius-sm: 3px; --radius: 5px; --radius-lg: 8px;
  --font-display: "Trebuchet MS", "Verdana", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #8bc34a, #5a8f3c);
  --rank-grad: linear-gradient(90deg, #5a8f3c, #8bc34a);
  --bg-grad: linear-gradient(180deg, rgba(47,125,196,.10), transparent 220px);
}

/* Theme 7 — Elite Sports Academy · Competitor + Hero
   White, navy, silver, athletic; gold medals (light). */
[data-theme="elite-sports"] {
  --bg: #f3f6fa; --bg-elev: #ffffff; --bg-sunken: #e7ecf3;
  --surface: #ffffff; --surface-2: #eef2f8; --border: #dbe2ec; --border-strong: #c3cdda;
  --text: #0f1c30; --text-soft: #3a4860; --text-mute: #64708a;
  --brand: #1f3d72; --brand-2: #2f5a9e; --accent: #d72638;
  --ring: rgba(31,61,114,.45);
  --shadow: 0 1px 2px rgba(15,28,48,.06), 0 8px 24px rgba(15,28,48,.08);
  --shadow-lg: 0 14px 40px rgba(15,28,48,.14);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px;
  --font-display: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --badge-grad: linear-gradient(135deg, #e6c25c, #b9892f);
  --rank-grad: linear-gradient(90deg, #1f3d72, #2f5a9e);
  --bg-grad: linear-gradient(180deg, rgba(31,61,114,.06), transparent 200px);
}