/* ============================================================
   HYPERFORZA — DESIGN TOKENS
   Single source of truth for the entire app.
   Importado ANTES de cualquier otro CSS en cada HTML.
   ============================================================ */

:root {
    /* ── BRAND ───────────────────────────────────────────────── */
    --brand: #ff5b14;            /* naranja Hyperforza */
    --brand-hover: #ff7a3d;
    --brand-deep: #c8410a;       /* para sombras/profundidad */
    --brand-soft: rgba(255, 91, 20, 0.6);
    --brand-glow: rgba(255, 91, 20, 0.35);
    --brand-mid: rgba(255, 91, 20, 0.5);
    --brand-subtle: rgba(255, 91, 20, 0.08);
    --brand-ghost: rgba(255, 91, 20, 0.04);

    /* ── SURFACES ────────────────────────────────────────────── */
    --bg: #0a0a0c;               /* fondo principal */
    --bg-deep: #050507;          /* hero / superficies extra oscuras */
    --bg-elev: #14141a;          /* cards, paneles elevados */
    --bg-elev-2: #1c1c24;        /* nivel 2 (modales, dropdowns) */

    /* ── TEXT ────────────────────────────────────────────────── */
    --text: #e8e8ec;             /* texto principal */
    --text-strong: #ffffff;      /* énfasis máximo */
    --text-muted: #a0a0ab;       /* secundario */
    --text-subtle: #6b6b78;      /* meta, captions */
    --text-on-brand: #ffffff;    /* texto sobre fondo brand */

    /* ── BORDERS ─────────────────────────────────────────────── */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-brand: rgba(255, 91, 20, 0.4);

    /* ── SEMANTIC ────────────────────────────────────────────── */
    --success: #5bd99c;
    --success-soft: rgba(91, 217, 156, 0.15);
    --warn: #ffc25b;
    --warn-soft: rgba(255, 194, 91, 0.15);
    --danger: #ff5b6e;
    --danger-soft: rgba(255, 91, 110, 0.15);

    /* ── ALPHA WHITE (para overlays / sutilezas) ─────────────── */
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-02: rgba(255, 255, 255, 0.02);

    /* ── TYPOGRAPHY ──────────────────────────────────────────── */
    --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale (rem) */
    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.875rem;  /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md:   1.125rem;  /* 18 */
    --fs-lg:   1.25rem;   /* 20 */
    --fs-xl:   1.5rem;    /* 24 */
    --fs-2xl:  2rem;      /* 32 */
    --fs-3xl:  2.5rem;    /* 40 */
    --fs-4xl:  3.5rem;    /* 56 */
    --fs-5xl:  5rem;      /* 80 — hero display */

    /* Line heights */
    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.7;

    /* Letter spacing */
    --ls-tight:  -0.02em;
    --ls-normal: 0;
    --ls-wide:   0.04em;
    --ls-wider:  0.08em;

    /* ── SPACING (4px scale) ─────────────────────────────────── */
    --space-1:  0.25rem;  /* 4 */
    --space-2:  0.5rem;   /* 8 */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 */
    --space-5:  1.5rem;   /* 24 */
    --space-6:  2rem;     /* 32 */
    --space-7:  3rem;     /* 48 */
    --space-8:  4rem;     /* 64 */
    --space-9:  6rem;     /* 96 */
    --space-10: 8rem;     /* 128 */

    /* ── RADIUS ──────────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* ── SHADOWS ─────────────────────────────────────────────── */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow:  0 0 24px rgba(255, 91, 20, 0.35);
    --shadow-glow-strong: 0 0 32px rgba(255, 91, 20, 0.5), 0 8px 24px rgba(255, 91, 20, 0.2);

    /* ── MOTION ──────────────────────────────────────────────── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:     150ms;
    --dur-base:     250ms;
    --dur-slow:     400ms;

    /* ── LAYOUT ──────────────────────────────────────────────── */
    --container-max: 1200px;
    --container-narrow: 720px;
    --container-text: 640px;
    --nav-h: 64px;

    /* ── Z-INDEX SCALE ───────────────────────────────────────── */
    --z-base: 1;
    --z-elev: 10;
    --z-nav:  50;
    --z-modal: 100;
    --z-toast: 200;

    /* ════════════════════════════════════════════════════════
       LEGACY ALIASES — mantienen funcionando CSS viejo durante
       la migración. NO USAR en código nuevo. Eliminar cuando
       todo el código haya sido portado a los tokens de arriba.
       ════════════════════════════════════════════════════════ */
    --red:        var(--brand);
    --red-dark:   var(--brand-deep);
    --red-glow:   var(--brand-glow);
    --red-mid:    var(--brand-mid);
    --red-soft:   var(--brand-soft);
    --red-subtle: var(--brand-subtle);
    --bg-card:    var(--bg-elev);
    --white:      var(--text-strong);
    --text-secondary: var(--text-muted);
    --border-color:   var(--border);
}

/* Soporta usuarios con preferencia de motion reducida */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}