/* ============================================================
   variables.css — GRAN TORNEO design system
   Referencia: página "próximamente" del colegio
   Negro absoluto · Rojo neón · Cian brillante · Bebas Neue
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@300;400;500;600&display=swap');

/* ==================== DARK (default · único modo real) ==================== */
:root {
    /* Negro puro — como en la referencia */
    --bg-primary:     #000000;
    --bg-secondary:   #08090f;
    --bg-card:        #0c0e1a;
    --bg-card-hover:  #111425;
    --bg-input:       #08090f;
    --bg-glass:       rgba(0,0,0,0.85);

    --border-color:   rgba(255,255,255,0.06);
    --border-accent:  rgba(220,38,38,0.35);
    --border-subtle:  rgba(255,255,255,0.03);

    --text-primary:   #ffffff;
    --text-secondary: #8090a8;
    --text-muted:     #3a4255;
    --text-inverse:   #000000;

    /* ── ROJO NEÓN – acento principal ── */
    --accent:              #e53232;
    --accent-bright:       #ff4444;
    --accent-dark:         #8b1a1a;
    --accent-glow:         rgba(229,50,50,0.16);
    --accent-glow-strong:  rgba(229,50,50,0.35);

    /* ── CIAN – acento de partículas / links ── */
    --accent2:        #00d4ff;
    --accent2-dark:   #0099cc;
    --accent2-glow:   rgba(0,212,255,0.14);

    /* ── DORADO – finales / campeón ── */
    --gold:        #f5a623;
    --gold-bright: #ffc043;
    --gold-glow:   rgba(245,166,35,0.22);

    /* Estados */
    --color-win:  #22c55e;
    --color-lose: #ef4444;
    --color-draw: #4b5568;
    --color-live: #e53232;

    /* Tabla posiciones */
    --pos-clasificado:        rgba(34,197,94,0.07);
    --pos-eliminado:          rgba(239,68,68,0.07);
    --pos-clasificado-border: #22c55e;
    --pos-eliminado-border:   #ef4444;

    /* ── Gradientes ── */
    --gradient-accent:    linear-gradient(135deg, #e53232 0%, #8b1a1a 100%);
    --gradient-hero:      radial-gradient(ellipse at 50% 40%, rgba(229,50,50,0.18) 0%, rgba(0,0,0,0) 65%);
    --gradient-card:      linear-gradient(160deg, #0c0e1a 0%, #08090f 100%);
    --gradient-stripe:    repeating-linear-gradient(-55deg,
                            transparent, transparent 5px,
                            rgba(255,255,255,0.012) 5px, rgba(255,255,255,0.012) 10px);

    /* ── Fuentes ── */
    --font-display: 'Bebas Neue', sans-serif;
    --font-ui:      'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;

    /* Escala */
    --text-xs:   0.6875rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.0625rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.75rem;
    --text-5xl:  3.75rem;
    --text-6xl:  5.5rem;

    /* Espaciado */
    --space-1:  .25rem;  --space-2:  .5rem;   --space-3:  .75rem;
    --space-4:  1rem;    --space-5:  1.25rem;  --space-6:  1.5rem;
    --space-8:  2rem;    --space-10: 2.5rem;   --space-12: 3rem;
    --space-14: 3.5rem;  --space-16: 4rem;     --space-20: 5rem;

    /* Radios — angulares */
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.7);
    --shadow-md:     0 6px 24px rgba(0,0,0,0.75);
    --shadow-lg:     0 16px 48px rgba(0,0,0,0.85);
    --shadow-red:    0 0 40px rgba(229,50,50,0.30), 0 0 80px rgba(229,50,50,0.12);
    --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.6);
    --shadow-accent: 0 0 24px rgba(229,50,50,0.28);

    /* Transiciones */
    --t-fast:   all .14s cubic-bezier(.4,0,.2,1);
    --t-normal: all .24s cubic-bezier(.4,0,.2,1);
    --t-slow:   all .42s cubic-bezier(.4,0,.2,1);
    --t-bounce: all .35s cubic-bezier(.34,1.56,.64,1);
    /* aliases */
    --transition-fast:   var(--t-fast);
    --transition-normal: var(--t-normal);
    --transition-slow:   var(--t-slow);
    --transition-bounce: var(--t-bounce);

    --navbar-height: 60px;
    --navbar-bg:     rgba(0,0,0,0.95);
}

/* ==================== LIGHT ==================== */
[data-theme="light"] {
    --bg-primary:    #f0f1f5;
    --bg-secondary:  #e4e6ed;
    --bg-card:       #ffffff;
    --bg-card-hover: #f7f8fc;
    --bg-input:      #eceef5;
    --bg-glass:      rgba(255,255,255,0.92);

    --border-color:  rgba(0,0,0,0.08);
    --border-accent: rgba(229,50,50,0.20);
    --border-subtle: rgba(0,0,0,0.04);

    --text-primary:   #06070d;
    --text-secondary: #4b5563;
    --text-muted:     #9ca3af;
    --text-inverse:   #ffffff;

    --accent:             #c41e1e;
    --accent-bright:      #e53232;
    --accent-dark:        #921414;
    --accent-glow:        rgba(196,30,30,0.10);
    --accent-glow-strong: rgba(196,30,30,0.20);

    --accent2:      #0080cc;
    --accent2-dark: #006bb3;
    --accent2-glow: rgba(0,128,204,0.10);

    --gradient-hero: radial-gradient(ellipse at 50% 30%, rgba(196,30,30,0.07) 0%, transparent 60%);
    --gradient-stripe: repeating-linear-gradient(-55deg, transparent, transparent 5px, rgba(0,0,0,0.02) 5px, rgba(0,0,0,0.02) 10px);

    --shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
    --shadow-md:     0 6px 24px rgba(0,0,0,0.09);
    --shadow-lg:     0 16px 48px rgba(0,0,0,0.12);
    --shadow-red:    0 0 30px rgba(196,30,30,0.10);
    --shadow-card:   0 2px 12px rgba(0,0,0,0.07);
    --shadow-accent: 0 0 20px rgba(196,30,30,0.12);

    --navbar-bg: rgba(240,241,245,0.97);
    --pos-clasificado: rgba(22,163,74,0.07);
    --pos-eliminado:   rgba(239,68,68,0.06);
}