/* =========================
   CSS VARIABLES - GLOBAL
   Archivo único con todas las variables del proyecto
   ========================= */

:root {
    /* === COLORES PRIMARIOS === */
    --color-primary-blue: #2477DC;
    --color-secondary-blue: #1B5DAF;
    --color-accent-blue: #5DA1F1;

    --color-primary-orange: #F97316;
    --color-secondary-orange: #EA580C;
    --color-accent-orange: #FF6B35;

    --color-primary-green: #89B62E;
    --color-secondary-green: #A8D142;
    
    /* === COLORES NEUTROS === */
    --color-dark: #1E293B;
    --color-light: #F3F4F6;
    --color-white: #FFFFFF;
    
    /* === COLORES DE ESTADO === */
    --color-error: #E74C3C;
    --color-success: #27AE60;
    --color-warning: #F39C12;
    --color-info: #3498DB;
    
    /* === TIPOGRAFÍA === */
    --font-heading: 'Poppins', sans-serif;
    --font-subheading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* === SOMBRAS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* === TRANSICIONES === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* === SPACING === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
}