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

:root {
    /* Core palette */
    --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);
    --color-link: #007aff;

    /* Backgrounds */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f6fa;

    /* 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 */
    --text-primary: #000000;
    --text-secondary: #6d6d80;
    --text-tertiary: #8e8e93;
    --text-white: #ffffff;

    /* Shadows — layered for depth */
    --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);

    /* Borders */
    --border-radius: 14px;
    --border-radius-small: 10px;
    --border-radius-large: 22px;
    --border-radius-pill: 100px;
    --border-color: rgba(0, 0, 0, 0.06);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Timing */
    --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;

    /* Mesh gradient */
    --mesh-1: #f0f3fa;
    --mesh-2: #f5f0f8;
    --mesh-3: #f0f6f4;
    --mesh-4: #f6f2f0;

    /* Desktop shell (админка / панель бота на широком экране) */
    --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));
}

/* ── Dark theme — явный выбор ── */
:root[data-theme="dark"] {
    --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-link: #0a84ff;

    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;

    --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);

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

/* ── Dark theme — системная ── */
@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-link: #0a84ff;

        --bg-primary: #000000;
        --bg-secondary: #1c1c1e;
        --bg-tertiary: #2c2c2e;

        --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);

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

/* ── Telegram dark theme ── */
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-link: #0a84ff;

    --bg-primary: #17212b;
    --bg-secondary: #1d2733;
    --bg-tertiary: #2c3847;

    --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);
    --bg-glass-dark: rgba(255, 255, 255, 0.04);
    --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);

    --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);

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