/* STORM — design tokens
   Source of truth: STORM Design System (Claude Design export).
   Black + Yellow + White. Yellow is earned — CTAs, scores, live/winner/active states only. */

:root {
  /* ---- Brand colour ---- */
  --storm-yellow: #F1D53E;
  --storm-yellow-soft: rgba(241, 213, 62, 0.5);
  --storm-black: #09090B;
  --storm-white: #FFFFFF;

  /* ---- Surfaces ---- */
  --surface-01: #0B0B0E; /* alternating section background */
  --surface-02: #0D0D10; /* cards / panels on black */
  --surface-03: #0E0E11; /* product-UI panels: debate mocks, dashboards */
  --charcoal: #1C1C21;   /* avatar plates, inert chips */

  /* ---- Text ---- */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --text-label: rgba(255, 255, 255, 0.5); /* AA-safe (4.5:1+) even on the lightest surface tier */
  --text-faint: rgba(255, 255, 255, 0.46); /* still the quietest tier, but AA-safe at 9-10px on black */
  --text-on-yellow: #09090B;

  /* ---- Borders ---- */
  --border-hairline: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-medium: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-yellow: rgba(241, 213, 62, 0.5);
  --border-yellow-strong: rgba(241, 213, 62, 0.6);

  /* ---- Type families ---- */
  --font-display: 'Anton', Impact, sans-serif;          /* headlines, scores, big numerals */
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif; /* body copy, buttons, UI */
  --font-subhead: 'Barlow Condensed', 'Barlow', sans-serif;    /* debate titles, compact headings */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* microcopy, broadcast metadata */

  /* ---- Layout ---- */
  --page-max: 1440px;
  --page-gutter: 40px;
  --section-space: 110px;
  --section-space-tight: 90px;
  --radius-max: 2px;

  /* ---- Motion ---- */
  --ease-punch: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-meter: 600ms;

  color-scheme: dark;
}

/* STORM is a dark-native brand: one committed look, not a light/dark toggle.
   Background is painted explicitly so the artifact/host never bleeds through. */
html, body {
  background: var(--storm-black);
  color: var(--text-primary);
}