/* ============================================================
   VnY SITE TOKENS — variables centrales del frontend público.
   Cargado ANTES de site-ui.css. No define reglas, sólo tokens.
   ============================================================ */

:root {
    /* ---------- Color ---------- */
    --site-bg:           #000;
    --site-bg-2:         #060709;
    --site-surface:      #0c0c0c;
    --site-surface-2:    #111;
    --site-surface-3:    #1a1a1a;

    --site-border:       rgba(255,255,255,.08);
    --site-border-2:     rgba(255,255,255,.14);
    --site-border-3:     rgba(255,255,255,.22);

    --site-text:         #e6e7ee;
    --site-text-2:       rgba(255,255,255,.75);
    --site-text-muted:   rgba(255,255,255,.55);
    --site-text-faded:   rgba(255,255,255,.35);

    --site-accent:       #00d9ff;         /* azul electrico (igual que admin) */
    --site-accent-rgb:   0, 217, 255;
    --site-accent-2:     #5ce8ff;
    --site-accent-text:  #000;

    --site-violet:       #a29bfe;
    --site-violet-rgb:   162, 155, 254;
    --site-green:        #2ecc71;
    --site-yellow:       #ffd93d;
    --site-orange:       #f39c12;
    --site-red:          #ff6b6b;
    --site-pink:         #ff9ff3;

    /* Soft/mid/strong helpers del accent (uso en bordes, hovers, tintes) */
    --site-accent-soft:    rgba(0,217,255,.14);
    --site-accent-mid:     rgba(0,217,255,.38);
    --site-accent-strong:  rgba(0,217,255,.55);

    /* ---------- Spacing ---------- */
    --space-xxs: 2px;
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* ---------- Radii ---------- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* ---------- Type ---------- */
    --font-display: 'Orbitron', sans-serif;
    --font-body:    'Inter', sans-serif;
    --fs-xs:  11px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  20px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
    --fs-4xl: 44px;

    --fw-normal: 400;
    --fw-bold:   700;

    /* ---------- Effects ---------- */
    --glow-accent:    0 0 10px rgba(var(--site-accent-rgb), .25);
    --glow-accent-lg: 0 0 20px rgba(var(--site-accent-rgb), .35);
    --shadow-sm:      0 2px 8px rgba(0,0,0,.3);
    --shadow-md:      0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:      0 12px 32px rgba(0,0,0,.5);

    /* ---------- Layout ---------- */
    --site-header-h:        72px;           /* alto del header sticky */
    --site-header-h-mobile: 60px;
    --site-content-max:     1200px;
    --site-content-narrow:  800px;
    --z-header:    100;
    --z-overlay:   500;
    --z-modal:     1000;
    --z-toast:     2000;

    /* ---------- Motion ---------- */
    --ease:        cubic-bezier(.4, 0, .2, 1);
    --dur-fast:    .15s;
    --dur-base:    .25s;
    --dur-slow:    .4s;
}

/* Reduce motion: respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: .01s;
        --dur-base: .01s;
        --dur-slow: .01s;
    }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}