/* ============================================================
   VARIABLES GLOBALES — Design Tokens
   ------------------------------------------------------------
   Todas las variables del sistema de diseño centralizadas.
   Modificar aquí afecta todo el sitio automáticamente.
   ============================================================ */

:root {
    /* ---------- COLORES — Paleta base ---------- */
    --bg-base: #0a0a0c;
    --bg-elevated: #141318;
    --bg-card: #1b1a20;

    --gold: #c9962c;
    --gold-bright: #f0c868;
    --silver: #b8bcc2;

    --text-primary: #f5f1e8;
    --text-muted: #b0ab9c;

    --line: rgba(245, 241, 232, 0.12);

    /* ---------- COLORES — Estados semánticos ---------- */
    --danger: #e85a56;
    --success: #5fd393;
    --warning: #e0a33a;
    --info: #5a9ee8;

    /* ---------- COLORES — WhatsApp ---------- */
    --whatsapp: #25d366;
    --whatsapp-dark: #08210f;
    --whatsapp-bright: #3fe27f;

    /* ---------- LAYOUT ---------- */
    --maxw: 1180px;
    --header-height: 70px;
    --radius: 2px;
    --radius-lg: 8px;

    /* ---------- TIPOGRAFÍA ---------- */
    --font-display: 'Anton', system-ui, sans-serif;
    --font-body: 'Work Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ---------- ESPACIADO (escala 4px) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- TRANSICIONES ---------- */
    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ---------- SOMBRAS ---------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

    /* ---------- Z-INDEX ---------- */
    --z-topbar: 50;
    --z-header: 100;
    --z-dropdown: 150;
    --z-whatsapp: 200;
    --z-modal: 300;
    --z-toast: 400;
}
