/* ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ — КАНОН (UI-1, партия серии UI-*, 17.09.2026).

   Единственный источник цвета/шрифта/шкалы/отступа/радиуса/движения для
   этого приложения. Пульс подключает КОПИЮ этого файла своей партией — эта
   копия у него не редактируется, изменения идут через канон здесь.

   ПРАВИЛО ФАЙЛА: hex-литералы живут ТОЛЬКО здесь. webapp/static/стиль.css
   и любой другой CSS этого приложения обязаны ссылаться на цвет через
   var(--имя), никогда через #hex напрямую (сторож — tools/test_chitaemost.py,
   раздел про tokens.css).

   ТЕМА ВЫБИРАЕТСЯ ЧЕЛОВЕКОМ (UI-3, 18.09.2026): «···» → Оформление →
   Авто / Светлая / Тёмная. Выбор хранится в localStorage и ставится
   атрибутом `data-theme` на <html> инлайн-скриптом в <head> — до первой
   отрисовки, поэтому вспышки светлого перед тёмным нет. По умолчанию
   (человек не выбирал) — СВЕТЛАЯ: прежнее продуктовое решение «тёмная
   тема отклонена» снимается выбором, а не втихую за всех сразу.
   Соответственно тёмная тема ниже живёт в двух блоках: системный @media
   действует только при `data-theme="auto"`, явный выбор — при
   `data-theme="dark"`.

   АКЦЕНТ ПРИЛОЖЕНИЯ. --accent = --blue (см. ниже). У Пульса свой акцент —
   он переопределяет ровно --accent (и, если понадобится, *-soft варианты
   от него) в СВОЁМ файле из трёх строк поверх этой копии, остальные токены
   не трогает.
*/

:root{
  /* СВЕТЛАЯ СХЕМА ЯВНО (UI-11, п.11). Без объявления браузер берёт схему у
     системы, и на машине с тёмным оформлением ОС нативные виджеты (каретка,
     список <select>, календарь) приходили бы тёмными на светлый экран
     продукта — зеркало той же беды, что чинится в тёмной ветке ниже. По
     умолчанию продукт светлый (см. шапку файла), и схема обязана это
     повторять. */
  color-scheme: light;
  /* ── Цвета, светлая тема ─────────────────────────────────────────── */
  --bg:    #F2F2F7;
  --card:  #FFFFFF;
  --card2: #F7F7FA;
  --ink:   #1C1C1E;
  /* --ink2/--ink3 ОТЛИЧАЮТСЯ от значений постановки (#8E8E93 / #C7C7CC).
     Это системные iOS-цвета secondaryLabel/tertiaryLabel — на плоском фоне
     веб-страницы (а не поверх системной подложки, для которой они
     проектировались) оба не проходят tools/test_contrast.py: #8E8E93 даёт
     2.92:1 на --bg при пороге 4,5:1, #C7C7CC — 1.51:1 при пороге 3:1.
     Подобраны новые значения с запасом (см. отчёт партии UI-1); имена и
     роль (вторичный/третичный текст) — те же, что в постановке. */
  --ink2:  #666669;
  --ink3:  #87878B;
  --sep:   rgba(60,60,67,.12);
  --fill:  rgba(120,120,128,.12);
  --fill2: rgba(120,120,128,.06);

  /* ── Семантика ────────────────────────────────────────────────────── */
  --blue:   #007AFF; /* действие */
  --green:  #34C759; /* в порядке */
  --orange: #FF9500; /* внимание */
  --red:    #FF3B30; /* блокирует */
  --teal:   #30B0C7;
  --purple: #AF52DE;

  --blue-soft:   rgba(0,122,255,.12);
  --green-soft:  rgba(52,199,89,.12);
  --orange-soft: rgba(255,149,0,.12);
  /* ЦВЕТ ТЕКСТА НА СВОЕЙ ПОДЛОЖКЕ (UI-10, п.11). Системные оранжевый и
     зелёный — цвета ЗАЛИВКИ; как текст поверх собственного --*-soft они
     дают 2:1 при пороге 3:1 (замерено tools/test_contrast.py). Оттенок тот
     же, светлота ниже: ярлык остаётся оранжевым, но читается.
     Синий порог проходит своим значением — отдельного токена ему не
     заводим. Красный ТЕКСТ — токен --red-ink (23.10.2026): системный --red
     как текст 12 px давал 3,55:1 на карточке и 3,18:1 на фоне при пороге
     4,5:1. Заливки, значки и рамки остаются на --red. */
  --green-ink:   #157F3C;
  --orange-ink:  #A65200;
  --red-ink:     #C8261D;
  /* П5 Т4: «◆ Сохранена» — бирюзовый текстовой светлоты (контраст ≥ 4.5). */
  --teal-ink:    #0B6F80;
  --red-soft:    rgba(255,59,48,.12);
  --teal-soft:   rgba(48,176,199,.12);
  --purple-soft: rgba(175,82,222,.12);

  --accent: var(--blue);
  --accent-soft: var(--blue-soft);

  /* Текст на заполненной акцентом/семантикой поверхности (кнопка «главная»,
     плашки статуса) — не входит в список постановки буквально, но без него
     свести цвет кнопочного текста в токены было бы нечем: белый на синей
     кнопке не «карточка», это отдельная роль. Значение одно на обе темы —
     акцентные цвета обеих тем достаточно тёмные/яркие для белого текста. */
  --on-accent: #FFFFFF;

  /* Составные/расчётные цвета конкретных экранов — тоже сюда, не россыпью
     по стиль.css (правило файла выше). Не часть словаря постановки, но тот
     же принцип: значение одно, место одно.
       --chart-pos/--chart-neg — водопад «Обзора» (fill двух видов баров,
       приглушённее текстовых --green/--red — на десятке мелких столбиков
       подряд яркий семантический цвет читался бы как тревога, не как знак);
       --warn-border — рамка предупреждающей плашки (.варианты-решения). */
  --chart-pos: #7AA874;
  --chart-neg: #C9A0A0;
  --warn-border: #F0E2C0;
  /* Запретная зона на дорожке ползунка «Что если» (webapp/стресс — упор по
     ограничению банка). Насыщеннее --red-soft: на дорожке высотой 6px
     бледная заливка читается как грязь, не как граница (унаследовано из
     стиль.css, находка 11.09.2026). */
  --zone-forbidden: rgba(255,59,48,.38);
  /* Тень выпадающего меню и окна поиска, завеса под оверлеем поиска (UI-3).
     Тоже сюда, а не россыпью по стиль.css: правило файла выше — цветов вне
     tokens.css нет вовсе, а тень и завеса — цвета, просто полупрозрачные. */
  --shadow: rgba(0,0,0,.14);
  --scrim:  rgba(0,0,0,.28);

  /* ── Шрифт ────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Inter, system-ui, sans-serif;

  /* ── Шкала (rem, база 14px — см. body ниже) ──────────────────────── */
  --fs-hero:  3.142857rem; /* 44px */
  --fs-title: 2.428571rem; /* 34px */
  --fs-kpi:   2rem;        /* 28px */
  --fs-h1:    1.214286rem; /* 17px */
  --fs-h2:    1.071429rem; /* 15px */
  --fs-body:  1rem;        /* 14px */
  --fs-cap:   0.857143rem; /* 12px */
  --fs-micro: 0.785714rem; /* 11px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Трекинг ОТРИЦАТЕЛЬНЫЙ от --fs-kpi (28px) и крупнее — крупные цифры/
     заголовки у плотных начертаний иначе выглядят разрежённо. Ниже кегля
     28 трекинг не трогаем (0) — тело/подписи и так набраны плотно. */
  --ls-hero:  -0.02em;
  --ls-title: -0.017em;
  --ls-kpi:   -0.013em;
  --ls-body:  0;

  /* ── Отступы, шаг 8pt ─────────────────────────────────────────────── */
  --sp-1: 0.571429rem; /*  8px */
  --sp-2: 0.857143rem; /* 12px */
  --sp-3: 1.142857rem; /* 16px */
  --sp-4: 1.428571rem; /* 20px */
  --sp-5: 2rem;        /* 28px */

  /* ── Радиусы ──────────────────────────────────────────────────────── */
  --r-tag:   6px;
  --r-field: 9px;
  --r-inset: 14px;
  --r-card:  16px;
  --r-pill:  999px;

  /* ── Движение ─────────────────────────────────────────────────────── */
  /* ТАЧ-ЗОНА (UI-10, п.3). 44 pt — минимум, ниже которого палец промахивается
     (Apple HIG); 50 pt — кнопки РЕШЕНИЯ на телефоне: их нажимают один раз и
     на них держится смысл визита. Токены, а не числа по месту: сторож
     оболочки читает именно их и проверяет, что кликабельное на них стоит. */
  --touch:      44px;
  --touch-big:  50px;
  /* ВЫСОТА КОНТРОЛА (UI-22, п.2) — ОДНА НА ПИЛЮЛИ И SELECT. Списки версий
     на «Сравнении» были заметно ниже соседних кнопок: у пилюль высота
     задавалась явно (32px), у select — только отступами, и в трёх разных
     местах разными числами (9px/11px на форме нового проекта, 5px/8px на
     «Сравнении», 4px/6px в ячейке «Данных»). Три select с тремя высотами —
     не три решения, а одна забытая связь. Теперь высота — токеном, и он
     ОДИН на оба вида контрола; пилюли уже стояли на этом числе, select
     подтягиваются к нему этой партией.*/
  --h-control:  32px;
  --dur-fast: 200ms;
  --dur:      320ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* ПРАВИЛО (не CSS, для людей): не больше одного переходного элемента
     одновременно на экране — тост/плашка вытесняет предыдущую, а не
     складывается с ней в очередь параллельных анимаций. */
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur: 0ms; }
}

/* ── Тёмная тема ПО СИСТЕМЕ — ТОЛЬКО ПРИ ЯВНОМ ВЫБОРЕ «Авто» (UI-3,
   18.09.2026). Это та самая «одна правка селектора», которую UI-1 оставил
   контрактом на будущее: тогда блок был заведомо неактивен
   (`[data-theme="dark"]` внутри `@media` — условие, которое никто не ставил),
   потому что безусловный `@media (prefers-color-scheme: dark)` переключал
   боевой экран сам, без спроса и без способа вернуться.

   Теперь способ есть: «···» → Оформление → Авто / Светлая / Тёмная, выбор
   лежит в localStorage и ставится атрибутом `data-theme` инлайн-скриптом в
   <head> до первой отрисовки (без вспышки). Системная тема действует РОВНО
   при `data-theme="auto"` — то есть у того, кто попросил идти за системой,
   и ни у кого больше. По умолчанию (ничего не выбрано) — светлая. */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    /* Тёмная схема — НАТИВНЫМ ВИДЖЕТАМ ТОЖЕ (UI-11, п.11). CSS не достаёт
       каретку, выделение текста, раскрытый список <select>, календарь
       type=date и полосы прокрутки: без `color-scheme` они остаются
       светлыми поверх тёмного экрана, и поле выглядит поломкой. */
    color-scheme: dark;
    --bg:    #000000;
    --card:  #1C1C1E;
    --card2: #2C2C2E;
    --ink:   #F2F2F7;
    --ink2:  #98989D; /* из постановки как есть — проходит 4,5:1 на все три фона */
    /* --ink3 отличается от постановки (#48484A) по той же причине, что и
       в светлой теме — не проходило 3:1 (макс. 2.30:1). См. верхний
       комментарий файла и отчёт партии. */
    --ink3:  #838387;
    --sep:   rgba(84,84,88,.6);
    --fill:  rgba(120,120,128,.24);
    --fill2: rgba(120,120,128,.12);

    --blue:   #0A84FF;
    --green:  #30D158;
    --orange: #FF9F0A;
    --red:    #FF453A;

    --blue-soft:   rgba(10,132,255,.16);
    --green-soft:  rgba(48,209,88,.16);
    --orange-soft: rgba(255,159,10,.16);
    /* Подложка тёмная — тексту нужен тот же яркий цвет, что заливке. */
    --green-ink:   #30D158;
    --orange-ink:  #FF9F0A;
    --red-ink:     #FF453A;
    --teal-ink:    #40C8E0;
    --red-soft:    rgba(255,69,58,.16);

    --teal:   #40C8E0;
    --purple: #BF5AF2;
    --teal-soft:   rgba(64,200,224,.16);
    --purple-soft: rgba(191,90,242,.16);

    --chart-pos: #6FA868;
    --chart-neg: #B98C8C;
    --warn-border: #5C4A1E;
    --zone-forbidden: rgba(255,69,58,.42);
    /* На тёмном фоне тень почти не читается — держит форму окна не она, а
       рамка; завеса, наоборот, плотнее: светлое окно на тёмном фоне иначе
       не отделяется. */
    --shadow: rgba(0,0,0,.5);
    --scrim:  rgba(0,0,0,.55);
  }
}

/* Явный тёмный выбор (нет переключателя в UI-1 — контракт на будущее,
   см. шапку файла) — те же значения, без условия на системное предпочтение. */
:root[data-theme="dark"]{
  /* См. комментарий у `color-scheme` в ветке «auto» выше. */
  color-scheme: dark;
  --bg:    #000000;
  --card:  #1C1C1E;
  --card2: #2C2C2E;
  --ink:   #F2F2F7;
  --ink2:  #98989D;
  --ink3:  #838387;
  --sep:   rgba(84,84,88,.6);
  --fill:  rgba(120,120,128,.24);
  --fill2: rgba(120,120,128,.12);

  --blue:   #0A84FF;
  --green:  #30D158;
  --orange: #FF9F0A;
  --red:    #FF453A;

  --blue-soft:   rgba(10,132,255,.16);
  --green-soft:  rgba(48,209,88,.16);
  --orange-soft: rgba(255,159,10,.16);
  /* Подложка тёмная — тексту нужен тот же яркий цвет, что заливке. */
  --green-ink:   #30D158;
  --orange-ink:  #FF9F0A;
  --red-ink:     #FF453A;
  --teal-ink:    #40C8E0;
  --red-soft:    rgba(255,69,58,.16);

  --teal:   #40C8E0;
  --purple: #BF5AF2;
  --teal-soft:   rgba(64,200,224,.16);
  --purple-soft: rgba(191,90,242,.16);

  --chart-pos: #6FA868;
  --chart-neg: #B98C8C;
  --warn-border: #5C4A1E;
  --zone-forbidden: rgba(255,69,58,.42);
  --shadow: rgba(0,0,0,.5);
  --scrim:  rgba(0,0,0,.55);
}

body{
  font-variant-numeric: tabular-nums;
}