/* ═══════════════════════════════════════════════════════════════
   theme.css — CSS-переменные для светлой и тёмной тем
   Переключение: класс .dark на <html>
   ═══════════════════════════════════════════════════════════════ */

/* --- Светлая тема (по умолчанию) --- */
:root {
    /* Фоны */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #f1f5f9;
    --color-bg-active: #e2e8f0;
    --color-bg-overlay: rgba(0, 0, 0, 0.05);

    /* Текст */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    /* Бордеры */
    --color-border-primary: #e2e8f0;
    --color-border-secondary: #cbd5e1;
    --color-border-hover: #94a3b8;

    /* Акцентные цвета (одинаковы для обеих тем) */
    --color-accent-indigo: #4f46e5;
    --color-accent-indigo-hover: #4338ca;
    --color-accent-indigo-light: rgba(79, 70, 229, 0.1);
    --color-accent-green: #22c55e;
    --color-accent-green-light: rgba(34, 197, 94, 0.1);
    --color-accent-red: #ef4444;
    --color-accent-red-light: rgba(239, 68, 68, 0.1);
    --color-accent-yellow: #eab308;
    --color-accent-yellow-light: rgba(234, 179, 8, 0.1);
    --color-accent-orange: #f97316;
    --color-accent-orange-light: rgba(249, 115, 22, 0.1);

    /* Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Скроллбар */
    --color-scrollbar-track: #f1f5f9;
    --color-scrollbar-thumb: #cbd5e1;
    --color-scrollbar-thumb-hover: #94a3b8;

    /* Карта и попапы */
    --color-popup-bg: #ffffff;
    --color-popup-border: #e2e8f0;
    --color-popup-text: #0f172a;
    --color-popup-text-secondary: #64748b;

    /* Панели и карточки */
    --color-card-bg: #ffffff;
    --color-card-border: #e2e8f0;
    --color-card-header: #f8fafc;

    /* Инпуты и формы */
    --color-input-bg: #ffffff;
    --color-input-border: #cbd5e1;
    --color-input-text: #0f172a;
    --color-input-placeholder: #94a3b8;
    --color-input-focus-ring: rgba(79, 70, 229, 0.3);

    /* Sidebar */
    --color-sidebar-bg: #ffffff;
    --color-sidebar-border: #e2e8f0;
    --color-sidebar-item-hover: #f1f5f9;
    --color-sidebar-item-active: #e2e8f0;
    --color-sidebar-text: #475569;
    --color-sidebar-text-active: #0f172a;
    --color-sidebar-logo-text: #0f172a;

    /* Header */
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-header-border: #e2e8f0;
    --color-header-text: #0f172a;

    /* Кластеры карты */
    --color-cluster-bg-small: rgba(148, 163, 184, 0.85);
    --color-cluster-bg-medium: rgba(100, 116, 139, 0.85);
    --color-cluster-bg-large: rgba(71, 85, 105, 0.9);

    /* Период-кнопки */
    --color-period-bg: #f1f5f9;
    --color-period-border: #e2e8f0;
    --color-period-text: #64748b;
    --color-period-active-bg: #4f46e5;
    --color-period-active-border: #4f46e5;
    --color-period-active-text: #ffffff;

    /* Аналитика-карточки */
    --color-analytics-bg: #ffffff;
    --color-analytics-border: #e2e8f0;
    --color-analytics-title: #64748b;
    --color-analytics-value: #0f172a;
    --color-analytics-row-border: #f1f5f9;

    /* Лента событий */
    --color-feed-bg: #ffffff;
    --color-feed-border: #e2e8f0;
    --color-feed-item-border: #f1f5f9;
    --color-feed-item-hover: #f8fafc;

    /* Конкуренты — панель */
    --color-panel-bg: #ffffff;
    --color-panel-border: #e2e8f0;
    --color-panel-item-border: #f1f5f9;
    --color-panel-item-hover: #f8fafc;

    /* Toast */
    --color-toast-success: #16a34a;
    --color-toast-error: #dc2626;
    --color-toast-info: #2563eb;
}

/* --- Тёмная тема --- */
html.dark {
    /* Фоны */
    --color-bg-primary: #020617;
    --color-bg-secondary: #0f172a;
    --color-bg-tertiary: #1e293b;
    --color-bg-elevated: #111827;
    --color-bg-hover: #1e293b;
    --color-bg-active: #334155;
    --color-bg-overlay: rgba(0, 0, 0, 0.3);

    /* Текст */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;

    /* Бордеры */
    --color-border-primary: #1e293b;
    --color-border-secondary: #334155;
    --color-border-hover: #475569;

    /* Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Скроллбар */
    --color-scrollbar-track: #0f172a;
    --color-scrollbar-thumb: #334155;
    --color-scrollbar-thumb-hover: #475569;

    /* Карта и попапы */
    --color-popup-bg: #1e293b;
    --color-popup-border: #334155;
    --color-popup-text: #f1f5f9;
    --color-popup-text-secondary: #94a3b8;

    /* Панели и карточки */
    --color-card-bg: #111827;
    --color-card-border: #374151;
    --color-card-header: #1f2937;

    /* Инпуты и формы */
    --color-input-bg: #1f2937;
    --color-input-border: #374151;
    --color-input-text: #ffffff;
    --color-input-placeholder: #6b7280;
    --color-input-focus-ring: rgba(99, 102, 241, 0.4);

    /* Sidebar */
    --color-sidebar-bg: #0f172a;
    --color-sidebar-border: #1e293b;
    --color-sidebar-item-hover: #1e293b;
    --color-sidebar-item-active: #334155;
    --color-sidebar-text: #94a3b8;
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-logo-text: #ffffff;

    /* Header */
    --color-header-bg: rgba(15, 23, 42, 0.85);
    --color-header-border: #1e293b;
    --color-header-text: #ffffff;

    /* Кластеры карты */
    --color-cluster-bg-small: rgba(107, 114, 128, 0.85);
    --color-cluster-bg-medium: rgba(75, 85, 99, 0.85);
    --color-cluster-bg-large: rgba(55, 65, 81, 0.9);

    /* Период-кнопки */
    --color-period-bg: #1f2937;
    --color-period-border: #374151;
    --color-period-text: #9ca3af;
    --color-period-active-bg: #4f46e5;
    --color-period-active-border: #4f46e5;
    --color-period-active-text: #ffffff;

    /* Аналитика-карточки */
    --color-analytics-bg: #111827;
    --color-analytics-border: #374151;
    --color-analytics-title: #9ca3af;
    --color-analytics-value: #ffffff;
    --color-analytics-row-border: #1f2937;

    /* Лента событий */
    --color-feed-bg: #111827;
    --color-feed-border: #374151;
    --color-feed-item-border: #1f2937;
    --color-feed-item-hover: #1f2937;

    /* Конкуренты — панель */
    --color-panel-bg: #111827;
    --color-panel-border: #374151;
    --color-panel-item-border: #1f2937;
    --color-panel-item-hover: #1f2937;

    /* Toast */
    --color-toast-success: #2e7d32;
    --color-toast-error: #c62828;
    --color-toast-info: #1565c0;
}

/* ═══════════════════════════════════════════════════════════════
   Утилитарные классы на основе CSS-переменных
   Используются в компонентах, где Tailwind-утилиты неудобны
   ═══════════════════════════════════════════════════════════════ */

/* --- Скроллбар (переопределение под тему) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 4px;
}

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* --- Выделение текста --- */
::selection {
    background-color: var(--color-accent-indigo);
    color: var(--color-text-inverse);
}

/* --- Placeholder --- */
::placeholder {
    color: var(--color-input-placeholder);
    opacity: 1;
}

/* --- Плавный переход при смене темы --- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease !important;
}