/* ==========================================================================
   GO-LATIN 2.0 · CYBER LIQUID GLASS DESIGN SYSTEM
   tokens.css — colores, tipografía, espaciado, radios, sombras, z-index.

   Los tokens son variables con prefijo --gl-* / --glass-* en :root: no chocan con
   las variables existentes (--fc-*) ni afectan a F1. Los estilos que las consumen
   (glass.css, components.css, motion.css) solo aplican dentro de [data-gl="fc"].
   ========================================================================== */

:root {
    /* ---------- Marca (identidad actual, sin cambios) ---------- */
    --gl-cyan: #00e5ff;
    --gl-cyan-rgb: 0, 229, 255;
    --gl-magenta: #ff00ff;
    --gl-magenta-rgb: 255, 0, 255;
    --gl-yellow: #fcee0a;
    --gl-yellow-rgb: 252, 238, 10;
    --gl-green: #00ff88;
    --gl-green-rgb: 0, 255, 136;

    /* ---------- Estados deportivos ---------- */
    --gl-live: #ff2e63;
    --gl-live-rgb: 255, 46, 99;
    --gl-success: #1dffa0;
    --gl-success-rgb: 29, 255, 160;
    --gl-warning: var(--gl-yellow);
    --gl-warning-rgb: var(--gl-yellow-rgb);
    --gl-danger: #ff4d6d;
    --gl-danger-rgb: 255, 77, 109;
    --gl-info: var(--gl-cyan);
    --gl-info-rgb: var(--gl-cyan-rgb);

    /* Podio del leaderboard */
    --gl-gold: #ffd54a;
    --gl-gold-rgb: 255, 213, 74;
    --gl-silver: #c9d3e6;
    --gl-silver-rgb: 201, 211, 230;
    --gl-bronze: #e39a5b;
    --gl-bronze-rgb: 227, 154, 91;

    /* ---------- Fondos (cyber arena) ---------- */
    --gl-bg-primary: #05070b;
    --gl-bg-secondary: #0a0f19;
    --gl-bg-elevated: #0f1626;
    --gl-bg-inset: rgba(0, 0, 0, 0.35);

    /* ---------- Texto ---------- */
    --gl-text: #eef3ff;
    --gl-text-secondary: #b7c2d9;
    --gl-text-muted: #8791a8;
    --gl-text-dim: #7d86a3; /* antes #5b6480 (3.1:1); ahora 5.0:1 sobre --gl-bg-elevated (WCAG AA) */
    --gl-text-on-accent: #04060a;

    /* ---------- Bordes ---------- */
    --gl-border: rgba(255, 255, 255, 0.08);
    --gl-border-strong: rgba(255, 255, 255, 0.16);
    --gl-border-accent: rgba(var(--gl-cyan-rgb), 0.35);

    /* ---------- Vidrio (liquid glass) ---------- */
    --glass-background: rgba(14, 20, 34, 0.55);
    --glass-background-strong: rgba(10, 14, 24, 0.82);
    --glass-background-solid: #0b111d;
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-glow: rgba(var(--gl-cyan-rgb), 0.28);
    --glass-highlight: rgba(255, 255, 255, 0.07);
    --glass-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --glass-blur: 16px;
    --glass-saturate: 140%;

    /* ---------- Tipografía ---------- */
    --gl-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;   /* títulos gaming: 800-900, itálica, mayúsculas */
    --gl-font-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --gl-font-stats: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', sans-serif; /* marcadores y números */

    --gl-text-xs: 0.68rem;
    --gl-text-sm: 0.8rem;
    --gl-text-md: 0.92rem;
    --gl-text-lg: 1.1rem;
    --gl-text-xl: 1.4rem;
    --gl-text-2xl: clamp(1.6rem, 2.6vw, 2.1rem);
    --gl-text-3xl: clamp(2rem, 4vw, 3.2rem);
    --gl-text-hero: clamp(2.4rem, 6vw, 4.6rem);

    --gl-weight-regular: 400;
    --gl-weight-semibold: 600;
    --gl-weight-bold: 700;
    --gl-weight-heavy: 800;
    --gl-weight-black: 900;

    --gl-tracking-tight: -0.5px;
    --gl-tracking-wide: 1px;
    --gl-tracking-kicker: 2px;

    /* ---------- Espaciado (base 4px) ---------- */
    --gl-space-1: 0.25rem;
    --gl-space-2: 0.5rem;
    --gl-space-3: 0.75rem;
    --gl-space-4: 1rem;
    --gl-space-5: 1.25rem;
    --gl-space-6: 1.5rem;
    --gl-space-8: 2rem;
    --gl-space-10: 2.5rem;
    --gl-space-12: 3rem;

    /* ---------- Radios ---------- */
    --gl-radius-xs: 6px;
    --gl-radius-sm: 8px;
    --gl-radius-md: 12px;
    --gl-radius-lg: 16px;
    --gl-radius-xl: 22px;
    --gl-radius-pill: 999px;

    /* ---------- Sombras y glow ---------- */
    --gl-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --gl-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.45);
    --gl-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    --gl-glow-cyan: 0 0 22px rgba(var(--gl-cyan-rgb), 0.28);
    --gl-glow-magenta: 0 0 22px rgba(var(--gl-magenta-rgb), 0.28);
    --gl-glow-yellow: 0 0 22px rgba(var(--gl-yellow-rgb), 0.28);
    --gl-glow-live: 0 0 18px rgba(var(--gl-live-rgb), 0.45);

    /* ---------- Movimiento ---------- */
    --gl-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --gl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gl-duration-fast: 150ms;
    --gl-duration-base: 240ms;
    --gl-duration-slow: 420ms;

    /* ---------- Capas: contenido < menús < paneles < modales < avisos ---------- */
    --gx-z-content: 1;
    --gx-z-fixed-menu: 1060;
    --gx-z-floating-panel: 1100;
    --gx-z-modal: 1200;
    --gx-z-toast: 1300;
    --gl-z-base: 1;
    --gl-z-raised: 10;
    --gl-z-dropdown: 1000;
    --gl-z-sticky: 1020;
    --gl-z-nav: var(--gx-z-fixed-menu);
    --gl-z-overlay: var(--gx-z-floating-panel);
    --gl-z-modal: var(--gx-z-modal);
    --gl-z-toast: var(--gx-z-toast);

    /* ---------- Breakpoints (referencia; las media queries no aceptan variables) ----------
       --gl-bp-mobile:   390px / 430px  → @media (max-width: 430px)
       --gl-bp-tablet:   1024px         → @media (max-width: 1024px)
       --gl-bp-laptop:   1440px         → @media (max-width: 1440px)
       --gl-bp-desktop:  1920px         → @media (min-width: 1441px)
    */
    --gl-bp-mobile: 430px;
    --gl-bp-tablet: 1024px;
    --gl-bp-laptop: 1440px;
    --gl-bp-desktop: 1920px;

    /* ---------- Contenedor ---------- */
    --gl-container: 1600px;
    --gl-gutter: clamp(0.75rem, 2vw, 1.75rem);

    /* Shared dark defaults; the route-specific Host theme overrides these. */
    --gl-surface-reflection: rgba(255,255,255,.05);
    --gl-surface-reflection-soft: rgba(255,255,255,.03);
    --gl-surface-reflection-strong: rgba(255,255,255,.1);
    --gl-card-background: rgba(14,20,34,.72);
    --gl-shell-background: rgba(6,9,15,.8);
    --gl-ticker-background: rgba(8,12,20,.92);
    --gl-ticker-scrim: rgba(0,0,0,.25);
    --gl-particle-neutral-strong: rgba(255,255,255,.45);
    --gl-particle-neutral-soft: rgba(255,255,255,.35);
    --gl-shell-shadow: 0 10px 30px rgba(0,0,0,.35);
    --gl-ticker-shadow: 0 12px 28px rgba(0,0,0,.45);
    --gl-sheet-shadow: 0 -24px 60px rgba(0,0,0,.7);
    --gl-nav-hover: rgba(255,255,255,.05);
    --gl-button-on-primary: #fff;
}

/* Experiencia Host: mismos componentes FC con superficies grafito y acento cobre.
   Se conservan alias --gl-host-gold para hojas existentes; sus valores son cobre. */
html:root[data-gl-theme="experiencia-host"],
html:root[data-gl-theme="experiencia-host"] [data-gl="fc"] {
    --gl-host-copper: #D99062;
    --gl-host-copper-rgb: 217, 144, 98;
    --gl-host-copper-light: #E8AD89;
    --gl-host-copper-dark: #A95E3E;
    --gl-host-copper-line: rgba(217, 144, 98, .36);
    --gl-host-gold: var(--gl-host-copper);
    --gl-host-gold-rgb: var(--gl-host-copper-rgb);
    --gl-host-gold-light: var(--gl-host-copper-light);
    --gl-host-gold-dark: var(--gl-host-copper-dark);
    --gl-host-gold-line: var(--gl-host-copper-line);
    --gl-host-hover: #293039;
    --gx-cyan: var(--gl-host-copper);
    --gx-gold: var(--gl-host-copper);
    --gx-line: rgba(217, 144, 98, .28);
    --theme-background: #101216;
    --theme-background-rgb: 16, 18, 22;
    --theme-surface: #1D2229;
    --theme-surface-rgb: 29, 34, 41;
    --theme-surface-2: #252B33;
    --theme-surface-2-rgb: 37, 43, 51;
    --theme-accent: var(--gl-host-copper);
    --theme-accent-rgb: var(--gl-host-copper-rgb);
    --theme-secondary: #A95E3E;
    --theme-secondary-rgb: 169, 94, 62;
    --gl-violet: #B77758;
    --theme-text: #F4F1EB;
    --theme-text-rgb: 244, 241, 235;
    --gl-text: #F4F1EB;
    --gl-text-secondary: #C8C2BA;
    --gl-text-muted: #B6ADA5;
    --gl-text-dim: #A99F96;
    --gl-border: rgba(198, 177, 164, .24);
    --gl-border-strong: rgba(217, 144, 98, .38);
    --gl-border-accent: rgba(217, 144, 98, .62);
    --gl-nav-hover: rgba(217, 144, 98, .12);
    --gl-success: #9CD9B1;
    --gl-success-rgb: 156, 217, 177;
    --gl-warning: #F1C08F;
    --gl-warning-rgb: 241, 192, 143;
    --gl-danger: #F6B6BE;
    --gl-danger-rgb: 246, 182, 190;
    --gl-text-on-accent: #17191D;
    --gl-button-on-primary: #17191D;
    --fc-cyan: var(--gl-host-copper);
    --fc-cyan-rgb: var(--gl-host-copper-rgb);
    --gx-glass-background: linear-gradient(160deg, rgba(33,38,45,.8), rgba(16,18,22,.76));
    --gx-glass-border-color: rgba(217,144,98,.22);
    --gx-surface-background: linear-gradient(170deg, rgba(29,34,41,.97), rgba(19,22,27,.98));
    --gx-surface-border-color: rgba(217,144,98,.25);
    --gx-surface-overlay-background: linear-gradient(170deg, #252B33, #101216 70%);
    --glass-background: rgba(29, 34, 41, .78);
    --glass-background-strong: rgba(25, 29, 35, .95);
    --glass-background-solid: #1D2229;
    --glass-border: rgba(217, 144, 98, .23);
    --glass-border-glow: rgba(217, 144, 98, .32);
    --glass-shadow: 0 22px 58px rgba(0,0,0,.4), 0 0 24px rgba(217,144,98,.06);
    --gl-theme-card-glow: rgba(217,144,98,.12);
    --astro-nebula-1: rgba(217,144,98,.22);
    --host-league-card-start: #252B33;
    --host-league-card-end: #171B21;
    --host-league-card-text: #F4F1EB;
    --host-league-card-muted: #C8C2BA;
    --host-league-card-border: var(--gl-host-copper-line);
    --host-league-card-divider: rgba(217,144,98,.22);
    --host-league-card-shadow: 0 16px 32px rgba(0,0,0,.38), 0 0 0 1px rgba(217,144,98,.12);
    --host-league-card-shadow-hover: 0 20px 38px rgba(0,0,0,.48), 0 0 20px rgba(217,144,98,.12);
    --host-league-status-live-bg: #E2F7EA;
    --host-league-status-live-border: #B3E6CD;
    --host-league-status-live-text: #115934;
    --host-league-status-finished-bg: #E4E4E6;
    --host-league-status-finished-border: #B8BDC2;
    --host-league-status-finished-text: #30363D;
    --host-league-status-flash-bg: #FCE7D8;
    --host-league-status-flash-border: #E8AD89;
    --host-league-status-flash-text: #66331D;
    --host-league-status-cup-bg: #EEE8FA;
    --host-league-status-cup-border: #D2C6F0;
    --host-league-status-cup-text: #3A2A78;
    --host-league-danger-bg: #FFE8EE;
    --host-league-danger-border: #FFD2DC;
    --host-league-danger-text: #8F1930;
    /* Fondo provisto para el tema grafito y cobre; la variante azul define su propio arte. */
    --gl-experience-art: url('/images/home-v2/Explosión de cobre sobre grafito.png');
    --gl-bg-primary: var(--theme-background);
    --gl-bg-secondary: rgba(23, 27, 33, .9);
    --gl-bg-elevated: var(--theme-surface);
    --gl-bg-inset: rgba(217, 144, 98, .07);
    --gl-cyan: var(--gl-host-copper);
    --gl-cyan-rgb: var(--gl-host-copper-rgb);
    --gl-magenta: #BC8064;
    --gl-magenta-rgb: 188, 128, 100;
    --gl-yellow: #E8AD89;
    --gl-yellow-rgb: 232, 173, 137;
    --gl-gold: #E8AD89;
    --gl-gold-rgb: 232, 173, 137;
    --gl-card-background: rgba(29, 34, 41, .9);
    --gl-shell-background: rgba(16, 18, 22, .96);
    --gl-ticker-background: rgba(22, 25, 30, .96);
    --gl-glow-cyan: 0 0 22px rgba(217,144,98,.18);
    --gl-glow-magenta: 0 0 22px rgba(188,128,100,.14);
}