/**
 * variables.css
 * ------------------------------------------------------------------
 * Sistema de diseño (tokens) de Football Bracket Live.
 *
 * Paleta — inspirada en gráficos de transmisión deportiva (marcadores,
 * pantallas LED de estadio): fondo casi-negro azulado, acentos cian y
 * violeta eléctrico para estados "en vivo" e interacción, y dorado
 * reservado exclusivamente para el campeón.
 * ------------------------------------------------------------------
 */

:root {
  /* ---- Color: modo oscuro (por defecto) -------------------------- */
  --color-bg: #0B0E14;
  --color-bg-elevated: #10141F;
  --color-surface: rgba(22, 27, 40, 0.62);
  --color-surface-solid: #161B28;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text-primary: #F5F7FA;
  --color-text-secondary: #9AA3B8;
  --color-text-muted: #626B80;

  --color-accent-cyan: #00D4FF;
  --color-accent-violet: #7C5CFF;
  --color-accent-gold: #FFC857;
  --color-accent-green: #34D399;
  --color-accent-red: #FF4D6D;

  --gradient-primary: linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-violet) 100%);
  --gradient-gold: linear-gradient(135deg, #FFE9A8 0%, var(--color-accent-gold) 55%, #C9871F 100%);
  --gradient-bg-radial: radial-gradient(circle at 20% 0%, rgba(124, 92, 255, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0, 212, 255, 0.12) 0%, transparent 40%);

  /* ---- Tipografía --------------------------------------------------- */
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.95rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.6rem;

  /* ---- Espaciado / radios / sombras ---------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 24px rgba(0, 212, 255, 0.35);
  --shadow-glow-gold: 0 0 30px rgba(255, 200, 87, 0.45);

  --blur-panel: 18px;

  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  --card-width: 268px;
  --column-gap: 88px;

  --z-bg: 0;
  --z-bracket: 10;
  --z-controls: 20;
  --z-panel: 30;
  --z-toast: 40;
  --z-overlay: 50;
}

/* ---- Modo claro ------------------------------------------------------ */
[data-theme="light"] {
  --color-bg: #EEF1F6;
  --color-bg-elevated: #FFFFFF;
  --color-surface: rgba(255, 255, 255, 0.72);
  --color-surface-solid: #FFFFFF;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.16);

  --color-text-primary: #131826;
  --color-text-secondary: #4B5468;
  --color-text-muted: #808A9E;

  --gradient-bg-radial: radial-gradient(circle at 20% 0%, rgba(124, 92, 255, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0, 212, 255, 0.10) 0%, transparent 40%);

  --shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.12);
  --shadow-strong: 0 20px 60px rgba(15, 23, 42, 0.18);
}