/* ═══════════════════════════════════════════════════════════
   YouAnime — tokens.css
   Variables globales. Todo lo demás consume de aquí.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Colores de fondo */
    --bg-0: #050912;
    --bg-1: #0a1220;
    --bg-2: #0f1a2e;
    --bg-3: #16233d;

    /* Acentos */
    --cyan:    #22d3ee;
    --teal:    #14b8a6;
    --emerald: #10b981;
    --blue:    #3b82f6;
    --danger:  #ef4444;
    --purple:  #a78bfa;

    /* Textos */
    --txt-1: #f1f5f9;
    --txt-2: #cbd5e1;
    --txt-3: #94a3b8;
    --txt-4: #64748b;

    /* Bordes y cristal */
    --border:         rgba(56, 189, 248, 0.15);
    --border-hover:   rgba(56, 189, 248, 0.35);
    --glass-bg:       rgba(15, 26, 46, 0.55);
    --glass-bg-hover: rgba(20, 35, 60, 0.75);
    --glass-blur:     blur(18px) saturate(160%);

    /* Sombras */
    --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-cyan: 0 8px 24px rgba(34, 211, 238, 0.15);

    /* Radios */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;

    /* Espaciados */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* Tipografías */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-brand:   'Orbitron', system-ui, sans-serif;

    /* Transiciones */
    --tr-fast: 120ms ease;
    --tr-base: 200ms ease;
    --tr-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-h: 64px;
    --page-max: 1280px;

    /* Gradiente principal */
    --gradient: linear-gradient(135deg, var(--cyan) 0%, var(--emerald) 100%);
}