/* ============================================================
   Дизайн-токены проекта.

   Единственное место правды для цветов, шрифтов, радиусов, теней
   и motion. Используется виджетом, страницей входа и демо-страницей
   (панель оператора держит свою копию токенов внутри шаблона).

   Подключение:
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tokens.css') }}">
     ↑ обязательно ПЕРВЫМ — до всех остальных стилей.
   ============================================================ */

/* === Шрифты: Cormorant Garamond (display-сериф)
       + Fira Sans (UI) + Fira Code (mono) === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Нативные виджеты браузера (календарь date-input, дропдауны select,
       скроллбары) — в тёмном исполнении, иначе белый календарь/чёрная
       иконка невидимы на тёмной теме. */
    color-scheme: dark;

    /* === Type scale — единая на всём сайте === */
    --font-sans:   'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* display — заголовки (сериф);
       admin/support используют --font-sans и НЕ затрагиваются */
    --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-mono:   'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-2xs:  10px;
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;
    --fs-4xl:  36px;
    --fs-5xl:  48px;
    --fs-display: 64px;

    /* Fluid display-размеры для public (афишные заголовки) */
    --fs-fluid-hero:  clamp(52px, 9vw, 108px);
    --fs-fluid-h1:    clamp(38px, 6vw, 72px);
    --fs-fluid-h2:    clamp(30px, 4.5vw, 48px);

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-base:  1.5;
    --lh-loose: 1.7;

    --tracking-tightest: -0.04em;     /* для display */
    --tracking-tighter:  -0.022em;    /* для большой типы */
    --tracking-tight:    -0.011em;    /* UI */
    --tracking-normal:   0;
    --tracking-wide:     0.04em;      /* small caps, eyebrows */
    --tracking-widest:   0.08em;

    /* === Radii === */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 12px;
    --r-5: 16px;
    --r-6: 24px;
    --r-pill: 999px;

    /* === Spacing rhythm (4px base) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* === Motion === */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-swift:  cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 0.15s;
    --t-base: 0.22s;
    --t-slow: 0.32s;
    --t-slower: 0.5s;

    /* ========================================================
       SLATE & TEAL (default для всех поверхностей)
       Нейтральный графит без цветового подтона, мягкий off-white
       текст, спокойный бирюзовый акцент, синий как вторичный/info.
       Правится тут + в inline :root в templates/support/index.html.
       ======================================================== */

    /* Surfaces (графитовый ramp, cool-нейтральный) */
    --bg-0:       #0f1417;   /* body — самый глубокий */
    --bg-1:       #161c20;   /* основные колонки/карточки */
    --bg-2:       #1e262b;   /* hover-сёрфейс */
    --bg-3:       #273035;   /* badges, code, bubbles */
    --bg-4:       #354149;   /* строки-разделители */

    --border:        #232c31;
    --border-soft:   #1a2226;
    --border-strong: #3a464e;

    /* Text (нейтральный off-white) */
    --text:        #e9edf0;
    --text-muted:  #9aa6ac;
    --text-dim:    #6a767c;
    --text-faint:  #4a565c;

    /* Accent — TEAL (главный CTA/ссылки/active) */
    --accent:        #20c4ac;
    --accent-hover:  #38d6bf;
    --accent-quiet:  #0f312d;        /* тёмный teal-tint для active-фонов */
    --accent-text:   #04211d;        /* на бирюзе — тёмный тёплый-зелёный */
    --accent-glow:   rgba(32, 196, 172, 0.20);
    --accent-rgb:    32, 196, 172;   /* для rgba(var(--accent-rgb), a) */

    /* Secondary — мягкий синий (info/ссылки, что не должны быть teal) */
    --indigo:        #4a9fd4;
    --indigo-quiet:  #12303f;

    /* Status accents */
    --warn:          #d4a24c;        /* янтарь */
    --warn-quiet:    #2a2413;
    --danger:        #e06a6a;
    --danger-hover:  #ec8888;
    --danger-quiet:  #2a1919;
    --success:       #4bbf87;
    --success-quiet: #12291f;
    --info:          #4a9fd4;        /* = мягкий синий */
    --info-quiet:    #12303f;

    /* Поверхности для public hero / оверлеев */
    --surface-hero:  linear-gradient(150deg, #123036 0%, #0f1417 55%, #10201c 100%);
    --overlay-scrim: rgba(3, 7, 9, 0.72);

    /* Shadows — глубокий cool-чёрный */
    --shadow-xs:  0 1px 1px rgba(3, 8, 11, 0.35);
    --shadow-sm:  0 1px 2px rgba(3, 8, 11, 0.45),
                  0 1px 1px rgba(3, 8, 11, 0.30);
    --shadow-md:  0 6px 16px rgba(3, 8, 11, 0.50),
                  0 2px 4px rgba(3, 8, 11, 0.30);
    --shadow-lg:  0 16px 40px rgba(3, 8, 11, 0.58),
                  0 4px 12px rgba(3, 8, 11, 0.38);
    --shadow-xl:  0 32px 80px rgba(3, 8, 11, 0.68),
                  0 8px 24px rgba(3, 8, 11, 0.45);
    --inset-hi:   inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --inset-low:  inset 0 -1px 0 rgba(0, 0, 0, 0.25);

    --ring-accent: 0 0 0 3px var(--accent-glow);
}

/* === body[data-theme="dark"] — идентичен :root (admin ставит этот атрибут
   исторически). Дефолт уже dark+gold, поэтому отдельных override не нужно;
   блок оставлен как явный якорь на случай будущих dark-специфичных твиков. === */

/* === Глобальные базовые стили === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    letter-spacing: var(--tracking-tight);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-variant-numeric: tabular-nums;
    background: var(--bg-0);
    color: var(--text);
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-2);
}

::selection {
    background: var(--accent);
    color: var(--accent-text);
}

/* === Стилизация скроллбаров (опционально — раскомментировать) === */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-4) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--bg-4);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--t-fast) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
    background: var(--accent);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
textarea::-webkit-scrollbar { width: 6px; }

/* === Утилитные классы для текстового баланса === */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* === Контейнер с ограничением === */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto; margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}
.container-tight { max-width: 720px; }
.container-wide { max-width: 1440px; }