/* ============================================================
   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;
}

/* ============================================================
   CONVENCIÓN DE MICROANIMACIONES (lectura para nuevos archivos CSS)
   ============================================================
   - Duraciones: usar siempre los tokens, nunca valores literales.
       --dur-fast (.15s) → hover/focus de iconos, color change, micro-feedback
       --dur-base (.25s) → cards, botones, paneles, transición estándar
       --dur-slow (.4s)  → drawers, overlays, slide transitions
   - Easing: usar var(--ease) (cubic-bezier(.4,0,.2,1) "material out").
       Evitar 'ease' genérico — el material out se siente más natural.
   - Lift hover (translateY): convención por jerarquía visual.
       translateY(-1px) → ítems sutiles (chips, tags, cards en mobile)
       translateY(-2px) → estándar (botones, cards desktop, links)
       translateY(-3px) → CTAs prominentes (download, primary, hero)
   - Reduced motion: el bloque @media de abajo neutraliza TODAS las
     transiciones/animaciones (incluso las del CSS legacy con valores
     hardcoded) — no hace falta `@media` extra en archivos nuevos.
   ============================================================ */

/* Reduce motion: respetar preferencia del usuario.
   Aplica a tokens (para reglas que los usan) y como override global
   (para reglas legacy con `transition: all 0.3s ease` etc.). */
@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;
    }
}