/* === TOKENS.CSS === */
/* assets/css/tokens.css */
/* НАЗНАЧЕНИЕ: единственный источник правды по цвету, размеру, отступу и скруглению.
   Подключается ПЕРВЫМ на каждой странице кабинета, до всех остальных стилей.
   Значения не выдуманы: взят набор, который уже преобладал в 10 файлах из 30. */
/* СВЯЗИ: все assets/css/*.css читают эти переменные и НЕ объявляют свои :root */
/* РАЗМЕР: ~90 строк */

:root {
    /* --- Поверхности (снизу вверх: страница -> панель -> строка -> наведение) --- */
    /* 12.10.2026 Роман: «фон светлее, режет глаза» - темная тема поднята на +0.06 по яркости.
       Контраст пересчитан: text 13.0, muted 4.9+, err 4.56+ на --surface-2 (норма 4.5). */
    --bg:            oklch(0.24 0.010 250);
    --bg-0:          oklch(0.21 0.010 250);
    --surface:       oklch(0.27 0.012 250);
    --surface-2:     oklch(0.30 0.014 250);
    --surface-hover: oklch(0.33 0.018 250);

    /* Совместимость: имена, которыми уже пользуются страницы */
    --bg-1:  var(--surface);
    --bg-2:  var(--surface-2);
    --card:  var(--surface);
    --panel: var(--surface);
    --bg-hover: var(--surface-hover);
    /* Блоки главной (cabinet_w4.css: 1С, звонки, расшифровки, маршруты). Их тексты подобраны под
       темный фон (#c9d1d9, #8b949e), поэтому в светлой теме они остаются прежними темными. */
    --w4-0:    var(--bg-0);
    --w4-1:    var(--surface);
    --w4-2:    var(--surface-2);
    --w4-line: var(--border);

    /* --- Линии --- */
    --border:        oklch(0.38 0.010 250);
    --border-strong: oklch(0.48 0.015 250);
    --line: var(--border);

    /* --- Текст (три ступени, больше не нужно) --- */
    --text:  oklch(0.92 0.005 250);
    /* Яркость подобрана по контрасту на основном фоне, а не на глаз:
       было dim 0.68 (3.23) и muted 0.52 (2.5) при норме WCAG 4.5.
       Стало 0.76 и 0.66 - вторичный текст читается, оставаясь тише основного. */
    --dim:   oklch(0.76 0.012 250);
    --muted: oklch(0.69 0.012 250);

    /* Совместимость */
    --fg:       var(--text);
    --ink:      var(--text);
    --fg-dim:   var(--dim);
    --ink-soft: var(--dim);
    --fg-muted: var(--muted);
    --mut:      var(--muted);

    /* --- Смысловые цвета. Акцент один на весь кабинет --- */
    --accent:      oklch(0.72 0.18 200);
    --accent-soft: oklch(0.72 0.18 200 / 0.15);
    --accent-line: oklch(0.72 0.18 200 / 0.35);

    --ok:    oklch(0.74 0.16 145);
    --warn:  oklch(0.75 0.17 65);
    --err:   oklch(0.70 0.20 25);
    --ok-soft:   oklch(0.74 0.16 145 / 0.14);
    --warn-soft: oklch(0.75 0.17 65 / 0.14);
    --err-soft:  oklch(0.70 0.20 25 / 0.14);
    --green: var(--ok);
    --green-soft: var(--ok-soft);
    --green-line: oklch(0.74 0.16 145 / 0.35);

    /* --- Шкала шрифта. Семь ступеней вместо 54 произвольных размеров --- */
    --fs-1: 10px;   /* служебное: подписи под цифрой, легенды */
    --fs-2: 11px;   /* шапки таблиц, чипы, метки */
    --fs-3: 12px;   /* основной текст интерфейса */
    --fs-4: 13px;   /* акцентная строка, ячейка с числом */
    --fs-5: 15px;   /* заголовок панели */
    --fs-6: 19px;   /* заголовок страницы */
    --fs-7: 28px;   /* крупная цифра KPI */

    /* --- Шкала отступов. Кратна четырём, чтобы блоки вставали в общий ритм --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 10px;
    --sp-4: 14px;
    --sp-5: 20px;
    --space: var(--sp-3);
    --gap:   var(--sp-3);
    --gap-xs: var(--sp-1);
    --gap-sm: var(--sp-2);

    /* --- Скругления. Три ступени вместо двадцати --- */
    --r-1: 4px;    /* чип, бейдж, мелкая кнопка */
    --r-2: 6px;    /* панель, карточка, поле ввода */
    --r-3: 10px;   /* крупный контейнер */
    --r-pill: 999px;
    --radius: var(--r-2);

    /* --- Тени --- */
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.25);
    --shadow-2: 0 4px 16px oklch(0% 0 0 / 0.30);
    --shadow: var(--shadow-1);

    /* --- Шрифты и движение --- */
    --font-mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

    /* --- Псевдонимы, которые уже прижились на страницах.
           Держим их здесь, чтобы страницы не заводили свои :root заново. --- */
    --bg-3:      var(--surface-2);
    --bg-soft:   var(--surface);
    --panel2:    var(--surface-2);
    --danger:    var(--err);
    --bad:       var(--err);
    --red:       var(--err);
    --good:      var(--ok);
    --success:   var(--ok);
    --warning:   var(--warn);
    --mid:       var(--warn);
    --amber:     var(--warn);
    --text-mute: var(--muted);
    --text-dim:  var(--dim);
    --tx:        var(--text);
    --tx2:       var(--dim);
    --gap-lg:    var(--sp-5);
    --radius-sm: var(--r-1);
    --radius-lg: var(--r-3);
    --shadow-lg: var(--shadow-2);
    --ease:            var(--ease-out);
    --ease-out-quart:  var(--ease-out);
    --transition:      140ms var(--ease-out);
    --hairline:  var(--border);
    --grid-line: var(--border);
}

/* --- Базовый слой заголовков.
       Без него браузер считает размер h1-h4 сам от базового шрифта и выдает
       дробные 15.21px / 19.5px, которые не попадают ни в одну ступень шкалы. --- */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);   /* заголовок и подпись рядом больше не слипаются */
}
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-5); }
h4 { font-size: var(--fs-4); }

/* --- Состояние загрузки.
       Статичная надпись при задержке читается как зависание. Мягкая пульсация
       показывает, что система работает. Отключается для тех, кто просил
       уменьшить анимацию. --- */
.loading, .pulse-loading {
    animation: bm-breathe 1.6s ease-in-out infinite;
}
@keyframes bm-breathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .loading, .pulse-loading { animation: none; opacity: 0.7; }
    * { scroll-behavior: auto !important; }
}

/* --- Формы наследуют шрифт страницы.
       button, input, select и textarea НЕ наследуют font-family от родителя:
       браузер подставляет свой (на macOS это Arial). Из-за этого кнопки меню
       на всех страницах набирались чужой гарнитурой. --- */
button, input, select, textarea, optgroup {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* --- Шапки панелей: заголовок и подпись не должны слипаться.
       Заголовок и span-подпись лежат соседями внутри .panel-head, поэтому
       правило gap на самом заголовке их не разводит - нужен gap у родителя.
       Симптом был виден как "Воронка по менеджерамза 30 дней". --- */
.panel-head, .page-head, .pulse-panel-head, .sm-header {
    gap: var(--sp-3);
}

/* --- Текст ПОВЕРХ заливки смысловым цветом.
       --ok, --warn и --ok светлые (яркость 0.74-0.75), белый текст по ним дает
       контраст 2.17 при норме 4.5 - кнопка читается блекло. Темный текст по
       той же заливке дает 8.3. Красный --err темнее, там белый корректен. --- */
:root {
    --on-ok:    oklch(0.20 0.03 145);
    --on-warn:  oklch(0.20 0.03 65);
    --on-err:   oklch(0.98 0.01 25);
    --on-accent: oklch(0.18 0.02 200);
}

/* --- Корневой элемент.
       Без правила на html браузер держит на нем свои умолчания (16px, Times),
       и они протекают в те элементы, которым размер не задан явно: в замерах
       на 10 страницах из 11 всплывал 16px, которого нет ни в одной ступени
       шкалы, и Times в списке гарнитур. --- */
html {
    font-family: var(--font-display);
    font-size: var(--fs-3);
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --- Светлая тема: ОДНО место на весь кабинет (06.10.2026).
       Раньше каждая страница объявляла свой блок [data-theme="light"], и
       каждая переопределяла РАЗНЫЙ набор токенов. Из-за этого меню
       оставалось темным даже на светлой странице: bonus.css переопределял
       --bg-2, но не --surface, а --bg-1 (фон меню) ссылается именно на
       --surface. Теперь базовый набор задан тут, а страничные блоки
       остаются и просто дублируют часть значений - это безвредно.
       Порядок подключения: tokens.css идет первым, страничный CSS после,
       поэтому страница при желании может перекрыть любой токен. --- */
:root[data-theme="light"] {
    /* блоки главной в светлой теме как до 12.10 (их тексты светлые) */
    --w4-0: #0d1117; --w4-1: #161b22; --w4-2: #21262d; --w4-line: #30363d;
    --bg:            oklch(0.97 0.005 250);
    --bg-0:          oklch(0.99 0.003 250);
    --surface:       oklch(0.93 0.005 250);
    --surface-2:     oklch(0.88 0.005 250);
    --surface-hover: oklch(0.90 0.005 250);
    --border:        oklch(0.82 0.010 250);
    --border-strong: oklch(0.72 0.015 250);
    --text:  oklch(0.20 0 0);
    --muted: oklch(0.45 0.02 250);
    /* Волна 2, раздел 5 (09.10.2026): было 0.55 = контраст 3.4-3.9 при норме 4.5.
       Теперь dim темнее muted, как и в темной теме (dim ближе к основному тексту). */
    --dim:   oklch(0.42 0.02 250);

    /* Смысловые цвета в светлой теме. Раньше их тут не было, и действовали яркие
       значения темной темы: контраст 1.5-2.4 к фону (axe 09.10: 149 нарушений
       на 8 страницах). Яркость подобрана расчетом: не ниже 4.9 к --surface-2,
       не ниже 4.6 к подложке *-soft, все внутри sRGB. */
    --accent:      oklch(0.45 0.08 215);
    --accent-soft: oklch(0.45 0.08 215 / 0.14);
    --accent-line: oklch(0.45 0.08 215 / 0.35);
    --ok:    oklch(0.45 0.11 150);
    --warn:  oklch(0.47 0.11 60);
    --err:   oklch(0.48 0.17 27);
    --ok-soft:   oklch(0.45 0.11 150 / 0.14);
    --warn-soft: oklch(0.47 0.11 60 / 0.14);
    --err-soft:  oklch(0.48 0.17 27 / 0.14);
    --green-line: oklch(0.45 0.11 150 / 0.35);
    /* Текст на заливке смысловым цветом: заливки стали темными, текст светлый (6.6+) */
    --on-accent: oklch(0.98 0.01 215);
    --on-ok:     oklch(0.98 0.01 150);
    --on-warn:   oklch(0.98 0.01 60);
    --on-err:    oklch(0.98 0.01 27);
    --shadow:   0 2px 8px oklch(0.50 0 0 / 0.15);
    --shadow-1: 0 1px 2px oklch(0.50 0 0 / 0.15);
}

/* --- Волна 1 UX, S2 (08.10.2026): новые канонические токены из плана
       plans/07_10_26_UX_REDIZAJN_3_SESSII.md, раздел 1.2. Только ДОБАВЛЕНИЕ:
       существующие значения и синонимы выше не меняются (это волна 2).
       Значения проверены расчетом контраста WCAG (oklch -> sRGB):
       --text-2/--text-3 не ниже 4.5 к --bg и --surface в обеих темах,
       --viz-1..8 не ниже 3:1 даже к --surface-2 (темная 5.68+, светлая 3.40+),
       соседние цвета палитры различимы (OKLab не меньше 0.10).
       Таблица замеров: progress/ux_2026_10/S2_ZAMER.md. --- */
:root {
    /* Текст основного блока. Сейчас та же гарнитура, что у заголовков:
       отдельное имя нужно, чтобы в волне 2 менять одно, не трогая другое */
    --font-body: var(--font-display);

    /* Текст: вторичный (подписи к цифрам, пояснения) и третий (метки, легенды) */
    --text-2: oklch(0.80 0.010 250);
    --text-3: oklch(0.68 0.012 250);

    /* Графики: категориальная палитра. Порядок = порядок серий:
       первые цвета самые различимые; --viz-7 нейтральный, под «прочее» */
    --viz-1: oklch(0.74 0.13 240);
    --viz-2: oklch(0.78 0.15 65);
    --viz-3: oklch(0.76 0.12 170);
    --viz-4: oklch(0.72 0.16 330);
    --viz-5: oklch(0.84 0.14 100);
    --viz-6: oklch(0.70 0.14 290);
    --viz-7: oklch(0.80 0.03 250);
    --viz-8: oklch(0.70 0.17 15);
    --viz-grid: oklch(0.36 0.010 250);
    --viz-axis: oklch(0.68 0.012 250);
}
:root[data-theme="light"] {
    --text-2: oklch(0.42 0.015 250);
    --text-3: oklch(0.50 0.015 250);
    --viz-1: oklch(0.52 0.14 250);
    --viz-2: oklch(0.56 0.14 55);
    --viz-3: oklch(0.53 0.10 170);
    --viz-4: oklch(0.52 0.18 340);
    --viz-5: oklch(0.54 0.11 100);
    --viz-6: oklch(0.50 0.16 295);
    --viz-7: oklch(0.50 0.03 250);
    --viz-8: oklch(0.50 0.19 15);
    --viz-grid: oklch(0.88 0.008 250);
    --viz-axis: oklch(0.50 0.015 250);
}