/**
 * Copa Radar - CSS Variables
 *
 * Design Tokens centralizados siguiendo el principio DRY.
 * Todos los valores de diseño están definidos aquí para facilitar
 * el mantenimiento y la consistencia visual.
 */

:root {
  /* ==========================================================================
     COLORES - Paleta Principal
     ========================================================================== */

  /* Colores de marca */
  --color-primary: #E53935;      /* Rojo - CTAs, urgencia, fan zones */
  --color-secondary: #2979FF;    /* Azul - Información, acentos */
  --color-accent: #FFB300;       /* Oro - Highlights, alternativo */

  /* Colores de fondo */
  --color-bg-primary: #080808;   /* Fondo principal */
  --color-bg-secondary: #0f0f0f; /* Fondo secundario */
  --color-bg-tertiary: #161616;  /* Fondo terciario */

  /* Colores de texto */
  --color-text-primary: #f0f0f0;
  --color-text-muted: #666666;
  --color-text-subtle: rgba(240, 240, 240, 0.45);

  /* Colores con transparencia */
  --color-border: rgba(255, 255, 255, 0.04);
  --color-border-hover: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(8, 8, 8, 0.92);

  /* ==========================================================================
     TIPOGRAFÍA
     ========================================================================== */

  /* Familias tipográficas */
  --font-display: 'Bebas Neue', sans-serif;   /* Titulares */
  --font-body: 'DM Sans', sans-serif;         /* Cuerpo */
  --font-mono: 'Space Mono', monospace;       /* Detalles técnicos */

  /* Tamaños de fuente - Escala modular */
  --font-size-xs: 0.55rem;
  --font-size-sm: 0.65rem;
  --font-size-base: 0.82rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 3rem;
  --font-size-3xl: clamp(2.5rem, 4.5vw, 4rem);
  --font-size-hero: clamp(3.5rem, 7vw, 6.5rem);

  /* Pesos tipográficos */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Altura de línea */
  --line-height-tight: 0.9;
  --line-height-snug: 1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;

  /* Espaciado de letras */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-normal: 0.04em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;
  --letter-spacing-widest: 0.18em;

  /* ==========================================================================
     ESPACIADO
     ========================================================================== */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 6rem;

  /* Padding de secciones */
  --section-padding-y: 6rem;
  --section-padding-x: 5rem;
  --section-padding-x-mobile: 1.5rem;

  /* ==========================================================================
     BORDES Y SOMBRAS
     ========================================================================== */

  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 50%;

  --border-width: 1px;

  /* ==========================================================================
     TRANSICIONES
     ========================================================================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */

  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 100;
  --z-modal: 200;
  --z-tooltip: 300;

  /* ==========================================================================
     BREAKPOINTS (para referencia en JS)
     ========================================================================== */

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 960px;
  --breakpoint-xl: 1200px;
}