/* Токены платформы dev2mp. Один файл на всю морду: оболочка, все разделы,
   посадочная и вход. Значение цвета, размера или радиуса не пишется больше
   нигде — раздел, объявивший свой серый, через полгода разойдётся с общим.

   Откуда взяты. Владелец дал образец (снимки и слепок `.mhtml` в `~/DEV/tmp`,
   решение 11.09.2026). У образца React + Tailwind + shadcn/ui, и его палитра
   записана тройками HSL; здесь те же значения в hex, потому что считать их
   в рантайме незачем. Половина уже была принята 07.09 в `donors.css` — она
   перенесена дословно, чтобы разведка не сменила вид при переезде.

   Тёмная тема — решение владельца 11.09.2026, заводится сразу, а не потом:
   пока токены только закладываются, она стоит двадцати строк, а после —
   прохода по всем разделам.

   Правило: `:root` задаёт СВЕТЛУЮ тему целиком. Тёмная переопределяет только
   значения, ничего не добавляя. Цвет, у которого определение есть лишь внутри
   `[data-theme]`, — ошибка: он пропадёт в другой теме молча. */

:root {
  /* ── за какой темой идут РОДНЫЕ элементы ──────────────────────
     Галочки, полосы прокрутки, раскрытый список, поле без своего фона,
     подсветка выделенного текста — их рисует браузер, и до 14.09.2026 он
     рисовал их СВЕТЛЫМИ в любой теме: про наш `[data-theme]` он не знает.
     Стоило это не косметики: поле, которому раздел не задал фон, выходило
     белым, а текст в нём — `--ink`, то есть светлым по белому; своё значение
     параметра разведки в тёмной теме было не прочесть вовсе.

     Объявляется здесь, а не в разделе: тема одна на платформу, и второй
     ответ на тот же вопрос разошёлся бы с первым молча. Переключатель тот же,
     что у цветов (`[data-theme]`), — `theme-boot.js` ставит его ДО первой
     отрисовки, поэтому вспышки светлых элементов не будет.

     ⚠️ Явное значение и в светлой теме, а не только в тёмной: без него
     машина с тёмной системной темой красила бы родные элементы по-своему
     у человека, который выбрал светлую руками. */
  color-scheme: light;

  /* ── поверхности ─────────────────────────────────────────────── */
  --bg: #fafafa;             /* полотно страницы */
  --card: #ffffff;           /* карточка, панель, боковая полоса */
  --soft: #f5f5f5;           /* фон вторичной кнопки и плашки */
  --hover: #f7f7f7;          /* строка под курсором */
  --plate: #ebebeb;          /* фон ПЛАШКИ значения в ячейке. Отдельный от
                                `--soft`: тот отличается от строки под курсором
                                на два процента яркости, и плашка на наведённой
                                строке сливалась с ней (замечание владельца
                                13.09.2026). Плашка обязана читаться и на белом,
                                и под курсором — значит она темнее обоих */
  /* Стрелка выпадающего списка. КАРТИНКОЙ и токеном, потому что нативную
     стрелку рисует система и про нашу тему она не знает: в тёмной оставалась
     светло-серым треугольником на тёмном поле. Цвет зашит внутрь картинки,
     поэтому у тёмной темы своя — правило «`:root` задаёт светлую целиком,
     тёмная переопределяет значение» соблюдено. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --line: #e8e8e8;           /* граница карточки */
  --line-soft: #f0f0f0;      /* граница строки ВНУТРИ карточки: слабее внешней,
                                иначе список читается как решётка */

  /* ── текст ───────────────────────────────────────────────────── */
  --ink: #1f1f1f;            /* основной; он же фон чёрной кнопки */
  --ink-2: #737373;          /* пояснение под строкой */
  --mute: #9a9a9a;           /* отметка времени, счётчик, подпись */

  /* ── действие ────────────────────────────────────────────────── */
  /* Оранжевый — ЕДИНСТВЕННОЕ действие, меняющее мир (решение владельца
     07.09.2026). Им не красят ссылки и заголовки: если оранжевого на экране
     больше одного, он перестаёт значить «осторожно, это по-настоящему». */
  --accent: #f97316;
  --accent-soft: #fff1e5;
  --accent-line: #f7cba4;
  --accent-ink: #9a3d00;

  /* ── тона состояния ──────────────────────────────────────────── */
  /* Тон всегда приходит С СЕРВЕРА. Морда не знает порогов и не считает их
     сама, иначе они разойдутся с теми, по которым живёт «Система».

     У красного есть ТРЕТЬЕ значение — `--bad-line`, граница. Фон `--bad-bg`
     как граница неразличим на белом (#fdecec против #ffffff), и красная
     кнопка выглядела надписью, а не кнопкой: рамку было видно, только зная,
     что она есть (замечание владельца 13.09.2026). Пара «фон + граница» уже
     есть у оранжевого (`--accent-soft` / `--accent-line`) — красный просто
     догнал её. */
  --ok-bg: #e7f7ec;   --ok-fg: #15803d;
  --warn-bg: #fff3e0; --warn-fg: #b45309;
  --bad-bg: #fdecec;  --bad-fg: #c0392b;  --bad-line: #f2c9c9;
  --info-bg: #eaf1ff; --info-fg: #1b4fd8;

  /* ── синий графиков ──────────────────────────────────────────────
     Отдельный от `--info-fg`, и не ради разнообразия. Тон «сведения»
     подобран под ПЛАШКУ — тёмный текст на светлой подложке, — а у графика
     тот же цвет живёт линией в полтора пикселя и заливкой в 16 %: там он
     уходит в сирень (замечание владельца 15.09.2026). Здесь греческий
     синий — та же семья, но чище и холоднее.

     Оттенок выбран владельцем из четырёх на живых графиках: взят второй,
     чуть светлее флажного. Довод за него виден на снимке: тонкая линия
     кривой у флажного тона теряется, а столбикам лишняя плотность
     не нужна — они и так широкие. */
  --chart: #1668b8;

  /* ── площадки ────────────────────────────────────────────────────
     Цвета ПЛОЩАДОК — фирменные, и тона состояния они не значат (решение
     владельца 25.10.2026: отметка площадки у магазина — в её цветах).
     Живут только в отметке `mpMark`: заливка плашки и белая надпись. Белый
     на обоих — 5,0:1 и 5,3:1, читается в любой теме, поэтому у тёмной
     своих значений нет. Красить ими что-то ещё нельзя: малиновый WB рядом
     с красным «беда» начнёт читаться состоянием. Исключение — выбор магазина
     (`mpClass`, владелец 30.10.2026): кнопка магазина говорит «где», как отметка. */
  --mp-wb: #cb11ab;
  --mp-ozon: #005bff;
  --mp-ink: #ffffff;

  /* ── подсказка ───────────────────────────────────────────────── */
  /* Своя тройка, а не `--card`/`--ink-2`/`--line` прямо в правиле: вид
     подсказки владелец выбирал картинками (15.09.2026, три варианта на
     настоящем тексте с цитатой порога) и просил оставить возможность
     переиграть его позже, не трогая разметку. Теперь это одна строка:
     `document.documentElement.dataset.tip = 'ink'`.

     Выбрана СВЕТЛАЯ карточка. Довод, который решил: в тёмной теме тёмный
     ярлык обязан перевернуться в светлый, и после переворота отличие
     тёмно-синего варианта от `--ink` почти пропадает — он покупал разницу
     только в светлой теме, а стоил двух лишних значений в палитре. */
  --tip-bg: var(--card);
  --tip-ink: var(--ink-2);
  --tip-line: var(--line);

  /* ── контур ──────────────────────────────────────────────────── */
  /* Умолчание — БОЙ. Тот же порядок, что у `/brand/mark.svg` и у `[platform].env`:
     если контур почему-то не проставлен, страница выглядит боевой и человек
     осторожничает. Обратное умолчание однажды дало бы зелёную боевую морду. */
  --contour: #1f1f1f;

  /* ── размеры ─────────────────────────────────────────────────── */
  /* ── глубина ─────────────────────────────────────────────────── */
  /* Контур сгруппированного блока: строки таблицы и её раскрытой карточки.
     Мягче `--ink-2`, крепче `--line`. Выводится из `--ink`, поэтому
     в тёмной теме светлеет сам — второго объявления ему не нужно. */
  --frame: color-mix(in srgb, var(--ink) 22%, transparent);
  /* Карман: внутренняя тень по верхней кромке. Ею раскрытая карточка
     утапливается под своей строкой — граница между ними видна без второй
     линии. Чёрная в обеих темах: утопленное темнее соседей, а не светлее. */
  --well: inset 0 1px 0 rgba(0, 0, 0, .05),
          inset 0 8px 14px -12px rgba(0, 0, 0, .22);

  --r: 12px;                 /* карточка, кнопка, поле */
  --r-s: 9px;                /* мелкая кнопка, значок в плашке */
  /* Крупная плашка с одним числом (карточка сводки «РНП динамики»). Новая
     ступень СВЕРХУ, а не между существующими: правило «седьмого кегля
     не заводить» бережёт от неразличимых промежуточных размеров, а этот
     заметно больше самого большого. Выбран владельцем по снимкам
     15.09.2026 — карточку было не найти глазом. */
  --r-l: 18px;
  --rail: 236px;             /* левое меню развёрнуто */
  --rail-icon: 68px;         /* оно же свёрнуто, одни значки */
}

:root[data-env="dev"] { --contour: #00994a; }

/* Тёмная тема. Только переопределения. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --card: #151a21;
  --soft: #1d232c;
  --hover: #1b2129;
  --plate: #2b333f;          /* светлее и `--soft`, и `--hover`: на тёмном
                                плашка выступает вверх, а не вглубь */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238b95a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --line: #232a34;
  --line-soft: #1d232c;

  --ink: #e4e9ef;
  --ink-2: #8e9aa8;
  --mute: #6d7885;

  /* Оранжевый на тёмном фоне жжёт: тот же тон, но светлее и мягче. */
  --accent: #fb8b3c;
  --accent-soft: #33220f;
  --accent-line: #5c3b18;
  --accent-ink: #ffbb7d;

  --ok-bg: #10291a;   --ok-fg: #4ade80;
  --warn-bg: #2c2110; --warn-fg: #fbbf24;
  --bad-bg: #2e1618;  --bad-fg: #f87171;  --bad-line: #5c2b2e;
  --info-bg: #131f38; --info-fg: #7aa2f7;

  /* На тёмном полотне греческий синий тонет: берём его же светлее
     и чуть мягче — тон тот же, читается линией. */
  --chart: #5cb0ef;

  /* ⚠️ Подсказка в тёмной теме СВЕТЛЕЕ полотна, а не темнее (решение
     владельца 15.09.2026 по снимкам). В светлой теме она белая на сером —
     то есть выступает вверх; тот же `--card` в тёмной давал тёмную карточку
     на тёмном полотне, и от фона её отделяла одна тень. На снимке было
     видно, что подсказки почти нет.

     Поднимаем той же поверхностью, что и плашку значения (`--plate`):
     заводить ради этого новый цвет незачем, а правило «утопленное темнее,
     выступающее светлее» на тёмном работает уже в двух местах. */
  --tip-bg: var(--plate);
  --tip-ink: var(--ink);
  --tip-line: var(--line);

  /* Карман на тёмном глубже: там меньше контраста между поверхностями,
     и та же тень читалась бы как грязь, а не как глубина. `--frame`
     переопределять не нужно — он выводится из `--ink`. */
  --well: inset 0 1px 0 rgba(0, 0, 0, .5),
          inset 0 8px 14px -12px rgba(0, 0, 0, .8);
}
/* Второй вид подсказки — тёмный ярлык. Переопределений для тёмной темы
   ему не нужно: `--ink` и `--card` в ней уже поменялись местами, и ярлык
   переворачивается сам. Ради этого он и выведен из них, а не записан hex'ом. */
:root[data-tip="ink"] {
  --tip-bg: var(--ink);
  --tip-ink: color-mix(in srgb, var(--card) 88%, var(--ink));
  --tip-line: transparent;
}

/* Зелёный контура на тёмном тоже тускнеет — иначе дев не отличить от боя,
   а это единственное, ради чего плашка контура вообще стоит. */
:root[data-theme="dark"] { --contour: #e4e9ef; }
:root[data-theme="dark"][data-env="dev"] { --contour: #34d17f; }

/* ── шрифт ─────────────────────────────────────────────────────────
   Manrope самохостом: за Caddy стоит `default-src 'self'`, и внешний шрифт
   блокируется МОЛЧА — страница просто съезжает на системный стек, и это
   замечают не сразу. Два файла, а не один: кириллица весит больше латиницы,
   и вместе они грузились бы на каждой странице целиком. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("/ui/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url("/ui/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}

:root {
  --font: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Ступени кегля. Их шесть, и седьмой заводить не надо: каждый новый размер
     между соседними делает разницу между ними неразличимой. */
  --t-cap: 11px;   /* НАДПИСЬ НАД ЧИСЛОМ, шапка таблицы */
  --t-s: 12px;     /* пояснение, отметка времени */
  --t-b: 13px;     /* строка таблицы, кнопка */
  --t-m: 14px;     /* текст страницы, пункт меню */
  --t-h: 15px;     /* заголовок панели */
  --t-l: 21px;     /* заголовок страницы */
  --t-num: 29px;   /* число в плитке */
  --t-num-l: 36px; /* число в крупной плашке — см. `--r-l` */
}