/* ============================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ — единственный источник значений

   Правило одно: ни в одном другом файле не должно быть литерального
   цвета, радиуса или отступа. Всё берётся отсюда. Прежняя панель
   объявляла токены в семи :root-блоках с разными значениями одних и тех
   же имён, и какой цвет доедет до страницы, решал порядок подключения
   файлов.

   Палитра построена на поверхностях, а не на стекле: сплошные фоны с
   тонкой границей читаются на телефоне при солнце, чего нельзя сказать о
   полупрозрачном блюре. Стеклянными остаются только плавающие элементы
   поверх контента — шапка и нижняя навигация.
   ============================================================ */

:root {
    color-scheme: light;

    /* --- Акцент ---------------------------------------------------- */
    --accent: #0a84ff;
    --accent-hover: #0060df;
    --accent-active: #004ec2;
    --accent-soft: rgba(10, 132, 255, 0.1);
    --accent-border: rgba(10, 132, 255, 0.25);
    --accent-contrast: #ffffff;

    /* --- Семантика -------------------------------------------------- */
    --success: #17a34a;
    --success-soft: rgba(23, 163, 74, 0.12);
    --warning: #d97706;
    --warning-soft: rgba(217, 119, 6, 0.12);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.12);
    --info: #7c3aed;
    --info-soft: rgba(124, 58, 237, 0.12);
    --neutral-soft: rgba(100, 116, 139, 0.12);

    /* Палитра графиков. Порядок важен: серия N берёт цвет N, поэтому
       соседние цвета намеренно контрастны — рядом стоящие линии не должны
       сливаться у тех, кто плохо различает оттенки. */
    --chart-1: #0a84ff;
    --chart-2: #17a34a;
    --chart-3: #f59e0b;
    --chart-4: #7c3aed;
    --chart-5: #e11d48;
    --chart-6: #0891b2;
    --chart-7: #65a30d;
    --chart-8: #db2777;

    /* --- Поверхности ------------------------------------------------ */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #eef0f4;
    --surface-hover: #f3f4f7;
    --surface-active: #e9ebf0;

    /* Плавающие панели: единственное место, где остаётся размытие */
    --overlay-bg: rgba(255, 255, 255, 0.82);
    --overlay-blur: 20px;
    --backdrop: rgba(15, 23, 42, 0.45);

    /* --- Границы ---------------------------------------------------- */
    --border: #e3e6ec;
    --border-strong: #cfd4dd;
    --border-subtle: #eef0f4;

    /* --- Текст ------------------------------------------------------ */
    --text: #101828;
    --text-secondary: #5b6472;
    --text-muted: #8b93a1;
    --text-inverse: #ffffff;

    /* --- Тени ------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --shadow-xl: 0 24px 60px rgba(16, 24, 40, 0.18);

    /* --- Скругления -------------------------------------------------- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 999px;

    /* --- Сетка отступов (шаг 4px) ------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Типографика -------------------------------------------------
       Системный стек: на телефоне это SF Pro и Roboto, то есть шрифт, под
       который у пользователя уже настроен рендеринг. Веб-шрифт добавил бы
       задержку первой отрисовки ради неотличимого результата. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;
    --text-3xl: 38px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.2;
    --leading-normal: 1.5;

    /* Цифры в таблицах и метриках должны стоять в колонку, иначе значения
       прыгают при обновлении данных */
    --numeric: tabular-nums;

    /* --- Каркас ------------------------------------------------------ */
    --sidebar-width: 248px;
    --topbar-height: 56px;
    --tabbar-height: 60px;
    --content-max: 1400px;

    /* Вырезы и скруглённые углы телефонов: без этих отступов нижняя
       навигация уезжает под системную полосу жестов */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Минимальная зона нажатия. 44px — рекомендация Apple, ниже неё палец
       промахивается по соседним элементам */
    --tap: 44px;

    /* --- Анимация ----------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 140ms;
    --duration: 220ms;
    --duration-slow: 380ms;

    --z-sticky: 100;
    --z-topbar: 200;
    --z-tabbar: 200;
    --z-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ============================================================
   Тёмная тема

   Не инверсия светлой: чистый чёрный на OLED даёт ореолы вокруг текста,
   поэтому фон приподнят до тёмно-синего, а поверхности различаются
   светлотой, а не только границей.
   ============================================================ */

[data-theme="dark"],
html.dark-theme {
    color-scheme: dark;

    --accent: #3d9bff;
    --accent-hover: #61aeff;
    --accent-active: #8cc4ff;
    --accent-soft: rgba(61, 155, 255, 0.16);
    --accent-border: rgba(61, 155, 255, 0.32);
    --accent-contrast: #06121f;

    --success: #34d17c;
    --success-soft: rgba(52, 209, 124, 0.16);
    --warning: #f5a524;
    --warning-soft: rgba(245, 165, 36, 0.16);
    --danger: #ff5f56;
    --danger-soft: rgba(255, 95, 86, 0.16);
    --info: #a78bfa;
    --info-soft: rgba(167, 139, 250, 0.16);
    --neutral-soft: rgba(148, 163, 184, 0.16);

    --chart-1: #3d9bff;
    --chart-2: #34d17c;
    --chart-3: #f5a524;
    --chart-4: #a78bfa;
    --chart-5: #fb7185;
    --chart-6: #22d3ee;
    --chart-7: #a3e635;
    --chart-8: #f472b6;

    --bg: #0d1117;
    --surface: #161b22;
    --surface-raised: #1c232c;
    --surface-sunken: #10151b;
    --surface-hover: #1f262f;
    --surface-active: #263039;

    --overlay-bg: rgba(22, 27, 34, 0.86);
    --backdrop: rgba(0, 0, 0, 0.6);

    --border: #262d38;
    --border-strong: #38414f;
    --border-subtle: #1c2229;

    --text: #e8eaed;
    --text-secondary: #9aa4b2;
    --text-muted: #6b7684;
    --text-inverse: #0d1117;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Тема Telegram для WebApp-страниц

   Клиент проставляет --tg-theme-* на корне документа. Значения после
   запятой совпадают с обычной темой, поэтому вне Telegram вид не меняется.
   Класс ставится в layouts/webapp.html.
   ============================================================ */

.tg-theme {
    --bg: var(--tg-theme-secondary-bg-color, #f5f6f8);
    --surface: var(--tg-theme-bg-color, #ffffff);
    --surface-raised: var(--tg-theme-bg-color, #ffffff);
    --text: var(--tg-theme-text-color, #101828);
    --text-secondary: var(--tg-theme-hint-color, #5b6472);
    --accent: var(--tg-theme-link-color, #0a84ff);
    --accent-contrast: var(--tg-theme-button-text-color, #ffffff);
}

/* Пользователь просил систему не анимировать — уважаем настройку целиком,
   а не только там, где вспомнили */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration: 0ms;
        --duration-slow: 0ms;
    }
}