/* AxiomIQ design tokens. All colors, spacing, type, and radii used across the
   site are defined here — no hardcoded values should appear in other files. */

:root {
  /* Backgrounds — deep, not pure black */
  --bg-base:        #0a0a0c;
  --bg-surface:     #131315;
  --bg-elevated:    #1a1a1d;
  --bg-hover:       #222225;

  /* Borders */
  /* Faint, barely-there hairline — every divider (.hr, table rows, footer
     rule, section separators) reads as a whisper, not a ruled line. */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: #38383f;
  --border-strong:  #52525b;

  /* Text */
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted:     #71717a;
  --text-disabled:  #3f3f46;

  /* Accent — monochrome: pure white, brighter than --text-primary, so it
     still reads as "the" accent (buttons, links, emphasis) purely through
     brightness rather than hue. Chosen to sit clear of every
     difficulty/topic hue below, so it never blurs into the content-level
     color coding, which stays full color on purpose (see those tokens). */
  --accent:         #ffffff;
  --accent-rgb:     255, 255, 255;
  --accent-dim:     #d4d4d8;
  --accent-glow:    rgba(255, 255, 255, 0.15);

  /* Difficulty color scale — strict traffic-light progression, four colors
     only: green (1-3) -> yellow (4-6) -> orange (7-8) -> red (9-10). */
  --diff-easy:      #22c55e;
  --diff-medium:    #eab308;
  --diff-hard:      #f97316;
  --diff-expert:    #ef4444;

  /* Topic colors — hues are the owner's call (blue/red/yellow/purple/green);
     the tone is locked to the brand's `accent(hue)` band from the video
     channel's theme.ts: s 80%, l 64% ("luminous soft-neon"). All five clear
     4.5:1 on --bg-base at that exact tone, so none needed adjusting.
     Two land on values DESIGN.md already documents: prob is the brand's own
     HUE_BLUE (212°), and combo is the brand gold itself. (DESIGN.md's
     "don't reintroduce blue" rule is scoped to the site *accent*, which is
     monochrome white — it doesn't govern topic coding.)
     Note: game/combo/stats now share hues with --diff-expert/-medium/-easy
     above, so topic and difficulty color-coding cross-talk in the table. */
  --topic-prob:     #5a9eed; /* blue   h212 ·  7.11:1 */
  --topic-game:     #ed5a5a; /* red    h0   ·  5.85:1 */
  --topic-combo:    #edd45a; /* yellow h50  · 13.34:1 */
  --topic-brain:    #af5aed; /* purple h275 ·  5.19:1 */
  --topic-stats:    #5aed97; /* green  h145 · 13.18:1 */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Typography — SF Pro sitewide. SF Pro itself can't be embedded as a
     webfont for non-Apple visitors (Apple's license doesn't cover
     general web hosting), so this is the standard system-font stack: real
     SF Pro on Mac/iOS/Safari, each OS's own native equivalent everywhere
     else (Segoe UI on Windows, Roboto on Android/Chrome OS) — nothing to
     download or host. Mono follows the same idea (ui-monospace/SF Mono on
     Apple, free-of-charge) with Roboto Mono — an open, Google-hosted
     font — as the fallback everywhere else, replacing IBM Plex Mono. */
  --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, 'Roboto Mono', Consolas, monospace;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}