/* Theme tokens, taken from the approved mockups (docs/site-design). --muted is darker/lighter than the mockups so that muted text
   is at least 4.5:1 (WCAG AA) on every background it sits on (page, surfaces, soft panels, chips, the tinted -soft fills) in both
   themes; never lower it with `opacity`, which the sweep (tools/sweep_check.mjs) measures too. The theme follows the device;
   <html data-theme="light"> or <html data-theme="dark"> overrides it. */
:root {
  --bg: #F4F5FA;
  --surface: #FFFFFF;
  --ink: #1A1D3A;
  --muted: #4F566E;
  --line: #E3E6EF;
  --soft: #EEF0F6;
  --accent: #C93A0A;
  --accent-shadow: #8E2806;
  --accent-soft: #FFF0E8;
  --accent-text: #C93A0A;
  --play: #FFC93C;
  --play-shadow: #B88A10;
  --play-ink: #1A1D3A;
  --teal: #0A8F8F;
  --teal-btn: #087A7A;
  --teal-shadow: #06605F;
  --teal-soft: #DDF5F3;
  --teal-ink: #0A5F5F;
  --hero: #1A1D3A;
  --hero-text: #D7DAEA;
  --hero-chip: #2C3160;
  --level-soft: #FFF6D9;
  --level-ink: #7A5A00;
  --stage: #0B0D1E;
  --blue: #2D63E8;
  --blue-soft: #E4E9FB;
  --blue-ink: #2D4FD6;
  --grid: #E3E6EF;
  --shadow: rgba(26, 29, 58, 0.18);
  --card-shadow: #0F1124;
  --focus: #2D63E8;
  --online: #2BB673;

  --font-head: 'Baloo 2', Rubik, 'Segoe UI', sans-serif;
  --font-text: Rubik, 'Segoe UI', system-ui, sans-serif;
  --page-max: 1280px;
  --gutter: 32px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #12152B;
  --surface: #1E2244;
  --ink: #F1F2F8;
  --muted: #B2B7D0;
  --line: #2E3360;
  --soft: #262B52;
  --accent-soft: #3A2430;
  --accent-text: #FF8A5C;
  --teal-soft: #123A3E;
  --teal-ink: #7FE0D6;
  --hero: #0B0D1E;
  --hero-chip: #22264A;
  --level-soft: #3A3014;
  --level-ink: #FFD66B;
  --stage: #0B0D1E;
  --blue-soft: #202A5C;
  --blue-ink: #9DB4FF;
  --grid: #2E3360;
  --shadow: rgba(0, 0, 0, 0.5);
  --card-shadow: #05060F;
  --focus: #9DB4FF;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12152B;
    --surface: #1E2244;
    --ink: #F1F2F8;
    --muted: #B2B7D0;
    --line: #2E3360;
    --soft: #262B52;
    --accent-soft: #3A2430;
    --accent-text: #FF8A5C;
    --teal-soft: #123A3E;
    --teal-ink: #7FE0D6;
    --hero: #0B0D1E;
    --hero-chip: #22264A;
    --level-soft: #3A3014;
    --level-ink: #FFD66B;
    --stage: #0B0D1E;
    --blue-soft: #202A5C;
    --blue-ink: #9DB4FF;
    --grid: #2E3360;
    --shadow: rgba(0, 0, 0, 0.5);
    --card-shadow: #05060F;
    --focus: #9DB4FF;
    color-scheme: dark;
  }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
}