/* ===== VARIABLES DE COLOR ===== */
:root {
    /* Colores principales */
    --primary: #10B981;
    --primary-dark: #059669;
    --secondary: #22C55E;
    --secondary-dark: #15803D;
    
    /* Gradientes */
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-hover: linear-gradient(135deg, var(--secondary), var(--primary));
    
    /* Fondos */
    --bg-dark: #05070d;
    --bg-card: #0f172a;
    --bg-card-hover: #172033;
    --bg-nav: rgba(8, 13, 26, 0.55);
    --bg-mobile: #111a2b;
    --bg-mobile-item: rgba(255, 255, 255, 0.05);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    
    /* Textos */
    --text-primary: #ffffff;
    --text-secondary: #9fb0c8;
    --text-mobile: rgba(255, 255, 255, 0.78);
    
    /* Bordes */
    --border-color: #27344c;
    --border-mobile: rgba(255, 255, 255, 0.1);
    
    /* Sombras - usando los colores principales con opacidad */
    --shadow-primary: rgba(16, 185, 129, 0.3);
    --shadow-secondary: rgba(34, 197, 94, 0.34);
    --shadow-hover: rgba(34, 197, 94, 0.46);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.5);
    
    /* Overlays y efectos */
    --overlay-primary: rgba(16, 185, 129, 0.2);
    --overlay-secondary: rgba(34, 197, 94, 0.18);
    --overlay-soft: rgba(255, 255, 255, 0.1);
    
    /* Blancos con opacidad */
    --white-01: rgba(255, 255, 255, 0.08);
    --white-02: rgba(255, 255, 255, 0.16);
    --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;
}