/* ═══════════════════════════════════════════════════════════════
   THEME SYSTEM - Светлая и темная темы для женской аудитории
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   СВЕТЛАЯ ТЕМА (по умолчанию) 🌸
   ─────────────────────────────────────────────────────────────── */
:root {
    /* Основные цвета фона */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #edf2f7;
    --bg-card: #ffffff;

    /* Цвета текста */
    --text-primary: #1a202c;
    --text-secondary: #2d3748;
    --text-tertiary: #4a5568;
    --text-muted: #718096;

    /* Фиолетово-розовые акценты */
    --accent-primary: #b794f6;
    --accent-secondary: #f093fb;
    --accent-tertiary: #e879f9;

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #b794f6 0%, #f093fb 100%);
    --gradient-secondary: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
    --gradient-tertiary: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8f7fa 100%);

    /* Границы и разделители */
    --border-color: #cbd5e0;
    --border-color-light: #e2e8f0;

    /* Тени */
    --shadow-sm: 0 2px 8px rgba(45, 55, 72, 0.12);
    --shadow-md: 0 4px 16px rgba(45, 55, 72, 0.16);
    --shadow-lg: 0 8px 32px rgba(45, 55, 72, 0.20);
    --shadow-xl: 0 12px 48px rgba(45, 55, 72, 0.28);

    /* Состояния элементов */
    --hover-overlay: rgba(183, 148, 246, 0.12);
    --active-overlay: rgba(183, 148, 246, 0.18);

    /* Кнопки */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: linear-gradient(135deg, #a888f5 0%, #e87ff9 100%);

    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: #f7fafc;
    --btn-secondary-border: #cbd5e0;

    /* Специальные элементы */
    --code-bg: #f7fafc;
    --code-border: #e2e8f0;
    --modal-overlay: rgba(26, 32, 44, 0.95);
    --scrollbar-track: #f1f1f4;
    --scrollbar-thumb: #d4d4d8;

    /* Анимации */
    --transition-speed: 0.3s;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────────────────────────────────────────────────────────────
   ТЕМНАЯ ТЕМА 🌙
   ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Основные цвета фона */
    --bg-primary: #1a1625;
    --bg-secondary: #251d35;
    --bg-tertiary: #2d1b4e;
    --bg-card: #251d35;

    /* Цвета текста */
    --text-primary: #f8f9fa;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-muted: #a0aec0;

    /* Фиолетово-розовые акценты (более яркие для темной темы) */
    --accent-primary: #c084fc;
    --accent-secondary: #f093fb;
    --accent-tertiary: #e879f9;

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #c084fc 0%, #f093fb 100%);
    --gradient-secondary: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
    --gradient-tertiary: linear-gradient(135deg, #d8b4fe 0%, #f9a8d4 100%);
    --gradient-card: linear-gradient(135deg, #251d35 0%, #2d1b4e 100%);

    /* Границы и разделители */
    --border-color: #4a3c5e;
    --border-color-light: #3d3250;

    /* Тени (с фиолетовым свечением) */
    --shadow-sm: 0 2px 8px rgba(192, 132, 252, 0.12);
    --shadow-md: 0 4px 16px rgba(192, 132, 252, 0.16);
    --shadow-lg: 0 8px 32px rgba(192, 132, 252, 0.24);
    --shadow-xl: 0 12px 48px rgba(192, 132, 252, 0.32);

    /* Состояния элементов */
    --hover-overlay: rgba(192, 132, 252, 0.12);
    --active-overlay: rgba(192, 132, 252, 0.16);

    /* Кнопки */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: linear-gradient(135deg, #b47bf7 0%, #f587fb 100%);

    --btn-secondary-bg: #3d3250;
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: #4a3c5e;

    /* Специальные элементы */
    --code-bg: #2d1b4e;
    --code-border: #4a3c5e;
    --modal-overlay: rgba(26, 22, 37, 0.85);
    --scrollbar-track: #2d1b4e;
    --scrollbar-thumb: #4a3c5e;
}

/* ═══════════════════════════════════════════════════════════════
   БАЗОВЫЕ СТИЛИ С ПЕРЕМЕННЫМИ ТЕМЫ
   ═══════════════════════════════════════════════════════════════ */

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing);
}

/* ───────────────────────────────────────────────────────────────
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ─────────────────────────────────────────────────────────────── */
.theme-toggle {
    position: relative;
    width: 60px;
    height: 32px;
    background: var(--gradient-primary);
    border-radius: 100px;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: all var(--transition-speed) var(--transition-timing);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.theme-toggle:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

.theme-toggle-slider {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform var(--transition-speed) var(--transition-timing);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    left: 4px;
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(28px);
}

.theme-toggle-icon {
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.theme-toggle .sun-icon {
    opacity: 1;
}

.theme-toggle .moon-icon {
    opacity: 0;
    position: absolute;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    opacity: 0;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    opacity: 1;
}

/* ───────────────────────────────────────────────────────────────
   СКРОЛЛБАР
   ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ───────────────────────────────────────────────────────────────
   ПЛАВНАЯ АНИМАЦИЯ ПЕРЕКЛЮЧЕНИЯ ТЕМЫ
   ─────────────────────────────────────────────────────────────── */
* {
    transition-property: background-color, background, color, border-color, box-shadow;
    transition-duration: var(--transition-speed);
    transition-timing-function: var(--transition-timing);
}

/* Исключаем анимацию для интерактивных элементов */
input, textarea, select, button {
    transition-property: none;
}

/* Возвращаем анимацию для фона и цвета кнопок */
button {
    transition-property: background-color, background, color, box-shadow, transform;
}