:root {
  --color-bg: #0a0a0a;
  --color-bg-alt: #121212;
  --color-surface: #1b1b1b;
  --color-card: #1a1a1a;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-primary: #d40000;
  --color-primary-dark: #a00000;
  --color-accent: #ff6b6b;
  --color-text: #ffffff;
  --color-muted: #ffffff;
  --color-dim: #ffffff;
  --color-gold: #ffd700;
  --font-display: 'Orbitron', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --max-width: 1200px;
  /* WCAG 2.2 focus indicator: 3px ring + contrasting white halo so the
     focus ring stays visible over the dark gradient nav/hero backgrounds
     (#100). --focus-outline is used directly by most elements; the halo
     comes via box-shadow on :focus-visible where it's needed. */
  --focus-outline: 3px solid var(--color-primary);
  --focus-offset: 2px;
  --focus-ring: 0 0 0 5px rgba(255, 255, 255, 0.6);
  --min-touch-target: 44px;

  /* Heading scale (#97) — 1.25 modular scale. Base (body) = 16px.
     Use the tokens for new headings; existing page-specific overrides
     (quiz hero, home auth panel) are intentional visual emphasis and
     remain inline until explicitly revisited. Pending cleanup tracked
     as a follow-up under the same issue. */
  --font-size-body: 16px;
  --font-size-small: 13px;
  --font-size-h6: 14px;
  --font-size-h5: 18px;
  --font-size-h4: 22px;
  --font-size-h3: 28px;
  --font-size-h2: 36px;
  --font-size-h1: 46px;
}