/* ─────────────────────────────────────────────────────────────────────────────────────────────
 * [DESIGN-V8-TOKENS] ЕДИНЫЙ источник стиля продукта — извлечён из эталонных мокапов v8.
 *
 * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Владелец: «все страницы должны быть в единой новой стилистике» и «нам надо
 * с мокапов всё брать». Пока каждый экран красится своими значениями, единство держится на памяти
 * человека — то есть не держится. Здесь лежат ЗНАЧЕНИЯ, на которые обязаны ссылаться все страницы;
 * менять цвет продукта = менять одну строку тут, а не искать 87 файлов.
 *
 * ⛔ ПРАВИЛО: в public/*.css и public/*.src.js цвет/размер/радиус пишется ПЕРЕМЕННОЙ, а не числом.
 * Новый экран, покрашенный «своим» #f3f4f6, разъедется с остальными на первой же правке палитры.
 * Следит сторож [DESIGN-V8-TOKENS-USED] (храповик: голых значений может стать только меньше).
 * ───────────────────────────────────────────────────────────────────────────────────────────── */
/* ⛔ СЕЛЕКТОР НЕ ПРОСТО «:root». Встроенный блок страницы объявляет те же переменные под
 * «:root, html[data-theme='light']» — у второй половины специфичность выше, и она побеждала даже
 * когда мой файл подключён последним. Замер в браузере показывал акцент #0a84ff вместо эталонного,
 * фон #f5f5f7 вместо #f6f7f9. Берём ту же специфичность: файл идёт позже, значит выигрывает он.
 * ⚠ ЧЕСТНО ПРО ТЁМНУЮ ТЕМУ: эталонные мокапы светлые, поэтому здесь заданы значения СВЕТЛОЙ темы.
 * Тёмная остаётся на своих значениях — это осознанный предел, а не забытый случай. */
:root, html[data-theme='light']{
  /* ⛔ ЦВЕТА И ПОВЕРХНОСТИ НЕ ПИШУТСЯ ЗДЕСЬ РУКАМИ. Они СНИМАЮТСЯ С ЭТАЛОНА скриптом
   * design/mockup-layers/gen-tokens.py прямо из public/mockups/v8-purchase.html.
   *
   * Почему так. Раньше значения переписывались руками «по мотивам» мокапа — и разъехались:
   * --accent нёс #3b82f6, тогда как эталон поверх базового слоя кладёт #2563eb; отстали также
   * --text3 и --border2. Продукт выглядел бледнее эталона, а сверка это подтверждала как норму,
   * потому что проверяла файл сам с собой. Теперь источник один: мокап.
   *
   * Смысл ступеней (значения ниже, из эталона):
   *   поверхности  bg → surface → surface2 → surface3   фон страницы → карточка → блок → наведение
   *   границы      border тонкий разделитель · border2 рамка органа управления
   *   текст        text основной · text2 вторичный · text3 подпись
   *   акцент       accent линия и иконка · pri-bg заливка кнопки с белым текстом · pri-bg-h наведение
   *   состояния    green/red/orange/blue-* — ТОЛЬКО состояние, не украшение; у каждого пара фон+текст
   *   поставщики   sup-a…sup-i — цвет группы поставщика в таблице позиций
   */
  /* MOCKUP-TOKENS:BEGIN */
  /* ▼ снято с эталона gen-tokens.py — руками не править, следующий прогон перезапишет */
  --accent:#2563eb;
  --amber:#b45309;
  --bg:#f6f7f9;
  --blue-bd:#bfdbfe;
  --blue-bg:#eff6ff;
  --blue-fg:#1e40af;
  --border:#e5e7eb;
  --border2:#b7bec9;
  --cyan:#0e7490;
  --dock-anim:.24s;
  --dock-w:clamp(320px,26vw,460px);
  --fs-1:.6875rem;
  --fs-2:.8125rem;
  --fs-3:.9375rem;
  --fs-4:1.0625rem;
  --fs-5:1.1875rem;
  --green:#16a34a;
  --green-bg:#dcfce7;
  --green-fg:#166534;
  --grey-fg:#3c434d;
  --indigo:#4338ca;
  --lh-1:1rem;
  --lh-2:1.25rem;
  --lh-3:1.5rem;
  --lime:#4d7c0f;
  --orange:#d97706;
  --orange-bg:#fef3c7;
  --orange-fg:#92400e;
  --pink:#be185d;
  --pri-bg:#2563eb;
  --pri-bg-h:#1d4ed8;
  --r-b:10px;
  --r-c:6px;
  --r-p:999px;
  --red:#ef4444;
  --red-bg:#fee2e2;
  --red-fg:#991b1b;
  --s-0:2px;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --sh-card:0 1px 2px rgba(15,23,42,.06);
  --sh-pop:0 12px 32px rgba(15,23,42,.18);
  --spine-w:44px;
  --sup-a:#1d4ed8;
  --sup-b:#c2410c;
  --sup-c:#0f766e;
  --sup-d:#6d28d9;
  --sup-e:#be185d;
  --sup-f:#0e7490;
  --sup-g:#4d7c0f;
  --sup-h:#b45309;
  --sup-i:#4338ca;
  --surface:#ffffff;
  --surface2:#f3f4f6;
  --surface3:#e9ebef;
  --teal:#0e7490;
  --text:#111827;
  --text2:#374151;
  --text3:#5f6773;
  --violet:#6d28d9;
  --violet-bg:#ede9fe;
  /* MOCKUP-TOKENS:END */

  /* Ниже — то, чего в эталоне НЕТ, и оно нужно продукту (в мокапе таких мест просто не встретилось).
   * Обе величины взяты по норме контраста, а не на глаз. */
  --border-ctl:#838a94;    /* рамка кнопки/поля: 3.48:1 на белом — критерий WCAG 1.4.11 */
  --accent-text:#0066cc;   /* акцентный ТЕКСТ на светлом: для текста норма 4.5:1, #0066cc даёт 5.57:1 */

  /* Типографика: шкала мокапа {11,13,15,17,19}. Ступени именованные, чтобы «сделай крупнее»
   * означало переход на ступень, а не «плюс один пиксель на глаз». */
  --fs-label:11px;  --lh-label:16px;   /* метки, подписи, счётчики */
  --fs-body:13px;   --lh-body:20px;    /* основной текст, значения полей */
  --fs-lead:15px;   --lh-lead:20px;    /* крупное значение, KPI */
  --fs-h:17px;      --lh-h:24px;       /* заголовок блока, имя записи */
  --fs-hero:19px;   --lh-hero:24px;    /* заголовок страницы */
  --fw-norm:400; --fw-semi:600; --fw-bold:700;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;

  /* Скругления под старые имена продукта. Тени (--sh-card/--sh-pop) и шаг (--s-1..5) СНЯТЫ С
   * ЭТАЛОНА выше — рукописные дубли здесь перебивали их поздним объявлением, и сверка ловила
   * чужую тень на карточках. Ниже только то, чего в эталоне нет. */
  --r-ctl:6px;      /* кнопка, поле ввода, чип */
  --r-card:10px;    /* карточка, блок, попап */
  --s-6:32px;       /* крупный шаг — в эталоне не встречается */
}