/* * RAIZ CROMÁTICA - Design Tokens V1.0
 * Fuente de verdad para el sistema visual
 */

:root {
    /* --- PALETA DE COLORES --- */
    --bg-primary: #0F0F0F;    /* Fondo base profundo */
    --bg-surface: #1A1A1A;    /* Superficie de cards y menús */
    --bg-accent: #252525;     /* Elementos secundarios */
    
    --text-main: #FFFFFF;     /* Texto principal */
    --text-muted: #A0A0A0;    /* Texto secundario / leyendas */
    --text-dim: #666666;      /* Placeholders */
    
    --brand-gold: #D4AF37;    /* Acento premium */
    --brand-gold-glow: rgba(212, 175, 55, 0.3);
    
    --system-error: #FF4D4D;
    --system-success: #00E676;

    /* --- TIPOGRAFÍA --- */
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Escala de tamaños */
    --fs-xs: 0.75rem;   /* 12px */
    --fs-sm: 0.875rem;  /* 14px */
    --fs-md: 1rem;      /* 16px */
    --fs-lg: 1.25rem;   /* 20px */
    --fs-xl: 1.5rem;    /* 24px */
    --fs-2xl: 2rem;     /* 32px */
    --fs-hero: 3.5rem;  /* 56px - Solo para Desktop */

    /* --- ESPACIADO (Escala 4px) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* --- RADIOS (Bordes redondeados) --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* --- ANIMACIONES --- */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* --- SOMBRAS (Para dar profundidad sobre el negro) --- */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 0 15px var(--brand-gold-glow);
}

/* Reset básico para asegurar consistencia */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}