/* 
 * SaaS Peluquería - Estilos Globales (Glassmorphism & Branding)
 * Ruta: /assets/css/main.css
 */

:root {
    --primary: #6C5CE7;
    --primary-dark: #5A4BD1;
    --primary-light: #A29BFE;
    --primary-glow: rgba(108, 92, 231, 0.15);
    --secondary: #00B894;
    --accent: #FD79A8;
    --dark: #0F0E17;
    --gray-50: #F8F9FC;
    --gray-100: #F1F3F9;
    --gray-200: #E2E6F0;
    --gray-300: #C9CFE0;
    --gray-400: #9BA3BE;
    --gray-500: #6B7394;
    --gray-600: #4A5068;
    --gray-700: #2D3148;
    --gray-800: #1A1D2E;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.14);

    --radius: 16px;
    --radius-sm: 10px;
    --radius-xl: 24px;
}

/* Base Glassmorphism classes */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
}

.glass-dark {
    background: rgba(15, 14, 23, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* Utility Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-up {
    animation: fadeInUp 0.8s ease-out both;
}