/* Loaded last. Preferences belong to <html>, not legacy header data-theme.
   Legacy --mist means page background; --slate means page ink. Dark islands
   explicitly rebind these tokens so a theme change never turns them white. */
:root {
  --brand-slate: #30343b;
  --brand-mist: #f2f2ef;
  --brand-gold: #b89a5a;
  --surface: #f2f2ef;
  --surface-raised: #fff;
  --surface-subtle: #e2e3df;
  --ink: #30343b;
  --ink-muted: #61656d;
  --border: #c9cbc7;
  --accent: #80631f;
  --success: #28624e;
  --error: #934a42;
  --focus-ring: #80631f;
  --motion-duration: 180ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #25292f;
  --surface-raised: #30343b;
  --surface-subtle: #3c4149;
  --ink: #f2f2ef;
  --ink-muted: #c2c5ca;
  --border: #767c85;
  --accent: #d5b675;
  --success: #a0d6b4;
  --error: #ffb4ab;
  --focus-ring: #d5b675;
  --mist: var(--surface);
  --slate: var(--ink);
  --stone: var(--surface-subtle);
  --white: var(--surface-raised);
  --muted: var(--ink-muted);
  --line: var(--border);
  --text-gold: var(--accent);
}

:root[data-theme="dark"] body {
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] :is(input, select, textarea) {
  color: var(--ink);
  background-color: var(--surface-raised);
  border-color: var(--border);
  accent-color: var(--accent);
  caret-color: var(--ink);
}
:root[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
:root[data-theme="dark"] option {
  background: var(--surface-raised);
  color: var(--ink);
}
:root[data-theme="dark"] :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
:root[data-theme="dark"] ::selection { background: #d5b675; color: #25292f; }

/* Header, mobile navigation and complete syllabus mega-menu. ID specificity
   intentionally beats legacy .header[data-theme=light] navigation rules. */
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .header nav,
:root[data-theme="dark"].nav-ready .header #main-nav {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--border);
}
:root[data-theme="dark"] .header #main-nav a:not(.signup-link),
:root[data-theme="dark"] .header .syllabus-trigger,
:root[data-theme="dark"] .header #syllabus-category,
:root[data-theme="dark"] .header .syllabus-overview,
:root[data-theme="dark"] .header .syllabus-topic-grid .topic-title {
  color: var(--ink);
}
:root[data-theme="dark"] .header #main-nav a:not(.signup-link):is(:hover, [aria-current="page"]),
:root[data-theme="dark"] .header .syllabus-trigger[aria-expanded="true"],
:root[data-theme="dark"] .header #syllabus-category:is([aria-pressed="true"], [aria-expanded="true"]),
:root[data-theme="dark"] .header .syllabus-topic-grid a:is(:hover, :focus-visible) .topic-title {
  color: var(--accent);
}
:root[data-theme="dark"] .header .menu-toggle { color: var(--ink) !important; }
:root[data-theme="dark"] .header .syllabus-panel {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--border);
}
:root[data-theme="dark"] .syllabus-categories { background: var(--surface-subtle); }
:root[data-theme="dark"] :is(.menu-note, .syllabus-placeholder > p, .syllabus-section-heading > span) { color: var(--ink-muted); }
:root[data-theme="dark"] .menu-eyebrow,
:root[data-theme="dark"] .header .syllabus-materials a > :is(span:first-child, span:last-child) { color: var(--accent); }
:root[data-theme="dark"] .header .syllabus-topic-grid a { border-color: var(--border); }
:root[data-theme="dark"] .header #main-nav > .signup-link {
  background: var(--brand-gold);
  color: var(--brand-slate) !important;
  border-color: var(--brand-gold);
}
:root[data-theme="dark"] .header #main-nav > .signup-link:hover { background: #c5ab75; border-color: #c5ab75; }
/* Use supplied artwork, never invert logos or the Nara character SVG. */
:root[data-theme="dark"] .brand img[src*="logo-light.svg"] { content: url("assets/logo-dark.svg"); }

/* Stable dark islands: semantic local tokens preserve their original polarity. */
:root[data-theme="dark"] :is(.section-dark, .de-module-boss, .passport-readiness-panel, .passport-wallet-panel, .story) {
  --mist: #f2f2ef;
  --slate: #30343b;
  --stone: #434850;
  --white: #30343b;
  --muted: #c2c5ca;
  --line: #767c85;
  --text-gold: #d5b675;
  background: #30343b;
  color: #f2f2ef;
  border-color: #767c85;
}
:root[data-theme="dark"] .section-dark :is(.muted, .caption, .manifesto-copy, .name-pair p) { color: #d4d5d7; }
:root[data-theme="dark"] :is(.section-dark, .de-module-boss, .passport-readiness-panel, .passport-wallet-panel) :is(.eyebrow, em) { color: #d5b675; }
:root[data-theme="dark"] .de-module-boss .lab-type-badge { color: #d5b675; border-color: #d5b675; }
:root[data-theme="dark"] .passport-readiness-panel .passport-state,
:root[data-theme="dark"] .passport-wallet-panel .passport-state { color: #f2f2ef; border-color: #c2c5ca; }
:root[data-theme="dark"] .passport-gauge figcaption strong { color: #f2f2ef; }
:root[data-theme="dark"] .passport-button-light { background: #f2f2ef; color: #30343b; border-color: #f2f2ef; }
:root[data-theme="dark"] .passport-button-light:hover { background: #e2e3df; color: #30343b; }
:root[data-theme="dark"] #passport-direction-dialog::backdrop { background: #101216; }

/* Legacy primary buttons use reversed page tokens. Set both halves explicitly,
   including hover, selected, disabled and nested dark-island buttons. */
:root[data-theme="dark"] :is(.button, .passport-button:not(.passport-button-light), .aee-shell button.aee-primary, .discover-why) {
  background: #d5b675;
  color: #25292f;
  border-color: #d5b675;
}
:root[data-theme="dark"] :is(.button, .passport-button:not(.passport-button-light), .aee-shell button.aee-primary, .discover-why):hover:not(:disabled) {
  background: #e4c98f;
  color: #25292f;
  border-color: #e4c98f;
}
:root[data-theme="dark"] .button:disabled { background: #3c4149; color: #c2c5ca; border-color: #767c85; }
:root[data-theme="dark"] :is(.prediction-options input:checked + span, .de-level-buttons button[aria-pressed="true"], .level-disclosure .difficulty-buttons button[aria-pressed="true"]) {
  background: #d5b675;
  color: #25292f;
  border-color: #d5b675;
}
:root[data-theme="dark"] .de-level-buttons button[aria-pressed="true"]:hover { color: #25292f; border-color: #d5b675; }
:root[data-theme="dark"] .strategy:has(input:checked) { border-color: var(--accent); }
:root[data-theme="dark"] .de-lab-link { background: #b89a5a; color: #25292f; border-color: #d5b675; }
:root[data-theme="dark"] .de-lab-link:hover { background: #d5b675; color: #25292f; }
:root[data-theme="dark"] :is(.difficulty-buttons button, .level-disclosure .difficulty-buttons button) { color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .difficulty-buttons button[aria-pressed="true"] { background: #d5b675; color: #25292f; border-color: #d5b675; }
:root[data-theme="dark"] .de-key-boss { background: #30343b; border-color: #c2c5ca; }

/* Nara: target interface elements only; character paths/fills are untouched. */
:root[data-theme="dark"] #nara-dock { color: var(--ink); }
:root[data-theme="dark"] .nara-panel { background: var(--surface-raised); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .nara-launcher { color: var(--ink); }
:root[data-theme="dark"] .nara-introduction h2,
:root[data-theme="dark"] .nara-options > button { color: var(--ink); }
:root[data-theme="dark"] :is(.nara-launcher-name > span, .nara-close, .nara-introduction p, .nara-answer > p, .nara-footnote, #nara-search-note, .nara-query-result) { color: var(--ink-muted); }
:root[data-theme="dark"] :is(.nara-eyebrow, .nara-options > button > span:last-child, .nara-option-icon, .nara-footnote > button, .nara-query-result a) { color: var(--accent); }
:root[data-theme="dark"] :is(.nara-options > button, .nara-option-icon) { border-color: var(--border); }
:root[data-theme="dark"] :is(.nara-close, .nara-options > button):hover { background: var(--surface-subtle); }
:root[data-theme="dark"] .nara-search-row input { background: var(--surface); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] :is(.nara-answer-actions > a, .nara-answer-actions > button, .nara-search-row button) { background: #d5b675; color: #25292f; border-color: #d5b675; }
:root[data-theme="dark"] .nara-answer-actions > :nth-child(n+2) { background: transparent; color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .nara-answer-actions > :hover { background: #e4c98f; color: #25292f; }

/* Lab workspace, native controls, table/code output and architecture canvas. */
:root[data-theme="dark"] .aee-workspace { background: var(--surface-raised); color: var(--ink); }
:root[data-theme="dark"] .aee-shell :is(select, input, textarea) { background: var(--surface); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .aee-shell button { color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .aee-shell .aee-code-slot { background: #3c4149; color: #f2f2ef; border-color: #d5b675; }
:root[data-theme="dark"] #aee-history button[aria-current="true"] { background: #3c4149; border-color: #d5b675; }
:root[data-theme="dark"] #aee-status[data-tone="error"] { color: var(--error); }
:root[data-theme="dark"] #aee-status[data-tone="success"] { color: var(--success); }
:root[data-theme="dark"] .aee-shell :is(pre, th, td) { color: var(--ink); background: var(--surface-subtle); border-color: var(--border); }
:root[data-theme="dark"] .aee-shell .aee-graph { background: #25292f; border-color: #767c85; }
:root[data-theme="dark"] .aee-node rect { fill: #3c4149; stroke: #c2c5ca; }
:root[data-theme="dark"] .aee-node text { fill: #f2f2ef; }
:root[data-theme="dark"] .aee-node:is(.is-selected, :focus-visible) rect { stroke: #d5b675; }
:root[data-theme="dark"] .aee-edge { stroke: #d5b675; }
:root[data-theme="dark"] .aee-graph #aee-arrow path { fill: #d5b675; }
:root[data-theme="dark"] .aee-edge:is(.is-selected, :focus-visible) { stroke: #f2f2ef; }

/* CodeMirror's existing syntax palette is designed for a light editor. Retain
   that deliberate light island instead of breaking syntax-token contrast. */
:root[data-theme="dark"] .aee-shell .cm-editor {
  color-scheme: light;
  --mist: #f2f2ef;
  --slate: #30343b;
  --stone: #e2e3df;
  --muted: #61656d;
  --line: #a6aaa4;
  --text-gold: #80631f;
  background: #fafaf8;
  color: #30343b;
  border-color: #a6aaa4;
}
:root[data-theme="dark"] .aee-shell .cm-editor .cm-gutters { background: #f2f2ef; color: #61656d; border-color: #a6aaa4; }
:root[data-theme="dark"] .aee-shell .cm-editor .aee-code-slot { color-scheme: light; background: #f4f0e6; color: #30343b; border-color: #80631f; }
:root[data-theme="dark"] .aee-shell .cm-editor :focus-visible { outline-color: #80631f; }
:root[data-theme="dark"] .aee-shell .cm-editor option { background: #fafaf8; color: #30343b; }

/* Submitted semantic evidence stays intentionally light. Local tokens cover
   muted copy, tables, pre/code, nested controls and both outcome variants. */
:root[data-theme="dark"] :is(#aee-debrief-content[data-outcome], .result-feedback[data-outcome], .why-comparison > div[data-outcome]) {
  color-scheme: light;
  --mist: #f2f2ef;
  --slate: #30343b;
  --stone: #e2e3df;
  --white: #fff;
  --muted: #50575d;
  --line: #9aaba1;
  --text-gold: #80631f;
  --ink: #30343b;
  --ink-muted: #50575d;
  --surface: #f2f2ef;
  --surface-raised: #fff;
  --surface-subtle: #e2e3df;
  --border: #9aaba1;
  --accent: #80631f;
  --focus-ring: #80631f;
}
:root[data-theme="dark"] .why-comparison > div[data-outcome] span { color: #50575d; }
:root[data-theme="dark"] .result-feedback[data-outcome] strong { color: inherit; }
:root[data-theme="dark"] #aee-debrief-content[data-outcome] :is(input, select, textarea, button) { color: #30343b; background: #f2f2ef; border-color: #69716a; }

/* Experiment result is themed; feedback's named success/different surfaces
   above retain their original semantic colors and visible text labels. */
:root[data-theme="dark"] .lab-result { background: var(--surface-raised); color: var(--ink); }
:root[data-theme="dark"] :is(.signup-form-panel, .chapter-map) { background: var(--surface-raised); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .signup-story > p:not(.eyebrow) { color: var(--ink-muted); }
:root[data-theme="dark"] #signup-email { background: var(--surface); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] #signup-status { color: var(--accent); }

/* Home retains its dark visual story, but its discovery destination becomes
   a raised dark surface. No SVG-wide styling or image filters. */
:root[data-theme="dark"] .discoveries { background: var(--surface-raised); color: var(--ink); }
:root[data-theme="dark"] :is(.discoveries .eyebrow, .destination-arrow) { color: var(--accent); }
:root[data-theme="dark"] .destination-links small { color: var(--ink-muted); }
:root[data-theme="dark"] .discoveries a:focus-visible { outline-color: var(--focus-ring); }
:root[data-theme="dark"] .skip { background: #f2f2ef; color: #25292f; }

/* JS reads the same data-motion attribute; this variable is an additional
   duration hook. Do not disable pointer events, hide content or remove focus. */
:root[data-motion="reduced"] { --motion-duration: 0ms; scroll-behavior: auto !important; }
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}
/* JS-driven story positions are parent's responsibility. Disable only its
   decorative drift/zoom; do not reset semantic selected/open transforms. */
:root[data-motion="reduced"] :is(.discovery-svg, .resolved-mark, .scroll-symbol) { transform: none !important; }