/* FlexGram UI — design tokens
   ------------------------------------------------------------------
   Единственный словарь значений для всех поверхностей: веб-аппа, админки и
   панели ботов. Своих имён у приложений быть не должно — если чего-то не
   хватает, оно добавляется сюда.

   Тема выбирается тремя способами:
     1. :root[data-theme="dark"]                — явный выбор (админка)
     2. prefers-color-scheme: dark              — системная тема
     3. body.tg-dark-theme                      — тема клиента Telegram
   Явный data-theme="light" перебивает системную тёмную.

   Порядок блоков ниже не случаен. Селектор системной темы
   :root:not([data-theme="light"]) весит больше, чем body.tg-dark-theme, и
   перебил бы его на телефоне с тёмной системной темой — поэтому у
   телеграмного блока селектор :root body.tg-dark-theme, он тяжелее. */

:root {
    /* ── Акценты ── */
    --color-primary: #007aff;
    --color-primary-dark: #0056cc;
    --color-primary-light: rgba(0, 122, 255, 0.1);
    --color-secondary: #5856d6;
    --color-secondary-light: rgba(88, 86, 214, 0.1);
    --color-success: #30d158;
    --color-success-light: rgba(48, 209, 88, 0.1);
    --color-warning: #ff9f0a;
    --color-warning-light: rgba(255, 159, 10, 0.1);
    --color-error: #ff3b30;
    --color-error-light: rgba(255, 59, 48, 0.1);

    /* Тот же смысл, но как надпись. Заливочные оттенки выше на белом дают
       1,9:1 у успеха и 3,5:1 у действия — как текст они не читаются, а
       именно текстом стоят в статусах и ссылках. Ниже — те же цвета,
       затемнённые до 4,5:1. */
    --color-primary-text: #0a5fcc;
    --color-success-text: #14803b;
    --color-warning-text: #a9590a;
    --color-error-text: #b91c1c;
    --color-link: var(--color-primary-text);

    /* ── Нейтральная шкала ──
       Раньше на границы, зебру таблиц, разделители и выключенные состояния
       приходился один rgba(0,0,0,.06), поэтому таблицы расплывались. */
    --neutral-0: #ffffff;
    --neutral-50: #f7f7f8;
    --neutral-100: #efeff1;
    --neutral-200: #e3e3e7;
    --neutral-300: #c9c9d0;
    --neutral-400: #a1a1ac;
    --neutral-500: #71717d;
    --neutral-600: #4a4a55;
    --neutral-800: #26262e;
    --neutral-950: #101014;

    /* ── Поверхности ── */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f6fa;

    /* Полоса-зебра и наведение в таблицах: чуть заметнее фона, но не
       настолько, чтобы строка казалась выделенной. */
    --bg-row-alt: #fcfcfd;
    --bg-row-hover: var(--neutral-50);

    /* Liquid Glass surfaces */
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-glass-thick: rgba(255, 255, 255, 0.88);
    --bg-glass-thin: rgba(255, 255, 255, 0.45);
    --bg-glass-dark: rgba(0, 0, 0, 0.02);
    --glass-blur: 44px;
    --glass-saturate: 190%;
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
    --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.4);

    /* ── Текст ── */
    --text-primary: #000000;
    --text-secondary: #6d6d80;
    --text-tertiary: #8e8e93;
    --text-white: #ffffff;

    /* ── Тени ── */
    --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);

    /* ── Границы и радиусы ── */
    /* 22px на карточке размером со строку списка читаются как подушка. */
    --border-radius: 12px;
    --border-radius-small: 8px;
    --border-radius-large: 16px;
    --border-radius-pill: 100px;
    --border-color: rgba(0, 0, 0, 0.06);
    --border-color-strong: rgba(0, 0, 0, 0.12);

    /* ── Отступы, шаг 4px ──
       --spacing-* — короткие имена для тех же значений, они старше и
       встречаются чаще; числовая шкала нужна там, где шага в 8px много. */
    --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;

    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);

    /* ── Типографика ──
       Размеры называются --fs-*, а не --text-*: --text-primary и соседи —
       это цвета, и одинаковая приставка у цвета и размера путала бы. */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14.5px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.25;
    --leading-normal: 1.5;

    /* ── Плотность ──
       Один набор компонентов на две поверхности: на телефоне просторно и
       тач-цель не меньше 48px, в админке на широком экране — плотно, иначе
       в таблицу помещается полтора экрана данных. Переключается атрибутом
       data-density="compact" на корне (см. ниже). */
    --control-height: 48px;
    --control-height-sm: 40px;
    --row-height: 56px;
    --cell-padding-y: var(--space-3);
    --cell-padding-x: var(--space-4);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--fs-md);
    --card-padding: var(--space-4);

    /* ── Тайминги ── */
    --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --transition-fast: var(--duration-fast) var(--ease-smooth);
    --transition-base: var(--duration-normal) var(--ease-smooth);
    --transition-slow: var(--duration-slow) var(--ease-smooth);

    /* ── Слои ──
       Снизу вверх: прилипшая шапка, выпадающий список, затемнение, модалка,
       боковое меню, тост. Тост выше всех: он сообщает об итоге действия,
       начатого в модалке. */
    --z-sticky: 900;
    --z-dropdown: 950;
    --z-overlay: 1200;
    --z-modal: 1400;
    --z-sidebar: 1500;
    --z-toast: 10002;

    /* ── Пастель ──
       Приглушённые оттенки акцентов для крупных спокойных пятен: заставка,
       заглушки, фоновые фигуры. Фирменный синий в таком размере давит. */
    --pastel-primary: #a9cdff;
    --pastel-secondary: #c3c2f0;
    --pastel-soft: #dcebff;

    /* ── Фирменные цвета платёжных сетей ──
       Единственные цвета, которые не меняются вместе с темой: человек
       узнаёт способ оплаты по цвету, и перекрашивать его нельзя. */
    --brand-usdt: #26a17b;
    --brand-usdt-light: #2ecc8f;
    --brand-ton: #0098ea;
    --brand-ton-light: #1fb5ff;
    --brand-ton-dark: #007acc;

    /* ── Графики ── */
    --chart-line-1: var(--color-primary);
    --chart-line-2: var(--color-secondary);
    --chart-line-3: var(--color-warning);
    --chart-fill-1: var(--color-primary-light);
    --chart-fill-2: var(--color-secondary-light);
    --chart-fill-3: var(--color-warning-light);
    --chart-grid: var(--border-color);
    --chart-text: var(--text-secondary);

    /* ── Mesh-фон ── */
    --mesh-1: #f0f3fa;
    --mesh-2: #f5f0f8;
    --mesh-3: #f0f6f4;
    --mesh-4: #f6f2f0;

    /* ── Оболочка на широком экране (админка / панель бота) ── */
    --sidebar-width: 248px;
    --topbar-height: 60px;
    --content-max-width: 1240px;

    /* Высота нижней навигации без учёта нижнего инсета: отступ .bottom-nav
       сверху плюс пилюля .nav-container. Нужна тем экранам, что рисуют
       собственную панель у нижнего края (форма ответа в диалогах),
       чтобы не залезть под таб-бар. Полное место под ним —
       --bottom-nav-space. */
    --bottom-nav-height: 68px;
    --bottom-nav-space: calc(var(--bottom-nav-height) + var(--layer-bottom-offset));

    /* ── Telegram safe-area ──
       Telegram пробрасывает в :root свои --tg-*-inset-*; вне Telegram их
       нет и подставляется 0px, поэтому токены безопасны в обычном вебе.
       --layer-top-offset / --layer-bottom-offset — единая точка отсчёта
       для всего, что рисуется поверх страницы (модалки, шиты, drawer,
       тосты, полноэкранные панели).

       Отсчёт идёт от переменных самого Telegram, а не от класса
       body.tg-fullscreen: класс ставит наш JS, и если initData потерялся
       (например, после редиректа, снимающего auth_key), класса нет, а
       контролы Telegram поверх страницы — есть. Переменные приходят от
       клиента и вне фуллскрина равны нулю, поэтому такой отсчёт верен во
       всех режимах. tg-fullscreen.css поверх этого лишь страхует минимум
       высоты панели для клиентов, присылающих content-inset нулём. */
    --tg-bar-height: 52px;
    --tg-safe-top: var(--tg-safe-area-inset-top, 0px);
    --tg-safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
    --tg-content-top: var(--tg-content-safe-area-inset-top, 0px);

    /* Чёлка устройства + собственные контролы Telegram сверху. */
    --tg-top-inset: calc(var(--tg-safe-top) + var(--tg-content-top));

    --layer-top-offset: max(env(safe-area-inset-top, 0px), var(--tg-top-inset));
    --layer-bottom-offset: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom));
}

/* ── Плотный режим ──
   Ставится атрибутом на <html> и действует только на широком экране: на
   телефоне палец не становится меньше оттого, что это админка. */
@media (min-width: 1024px) {
    :root[data-density="compact"] {
        --control-height: 36px;
        --control-height-sm: 30px;
        --row-height: 40px;
        --cell-padding-y: var(--space-2);
        --cell-padding-x: var(--space-3);
        --btn-padding-x: var(--space-4);
        --btn-font-size: var(--fs-base);
        --card-padding: var(--space-4);
    }
}

/* ── Тёмная тема — явный выбор и клиент Telegram ── */
:root[data-theme="dark"],
:root body.tg-dark-theme {
    --color-primary: #0a84ff;
    --color-primary-dark: #0066cc;
    --color-primary-light: rgba(10, 132, 255, 0.15);
    --color-secondary: #5e5ce6;
    --color-secondary-light: rgba(94, 92, 230, 0.15);
    --color-success: #32d74b;
    --color-success-light: rgba(50, 215, 75, 0.15);
    --color-warning: #ff9f0a;
    --color-warning-light: rgba(255, 159, 10, 0.15);
    --color-error: #ff453a;
    --color-error-light: rgba(255, 69, 58, 0.15);

    /* На тёмном фоне заливочные оттенки уже читаются как надписи, а вот
       затемнённые дневные — нет, поэтому здесь пара совпадает. */
    --color-primary-text: #6fb4ff;
    --color-success-text: #5be07e;
    --color-warning-text: #ffc97a;
    --color-error-text: #ff8a8a;
    --color-link: var(--color-primary-text);

    --neutral-0: #101014;
    --neutral-50: #16161a;
    --neutral-100: #1d1d22;
    --neutral-200: #26262c;
    --neutral-300: #34343c;
    --neutral-400: #6e6e78;
    --neutral-500: #8a8a94;
    --neutral-600: #c6c6ce;
    --neutral-800: #e9e9ee;
    --neutral-950: #ffffff;
    /* Пастель темнее дневной: на чёрном светлое пятно слепит. */

    --pastel-primary: #24415f;

    --pastel-secondary: #343465;

    --pastel-soft: #1c2b3d;

    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --bg-row-alt: #18181d;
    --bg-row-hover: #23232a;

    --bg-glass: rgba(38, 38, 40, 0.6);
    --bg-glass-thick: rgba(44, 44, 46, 0.78);
    --bg-glass-thin: rgba(38, 38, 40, 0.38);
    --bg-glass-dark: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
    --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.08);

    --text-primary: #ffffff;
    --text-secondary: #98989d;
    --text-tertiary: #636366;

    --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.5);

    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.16);

    --mesh-1: #0a0a14;
    --mesh-2: #100a14;
    --mesh-3: #0a1410;
    --mesh-4: #14100a;
}

/* ── Тёмная тема — системная ──
   Копия блока выше: @media нельзя дописать к обычному селектору, а
   объединять их одной группой CSS не умеет. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #0a84ff;
        --color-primary-dark: #0066cc;
        --color-primary-light: rgba(10, 132, 255, 0.15);
        --color-secondary: #5e5ce6;
        --color-secondary-light: rgba(94, 92, 230, 0.15);
        --color-success: #32d74b;
        --color-success-light: rgba(50, 215, 75, 0.15);
        --color-warning: #ff9f0a;
        --color-warning-light: rgba(255, 159, 10, 0.15);
        --color-error: #ff453a;
        --color-error-light: rgba(255, 69, 58, 0.15);

        --color-primary-text: #6fb4ff;
        --color-success-text: #5be07e;
        --color-warning-text: #ffc97a;
        --color-error-text: #ff8a8a;
        --color-link: var(--color-primary-text);

        --neutral-0: #101014;
        --neutral-50: #16161a;
        --neutral-100: #1d1d22;
        --neutral-200: #26262c;
        --neutral-300: #34343c;
        --neutral-400: #6e6e78;
        --neutral-500: #8a8a94;
        --neutral-600: #c6c6ce;
        --neutral-800: #e9e9ee;
        --neutral-950: #ffffff;
        /* Пастель темнее дневной: на чёрном светлое пятно слепит. */

        --pastel-primary: #24415f;

        --pastel-secondary: #343465;

        --pastel-soft: #1c2b3d;

        --bg-primary: #000000;
        --bg-secondary: #1c1c1e;
        --bg-tertiary: #2c2c2e;
        --bg-row-alt: #18181d;
        --bg-row-hover: #23232a;

        --bg-glass: rgba(38, 38, 40, 0.6);
        --bg-glass-thick: rgba(44, 44, 46, 0.78);
        --bg-glass-thin: rgba(38, 38, 40, 0.38);
        --bg-glass-dark: rgba(255, 255, 255, 0.04);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
        --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.08);

        --text-primary: #ffffff;
        --text-secondary: #98989d;
        --text-tertiary: #636366;

        --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.2);
        --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
        --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.4);
        --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.5);

        --border-color: rgba(255, 255, 255, 0.08);
        --border-color-strong: rgba(255, 255, 255, 0.16);

        --mesh-1: #0a0a14;
        --mesh-2: #100a14;
        --mesh-3: #0a1410;
        --mesh-4: #14100a;
    }
}

/* ── Тёмная тема Telegram: свои фоны поверх общего тёмного набора ──
   Селектор тяжелее системного (:root добавлен намеренно), иначе на телефоне
   с тёмной системной темой Telegram получал бы чёрный фон вместо своего
   сине-серого. */
:root body.tg-dark-theme {
    --bg-primary: #17212b;
    --bg-secondary: #1d2733;
    --bg-tertiary: #2c3847;
    --bg-row-alt: #1a2430;
    --bg-row-hover: #22303d;

    --neutral-0: #17212b;
    --neutral-50: #1d2733;
    --neutral-100: #222e3c;
    --neutral-200: #2c3847;
    --neutral-300: #3a4859;
    --neutral-400: #5a6b7d;
    --neutral-500: #8fa2b6;
    --neutral-600: #c8d4e2;
    --neutral-800: #e6edf5;
    --neutral-950: #ffffff;
    /* Пастель темнее дневной: на чёрном светлое пятно слепит. */

    --pastel-primary: #24415f;

    --pastel-secondary: #343465;

    --pastel-soft: #1c2b3d;

    --bg-glass: rgba(29, 39, 51, 0.6);
    --bg-glass-thick: rgba(29, 39, 51, 0.78);
    --bg-glass-thin: rgba(29, 39, 51, 0.38);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);

    --mesh-1: #17212b;
    --mesh-2: #1a2435;
    --mesh-3: #17212b;
    --mesh-4: #1a2435;
}