/*
 * Дизайн-токены платформы (DESIGN_BRIEF §2) — ЕДИНЫЙ ИСТОЧНИК для Twig-тем
 * и React-приложений (FE-2). SSR-страницы подключают этот файл тегом
 * `<link>` (`base.html.twig`), React-бандлы — через `apps/shared/ui/tokens.css`,
 * который его импортирует. Копий нет ни одной: копии расходятся молча.
 *
 * СЕЛЕКТОРЫ БЕЗ `:root` — СОЗНАТЕЛЬНО (Sprint 2, Task 20). `[data-theme="…"]`
 * вместо `:root[data-theme="…"]` не меняет ничего для страницы (`<html
 * data-theme>` подходит под оба), но позволяет ЗАДАТЬ ТЕМУ КОНТЕЙНЕРУ, а не
 * только документу. Без этого стайлгайд не мог бы показать три темы рядом:
 * пришлось бы либо переключать документ кнопкой (сравнивать по памяти), либо
 * скопировать палитру в его собственный CSS — то есть завести вторую копию
 * ровно там, где ищут расхождения.
 *
 * Пресеты читалки (`assets/css/reader.css`, `:root[data-preset]`) остаются на
 * `:root` и по-прежнему перекрывают тему сайта: читатель выбирает бумагу для
 * чтения, даже если весь остальной сайт у него тёмный.
 *
 * КОНТРАСТ ПРОВЕРЕН МАШИНОЙ, А НЕ ГЛАЗОМ: числа по каждой паре «краска на
 * плашке» держит `apps/shared/ui/contrast.test.ts` — он читает ЭТОТ файл и
 * роняет сборку, если правка палитры уводит любую пару ниже 4.5:1 (FE-2, AA).
 * Сводка ratio по темам — в `brand/BRAND.md`.
 */

[data-theme="dark"] {
  --bg:#14111F; --surface:#1D1930; --border:#2A2440;
  --text:#F0EDFA; --text-muted:#9B94B8;
  --primary:#A78BFA; --primary-deep:#6D53E0; --spark:#FFB454;
  /* Плашка `--primary` здесь СВЕТЛАЯ (лавандовая) — подпись на ней тёмная. */
  --on-primary: var(--ink);
  --hero-glow:
    radial-gradient(ellipse 90% 130% at 20% -30%, rgba(109, 83, 224, .35), transparent 55%),
    radial-gradient(ellipse 60% 90% at 85% -20%, rgba(255, 180, 84, .12), transparent 60%);
}
[data-theme="light"] {
  --bg:#FBF8F3; --surface:#FFFFFF; --border:#E8E1D5;
  --text:#241F35; --text-muted:#6E6787;
  --primary:#6D53E0; --primary-deep:#4C36A8; --spark:#D97B00;
  /* Плашка `--primary` тёмно-фиолетовая — подпись светлая. */
  --on-primary: var(--paper);
  --hero-glow:
    radial-gradient(ellipse 90% 130% at 20% -30%, rgba(109, 83, 224, .12), transparent 55%),
    radial-gradient(ellipse 60% 90% at 85% -20%, rgba(217, 123, 0, .08), transparent 60%);
}
/*
 * Сепия — третья тема FE-2. Фон и текст зафиксированы в DESIGN_BRIEF §2
 * («Читалка-сепия»), `surface`/`border` взяты один в один из пресета
 * `:root[data-preset="sepia"]` в `reader.css`, где `--accent`/`--accent2` —
 * это те же роли, что здесь зовутся `--spark`/`--primary` (сверить легко по
 * пресетам «Ночь» и «Бумага»: их accent'ы совпадают со spark'ами тёмной и
 * светлой тем буквально).
 *
 * ДВА ЗНАЧЕНИЯ ЗАТЕМНЕНЫ ОТНОСИТЕЛЬНО ПРЕСЕТА, и это не вкусовая правка
 * (ревью Task 20). В читалке сепия применяется к КРУПНОМУ тексту чтения, где
 * порог AA — 3:1; как ТЕМА ОБЩЕГО НАЗНАЧЕНИЯ те же значения обслуживают
 * обычный текст (подпись чипа, подсказка поля, выбранная вкладка), а там порог
 * 4.5:1, и пресетные `#8A7A61` (3.55:1) и `#7A5CC9` (4.26:1) под него не
 * проходили. Затемнены пропорционально по каналам — тон сохранён, светлота
 * снижена до порога с небольшим запасом:
 *
 *   --text-muted  #8A7A61 → #766853   3.55 → 4.62 на --bg (4.95 на --surface)
 *   --primary     #7A5CC9 → #7457BF   4.26 → 4.64 на --bg (4.97 на --surface)
 *
 * Пресет читалки НЕ тронут: у него свой порог и своя история.
 *
 * ИСКЛЮЧЕНИЕ — `--primary-deep`: для сепии он не зафиксирован нигде. Взято
 * значение светлой темы: сепия — тема на светлом фоне, и «глубокий» оттенок у
 * неё той же работы. Если дизайн однажды назовёт свой — менять здесь, в
 * единственном месте.
 */
[data-theme="sepia"] {
  --bg:#F4ECDD; --surface:#FAF4E8; --border:#E2D5BC;
  --text:#33291B; --text-muted:#766853;
  --primary:#7457BF; --primary-deep:#4C36A8; --spark:#B26B00;
  --on-primary: var(--paper);
  --hero-glow:
    radial-gradient(ellipse 90% 130% at 20% -30%, rgba(116, 87, 191, .12), transparent 55%),
    radial-gradient(ellipse 60% 90% at 85% -20%, rgba(178, 107, 0, .08), transparent 60%);
}
/*
 * КОНТРАСТНЫЕ ПОЛЮСА — не тема, а два конца шкалы, одинаковые во всех темах.
 *
 * Заведены после ревью Task 20 вместо прежнего приёма «подпись на цветной
 * плашке = var(--bg)». Тот приём выглядел экономным (одна переменная вместо
 * двух), но брал светлоту у ФОНА ТЕМЫ, а не у плашки, под которой подпись
 * лежит: у сепии фон #F4ECDD, и подпись им же на янтарной плашке давала
 * 3.58:1 — кнопка «Опубликовать», то есть главный CTA, не проходила AA в двух
 * темах из трёх.
 *
 * `--ink` — не чистый чёрный, а `#14111F`, дожатый до нужной светлоты:
 * янтарная плашка сепии `#B26B00` даёт максимум 5.00:1 даже с идеальным
 * чёрным, поэтому запас пришлось брать светлотой, а не оттенком. На ней
 * `--ink` = 4.68:1.
 */
:root {
  --ink:#0C0A13; --paper:#FFFFFF;
  --r-card:14px; --r-chip:999px;
  --rating-g:#3FA662; --rating-pg13:#D9A404; --rating-r:#E07A2E; --rating-nc17:#C4453C;
}

/*
 * ШКАЛЫ УРОВНЯ 2 (спек §4.3) — в `:root`, а НЕ в блоках тем: отступы,
 * кегли и длительности от темы не зависят, а три блока `[data-theme]`
 * дали бы три возможности молча развести геометрию.
 *
 * Шкала отступов — в `rem`, и это не стилистика. Кегли в проекте все
 * относительные (77 объявлений в app.css, ни одного в px). Если отступы
 * оставить физическими, то у читателя с увеличенным системным шрифтом
 * текст вырастет, а padding нет: кнопка станет тесной, карточку распрёт.
 * В px остаются только величины, которые обязаны быть физическими:
 * границы, полоса прогресса, `--rf-tap`.
 *
 * Шаг 4px выбран по факту, а не по вкусу: в app.css 206 магических
 * пикселей, самые частые 8, 10, 6, 4, 16, 14, 12, 18, 20 — стихийный шаг
 * 2, из-за которого отступы одного смысла отличаются на пиксель между
 * страницами.
 *
 * Тени построены `color-mix` от `--ink`, а не литералом `rgba(0,0,0,…)`:
 * иначе они были бы единственным цветом мимо токенов и первым, что
 * поймает `no-hardcoded-colors`.
 */
:root {
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;

    --fs-xs: .75rem;
    --fs-sm: .82rem;
    --fs-base: .9rem;
    --fs-md: 1rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;

    --lh-tight: 1.25;
    --lh-base: 1.5;
    --lh-loose: 1.75;

    --r-field: 10px;

    /*
     * МЕРА ЧТЕНИЯ — ОДНА НА ЧИТАЛКУ И РЕДАКТОР (Дизайн-спринт, Task 23,
     * спек §3.2 «Текст — Literata, колонка 38rem, как в читалке»).
     *
     * Величина стояла в `assets/css/reader.css` (`--col: 38rem`), а редактор
     * держал СВОЮ (`--rf-write-measure: 42rem`) — то есть автор писал строку
     * на 4rem длиннее той, которую увидит читатель: 77.2 знака против 68.5
     * (замерено браузером на настоящем Literata). Здесь она затем, чтобы
     * следующая правка одного экрана не развела их снова.
     *
     * ЭТО КОРОБКА, А НЕ СТРОКА: `.reader main` держит `max-width: var(--col)`
     * вместе со своим гуттером `var(--space-5)` по каждой стороне
     * (`box-sizing: border-box`), поэтому сама строка внутри — 568px при
     * умолчаниях панели настроек. Кто берёт эту величину, обязан взять и тот
     * же гуттер, иначе «одна переменная» даст разную строку.
     *
     * Читалка объявляет от неё свой `--col` — то есть остаётся местом, где
     * колонку можно переопределить (пресетом, будущей настройкой), а токен
     * задаёт УМОЛЧАНИЕ, с которого читатель начинает.
     */
    --read-col: 38rem;

    --shadow-1: 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent);
    --shadow-2: 0 8px 24px color-mix(in srgb, var(--ink) 25%, transparent);
    --shadow-3: 0 -12px 48px color-mix(in srgb, var(--ink) 30%, transparent);

    --dur-fast: .15s;
    --dur-base: .25s;

    /*
     * КОЛЬЦО ФОКУСА (Дизайн-спринт, Task 3) — единственное определение,
     * на которое ссылаются все интерактивные примитивы `ui.css`
     * (`:focus-visible`, не `:focus`: см. докблок правила в `ui.css`).
     * До этой задачи кольцо было объявлено ровно в одном месте (поле
     * ввода) — кнопки, чипы, табы и ссылки фокус не показывали вовсе.
     *
     * НЕПРОЗРАЧНОЕ, А НЕ 60%-Й ПОДМЕС (финальный фикс-раунд по сквозному
     * ревью, I-2). Кольцо было `color-mix(in srgb, var(--primary) 60%,
     * transparent)`, и на СВОИХ ЖЕ темах сайта оно не проходило порог
     * нетекстового контраста WCAG 1.4.11 (3:1 к соседнему цвету — а сосед у
     * кольца с обеих сторон один, фон страницы, потому что `outline-offset`
     * оставляет 2px этого фона между элементом и кольцом). Пересчитано по
     * этому файлу:
     *
     *   тема    на --bg   на --surface
     *   dark      3.21        3.10      ← единственная, где порог держался
     *   light     2.45        2.52      ← ниже 3:1
     *   sepia     2.33        2.40      ← ниже 3:1
     *
     * То есть на двух темах из трёх клавиатурный читатель не видел кольца в
     * требуемой силе НИ НА ОДНОМ интерактивном примитиве сайта. Ревью нашло
     * этот дефект на читалке (пресет поверх темы, 2.03:1) и предложило
     * лечить его пресетом; пересчёт показал, что причина не в читалке, а в
     * самой формуле, и лечится она здесь, одной строкой.
     *
     * Прозрачность СНЯТА, а не поднята до 80% (та дала бы худшую клетку
     * 3.06:1 — сидеть на пороге этот документ запрещает): непрозрачный
     * `--primary` держит пол СТРУКТУРНО, а не совпадением четырёх подобранных
     * значений. Пара «`--primary` на `--bg`» уже стоит в `contrast.test.ts`
     * строкой «выбранная вкладка» с порогом AA 4.5:1 — то есть кольцо не может
     * опуститься ниже 3:1, не уронив прежде другой, более строгий гейт.
     * Пересчитано: dark 6.83/6.25, light 5.00/5.30, sepia 4.64/4.97 (на
     * `--bg`/`--surface`). Читалка переопределяет кольцо своим `--accent2`
     * (`assets/css/reader.css`, тот же порог, там же числа).
     */
    --focus-ring: 3px solid var(--primary);
}