/* 
 * Psykeria Theme 2025 - Modern Blue/Violet Palette
 * Tendance 2025 : Bleu indigo/violet avec blanc épuré
 */

:root {
    /* Couleurs de base - Blanc épuré */
    --bg-color: #FFFFFF;
    --bg-soft: #FAFAFA;
    --text-color: #1A1A1A;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    
    /* Palette principale - Bleu indigo moderne */
    --accent-primary: #6366F1;
    --accent-primary-light: #818CF8;
    --accent-primary-dark: #4F46E5;
    --accent-primary-soft: #E0E7FF;
    
    /* Palette secondaire - Violet moderne */
    --accent-secondary: #8B5CF6;
    --accent-secondary-light: #A78BFA;
    --accent-secondary-dark: #7C3AED;
    --accent-secondary-soft: #EDE9FE;
    
    /* Accents supplémentaires */
    --accent-accent: #A78BFA;
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-error: #EF4444;
    
    /* Overlay et transparences */
    --overlay-opacity: 0.95;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(99, 102, 241, 0.15);
}

.dark-mode {
    --bg-color: #0F0F23;
    --bg-soft: #1A1A2E;
    --text-color: #F0F0FF;
    --text-secondary: #C4B5FD;
    --text-muted: #A78BFA;
    
    --accent-primary: #818CF8;
    --accent-primary-light: #A5B4FC;
    --accent-primary-dark: #6366F1;
    --accent-primary-soft: rgba(99, 102, 241, 0.25);
    
    --accent-secondary: #A78BFA;
    --accent-secondary-light: #C4B5FD;
    --accent-secondary-dark: #8B5CF6;
    --accent-secondary-soft: rgba(139, 92, 246, 0.25);
    
    --overlay-opacity: 0.97;
    --glass-bg: rgba(15, 15, 35, 0.9);
    --glass-border: rgba(129, 140, 248, 0.3);
}

/* Classes utilitaires */
.bg-primary { background-color: var(--accent-primary); }
.bg-primary-light { background-color: var(--accent-primary-light); }
.bg-primary-dark { background-color: var(--accent-primary-dark); }
.bg-primary-soft { background-color: var(--accent-primary-soft); }

.text-primary { color: var(--accent-primary); }
.text-primary-dark { color: var(--accent-primary-dark); }

.border-primary { border-color: var(--accent-primary); }
.border-primary-light { border-color: var(--accent-primary-light); }

/* Gradient moderne */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 50%, var(--accent-primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Glass effect moderne */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--glass-border);
}

/* Boutons modernes */
.btn-primary {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--accent-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    border: 2px solid rgba(99, 102, 241, 0.2);
    transition: all 0.3s ease;
}

.dark-mode .btn-secondary {
    background: rgba(15, 15, 35, 0.8);
    color: var(--text-color);
    border: 2px solid rgba(129, 140, 248, 0.3);
}

.btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

.dark-mode .btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

/* Badge moderne */
.badge-primary {
    background: var(--accent-primary-soft);
    color: var(--accent-primary-dark);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Card moderne */
.card-modern {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08);
    transition: all 0.3s ease;
}

.card-modern:hover {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
    transform: translateY(-4px);
}