/* 01-tokens.css — часть дизайн-системы портала (см. docs/design_system.md).
 *
 * ⚠ ПОРЯДОК ПОДКЛЮЧЕНИЯ ЗНАЧИМ. Файлы грузятся по номеру в имени, и поздние
 * правила перекрывают ранние. Список <link> — в templates/base.html; менять
 * порядок или вставлять файл в середину нельзя, не проверив каскад.
 *
 * Токены: :root, брейкпоинты, базовый body. Всё оформление настраивается отсюда.
 */
:root {
    /* Дизайн-система 2026 (docs/design_system.md §2). Палитра: спокойный холст,
       зелёный — акцент. Старые имена (--brand-dark, --brand-light) сохранены как
       псевдонимы новых, чтобы не переписывать 2000 строк ссылок на них. */
    --brand: #0d7a3e;          /* акцент на светлом: ссылки, иконки, активное */
    --brand-deep: #0d3d22;     /* тёмные поверхности: шапка, сайдбар */
    --brand-mid: #175232;      /* активный пункт меню */
    --accent: #2ecc71;         /* яркий акцент: прогресс, кнопка поиска */
    --brand-light: #eaf3ee;    /* светлая заливка-тинт (бейджи, аватары) */
    --brand-lighter: #f2f8f4;  /* hover-фон строк */
    --ink: #12211a;            /* основной текст */
    --muted: #5f6d66;          /* вторичный текст (4.8:1 на --bg, 5.4:1 на белом) */
    --line: #e5eae7;           /* границы, разделители */
    --bg: #eef1ef;             /* фон страницы */
    --surface: #ffffff;        /* карточки, панели */

    --warn: #b25e00;
    --warn-bg: #fff8ee;
    --warn-line: #f0dcc0;
    /* Текст на --warn-bg: --warn сам (#b25e00) даёт лишь 4.43:1 на этом фоне —
       чуть ниже порога 4.5:1 для абзацного текста (иконке/точке хватило бы и
       так, порог там 3:1). #8a5a12 — тот же оттенок, что уже держит
       .cset-pill-draft; 5.6:1 на --warn-bg. */
    --warn-ink: #8a5a12;
    --danger: #e03131;

    /* Семантика статусов (§5.5, §E3 аудита). Пара на каждый статус:
       «-ink» — текст/иконка, «-bg» — тинт-подложка. Насыщенные цвета под белый
       текст берём из --brand / --warn / --danger: они уже проверены на контраст.
       ⚠ Новых цветов для статусов не заводить — §9. */
    --ok-ink: var(--brand);
    --ok-bg: #e7f3ea;
    --info: #3b58d8;           /* входящее/исходящее, командировка, «в работе».
                                  Было #4263eb — 4.4:1 на своём тинте, чуть ниже нормы. */
    --info-bg: #eef1f8;
    --danger-ink: #8f4a4a;     /* красный текст на светлом (пропущенный звонок) */
    --danger-tint: #f2dede;    /* подложка «пропущен» */
    --danger-bg: #fff0f0;      /* фон hover у опасных кнопок, плашка ошибки */
    --danger-line: #f3c8c8;
    --neutral: #6b7278;        /* «не состоялось», серый бейдж */
    --line-strong: #cfe0d6;    /* граница карточки при hover — на шаг заметнее --line */

    /* Псевдонимы под легаси-код */
    --brand-dark: var(--brand-deep);

    /* Роли поверхностей и «геройских» заливок.
       ⚠ Тема настраивается переопределением ЭТИХ токенов, а не перечислением
       компонентов. Раньше розовой теме приходилось называть восемь селекторов
       подряд только потому, что градиент был вписан в каждый компонент, — и любой
       новый компонент из темы выпадал. Новый блок с тёмной заливкой берёт
       --hero-grad, и все темы подхватывают его сами. */
    --surface-side: var(--brand-deep);   /* сайдбар */
    --surface-bar: var(--surface);       /* топбар */
    --hero-grad: linear-gradient(135deg, #0d5230 0%, #0d3d22 100%);        /* плашки: «Мой день», прогресс, шапка карточки */
    --hero-grad-page: linear-gradient(150deg, #0f5a2e 0%, #0a3f20 58%, #0c2e19 100%);  /* крупный герой (вход) */

    /* Тени */
    --shadow-sm: 0 1px 3px rgba(18, 33, 26, .05);
    --shadow-md: 0 6px 20px rgba(18, 33, 26, .07);
    --shadow-lg: 0 14px 40px rgba(18, 33, 26, .16);

    /* Типографическая шкала (§3). ⚠ Кегли задавать только этими токенами.
       Полушаги (10.5 / 11.5 / 12.5 / 13.5 / 14.5) убраны: разницу в полпикселя
       никто не видит, а система от них разъезжается — было 32 разных значения.
       Вне шкалы намеренно остаются ГРАФИЧЕСКИЕ кегли: инициалы в круглых
       аватарах, печать сертификата, крупная цифра на 404. Они привязаны к
       диаметру контейнера, а не к иерархии текста, и шкале не подчиняются. */
    --fs-label: 11px;   /* моно-капслоки, мелкие метки; мельче — не опускаться */
    --fs-xs: 12px;      /* вторичный текст, мета */
    --fs-sm: 13px;
    --fs-body: 14px;    /* основной текст, строки списков */
    --fs-md: 15px;      /* заголовок панели, крупная строка */
    --fs-lg: 18px;      /* заголовок раздела внутри страницы */
    --fs-xl: 22px;
    --fs-2xl: 26px;     /* .page-title */
    --fs-3xl: 30px;
    --fs-4xl: 34px;     /* число-герой */

    /* Радиусы (§2) — крупнее прежних, мягкая геометрия */
    --radius-panel: 20px;  /* панели дашборда, крупные карточки */
    --radius-card: 16px;   /* карточки сотрудников, инфо-карточки */
    --radius-pill: 20px;   /* «таблетки»: бейджи, счётчики */
    --radius-sm: 11px;     /* инпуты, мелкие плитки */

    /* Реальная высота шапки. Ранее было захардкожено 64px, но шапка
       переносит содержимое по строкам и её высота зависит от ширины:
       ≥1200 — 66px, 992–1199 — 80px, 768–991 — 120px (замерено в браузере).
       Из-за 64px липкое меню подлезало под шапку на средних ширинах. */
    --nav-h: 66px;
}

@media (max-width: 1199.98px) {
    :root { --nav-h: 80px; }
}

@media (max-width: 991.98px) {
    :root { --nav-h: 120px; }
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}