/* ═══════════════════════════════════════════
   DESIGN TOKENS — single source of truth
   Imported by index.html and interactive lessons.
═══════════════════════════════════════════ */
:root {
  /* ── Ink / surface (light) ── */
  --ink:       #17130d;   /* primary text */
  --ink2:      #3a332a;   /* secondary text */
  --ink3:      #6b6358;   /* muted text — AA on --paper */
  --cream:     #f5f0e8;
  --cream2:    #ece7dc;
  --cream3:    #ddd6c8;

  /* ── Accents ── */
  --gold:      #8a6a1f;   /* darkened for AA text contrast on light */
  --gold-ui:   #b8903a;   /* decorative gold: rules, borders, fills */
  --gold2:     #a37c2a;

  /* Two colours for the SIDEBAR, which is a fixed dark surface in both themes
     (see the documented exception in course-shell.css). Everything else in
     this file is calibrated against the cream page — and using a page colour
     on the sidebar is exactly the inversion the dark-mode note warns about:
     `--gold2` measured 3.24:1 there and `--ink3` measured 2.10:1, both under
     the 4.5 floor, in the LIGHT theme where nobody thinks to look.

     These two hold the same value in both themes, because the surface does. */
  /* The accent as bare channels, for the dozens of rules that need it at some
     alpha. They were all written `rgba(184,144,58, …)` — Module 1's gold, typed
     out in the shell every module shares, so Module 2 came out gold in every
     hover, focus ring, active pill and highlight however teal its palette was.
     A theme sets this one line and the whole shell follows. */
  --accent-rgb: 184,144,58;


  --gold-on-dark: #d8a955;   /* 5.77:1 on the sidebar, 5.21:1 on an active nav pill */
  --ink-on-dark:  #a89f92;   /* 4.77:1 on the sidebar */

  /* ── the mind map's four branch hues ──
     The mind map is a DARK panel in both themes, like the sidebar and the
     formula box, so the categorical colours cannot be used on it: --rust,
     --teal and --emerald are calibrated for the cream page and measure
     1.53-2.02:1 there, which is invisible. These four are the dark-theme
     values, held constant in BOTH themes because the surface is. Measured on
     the panel: 4.6:1 at worst, 9.97:1 at best, across all three modules. */
  --mm-1: #d8a955;  --mm-2: #e08a70;  --mm-3: #6fc4c4;  --mm-4: #74c993;
  --gold3:     #d9b45f;
  --rust:      #8b3a2a;
  --teal:      #1f5c5c;
  --teal2:     #2a6b6b;
  --emerald:   #245030;

  /* ── Surfaces ── */
  --paper:     #fbf9f5;
  --card-bg:   #ffffff;
  --hero-bg:   #f6f2ea;
  --main-bg:   #fbf9f5;
  --section-bg:#ffffff;
  --quiz-bg:   #221d16;

  /* ── Lines / shadow ── */
  --line:      rgba(23,19,13,0.14);
  --line2:     rgba(23,19,13,0.07);
  --shadow:    0 1px 2px rgba(23,19,13,0.05), 0 4px 14px rgba(23,19,13,0.05);
  --shadow2:   0 4px 12px rgba(23,19,13,0.08), 0 18px 48px rgba(23,19,13,0.12);

  /* ── Type families ── */
  --serif:     'Playfair Display', Georgia, serif;
  --mono:      'IBM Plex Mono', ui-monospace, monospace;
  --sans:      'DM Sans', system-ui, sans-serif;
  --body:      'Libre Baskerville', Georgia, serif;

  /* ── Type scale (fluid, 1.25 ratio, 17px base) ──
     Sized so body copy is comfortable without zooming. */
  --fs-xs:     0.8125rem;                              /* 13px — meta, labels */
  --fs-sm:     0.9375rem;                              /* 15px — captions, table cells */
  --fs-base:   1.0625rem;                              /* 17px — body copy */
  --fs-md:     1.1875rem;                              /* 19px — lead text */
  --fs-lg:     clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* section titles */
  --fs-xl:     clamp(1.5rem, 1.25rem + 1.1vw, 2rem);   /* sub-headings */
  --fs-2xl:    clamp(2rem, 1.5rem + 2.4vw, 3.25rem);   /* page titles */

  --lh-tight:  1.22;
  --lh-snug:   1.4;
  --lh-body:   1.68;

  /* ── Layout / motion ── */
  --sidebar-w: 296px;
  --rail-w:    72px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --trans:     all 0.24s var(--ease);
}

[data-theme="dark"] {
  /* Dark surfaces are warm near-blacks; text steps stay above 4.5:1. */
  --ink:       #f2ede3;
  --ink2:      #cdc5b8;
  --ink3:      #9d9487;   /* AA on --paper dark */
  --cream:     #191510;
  --cream2:    #221d17;
  --cream3:    #2e2820;

  --gold:      #e0b566;   /* light-on-dark: raised for contrast */
  --gold-ui:   #c99b45;
  --gold2:     #d8a955;
  --gold3:     #f0d193;
  --rust:      #e08a70;
  --teal:      #6fc4c4;
  --teal2:     #86d4d4;
  --emerald:   #74c993;

  --paper:     #14110d;
  --card-bg:   #1d1913;
  --hero-bg:   #171410;
  --main-bg:   #14110d;
  --section-bg:#1c1812;
  --quiz-bg:   #0f0d0a;

  --line:      rgba(242,237,227,0.13);
  --line2:     rgba(242,237,227,0.07);
  --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.3);
  --shadow2:   0 4px 12px rgba(0,0,0,0.45), 0 18px 48px rgba(0,0,0,0.55);
}

/* Screen-reader-only utility */
.sr-only,
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Consistent focus ring across the app */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-ui);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Global reduced-motion guard.

   animation-DELAY is zeroed as well, and that was a real gap. With the delay
   left alone, a staggered reveal still holds each element in its `from` state
   — opacity 0 — for its own delay and then snaps in, so a reader who asked for
   no motion gets a row of things popping in one after another instead of a
   finished panel. Near-zero duration is not the same as no animation; only
   zeroing both is. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   GLOBAL [hidden] GUARD
   A class like .overlay{display:flex} silently beats the UA sheet's
   [hidden]{display:none}, leaving "closed" dialogs invisible but still
   covering the page and eating every click — indistinguishable from a
   frozen app. This makes [hidden] authoritative everywhere.
═══════════════════════════════════════════ */
[hidden] { display: none !important; }