/* ============================================================================
   CSS-переменные (design tokens) SenderRoute148.
   
   Согласно решению 2026-10-15 (ТЗ, пункт 7.4, И-КЛ-4): все CSS-переменные
   вынесены в отдельный файл css/variables.css. Раньше были в main.css.
   
   Файл подключается ПЕРВЫМ во всех HTML-страницах (до main.css и остальных
   CSS-файлов), чтобы переменные были доступны во всех последующих стилях.
   
   Схема:
     - :root — светлая тема (по умолчанию).
     - .dark-theme — тёмная тема через класс (переключается пользователем).
     - @media (prefers-color-scheme: dark) — тёмная тема по системной настройке.
   
   Согласно W3C CSS Custom Properties for Cascading Variables Module Level 1:
   https://www.w3.org/TR/css-variables-1/
   ============================================================================ */

/* Telegram WebZ Color Scheme — светлая тема (по умолчанию). */
:root {
    --tg-bg-color: #ffffff;
    --tg-text-color: #000000;
    --tg-secondary-text: #8e8e93;
    --tg-hint-color: #707579;
    --tg-link-color: #3390ec;
    --tg-accent-color: #3390ec;
    --tg-accent-hover: #2b6cb0;
    --tg-destructive: #e53935;
    --tg-border: #e6e6e8;
    --tg-sidebar-bg: #f4f4f5;
    --tg-message-out: #e4f1fe;
    --tg-message-in: #ffffff;
    --tg-header-bg: #ffffff;
    --tg-sidebar-width: 360px;
    --tg-header-height: 56px;
    --tg-border-radius: 16px;
    --tg-message-radius: 18px;
    --tg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tg-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --tg-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --tg-font-size: 15px;
}

/* Задача №25: тёмная тема через класс. */
.dark-theme {
    --tg-bg-color: #0f0f0f;
    --tg-text-color: #ffffff;
    --tg-secondary-text: #8e8e93;
    --tg-hint-color: #8e8e93;
    --tg-border: #2c2c2e;
    --tg-sidebar-bg: #1c1c1e;
    --tg-message-out: #1b3a5e;
    --tg-message-in: #1c1c1e;
    --tg-header-bg: #0f0f0f;
}

/* Тёмная тема по системной настройке. */
@media (prefers-color-scheme: dark) {
    :root {
        --tg-bg-color: #0f0f0f;
        --tg-text-color: #ffffff;
        --tg-secondary-text: #8e8e93;
        --tg-hint-color: #8e8e93;
        --tg-border: #2c2c2e;
        --tg-sidebar-bg: #1c1c1e;
        --tg-message-out: #1b3a5e;
        --tg-message-in: #1c1c1e;
        --tg-header-bg: #0f0f0f;
    }
}