/* ============================================
   VARIABLES GLOBALES - CSS ROOT
   ============================================ */

:root {
    /* Colores principales */
    --primary: #FF7F11;
    --primary-rgb: 255, 127, 17;
    --secondary: #03045E;
    --secondary-rgb: 3, 4, 94;
    --accent: #B8FB3C;
    --accent-rgb: 184, 251, 60;
    --text: #FFFFFF;
    
    /* Colores de fondo */
    --blue-light: #0A0B6E;
    --blue-medium: #121380;
    --blue-dark: #05077A;
    --green: #2A9D8F;
    
    /* Cards */
    --card-blue: rgba(30, 60, 180, 0.45);
    --card-purple: rgba(120, 40, 200, 0.45);
    --card-teal: rgba(30, 150, 150, 0.45);
    --card-amber: rgba(220, 120, 20, 0.45);
    --card-rose: rgba(200, 50, 80, 0.45);
    --card-emerald: rgba(20, 150, 100, 0.45);
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.45);
    
    /* Transiciones */
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-slow: all 0.5s ease;
    
    /* Bordes */
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--primary), #FF9E44);
    --gradient-accent: linear-gradient(135deg, var(--accent), #C8FF5E);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    
    /* Glassmorphism */
    --glass-bg: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.18);
    --glass-backdrop: blur(20px) saturate(180%);
}