/* AI Conductor Academy — experimental theme previews (2026-09-23).
 * Default (no data-theme) = Signal Deck. Every palette verified for WCAG 2.2 AA:
 * text ≥4.5:1 on all surfaces, module accents ≥4.5:1 as text, dark ink on accent buttons ≥4.5:1,
 * form borders ≥3:1. Gradients are decorative only (rails, hero glow, heading underline) — never behind body text.
 */

:root {
  --m0: #2DD4BF; --m1: #2DD4BF; --m2: #2DD4BF; --m3: #2DD4BF; --m35: #2DD4BF; --m4: #2DD4BF;
  --e1: #8B7CFF; --e2: #8B7CFF; --e3: #8B7CFF;
}

:root[data-theme="aurora"] {
  --bg-base: #0A0C12; --bg-raised: #11141C; --bg-overlay: #191D28; --bg-input: #0E1118;
  --text-primary: #ECEEF3; --text-secondary: #AEB5C2; --text-muted: #8F98A8;
  --border-subtle: #262C3A; --border-strong: #3A4254; --border-input: #687388;
  --focus-ring: #F8FAFC; --btn-ink: #0A0C12;
  --accent-iris: #818CF8;
  --theme-gradient: linear-gradient(90deg, #2DD4BF, #38BDF8 25%, #A78BFA 50%, #FB7185 75%, #FBBF24);
  --hero-glow: rgba(167,139,250,0.16);
  --m0: #2DD4BF; --m1: #38BDF8; --m2: #A78BFA; --m3: #FBBF24; --m35: #FB7185; --m4: #A3E635;
  --e1: #F472B6; --e2: #FB923C; --e3: #818CF8;
}

:root[data-theme="ember"] {
  --bg-base: #120E0C; --bg-raised: #1A1512; --bg-overlay: #231C18; --bg-input: #161110;
  --text-primary: #F4EDE6; --text-secondary: #C4B8AC; --text-muted: #A39689;
  --border-subtle: #33291F; --border-strong: #4A3C30; --border-input: #7C6A5A;
  --focus-ring: #FFE6B3; --btn-ink: #120E0C;
  --accent-iris: #D4B8FF;
  --theme-gradient: linear-gradient(90deg, #FFB86B, #FF9E7A 40%, #F78FB3 75%, #D4B8FF);
  --hero-glow: rgba(255,158,122,0.14);
  --m0: #FFB86B; --m1: #FF9E7A; --m2: #F78FB3; --m3: #FFD166; --m35: #FF8A8A; --m4: #E9D27A;
  --e1: #F4A6C8; --e2: #FFB085; --e3: #D4B8FF;
}

:root[data-theme="polar"] {
  --bg-base: #0C111C; --bg-raised: #121A29; --bg-overlay: #1A2335; --bg-input: #0F1522;
  --text-primary: #E7EEF8; --text-secondary: #AEBBD0; --text-muted: #8E9BB2;
  --border-subtle: #243049; --border-strong: #34425F; --border-input: #66779A;
  --focus-ring: #F8FAFC; --btn-ink: #0C111C;
  --accent-iris: #FDE68A;
  --theme-gradient: linear-gradient(90deg, #67E8F9, #93C5FD 40%, #C4B5FD 75%, #F0ABFC);
  --hero-glow: rgba(125,211,252,0.14);
  --m0: #67E8F9; --m1: #7DD3FC; --m2: #93C5FD; --m3: #A5B4FC; --m35: #C4B5FD; --m4: #F0ABFC;
  --e1: #5EEAD4; --e2: #86EFAC; --e3: #FDE68A;
}

/* Font pairings (independent of palette) */
:root[data-font="jakarta"] { --font-heading: "Plus Jakarta Sans", var(--font-sans); }
:root[data-font="editorial"] { --font-sans: "Source Sans 3", system-ui, sans-serif; --font-heading: "Fraunces", Georgia, serif; }
:root[data-font="legible"] { --font-sans: "Atkinson Hyperlegible", system-ui, sans-serif; --font-heading: "Space Grotesk", var(--font-sans); }
:root[data-font="lexend"] { --font-sans: "Lexend", system-ui, sans-serif; --font-heading: "Lexend", system-ui, sans-serif; }

/* Per-module highlight: each page and card picks up its module color */
body[data-module="m0"], .module-card[data-mod="m0"] { --mod: var(--m0); --mod-next: var(--m1); }
body[data-module="m1"], .module-card[data-mod="m1"] { --mod: var(--m1); --mod-next: var(--m2); }
body[data-module="m2"], .module-card[data-mod="m2"] { --mod: var(--m2); --mod-next: var(--m3); }
body[data-module="m3"], .module-card[data-mod="m3"] { --mod: var(--m3); --mod-next: var(--m35); }
body[data-module="m35"], .module-card[data-mod="m35"] { --mod: var(--m35); --mod-next: var(--m4); }
body[data-module="m4"], .module-card[data-mod="m4"] { --mod: var(--m4); --mod-next: var(--m4); }
body[data-module="e1"], .module-card[data-mod="e1"] { --mod: var(--e1); --mod-next: var(--e2); }
body[data-module="e2"], .module-card[data-mod="e2"] { --mod: var(--e2); --mod-next: var(--e3); }
body[data-module="e3"], .module-card[data-mod="e3"] { --mod: var(--e3); --mod-next: var(--e3); }

:root[data-theme] body[data-module]:not([data-module="hub"]),
:root[data-theme] .module-card[data-mod] {
  --accent-signal: var(--mod);
  --accent-signal-dim: color-mix(in srgb, var(--mod) 78%, white);
}
:root[data-theme] .btn--primary,
:root[data-theme] .btn--primary:hover:not(:disabled),
:root[data-theme] .skip-link { color: var(--btn-ink); }
:root[data-theme] .hero::before { background: radial-gradient(ellipse at 30% 40%, var(--hero-glow), transparent 60%); }
:root[data-theme] .hero h1::after,
:root[data-theme] .lesson-content > header h1::after {
  content: ""; display: block; width: 4.5rem; height: 4px; margin-top: 0.6rem;
  border-radius: 4px; background: var(--theme-gradient);
}
:root[data-theme] body[data-module]:not([data-module="hub"]) .lesson-content > header h1::after {
  background: linear-gradient(90deg, var(--mod), var(--mod-next));
}
:root[data-theme] .site-header { border-bottom: 1px solid transparent; border-image: var(--theme-gradient) 1; }
:root[data-theme] .clo-chip { border-color: color-mix(in srgb, var(--mod, var(--accent-signal)) 45%, transparent); }

h1, h2, h3, .brand, .module-card__title { font-family: var(--font-heading, var(--font-sans)); }

/* Theme preview bar (only when a preview theme/font is active) */
.theme-bar {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 200;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0.8rem; border-radius: 10px;
  background: var(--bg-overlay); border: 1px solid var(--border-strong);
  color: var(--text-primary); font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.theme-bar a { font-weight: 600; }
@media (max-width: 720px) { .theme-bar { position: static; margin: 1rem; } }

/* ---------------------------------------------------------------------------
   Aurora Light (data-mode="light"). Same module hues, darkened for white surfaces.
   Checked: text ≥5.5:1, module colors ≥5.2:1 as text on every surface,
   white button labels ≥5.0:1 on every module color, field borders ≥3.2:1.
   --------------------------------------------------------------------------- */
:root[data-mode="light"] {
  color-scheme: light;
  --bg-base: #F6F7FB; --bg-raised: #FFFFFF; --bg-overlay: #EDF0F6; --bg-input: #FFFFFF;
  --text-primary: #12151D; --text-secondary: #3C4454; --text-muted: #566074;
  --border-subtle: #D9DEE7; --border-strong: #B8C0CE; --border-input: #7C8699;
  --m0: #0E6B63; --m1: #0369A1; --m2: #6D28D9; --m3: #8A5300; --m35: #BE123C; --m4: #4D6B0F;
  --e1: #BE185D; --e2: #C2410C; --e3: #4338CA;
  --accent-signal: #0E6B63; --accent-signal-dim: #115E59; --accent-iris: #4338CA;
  --ok: #047857; --warn: #8A5300; --danger: #B91C1C;
  --focus-ring: #1D4ED8; --btn-ink: #FFFFFF;
  --hero-glow: rgba(109, 40, 217, 0.08);
  --theme-gradient: linear-gradient(90deg, #0E6B63, #0369A1 25%, #6D28D9 50%, #BE123C 75%, #8A5300);
}
:root[data-mode="light"][data-theme] body[data-module]:not([data-module="hub"]),
:root[data-mode="light"][data-theme] .module-card[data-mod] {
  --accent-signal-dim: color-mix(in srgb, var(--mod) 80%, black);
}
:root[data-mode="light"] .theme-bar,
:root[data-mode="light"] .card-grid .module-card { box-shadow: 0 1px 2px rgba(18, 21, 29, 0.06); }

/* Light/dark toggle in the header */
.mode-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2rem; padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.mode-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Type system (2026-09-23, Jeff: "consistent fonts throughout"):
   Fraunces      = headings (h1–h4), the brand, and big numerals only
   Source Sans 3 = every other piece of text, including form fields, chips, and big questions
   JetBrains Mono = code only
   --------------------------------------------------------------------------- */
h4 { font-family: var(--font-heading, var(--font-sans)); }
input, textarea, select, button { font-family: var(--font-sans); }
textarea { font-size: 1rem; line-height: 1.55; }
code, kbd, samp, pre { font-family: var(--font-mono); }
.clo-chip { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.01em; }
.lesson-bar__id { font-family: var(--font-sans); }
.big-question, .bigq-list { font-family: var(--font-sans); font-weight: 600; }

/* Brand mark (AI Conductor Academy, 2026-09-23): a conductor's baton with a faint beat arc,
   filled with the theme gradient. Subtle: reads as a baton, a wand, or a spark. Decorative (aria-hidden). */
.brand__mark {
  width: 18px; height: 18px; border-radius: 0; box-shadow: none;
  background: var(--theme-gradient, var(--accent-signal));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='5.3' cy='18.7' r='2.3' fill='%23000' stroke='none'/%3E%3Cpath d='M6.8 17.2 18.6 5.4' stroke-width='1.9'/%3E%3Cpath d='M14.6 3.1c3.3-1.2 6.4.4 6.2 3.8' stroke-width='1.3' stroke-opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='5.3' cy='18.7' r='2.3' fill='%23000' stroke='none'/%3E%3Cpath d='M6.8 17.2 18.6 5.4' stroke-width='1.9'/%3E%3Cpath d='M14.6 3.1c3.3-1.2 6.4.4 6.2 3.8' stroke-width='1.3' stroke-opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-signal) 35%, transparent));
}
.footer-legal { font-size: 0.8rem; }

/* Header layout (2026-09-24): the light/dark toggle always sits top right, on every page.
   Course pages (brand, module nav, progress, toggle) use fixed grid areas instead of free wrapping,
   so the toggle never drops to a second row on the left. Welcome/About/404 headers already match. */
.site-header .site-header__inner {
  display: grid; align-items: center; gap: 0.5rem 1.25rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand nav chip mode";
}
.site-header .brand { grid-area: brand; }
.site-header nav { grid-area: nav; min-width: 0; }
.site-header .progress-chip { grid-area: chip; margin: 0; }
.site-header .mode-toggle { grid-area: mode; justify-self: end; }
@media (max-width: 1100px) {
  .site-header .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand mode" "nav chip"; }
}
@media (max-width: 560px) {
  .site-header .site-header__inner { grid-template-areas: "brand mode" "nav nav" "chip chip"; }
  .site-header .progress-chip { justify-self: start; }
}