/**
 * EMO TRANS CHILE - CSS VARIABLES
 * Paleta de colores y variables globales
 */

:root {
    /* ========== COLORES PRIMARIOS ========== */
    --color-blue-primary: #004B93;
    --color-green-primary: #AFCA0B;
    
    /* ========== COMPLEMENTARIOS ========== */
    --color-blue-light: #0A73C9;
    --color-green-dark: #85A300;
    --color-blue-dark: #012E57;
    
    /* ========== ACENTOS ========== */
    --color-accent-orange: #F2A900;
    --color-accent-lime: #D9E021;
    --color-accent-teal: #00A6A6;
    
    /* ========== NEUTROS ========== */
    --color-white: #FFFFFF;
    --color-gray-lightest: #F5F7FA;
    --color-gray-light: #B4BDC9;
    --color-gray-dark: #4A4A4A;
    --color-black: #0C0C0C;
    
    /* ========== GRADIENTES ========== */
    --gradient-primary: linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-light) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-green-primary) 0%, var(--color-green-dark) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(0, 75, 147, 0.95) 0%, rgba(10, 115, 201, 0.9) 100%);
    
    /* ========== SOMBRAS ========== */
    --shadow-sm: 0 2px 8px rgba(0, 75, 147, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 75, 147, 0.12);
    --shadow-lg: 0 10px 40px rgba(0, 75, 147, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 75, 147, 0.2);
    
    /* ========== TIPOGRAFÍA ========== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 42px;
    --font-size-4xl: 52px;
    --font-size-5xl: 64px;
    --font-size-6xl: 72px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* ========== ESPACIADO ========== */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* ========== LAYOUT ========== */
    --container-max-width: 1400px;
    --header-height: 80px;
    --section-padding: 100px;
    --section-padding-mobile: 60px;
    
    /* ========== Z-INDEX ========== */
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}

/* ========== DARK MODE (futuro) ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Configuración para modo oscuro */
    }
}