/* ==========================================================================
   Sistema de Variables EH Electric (Design Tokens)
   ========================================================================== */
:root {
    /* Paleta de Colores Principal */
    --color-primary: #ff5a00; /* Naranja industrial brillante */
    --color-primary-hover: #e04f00;
    --color-primary-rgb: 255, 90, 0;
    
    /* Escala de Grafito y Oscuros (Backgrounds) */
    --color-dark-base: #111113; /* Fondo principal extremo */
    --color-dark-surface: #1a1a1d; /* Fondo secundario (Cards, Navbar) */
    --color-dark-elevated: #242429; /* Elementos sobre superficies */
    --color-dark-border: #333339;
    
    /* Escala de Grises y Textos */
    --color-text-main: #f1f1f1;
    --color-text-muted: #a1a1aa;
    --color-white: #ffffff;
    
    /* Tipografía */
    --font-heading: 'Rajdhani', sans-serif; /* Dinámica, técnica, cuadrada */
    --font-body: 'Inter', sans-serif; /* Legible, limpia */
    
    /* Espaciados Base (Sistema 8pt) */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    
    /* UI y Efectos */
    --radius-sm: 4px;
    --radius-md: 8px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Glassmorphism */
    --glass-bg: rgba(26, 26, 29, 0.85);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(12px);
    
    /* Cortes Diagonales (Tech/Industrial Look) */
    --clip-button: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    --clip-card: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}