/* «Стиль города» — палитра и токены.
   ────────────────────────────────────────────────────────────────────────
   Палитра взята из цветов ПОБЕЖАЛОСТИ стали: при отпуске поверхность
   металла последовательно окрашивается — соломенный 220°C, бронзовый 245°,
   пурпурный 270°, синий 300°. Кузнец по этим цветам читает температуру.
   Отсюда графит металла, известь мастерской и пурпурный акцент — вместо
   неизбежного «чёрное с золотом», которым выглядят все сайты ковки.

   Тёмная схема витрине не нужна: вся товарная съёмка сделана на белом,
   и на светлом фоне предметы стоят как в мастерской. */

:root {
  /* — поверхности —
     Контрасты посчитаны Дедалом по WCAG на фоне извести. Мои исходные
     прикидки он пересчитал и нашёл три дыры — исправления ниже. */
  --st-lime:   #edebe6;   /* извёстка: фон витрины */
  --st-paper:  #f7f6f3;   /* ниша под фото товара, карточки */
  --st-forge:  #16181a;   /* графит: металл, основной текст (14.9:1) */
  --st-steel:  #63686d;   /* сталь: вторичный текст (4.72:1).
                             Было #6a7075 — 4.21:1, ниже порога, а этим
                             цветом набраны характеристики и единицы. */
  --st-line:   #d6d3cc;   /* линии и разделители */

  /* — шкала побежалости —
     Каждая заливка идёт в паре со своим цветом текста: соседние цвета шкалы
     требуют ПРОТИВОПОЛОЖНОГО текста, и это легко перепутать. Правило одно:
     красишь `--st-X` — пишешь `--st-on-X`, помнить больше нечего. */
  --st-straw:     #c08a2e;   /* 220°C соломенный — заливка (2.55:1, не для текста) */
  --st-on-straw:  #16181a;   /* по соломенному пишем ГРАФИТОМ (5.86:1).
                                Белым нельзя — 3.04:1, а это ценник и «скидка». */
  --st-bronze:    #9a5f2a;   /* 245°C бронзовый */
  --st-on-bronze: #ffffff;   /* по бронзе наоборот — белым (5.19:1);
                                графит на ней не читается (3.43:1). */
  --st-temper:    #5c3d80;   /* 270°C пурпурный — главный акцент (7.2:1) */
  --st-on-temper: #ffffff;
  --st-quench:    #2e4c78;   /* 300°C синий — ссылки, hover (7.3:1) */
  --st-on-quench: #ffffff;

  /* — типографика —
     Oswald: узкий вывесочный гротеск, буквы мастерской. Заголовки и цены.
     Mulish: шрифт коллектива, текст. JetBrains Mono: размеры и температуры —
     чертёжные данные набираются моноширинным, как на эскизе. */
  --st-display: 'Oswald';
  --st-text:    'Mulish';
  --st-mono:    'JetBrains Mono';

  /* — метрика —
     Витрина идёт почти во всю ширину: товар крупный, кованая вещь плохо
     читается в узкой колонке. Поля по краям минимальные. */
  --st-max:     1760px;
  --st-gutter:  24px;
  --st-radius:  2px;      /* у кованого угла нет мягкого скругления */

  /* ── мост к ядерной design-system (toast, dialog, кнопки) ──
     Ядро красится от этих токенов: витрина и админка получают одну палитру,
     и проектных переопределений `.ds-*` не потребуется. */
  --bg:        var(--st-lime);
  --fg:        var(--st-forge);
  --muted:     var(--st-steel);
  --line:      var(--st-line);
  --accent:    var(--st-temper);
  --accent-fg: #ffffff;
  --ink:       var(--st-forge);
  --font:      var(--st-text);
  --serif:     var(--st-display);
  --radius:    var(--st-radius);
  --gutter:    var(--st-gutter);
  --max-w:     var(--st-max);
}

/* Ядерный `_base_core` (админка) умеет тёмную и светлую; витрина всегда
   светлая. Держим оба состояния на одной палитре, чтобы переключатель темы
   в админке не ломал фирменные цвета. */
html.light {
  --bg:        var(--st-lime);
  --fg:        var(--st-forge);
  --muted:     var(--st-steel);
  --line:      var(--st-line);
  --accent:    var(--st-temper);
  --accent-fg: #ffffff;
  --ink:       var(--st-forge);
}
