/* ===== VARIABLES DE COLOR ===== */
:root {
    /* Colores principales */
    --primary: #4f7cff;
    --primary-dark: #2f55d4;
    --secondary: #a855f7;
    --secondary-dark: #7e22ce;
    
    /* Gradientes */
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-hover: linear-gradient(135deg, var(--secondary), var(--primary));
    
    /* Fondos */
    --bg-dark: #060b13;
    --bg-card: #0f1728;
    --bg-card-hover: #162037;
    --bg-nav: rgba(7, 11, 22, 0.4);
    --bg-mobile: #10182a;
    --bg-mobile-item: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Textos */
    --text-primary: #ffffff;
    --text-secondary: #9eb0cc;
    --text-mobile: rgba(255, 255, 255, 0.7);
    
    /* Bordes */
    --border-color: #27344e;
    --border-mobile: rgba(255, 255, 255, 0.1);
    
    /* Sombras - usando los colores principales con opacidad */
    --shadow-primary: rgba(79, 124, 255, 0.24);
    --shadow-secondary: rgba(168, 85, 247, 0.26);
    --shadow-hover: rgba(168, 85, 247, 0.36);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.5);
    
    /* Overlays y efectos */
    --overlay-primary: rgba(79, 124, 255, 0.16);
    --overlay-secondary: rgba(168, 85, 247, 0.14);
    --overlay-soft: rgba(255, 255, 255, 0.1);
    
    /* Blancos con opacidad */
    --white-01: rgba(255, 255, 255, 0.1);
    --white-02: rgba(255, 255, 255, 0.2);
    --white-05: rgba(255, 255, 255, 0.05);
    
    /* Tamaños y transiciones */
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    --border-radius-card: 20px;
    --border-radius-button: 50px;
}