/* Токены ERP FERRUM — по брендбуку v1.1 (analytics/brand/ferrum_brandbook.md), бренд-директор 02.11.2026.
 * Монохром; розовый металл — метка «где я» (активный пункт меню, вкладка, линия фокуса с клавиатуры) и, с аудита
 * акцентов 10.11.2026, черта-акцент: под ссылкой, под включённым фильтром колонки, под «сегодня». Только линией: текстом
 * 11–13 px на компе (Windows, dpr 1) он рисуется серым (UX 10.11: «Отправить» #726867 при сером #656565). Заливкой не бывает.
 * Медь стола (#8C5E3E) выведена из бренда 03.08.2026 — здесь её нет.
 * Текстовые оттенки ok/bad темнее брендовых: брендовые #4a9a6a и #e25555 на белом дают 3,4 и 3,7 : 1,
 * для мелкого текста нужно 4,5 : 1 (замер 02.11.2026) — брендовые остаются для рамок и меток. */

/* Шрифт — системный (Елена 02.11.2026: «что со шрифтом — ничего не видно, поменяй его»). Jost без сглаживания
 * (Windows по удалённому входу) рассыпался и пропадал; системные шрифты рисуются чётко и без него.
 * На Windows любое начертание до 450 — обычный Segoe UI, от 451 — Segoe UI Semibold: тонкий Light не выйдет,
 * даже если где-то в стилях осталось 300. На iPhone и Mac — San Francisco, на Android — Roboto. */
@font-face {
  font-family: 'ERP Sans';
  font-weight: 100 450;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'ERP Sans';
  font-weight: 451 900;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}

:root {
  /* цвета */
  --paper: #ffffff;
  --ink: #1a1a1a;          /* текст, основная кнопка */
  --ink-hover: #333333;
  --ink-2: #666666;        /* текст второго плана — как .sec-lead сайта, 5,7 : 1 */
  --ink-3: #767676;        /* подписи и меню — сайт берёт #888, здесь на тон темнее: 4,5 : 1 */
  --nav-ink: #555555;      /* меню, вкладки, нижняя панель, профиль — 400 (Елена 02.11: «меню еле видно» при 300 и #767676) */
  --line: #e0e0e0;         /* линия под полем, шапки и меню — как --border сайта */
  --line-soft: #eeeeee;    /* разделители строк */
  --card: #fafafa;         /* строка таблицы под мышью — как --card сайта; у полей и карточек подложки нет (правила 11–12) */
  --mist: #f5f5f5;         /* подложка при наведении */
  --mist-2: #fafafa;       /* меню слева, плашки */
  --control-off: #c4c4c4;  /* пустой флажок, выключенный переключатель — без рамки; #e0e0e0 на белом почти не виден */
  --metal: #A38985;        /* розовый металл — метка «где я» и линия фокуса с клавиатуры */
  --metal-ink: #8C6E69;    /* тёмная грань металла, 4,6 : 1 — для текста металлом */
  --metal-glow: rgba(163, 137, 133, .28);
  --ok: #4a9a6a;
  --ok-ink: #3d7f57;
  --bad: #e25555;
  --bad-ink: #c23b3b;
  --scrim: rgba(26, 26, 26, .32);

  /* акценты (аудит дизайна 10.11.2026, Елена: «всё серо слишком» — «расставь акценты по брендбуку»). Брендбук бренда:
     монохром и дозированный розовый металл — подчёркивание ссылок, активное состояние; здесь металл — только линией.
     Акцент — контраст: чёрное плотное против серого, красный и зелёный у статусов (kit.css .tone-*) */
  --kicker: var(--ink);         /* название блока экрана и карточки, подпись итога над цифрой — чёрным 500, одно на всё ERP
                                   (было серым в одних разделах и чёрным в других; металл в 11 px на компе читался серым) */
  --link-line: var(--metal);    /* черта под ссылкой в ячейке и в карточке */
  --th-bg: var(--paper);        /* строка названий таблицы — без серой плашки */
  --th-ink: var(--ink);         /* названия колонок — чёрным капсом */
  --th-rule: var(--ink);        /* линия под строкой названий — чёрная: таблицу держит она, а не серая заливка */

  /* раздел внутри экрана (правило 18, комплексный дизайн 13.11.2026; Елена: «наименования разделов крупнее»,
     «ничего не поменялось… не вижу чтобы сам раздел воронка как-то отделялся визуально», «может сделать их в металле»):
     название раздела — 24 px, над ним линия его цвета и воздух. Иерархия экрана: название страницы 30 → раздел 24 →
     текст и значения 15 → подписи 11 капсом. Металл текстом — только от 24 px (3,2 : 1 — норма крупного текста);
     раздел в листе — 18 px, ему металл — тёмной гранью (4,6 : 1) */
  --t-sec: 24px;
  --sec-ink: var(--metal);       /* название раздела и линия над ним — металл, её «302 а» (14.11.2026) */
  --sec-ink-sm: var(--metal-ink);/* название раздела в листе (18 px) */
  --sec-gap: 40px;               /* воздух над разделом: телефон 40, комп 48 */

  /* шрифт — системный, 400 — текст, 500 — заголовки, капс с разрядкой 1 px — меню, кнопки, подписи
     (Елена 02.11.2026: «ничего не видно, поменяй»; было Jost 300 как на сайте) */
  --font: 'ERP Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font);  /* крупные цифры («Деньги») — тем же шрифтом; Bebas Neue в ERP больше нет */
  --t-h1: 30px;            /* заголовок раздела — как .sec-h сайта, и на телефоне */
  --t-title: 18px;         /* заголовок листа, профиля, состояния */
  --t-body: 15px;          /* текст — как .sec-lead сайта */
  --t-nav: 13px;           /* меню, вкладки — как .cab-nav-links */
  --t-btn: 12px;           /* кнопки — как .cab-pay-btn */
  --t-label: 11px;         /* подписи, роль, нижняя панель — как .cab-field label */
  --caps: 1px;             /* разрядка капса — как на сайте */
  --field-font: 16px;      /* меньше — iOS увеличивает страницу при вводе */

  /* размеры */
  --tap: 44px;             /* минимум любой цели нажатия */
  --control-h: 48px;
  --bar-h: 56px;
  --nav-h: 64px;
  --side-w: 240px;
  --content-max: 1120px;
  --gutter: 20px;
  --radius: 10px;          /* брендбук */
  --radius-btn: 8px;       /* брендбук, кнопки */
  --radius-sheet: 16px;
  --shadow: 0 1px 12px rgba(0, 0, 0, .05);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, .10);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, .14);   /* окно у угла, меню, уведомление: рамок нет — край даёт тень */

  /* вырез и закруглённые углы экрана телефона */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* движение */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --sec-gap: 48px;
  }
}