/* ============================================================
   MUERTAZOS RACING — Design Tokens
   Neo-Brutalism Automotor · pit board × cartel mecánico × arcade
   ============================================================ */

:root {
  /* ─── Color · Base ──────────────────────────────────────── */
  --bg-absolute: #0A0A0A;     /* fondo absoluto */
  --bg-elevated: #141414;     /* cards / tiles */
  --bg-inset:    #1F1F1F;     /* filas alternas, inputs */
  --ink:         #FAFAFA;     /* texto principal (zinc-50) */
  --ink-mute:    #A1A1AA;     /* texto medio  (zinc-400) */
  --ink-dim:     #71717A;     /* texto débil  (zinc-500) */
  --ink-ghost:   #52525B;     /* placeholder  (zinc-600) */
  --rule:        #FAFAFA;     /* bordes duros */
  --rule-dim:    #3F3F46;     /* bordes secundarios (zinc-700) */

  /* ─── Color · Acentos por modalidad ─────────────────────── */
  --c-live:        #84CC16;   /* lime-500 · EN VIVO */
  --c-live-deep:   #65A30D;   /* lime-600 */
  --c-records:     #F59E0B;   /* amber-500 · RÉCORDS */
  --c-records-deep:#D97706;   /* amber-600 */
  --c-tourney:     #C1121F;   /* rojo carrera · TORNEO */
  --c-tourney-deep:#9C0E18;
  --c-pits:        #A855F7;   /* violet-500 · PITS */
  --c-pits-deep:   #9333EA;
  --c-podium-gold: #FCD34D;
  --c-podium-silver:#D4D4D8;
  --c-podium-bronze:#B45309;

  /* ─── Sombras offset (sin blur) ─────────────────────────── */
  --sh-sm:   3px 3px 0 0 var(--ink);
  --sh-md:   6px 6px 0 0 var(--ink);
  --sh-lg:   10px 10px 0 0 var(--ink);
  --sh-live: 6px 6px 0 0 var(--c-live);
  --sh-records: 6px 6px 0 0 var(--c-records);
  --sh-tourney: 6px 6px 0 0 var(--c-tourney);
  --sh-pits: 6px 6px 0 0 var(--c-pits);

  /* ─── Tipografía ────────────────────────────────────────── */
  --ff-display: "Archivo Black", "Space Grotesk", "Arial Black", system-ui, sans-serif;
  --ff-grotesque: "Space Grotesk", "Archivo Black", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", "Space Mono", ui-monospace, "Menlo", monospace;

  /* Pesos */
  --w-900: 900;
  --w-700: 700;
  --w-500: 500;
  --w-400: 400;

  /* Escala (display) */
  --t-mono-xl:  clamp(2.5rem, 4vw + 1rem, 5rem);
  --t-display-xl: clamp(4rem, 6vw + 1rem, 8rem);
  --t-display-lg: clamp(2.5rem, 3vw + 1rem, 4rem);
  --t-display-md: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --t-display-sm: 1.5rem;
  --t-body: 0.9375rem;        /* 15px */
  --t-mono-sm: 0.875rem;
  --t-label: 0.6875rem;       /* 11px · eyebrow */
  --t-num-xxl: clamp(3rem, 5vw, 5rem);

  /* Tracking */
  --tr-display: -0.04em;
  --tr-eyebrow: 0.18em;
  --tr-mono:    -0.01em;

  /* ─── Radii (sharp only) ────────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;                 /* máximo permitido */

  /* ─── Spacing ───────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ─── Bordes ────────────────────────────────────────────── */
  --b-1: 1px solid var(--rule);
  --b-2: 2px solid var(--rule);
  --b-3: 3px solid var(--rule);
  --b-dim: 1px solid var(--rule-dim);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-pulse: 1100ms;

  /* ─── Layout ────────────────────────────────────────────── */
  --header-h: 64px;
  --footer-h: 48px;
  --grain-opacity: 0.035;
}

/* ────────────────────────────────────────────────────────────
   Reset & global
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-absolute);
  color: var(--ink);
  font-family: var(--ff-grotesque);
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain overlay — applied to a top-level container */
.mr-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}