/* ==========================================================================
   Design tokens. The full system (palette, type, spacing, components, motion) is documented on
   design-system.html. Color follows the 60 / 30 / 10 rule:
     60% primary   = the neutral background (10% gray in light, near-black navy in dark)
     30% secondary = sky blue: cards, bands, table heads, links and eyebrows
     10% accent    = signal orange: the brand dot, calls to action, the play button
   Default theme = light, on a soft 10% gray (#E6E6E6) instead of pure white
   to reduce eye strain. Dark theme is opt-in via the toggle (data-theme="dark").
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Primary (60%): the page is 10% gray. Secondary (30%): sky-tinted cards and bands */
  --color-bg: #e6e6e6;
  --color-surface: #eef6fb;
  --color-surface-2: #dcecf7;
  --color-band: #dcecf7;
  --color-border: #c5d6e2;
  --color-border-strong: #9aafc0;

  /* Text — all pairs meet WCAG AA on --color-bg */
  --color-text: #15181e;
  --color-text-muted: #4a5162;
  --color-accent: #0369a1; /* sky 700: 4.75:1 on the page, 5.4:1 on cards */
  --color-accent-soft: rgba(3, 105, 161, 0.1);
  --color-error: #a61b12;
  --color-error-soft: rgba(166, 27, 18, 0.08);

  /* Primary button: the brand orange, deep enough for white text (5.2:1) and 4.2:1 against the page */
  --color-primary: #c2410c;
  --color-primary-hover: #a8380a;
  --color-on-primary: #ffffff;

  --shadow-image: 0 2px 4px rgba(20, 24, 32, 0.08), 0 24px 48px -20px rgba(20, 24, 32, 0.35);
  --header-bg: rgba(230, 230, 230, 0.82);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a0f1a;
  --color-surface: #0f1d33;
  --color-surface-2: #15294a;
  --color-band: #0c1a2e;
  --color-border: #1f3a5f;
  --color-border-strong: #33557f;

  --color-text: #e7eaf0;
  --color-text-muted: #9aa5b8;
  --color-accent: #38bdf8; /* sky 400: 8:1 on the dark page */
  --color-accent-soft: rgba(56, 189, 248, 0.14);
  --color-error: #ff9a8f;
  --color-error-soft: rgba(255, 154, 143, 0.1);

  --color-primary: #c2410c;
  --color-primary-hover: #cc4412;
  --color-on-primary: #ffffff;

  --shadow-image: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  --header-bg: rgba(10, 15, 26, 0.82);
}

:root {
  /* Brand: one orange dot travels from the name in the header, through the reel, into the play button.
     #e8501a is the graphic orange: 3:1 against the gray page and 3.75:1 behind white icons. */
  --brand-orange: #e8501a;

  /* Brand palette (reference values; components use the semantic tokens above) */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --orange-400: #ff7a45;
  --orange-500: #e8501a;
  --orange-700: #c2410c;
  --orange-800: #a8380a;

  /* Type */
  --font-display: "Cabinet Grotesk", "General Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.5rem, 1.5rem + 4.8vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-lede: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.78rem;

  /* Space & shape */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --container: 1200px; /* 12 columns */
  --container-narrow: 1000px; /* 10 columns */
  /* 12-column grid: every multi-column group uses equal columns and this gutter,
     so 2-, 3-, 4- and 6-up groups all line up on the same 12 columns. */
  --gutter: 1.5rem; /* one spacing between every box on every screen size */
  --header-h: 64px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}