/* ===== CSS ПЕРЕМЕННЫЕ ===== */
/* Основные цвета и эффекты для всего приложения */

/* Базовые переменные для темной темы (по умолчанию) */
:root {
    /* Градиенты фона */
    --bg-gradient-1: #0f0c29;
    --bg-gradient-2: #302b63;
    --bg-gradient-3: #24243e;
    --bg-main-gradient: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
    
    /* Дополнительные фоны */
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-surface-hover: rgba(255, 255, 255, 0.06);
    --bg-elevated: rgba(255, 255, 255, 0.05);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: 20px;
    --glass-saturation: 180%;
    
    /* Цвета текста */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-inverse: #0f0c29;
    
    /* Неоновые акценты - тренд 2025 */
    --accent-primary: #7c3aed;
    --accent-secondary: #a855f7;
    --accent-tertiary: #c084fc;
    --accent-glow: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    --accent-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%);
    
    /* Неоновое свечение */
    --neon-glow-sm: 0 0 10px rgba(168, 85, 247, 0.4);
    --neon-glow-md: 0 0 20px rgba(168, 85, 247, 0.3);
    --neon-glow-lg: 0 0 30px rgba(168, 85, 247, 0.2);
    
    /* Компоненты */
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-hover: rgba(255, 255, 255, 0.07);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    
    /* Кнопки */
    --btn-bg: rgba(255, 255, 255, 0.08);
    --btn-border: rgba(255, 255, 255, 0.12);
    --btn-hover: rgba(255, 255, 255, 0.12);
    --btn-active: rgba(255, 255, 255, 0.15);
    --btn-text: rgba(255, 255, 255, 0.9);
    
    /* Поля ввода */
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus: var(--accent-primary);
    --input-text: rgba(255, 255, 255, 0.9);
    --input-placeholder: rgba(255, 255, 255, 0.4);
    
    /* Модальные окна */
    --modal-bg: rgba(15, 12, 41, 0.95);
    --modal-overlay: rgba(0, 0, 0, 0.8);
    
    /* Статусы с градиентами */
    --status-success: #10b981;
    --status-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --status-error: #ef4444;
    --status-error-gradient: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --status-warning: #f59e0b;
    --status-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --status-info: #3b82f6;
    --status-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    
    /* Тени с цветом */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    --shadow-colored: 0 8px 32px rgba(124, 58, 237, 0.15);
}

/* Светлая тема */
.light {
    /* Градиентный фон - более насыщенный и красивый */
    --bg-gradient-1: #e0e7ff;
    --bg-gradient-2: #c7d2fe;
    --bg-gradient-3: #ddd6fe;
    --bg-main-gradient: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
    
    /* Дополнительные фоны - более контрастные */
    --bg-surface: rgba(255, 255, 255, 0.95);
    --bg-surface-hover: rgba(255, 255, 255, 0.98);
    --bg-elevated: rgba(255, 255, 255, 0.98);
    
    /* Glassmorphism - ПОЛНОСТЬЮ ПЕРЕРАБОТАН для светлой темы */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(124, 58, 237, 0.15);
    --glass-blur: 20px;
    --glass-saturation: 180%;
    
    /* Цвета текста - максимальный контраст */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    /* Акценты - более яркие для контраста */
    --accent-primary: #6366f1;
    --accent-secondary: #7c3aed;
    --accent-tertiary: #8b5cf6;
    --accent-glow: #6366f1;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #7c3aed 50%, #8b5cf6 100%);
    --accent-gradient-hover: linear-gradient(135deg, #4f46e5 0%, #6d28d9 50%, #7c3aed 100%);
    
    /* Неоновое свечение - более заметное */
    --neon-glow-sm: 0 0 15px rgba(99, 102, 241, 0.25);
    --neon-glow-md: 0 0 25px rgba(99, 102, 241, 0.2);
    --neon-glow-lg: 0 0 35px rgba(99, 102, 241, 0.15);
    
    /* Компоненты - КАРДИНАЛЬНО УЛУЧШЕНЫ */
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(99, 102, 241, 0.2);
    --card-hover: rgba(255, 255, 255, 0.98);
    --card-shadow: 0 4px 20px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* Кнопки - четкие и контрастные */
    --btn-bg: rgba(255, 255, 255, 0.95);
    --btn-border: rgba(99, 102, 241, 0.25);
    --btn-hover: rgba(248, 250, 252, 0.98);
    --btn-active: rgba(241, 245, 249, 0.98);
    --btn-text: #111827;
    
    /* Поля ввода - четкие границы */
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(99, 102, 241, 0.25);
    --input-focus: #6366f1;
    --input-text: #111827;
    --input-placeholder: #6b7280;
    
    /* Модальные окна */
    --modal-bg: rgba(255, 255, 255, 0.98);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    
    /* Выразительные тени для светлой темы */
    --shadow-sm: 0 2px 8px rgba(99, 102, 241, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(99, 102, 241, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(99, 102, 241, 0.18), 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-colored: 0 8px 32px rgba(99, 102, 241, 0.2);
}