/* Light color scheme for legacy dark-only lessons (sitewide-theme-20260928). CSS only.
   Linked by scripts/bw-legacy-color-scheme.py on pages that declared color-scheme "dark";
   they now declare "light dark". Dark stays the default rendering; the light variant is the
   (prefers-color-scheme: light) block, and a small dark block fixes contrast findings. Palette: the remade lessons' light palette
   (#f5f4f0 page, #fffefa surface, #191923 ink, #593a87 accent).
   Self-contained dark components that paint their own panel and ink (games, labs,
   diagram stages) stay dark islands; inline SVG diagrams keep the dark tokens they
   were drawn for, on their own dark card. Medical images are never recolored. */
@media (prefers-color-scheme: light) {
  :root:root {
    color-scheme: light;
    --bg: #f5f4f0; --night: #ebe9e3; --surface: #fffefa; --surface2: #eeede8;
    --ink: #191923; --ink2: #34313f; --ink3: #4b4658; --ink4: #595466;
    --line: rgba(89, 58, 135, .24); --line2: rgba(89, 58, 135, .13);
    --violet: #593a87; --violet-lt: #593a87; --purple: #6b3fa0; --deep: #4a2d75;
    --gold: #7a4b00; --hd-gold: #7a4b00; --hd-purple: #593a87;
    --green: #17633b; --rose: #9f2034; --blue: #1557a0;
    --rose-wash: rgba(159, 32, 52, .08); --green-wash: rgba(23, 99, 59, .08);
    /* Older shared tokens used by some legacy lessons. */
    --bg-card: #fffefa; --bg-elevated: #fffefa; --card: #fffefa; --elevated: #fffefa;
    --border: #cfc8d9; --border-subtle: #e2dde8;
    --text: #191923; --text-muted: #34313f; --text-dim: #4b4658; --muted: #34313f;
    --accent: #593a87; --accent-dim: rgba(89, 58, 135, .10); --accent-border: rgba(89, 58, 135, .35);
    --bone: #34313f; --bone2: #4b4658; --panel: #fffefa; --panel2: #eeede8; --panel3: #e9e3f1;
  }
  /* bw-header-*.css paints html/body #020617 !important; override with higher specificity. */
  :root:root { background-color: var(--bg) !important; }
  :root body { background-color: var(--bg) !important; color: var(--ink); }
  /* Headings and emphasis hard-coded to white for the dark design. */
  :root :is(.ptitle, .sec h2, .att-punchline, .stage-tab[aria-selected="true"]) { color: var(--ink); }
  :root :is(.plede, .sec .sub) { color: var(--ink3); }
  :root .eyebrow { color: var(--violet); }
  :root .pearlbox .at { color: var(--gold); }
  :root .slot { border-color: rgba(89, 58, 135, .40); background: rgba(89, 58, 135, .04); color: var(--ink3); }
  :root a:not([class]) { color: var(--violet); }
  :root .bw-freemium-btn.bw-freemium-primary { color: #fffefa; }
  :root .bw-lesson-map-track a > span { color: #fffefa !important; }
  :root :is(.pop-box, .nojs) { background: var(--surface); color: var(--ink); }
  :root .subbar { background: rgba(25, 25, 35, .06); }
  :root .subnav { background: rgba(245, 244, 240, .94); }
  :root :is(.tag-copy, .tag-redo) { background: rgba(25, 25, 35, .04); }
  :root .doc code { background: rgba(25, 25, 35, .06); }
  :root .doc pre { background: #eeede8; color: var(--ink); }
  :root .bw-op .btn:hover { background: rgba(25, 25, 35, .04); }
  :root :is(.chip.pick, .ab-sw button.on, .mnem b:hover) { background: rgba(89, 58, 135, .10); }
  :root :is(.chip.right, .gcell.on) { background: rgba(23, 99, 59, .10); }
  :root :is(.chip.wrong, .gcell.bad) { background: rgba(159, 32, 52, .08); }
  :root .guide .preflight b.bad { color: #9f2034; }
  :root .guide .preflight b.good { color: #17633b; }
  :root .att-who.attending, :root :is(.att-text.explode, .att-punchline b) { color: #7a4b00; }
  :root :is(.attending-body, .att-text, .att-scene-intro, .att-who.student) { color: var(--ink2); }
  :root .attending-body strong { color: var(--ink); }
  :root :is(.stage-person, .stage-pattern b) { color: #1557a0; }
  /* Question blocks (.bw-op, .bw-wt) and their answer states. */
  :root .bw-op {
    --op-surface: #fffefa; --op-hair: #cfc8d9; --op-hair2: #e2dde8;
    --op-ink: #191923; --op-ink-strong: #0f0f17; --op-ink-soft: #34313f; --op-ink-faint: #595466;
    --op-violet: #593a87; --op-violet-ink: #4a2d75; --op-violet-wash: rgba(89, 58, 135, .08);
    --op-green: #17633b; --op-green-ink: #145533; --op-green-wash: rgba(23, 99, 59, .09);
    --op-rose: #9f2034; --op-rose-ink: #8a1b2d; --op-rose-wash: rgba(159, 32, 52, .08);
  }
  :root :is(.bw-op .row, .bw-op .beat) { background: #f7f5f1; }
  :root :is(.bw-op .stem .wt-clue, .wt-card.wt-answered .wt-clue, .wt-answered .wt-clue) { color: #7a4b00; }
  :root :is(.bw-op .stem .wt-clue-blue, .bw-wt .wt-clue-blue, .bw-wt .wt-answered .stem .wt-clue-blue) { color: #1557a0; }
  :root :is(.qopt.correct, .bw-wt .opts .correct .txt, .bw-wt .opt.correct .txt) { color: #145533; }
  :root .bw-wt .next:hover { color: #4a2d75; }
  /* Inline SVG diagrams were drawn for the dark palette: keep them on a dark card
     with the original dark tokens so labels keep their contrast. */
  :root :is(main, .frame, .sec, .doc, article, section, .container) svg:not([width="16"]):not([height="16"]):not(.icon):not([aria-hidden="true"]):not([data-hotspot] *) {
    --bg: oklch(15% .016 300); --surface: oklch(18.5% .018 300); --surface2: oklch(22.5% .020 300);
    --night: oklch(12.5% .014 300); --ink: #eef1f8; --ink2: #c3cbdc; --ink3: #8a92a7; --ink4: #717c98;
    --line: rgba(214, 196, 255, .13); --line2: rgba(214, 196, 255, .07);
    --violet: #c084fc; --violet-lt: #d6bcff; --purple: #a855f7; --deep: #7c3aed;
    --gold: #fbbf24; --hd-gold: #e8c47d; --green: #54d6a0; --rose: #f2758c; --blue: #7cc4ff;
    background: oklch(15% .016 300); border-radius: 8px; color: #eef1f8;
  }
  /* Controls were outlined by their dark fill on the dark page; on paper draw an inset ring
     (no layout change) so each control boundary stays >= 3:1. */
  :root button:not([aria-hidden='true']):not([data-hotspot] *):not(#bw-global-header *):not(.bw26-site-header *):not(#hd-header *):not(:disabled) {
    box-shadow: inset 0 0 0 1px #857a96 !important;
  }
  :root :focus-visible { outline-color: #593a87; }
  :root .bw-reset { color: #191923 !important; }
}
/* Dark (the pages' original default): fixes for the independent review contrast findings
   (sitewide-theme-20260928 re-review). Control boundaries >= 3:1 via an inset ring (no layout
   change), readable Reset label, and a visible focus ring colour on the dark ground. */
@media (prefers-color-scheme: dark) {
  :root button:not([aria-hidden='true']):not([data-hotspot] *):not(#bw-global-header *):not(.bw26-site-header *):not(#hd-header *):not(:disabled) {
    box-shadow: inset 0 0 0 1px rgba(214, 196, 255, .55) !important;
  }
  :root .bw-reset { color: #ffffff !important; }
  /* The skip link's outline colour is otherwise its dark text colour (and transitions). */
  :root :focus-visible, :root .bw-skip, :root .bw-skip:focus { outline-color: #d6bcff !important; }
}