/* Дизайн-токены модуля «Смена». Источник истины — CSS-переменные из
   прототипа smena-admin-wide.html (Claude Chat, 25.08.2026, ТЗ
   TZ-smena-admin-ui.md), согласованы с «Дашбордом управляющих» (fintablo),
   чтобы «Сеть» и «Смена» не разъехались темами через месяц. Имена и
   светлые/тёмные значения менять только вслед за общим решением, не
   по вкусу одного экрана. Акцент — янтарный (тот же, что в системе
   «Штаб»), зелёный/жёлтый/красный — только статусы, не декор. */

:root, [data-theme="light"] {
  --bg: #e9ecf1;
  --panel: #fff;
  --panel-2: #f4f6fa;
  /* Границы и серый текст затемнены 31.08.2026 (issue #474, Сергей —
     «границы сливаются, серый текст нечитаем»). Проверено скриптом
     validate_palette.js по цепочке: --line/--line-2 держат ≥3:1 к
     --panel и --bg (WCAG 1.4.11, непрозрачная граница обязана быть
     видна), --dim/--faint держат ≥4.5:1 к --panel и --bg (WCAG AA
     для текста). Раньше --line был 1.3:1, --faint — 3.1:1: обе
     границы разделов и часть текста были ниже порога различимости. */
  --line: #7d8797;
  --line-2: #525c69;
  --ink: #20242c;
  --dim: #4a515e;
  --faint: #5f6773;

  --amber: #a3670e;
  --amber-ink: #fff;
  --amber-soft: #fbf2e0;

  --ok: #156b47;
  --ok-soft: #e3f4ec;
  --warn: #8a5a08;
  --warn-soft: #fbf1de;
  --bad: #ae423f;
  --bad-soft: #fbe8e5;

  --track: #e5e9ef;

  /* Категориальная тройка для структуры выручки: услуги / допуслуги /
     косметика. Отдельно от статусов нарочно. До 28.08.2026 бублик рисовался
     цветами --amber/--ok/--warn, и это было двойной ошибкой: статусный цвет
     переставал значить статус, а янтарный и жёлтый различались настолько
     плохо, что валидатор палитры (скилл dataviz) дал ΔE 5.8 при протанопии
     при пороге 8 — то есть один человек из двенадцати мужчин двух долей
     выручки не различал вовсе.
     Проверено: node scripts/validate_palette.js --pairs all, обе темы,
     все жёсткие проверки пройдены. Аква в светлой теме идёт с контрастом
     2.74 к фону — по правилу скилла это допустимо только с видимыми
     подписями, поэтому в легенде рядом с каждым цветом стоит сумма. */
  --cat-1: #a3670e;
  --cat-2: #1baf7a;
  --cat-3: #4a3aa7;
}

[data-theme="dark"] {
  --bg: #12151a;
  --panel: #1b1f26;
  --panel-2: #232932;
  --line: #2d3641;
  --line-2: #3b4553;
  --ink: #e7e4db;
  --dim: #a6afb9;
  --faint: #78818b;

  --amber: #d9a441;
  --amber-ink: #2a2314;
  --amber-soft: rgba(217, 164, 65, .14);

  --ok: #57c08a;
  --ok-soft: rgba(87, 192, 138, .15);
  --warn: #d9a441;
  --warn-soft: rgba(217, 164, 65, .14);
  --bad: #e2705f;
  --bad-soft: rgba(226, 112, 95, .16);

  --track: #2b323b;

  --cat-1: #c98500;
  --cat-2: #199e70;
  --cat-3: #9085e9;
}

/* Без явного выбора темы — системный. Дублирует [data-theme="dark"], но
   срабатывает раньше JS на первой отрисовке (без мигания светлой темой). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151a;
    --panel: #1b1f26;
    --panel-2: #232932;
    --line: #2d3641;
    --line-2: #3b4553;
    --ink: #e7e4db;
    --dim: #a6afb9;
    --faint: #78818b;

    --amber: #d9a441;
    --amber-ink: #2a2314;
    --amber-soft: rgba(217, 164, 65, .14);

    --ok: #57c08a;
    --ok-soft: rgba(87, 192, 138, .15);
    --warn: #d9a441;
    --warn-soft: rgba(217, 164, 65, .14);
    --bad: #e2705f;
    --bad-soft: rgba(226, 112, 95, .16);

    --track: #2b323b;

    --cat-1: #c98500;
    --cat-2: #199e70;
    --cat-3: #9085e9;
  }
}