/* Colour system. Three layers:
   1. :root            — shared raw palette (theme-agnostic neutrals + cross-theme tones)
   2. :root (semantic) — DARK layer: earthsong raw tones + the tier-2 semantic tokens
                         components consume. This is the default, so it also acts as the
                         fallback for any page that omits data-theme.
   3. [data-theme=light] — LIGHT layer: cool raw tones + light re-points of the semantics.
   Components ONLY consume tier-2 semantic tokens (var(--bg), var(--text)...). Opacity
   variants are produced at the call site with color-mix(), not here.

   Raw tones are HSL — second value is saturation, adjust it directly. */

/* ===================================================================
   Tier 1 — SHARED raw palette. Theme-agnostic. Consumed by components
   directly (neutrals) or referenced by BOTH theme layers.
   =================================================================== */
:root {
    /* neutrals */
    --white:          hsl(0, 0%, 100%);
    --white-soft:     hsl(210, 40%, 96%);   /* merges #f8fafc */
    --black:          hsl(0, 0%, 0%);
    --grey:           hsl(219, 13%, 60%);   /* merges #8892a4, #94a3b8, #6b7280 */
    --lavender-grey:  hsl(248, 30%, 76%);
    --slate-border:   hsl(215, 25%, 27%);

    /* cross-theme accent — both light & dark semantics reference this */
    --amber-deep:     hsl(37, 70%, 30%);    /* exam "specialist"; warning-deep */
}

/* ===================================================================
   DARK layer (default). EARTHSONG — warm "monkeytype" palette: olive-brown
   surfaces, amber/orange ink, cream body text. Raw tones first, then the
   tier-2 semantic tokens mapped onto them. Default :root so it also covers
   any page that omits data-theme.
   =================================================================== */
:root {
    /* raw earthsong tones (dark-only) */
    --earth-base:     hsl(45, 19%, 13%);    /* page bg — dark olive */
    --earth-surface:  hsl(44, 19%, 15%);    /* cards */
    --earth-elevated: hsl(48, 29%, 17%);    /* raised / hover */
    --earth-glow:     hsl(42, 57%, 18%);    /* warm gradient stop */

    --amber-main:     hsl(39, 75%, 55%);    /* THE orange — brand + accent ink */
    --amber-warm:     hsl(38, 85%, 61%);    /* brighter hover orange */
    --amber-soft:     hsl(38, 52%, 54%);    /* secondary / pale accent */
    --cream:          hsl(43, 60%, 82%);    /* body text */
    --cream-muted:    hsl(43, 42%, 58%);    /* muted text */

    --leaf:           hsl(88, 70%, 45%);    /* warm "correct" green */
    --rust:           hsl(13, 70%, 45%);    /* warm "wrong" red */
    --rust-pale:      hsl(14, 76%, 76%);
    --rust-deep:      hsl(14, 40%, 21%);

    /* ── semantic (dark) ── */

    /* surfaces */
    --bg:             var(--earth-base);
    --surface:        var(--earth-surface);
    --surface-raised: var(--earth-elevated);
    --surface-glow:   var(--earth-glow);

    /* text */
    --text:           var(--cream);
    --text-muted:     var(--cream-muted);
    --text-on-accent: hsl(41, 67%, 8%);     /* dark ink on filled orange — monkeytype style */

    /* lines / overlays / shadows — background-relative */
    --border:         color-mix(in srgb, var(--amber-main) 16%, transparent);
    --border-strong:  color-mix(in srgb, var(--amber-main) 30%, transparent);
    --overlay:        color-mix(in srgb, var(--black) 55%, transparent);
    --shadow:         color-mix(in srgb, var(--black) 45%, transparent);

    /* brand — orange replaces purple in the dark theme */
    --primary:        var(--amber-main);
    --primary-bright: var(--amber-warm);
    --primary-violet: var(--amber-warm);
    --primary-pale:   var(--amber-soft);

    /* status */
    --success:        var(--leaf);
    --danger:         var(--rust);
    --danger-pale:    var(--rust-pale);
    --danger-deep:    var(--rust-deep);
    --warning:        var(--amber-main);
    /* info folds into the orange accent so the UI reads monochrome-warm */
    --info:           var(--amber-main);
    --info-bright:    var(--amber-warm);

    /* exam fills (intentional fixed exam colours) — warmed for olive bg */
    --exam-pass:       var(--success);
    --exam-fail:       var(--danger);
    --exam-specialist: var(--amber-deep);
}

/* ===================================================================
   LIGHT layer. Cool raw tones first, then light re-points of the
   semantic tokens. Light theme is byte-for-byte unchanged — every token
   resolves to the exact value it rendered before this reorganisation.
   =================================================================== */
[data-theme="light"] {
    /* raw cool tones (light-only) */
    --purple-violet:  hsl(258, 90%, 66%);
    --purple-mid:     hsl(247, 85%, 69%);   /* merges rgb(124,109,243) */
    --blue:           hsl(217, 91%, 60%);   /* merges #1565c0 */
    --blue-bright:    hsl(212, 100%, 68%);  /* merges #78a3ff */
    --red-pale:       hsl(0, 94%, 82%);
    --red-deep:       hsl(0, 56%, 33%);     /* exam "fail"; merges #b32121 */

    /* ── semantic (light) ── */

    /* surfaces */
    --bg:             hsl(45, 33%, 98%);
    --surface:        hsl(0, 0%, 100%);
    --surface-raised: hsl(40, 18%, 90%);    /* warm cream */
    --surface-glow:   hsl(231, 62%, 96%);   /* cool purple tint for gradient stops */

    /* text */
    --text:           hsl(231, 16%, 9%);    /* warm near-black */
    --text-muted:     hsl(223, 7%, 40%);
    --text-on-accent: var(--white);

    /* lines / overlays / shadows — dark marks on light bg */
    --border:         hsl(44, 12%, 75%);    /* warm taupe, opaque */
    --border-strong:  color-mix(in srgb, var(--black) 22%, transparent);
    --overlay:        color-mix(in srgb, var(--black) 15%, transparent);
    --shadow:         color-mix(in srgb, var(--black) 12%, transparent);

    /* brand — light-only re-point */
    --primary:        hsl(245, 58%, 51%);
    --primary-bright: hsl(245, 58%, 51%);
    --primary-violet: var(--purple-violet);
    /* pale brand tint needs more saturation to read on light bg */
    --primary-pale:   var(--purple-mid);

    /* status — deeper for light bg contrast */
    --success:        hsl(142, 76%, 36%);
    --warning:        hsl(38, 100%, 44%);
    --danger:         hsl(358, 75%, 59%);
    --danger-pale:    var(--red-pale);
    --danger-deep:    var(--red-deep);
    --info:           var(--blue);
    --info-bright:    var(--blue-bright);

    /* exam fills — follow light status colours, fixed deep blue/amber */
    --exam-pass:       var(--success);
    --exam-fail:       var(--danger);
    --exam-specialist: var(--amber-deep);
}