/* ========================================
   DESIGN TOKENS — BACKYARD ULTRA YAMPARA
   Inspirado en UTMB / Spartan / Ironman
   ======================================== */

:root {
  /* Color base — oscuro premium */
  --c-black: #050507;
  --c-night: #0a0b0e;
  --c-graphite: #121319;
  --c-charcoal: #1c1e26;
  --c-steel: #2a2d38;
  --c-fog: #4a4e5c;
  --c-mist: #8b909e;
  --c-snow: #e7e9ee;
  --c-white: #ffffff;

  /* Acentos — energía atlética */
  --c-red: #e11d28;
  --c-red-deep: #b8141a;
  --c-red-glow: rgba(225, 29, 40, 0.45);
  --c-gold: #f0b94a;
  --c-gold-deep: #b97a18;
  --c-gold-glow: rgba(240, 185, 74, 0.45);
  --c-neon: #00f0c8;

  /* Estados */
  --c-success: #2f8a45;
  --c-warn: #f0b94a;
  --c-error: #e11d28;

  /* Glass / overlays */
  --glass-bg: rgba(18, 19, 25, 0.55);
  --glass-bg-strong: rgba(10, 11, 14, 0.78);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(240, 185, 74, 0.35);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --glass-shadow-ultra: 0 20px 60px rgba(225, 29, 40, 0.25), 0 2px 16px rgba(240, 185, 74, 0.35);

  /* Tipografía */
  --f-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --f-body: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Tamaños fluidos */
  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem);
  --fs-xl: clamp(1.7rem, 1.5rem + 1.2vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.8rem + 2.5vw, 3.6rem);
  --fs-3xl: clamp(2.8rem, 2.2rem + 4vw, 5.6rem);
  --fs-hero: clamp(3rem, 2rem + 6vw, 8rem);

  /* Espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Bordes */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(16px, 4vw, 48px);
  --nav-h: 72px;

  /* Animación */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;

  /* z-index */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 150;
  --z-loader: 200;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
  }
}