/* Throttle Up Media — design tokens, single source of truth.
   Raw brand values, then a semantic layer components actually consume.
   Contrast pairs verified WCAG AA against --bg / --bg-elevated (see build notes). */

:root {
  /* ---- Brand raw values ---- */
  --tum-void: #0d0d14;
  --tum-void-raised: #15151f;
  --tum-void-panel: #1b1c29;
  --tum-paper: #f4f5f8;
  --tum-paper-dim: #a7abb8;
  --tum-orange: #e8632a;
  --tum-orange-bright: #ff8a4c;
  --tum-cyan: #5ec8e0;
  --tum-gold: #e0b84a;
  --tum-line: rgba(244, 245, 248, 0.14);
  --tum-line-strong: rgba(244, 245, 248, 0.28);

  /* ---- Semantic aliases ---- */
  --bg: var(--tum-void);
  --bg-raised: var(--tum-void-raised);
  --bg-panel: var(--tum-void-panel);
  --fg: var(--tum-paper);
  --fg-dim: var(--tum-paper-dim);
  --accent: var(--tum-orange);
  --accent-hover: var(--tum-orange-bright);
  --accent-cyan: var(--tum-cyan);
  --accent-gold: var(--tum-gold);
  --line: var(--tum-line);
  --line-strong: var(--tum-line-strong);
  --focus-ring: var(--tum-orange-bright);

  /* ---- Type ---- */
  --font-display: "SF Electrotome", ui-sans-serif, system-ui, sans-serif;
  --font-display-condensed: "SF Electrotome Condensed", "SF Electrotome", ui-sans-serif, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-display: clamp(2.75rem, 3.2rem + 3.6vw, 5.5rem);
  --t-h1: clamp(2.25rem, 2.2rem + 2.6vw, 3.75rem);
  --t-h2: clamp(1.6rem, 1.5rem + 1.4vw, 2.35rem);
  --t-h3: clamp(1.15rem, 1.1rem + 0.5vw, 1.4rem);
  --t-lede: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-eyebrow: 0.18em;
  --ls-display: -0.01em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  --measure: 42rem;
  --page-max: 74rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radii / borders ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.4s;
  --dur-slow: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001ms;
    --dur-med: 0.001ms;
    --dur-slow: 0.001ms;
  }
}