/* =========================================================================
   CARBON SPORTS BAR — DESIGN TOKENS
   The single source of truth for every design value in the system.
   Modify here, propagate everywhere.
   ========================================================================= */

:root {
  /* ---------- COLOUR · SURFACES -------------------------------------- */
  --surface-base: #121212;
  --surface-raised: #1e1e1e;
  --surface-overlay: #292929;
  --surface-inverse: #f5f5f5;

  /* ---------- COLOUR · BORDERS --------------------------------------- */
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(57, 255, 20, 0.32);

  /* ---------- COLOUR · TEXT ------------------------------------------ */
  --text-primary: #f5f5f5;
  --text-muted: #d4d4d4;
  --text-secondary: #a3a3a3;
  --text-tertiary: #6b6b6b;
  --text-on-accent: #121212;
  --text-on-mill: #121212;

  /* ---------- COLOUR · BRAND ----------------------------------------- */
  --accent-pitch: #39ff14; /* primary action, live, success */
  --accent-pitch-dim: #2bd110; /* hover/pressed state */
  --accent-mill: #c5a059; /* premium, VIP, Mill cross-link */
  --accent-mill-dim: #a88542;

  /* ---------- COLOUR · STATUS ---------------------------------------- */
  --status-success: #39ff14;
  --status-warning: #c5a059;
  --status-error: #ff4d4d;
  --status-info: #3b82f6;
  --status-live: #ff3d3d; /* live-match red, distinct from error */

  /* ---------- TYPOGRAPHY · FAMILIES ---------------------------------- */
  --font-display: "Big Shoulders Display", "Impact", "Arial Black", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------- TYPOGRAPHY · SIZE SCALE -------------------------------- */
  --type-hero: clamp(2.75rem, 8vw, 4.5rem); /* hero only */
  --type-display: 2.5rem;
  --type-h1: 2rem;
  --type-h2: 1.5rem;
  --type-h3: 1.25rem;
  --type-lead: 1.0625rem; /* 17px — hero subtitle, between body and h3 */
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.8125rem;
  --type-tiny: 0.6875rem;
  --type-stat: 2.75rem; /* stat-tile numerals — matches hero minimum */
  --type-display-fluid: clamp(
    2.25rem,
    6vw,
    3.5rem
  ); /* secondary hero displays */
  --type-card-title: clamp(1.25rem, 3vw, 1.5rem); /* zone-card titles */

  /* ---------- TYPOGRAPHY · WEIGHTS ----------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- TYPOGRAPHY · LINE-HEIGHT ------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --leading-flat: 0.95; /* large numerals — stat tiles */
  --leading-solid: 1; /* icons, arrows */

  /* ---------- TYPOGRAPHY · TRACKING ---------------------------------- */
  --tracking-tight: -0.01em; /* large display only */
  --tracking-normal: 0;
  --tracking-wide: 0.02em; /* mid headings */
  --tracking-wider: 0.06em; /* captions */
  --tracking-widest: 0.12em; /* nav labels, all-caps micro */

  /* ---------- SPACING · 4PT BASE GRID -------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px — bridges 6 and 8 */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* ---------- RADII --------------------------------------------------- */
  --radius-sm: 4px; /* chips, tags */
  --radius-md: 8px; /* buttons, inputs */
  --radius-lg: 12px; /* cards */
  --radius-xl: 20px; /* bottom sheet, modals */
  --radius-full: 9999px; /* pills, avatars */

  /* ---------- MOTION · DURATION -------------------------------------- */
  --duration-instant: 100ms;
  --duration-fast: 150ms; /* micro-interactions */
  --duration-base: 250ms;
  --duration-slow: 350ms; /* sheet, modal */
  --duration-deliberate: 500ms;

  /* ---------- MOTION · EASING ---------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entries */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* exits */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful */

  /* ---------- Z-INDEX SCALE ------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-nav: 200;
  --z-fab: 250;
  --z-sheet: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---------- LAYOUT -------------------------------------------------- */
  --header-height: 64px;
  --nav-height: 64px;
  --max-content: 1200px;
  --max-text: 68ch;
  --tap-min: 44px;

  /* ---------- EFFECTS ------------------------------------------------- */
  --blur-glass: blur(20px) saturate(180%);
  --blur-overlay: blur(8px);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-elevated:
    0 4px 16px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-summary:
    0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);

  --glow-pitch: 0 0 24px rgba(57, 255, 20, 0.32);
  --glow-mill: 0 0 24px rgba(197, 160, 89, 0.24);
}

/* =========================================================================
   HIGH-CONTRAST OPT-IN
   Lifts decorative greys to AA-passing levels without disturbing default
   brand aesthetics.
   ========================================================================= */
@media (prefers-contrast: more) {
  :root {
    --text-tertiary: #8a8a8a;
    --border-hairline: rgba(255, 255, 255, 0.16);
  }
}