/* =================================================================
   PIT WALL — DESIGN TOKENS  (Light mode default)
   Drop this at the top of your global stylesheet.
   Translated from the SparkleFarts brand vocabulary
   (pink-forward, playful, fan-club).
   ================================================================= */

:root {
  /* ---------- BRAND COLORS ---------- */
  --brand-primary:        #FF1F8C;   /* hot pink — buttons, links, key UI */
  --brand-primary-hover:  #E91A8C;   /* deeper magenta — :hover / :active */
  --brand-accent:         #5EEAD4;   /* mint — small data accents only */
  --brand-pink-soft:      #FF82C6;   /* hero gradients, decorative */
  --brand-pink-pale:      #FFC2E0;   /* card tints, sticker fills */
  --brand-blush:          #FFE5F1;   /* sunken surface, hover-fill */
  --brand-gold:           #FFE6A1;   /* highlight chip, timer */
  --brand-ink:            #0E0A18;   /* primary text */

  /* ---------- SURFACE / NEUTRAL ---------- */
  --bg:           #FFF6FA;           /* page background (cream-blush) */
  --surface:      #FFFFFF;           /* card surface */
  --surface-2:    #FFE5F1;           /* sunken / muted surface */
  --border:       rgba(14, 10, 24, 0.08);
  --border-strong:rgba(14, 10, 24, 0.16);

  /* ---------- TEXT ---------- */
  --text:         #0E0A18;
  --text-muted:   rgba(14, 10, 24, 0.58);
  --text-soft:    rgba(14, 10, 24, 0.38);
  --text-inverse: #FFF6FA;

  /* ---------- STATE COLORS ---------- */
  --success:      #1FA974;           /* position gained, on-track green */
  --success-bg:   #DCF5EB;
  --warning:      #D98800;           /* timer / amber */
  --warning-bg:   #FFF1D6;
  --danger:       #E11D48;           /* stopped / position lost */
  --danger-bg:    #FFE0E7;
  --info:         #1B7FE3;
  --info-bg:      #DBEDFF;

  /* ---------- TYPOGRAPHY ---------- */
  --f-display: "Bungee", "Impact", system-ui, sans-serif;       /* SHOUTS only */
  --f-ui:      "Space Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;               /* body + UI */
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono",
               Menlo, Consolas, monospace;                       /* live data */
  --f-script:  "Caveat", cursive;                                /* tiny accents */

  /* Font size scale (mobile-first) */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;   /* default body */
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;   /* hero P-number */
  --fs-5xl:   88px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:   1.0;
  --lh-snug:    1.2;
  --lh-base:    1.45;
  --lh-loose:   1.6;

  /* Letter-spacing */
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.18em;   /* monospace labels */
  --ls-widest:   0.32em;   /* kickers */

  /* ---------- RADIUS ---------- */
  --r-xs:   4px;    /* chips, dots */
  --r-sm:   8px;    /* inputs, small buttons */
  --r-md:   12px;   /* buttons */
  --r-lg:   16px;   /* cards */
  --r-xl:   22px;   /* hero cards */
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- SPACING (8-pt base, with 4-pt half-step) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- SHADOW ---------- */
  --shadow-sm:  0 1px 2px rgba(14, 10, 24, 0.06);
  --shadow-md:  0 4px 12px rgba(14, 10, 24, 0.08);
  --shadow-lg:  0 12px 32px rgba(255, 31, 140, 0.18);
  --shadow-pop: 0 4px 0 #E91A8C;     /* sticker / pop drop-shadow */

  /* ---------- LAYOUT ---------- */
  --container-max:   480px;          /* mobile-first ceiling for content */
  --nav-height:      64px;           /* bottom tab bar */
  --header-height:   52px;           /* compact top header */
  --tap-target:      44px;           /* min hit area (a11y) */
}

/* =================================================================
   THEME: ORANGE / #29 (Ligier LMP3 livery)
   Activated when the <html> element carries data-theme="orange".
   Every var below is an override of the :root pink default; rules
   elsewhere in styles.css that reference var(--brand-primary) etc.
   pick up the new values automatically.

   Token names retain their original "pink-soft"/"pink-pale" labels
   for code stability -- they're just *roles* now, not literal colors.
   Naming refactor would touch ~30 selectors for zero functional gain.
   ================================================================= */
[data-theme="orange"] {
  --brand-primary:        #F26F0D;   /* vibrant racing orange (Ligier body, rank-1 extracted) */
  --brand-primary-hover:  #CF4C0A;   /* deeper orange, rank-2 -- natural :hover */
  --brand-accent:         #1E5DB8;   /* cobalt -- Ligier stripe, replaces mint */
  --brand-pink-soft:      #FA8E2D;   /* light orange (rank-5) -- gradients */
  --brand-pink-pale:      #FFC8A0;   /* peach -- card tints */
  --brand-blush:          #FFF1E8;   /* very pale orange -- sunken surface */
  --brand-gold:           #FFE6A1;   /* unchanged -- timer highlight is universal */
  --brand-ink:            #0E0A18;   /* unchanged */

  /* Surface overrides to match the warm-tone bg of the orange theme. */
  --bg:                   #FFF8F2;   /* cream-peach page bg (was cream-blush pink) */
  --surface-2:            #FFF1E8;   /* sunken matches blush */

  /* Hero/sticker drop-shadows take the new primary. */
  --shadow-lg:            0 12px 32px rgba(242, 111, 13, 0.20);
  --shadow-pop:           0 4px 0 #CF4C0A;
}

/* ---------- DARK MODE (optional) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* uncomment to opt in; light is the default */
    /*
    --bg:         #0E0A18;
    --surface:    #1A0F22;
    --surface-2:  #2A0E22;
    --border:     rgba(255, 255, 255, 0.08);
    --text:       #FFF6FA;
    --text-muted: rgba(255, 246, 250, 0.55);
    */
  }
}

/* =================================================================
   BASE / RESET (optional — keep what you need)
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* =================================================================
   UTILITY CLASSES — common patterns
   ================================================================= */
.mono   { font-family: var(--f-mono); letter-spacing: var(--ls-wide); }
.kicker {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tabnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-target);
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 0;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.btn--primary:hover { background: var(--brand-primary-hover); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}