/* =================================
   CSS ПЕРЕМЕННЫЕ ДЛЯ ТЕМ
   Модульная система управления темами
   ================================= */

/* Светлая тема (по умолчанию) */
:root {
    /* Основные цвета */
    --bg-color: #f5f7fa;
    --bg-secondary: #e8f0fe;
    --card-bg-color: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #777777;
    --border-color: #e0e0e0;
    
    /* Акцентные цвета */
    --accent-color: #4285f4;
    --accent-hover: #3367d6;
    --primary-color: #4285f4;
    
    /* Цвета состояний */
    --success-color: #0f9d58;
    --success-hover: #0d7544;
    --error-color: #ea4335;
    --error-hover: #c82333;
    --warning-color: #ff9800;
    --info-color: #2196f3;
    
    /* Специфичные цвета */
    --chat-user-bg: #e3f2fd;
    --chat-bot-bg: #f1f1f1;
    --header-bg: #ffffff;
    --footer-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --loader-bg: rgba(255, 255, 255, 0.85);
    --hover-color: #f5f5f5;
    
    /* Размеры */
    --header-height: 56px;
    --sidebar-width: 250px;
    --border-radius: 8px;
    --border-radius-large: 16px;
    
    /* Шрифты */
    --font-primary: 'Roboto', 'Arial', sans-serif;
    --font-secondary: 'Roboto', 'Arial', sans-serif;
}

/* Темная тема */
html[data-theme="dark"] {
    /* Основные цвета */
    --bg-color: #121212;
    --bg-secondary: #1a2b3d;
    --card-bg-color: #1e1e1e; /* Светлее основного фона */
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted: #b0b0b0;
    --border-color: #333333;
    
    /* Акцентные цвета */
    --accent-color: #4285f4;
    --accent-hover: #5294ff;
    --primary-color: #4285f4;
    
    /* Цвета состояний */
    --success-color: #34a853;
    --success-hover: #5fbf73;
    --error-color: #ea4335;
    --error-hover: #ff6b6b;
    --warning-color: #ff9800;
    --info-color: #2196f3;
    
    /* Специфичные цвета */
    --chat-user-bg: #3367d6;
    --chat-bot-bg: #2a2a2a;
    --header-bg: #121212;
    --footer-bg: #121212;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --loader-bg: rgba(18, 18, 18, 0.85);
    --hover-color: #2a2a2a;
}

/* Автоматическая тема (следует системным настройкам) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Копируем переменные темной темы для автотемы */
        --bg-color: #121212;
        --bg-secondary: #1a2b3d;
        --card-bg-color: #1e1e1e;
        --text-primary: #e8eaed;
        --text-secondary: #9aa0a6;
        --text-muted: #b0b0b0;
        --border-color: #333333;
        --accent-color: #4285f4;
        --accent-hover: #5294ff;
        --primary-color: #4285f4;
        --success-color: #34a853;
        --success-hover: #5fbf73;
        --error-color: #ea4335;
        --error-hover: #ff6b6b;
        --warning-color: #ff9800;
        --info-color: #2196f3;
        --chat-user-bg: #3367d6;
        --chat-bot-bg: #2a2a2a;
        --header-bg: #121212;
        --footer-bg: #121212;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --loader-bg: rgba(18, 18, 18, 0.85);
        --hover-color: #2a2a2a;
    }
}

/* Утилитарные классы для быстрого применения цветов */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-primary { background-color: var(--bg-color) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-card { background-color: var(--card-bg-color) !important; }
.border-color { border-color: var(--border-color) !important; }