/* HYPER RED — design tokens
   Single source of truth for color, type, spacing and motion.
   Everything downstream should read these variables rather than
   hard-coding values, so the palette or scale can change in one place. */

:root {
  /* ---- Brand red ---- */
  --hr-red: #e3232b;
  --hr-red-bright: #ff3d45;
  --hr-red-dim: #9c1a20;
  --hr-red-ink: #2a0708; /* red-tinted near-black, for text-on-red */

  /* ---- Surfaces ---- */
  --bg-0: #050505;
  --bg-1: #0b0b0d;
  --bg-2: #121214;
  --bg-3: #19191c;
  --bg-4: #202023;

  /* ---- Borders ---- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-red: rgba(227, 35, 43, 0.45);

  /* ---- Text ----
     --text-faint was rgba(255,255,255,.30) — too low-contrast for actual
     interface text against this near-black background (Section 4, item
     10). Raised to .50 so real functional/secondary text stays legible.
     --text-ghost is the new home for genuinely decorative-only content
     (large background numerals, texture) that was never meant to be read
     as text in the first place. */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.48);
  --text-faint: rgba(255, 255, 255, 0.5);
  --text-ghost: rgba(255, 255, 255, 0.2);
  --text-on-red: #ffffff;

  /* ---- Status ---- */
  --status-success: #35c46a;
  --status-success-bg: rgba(53, 196, 106, 0.12);
  --status-error: #ff5a5f;
  --status-error-bg: rgba(255, 90, 95, 0.12);
  --status-warn: #e3a72e;
  --status-warn-bg: rgba(227, 167, 46, 0.12);
  --status-info: #4d9de0;
  --status-info-bg: rgba(77, 157, 224, 0.12);

  /* ---- Class colors (motorsport category accents, used sparingly) ----
     Normalized to the class names actually used across SEASON_EVENTS
     (js/config.js) — WEC LMP2 and ELMS LMP2 are distinct classes on
     different events, and the GT-class entries run as LMGT3, not the
     previous (incorrect/mixed) "GT3". */
  --class-hypercar: #ff3d45;
  --class-wec-lmp2: #e3a72e;
  --class-elms-lmp2: #d98a2b;
  --class-lmp3: #8b5cf6;
  --class-lmgt3: #35c46a;

  /* ---- Typography ---- */
  --font-display: "Barlow Condensed", "Oswald", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radius: controlled, not rounded-SaaS ---- */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-red: 0 4px 20px rgba(227, 35, 43, 0.25);

  /* ---- Layout ---- */
  --app-max-width: 1240px;
  --app-max-width-wide: 1320px;
  --header-height: 64px;
  --touch-target: 44px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* Spring-feel easing (slight overshoot then settle) for transform-only
     interactions — button presses, toggles, tab indicators. Deliberately
     NOT used on color/background/opacity transitions, where overshoot
     would just look like a color glitch rather than physical motion. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 190ms;
  --dur-slow: 320ms;

  /* ---- Technical / race-control accents ----
     Kept separate from the brand palette above: these are the small
     graphic-language tokens (grid lines, coordinate rules, section
     numbering) used sparingly per the operations-portal visual language,
     not new "colors" in the everyday sense. */
  --hr-line: rgba(255, 255, 255, 0.09);
  --hr-line-red: rgba(227, 35, 43, 0.5);
  --hr-grid-line: rgba(255, 255, 255, 0.05);
  --radius-xs: 2px;
  --tracking-label: 0.14em;
  --tracking-wide: 0.08em;
  --font-size-micro: 10.5px;

  /* ---- Editorial / cinematic scale ----
     Dramatically larger type used sparingly for the event hero and any
     other moment that needs to act as the primary graphic device on a
     screen (see signup.css .race-brief-title / .race-brief-bignum). */
  --font-size-display-hero: clamp(48px, 8vw, 110px);
  --font-size-num-giant: clamp(70px, 12vw, 170px);
  --hero-min-height: min(78vh, 780px);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html[data-reduce-motion="true"] {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}