# Переменные оформления

Версия набора токенов — **0.6.0**. Всего переменных 188: публичных 84, выводимых из `--brand` 9, остальные внутренние или не отдаются школе.

## Как этим пользоваться

Переопределение переменной меняет вид **везде**, где она используется, и переживает любую нашу перевёрстку. В этом и смысл: мы обязуемся не переименовывать публичные переменные, а внутреннее устройство разметки меняем свободно.

Минимальная настройка школы — одна строка:

```css
:root { --brand: #C2185B; }
```

Из `--brand` выводятся акцент, наведение, нажатие, бледная подложка, рамка, цвет ссылки и кольцо фокуса — **отдельно для светлой и тёмной темы**. Поэтому малиновая школа остаётся малиновой и в тёмной теме, а не превращается в бурую.

Куда это писать — в разделе [Темы школы](/appearance/themes/).

## Что означают пометки

| Пометка | Что значит |
|---|---|
| **публичная** | Переопределять можно и нужно. Имя не меняется никогда — это обязательство. |
| **производная** | Выводится из `--brand` сама. Переопределить по одной можно, но обычно не нужно. |
| **не отдаётся** | Существует, но менять её не следует: ломается смысл (цвета состояний) или доступность (пороги попадания пальцем). |
| **внутренняя** | Меняем свободно и без предупреждения. Опираться на неё нельзя. |

## Главная переменная

Она одна. Всё остальное на этой странице — уточнения к ней.

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--brand` | Фирменный цвет школы. Единственная переменная, которую школа обязана задать: из неё выводятся акцент, наведение, нажатие, подложка, рамка, цвет ссылки, кольцо фокуса — и всё это отдельно для светлой и тёмной темы. | `var(--p-blue-500)` | — |

**Было / стало:**

```css
:root { --brand: #C2185B; }   /* было синее, стало малиновое — везде */
```

**Где это видно:**

- `--brand` — Кнопки главного действия, ссылки, выделенный пункт меню, прогресс, кольцо фокуса.

## Публичные переменные

Их 84. Имя каждой — обязательство: мы не переименовываем их никогда, поэтому переопределение переживает любую нашу перевёрстку.

### Цвета: фоны, границы, текст

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--bg-canvas` | Фон страницы — то, на чём лежат карточки. | `var(--p-gray-50)` | `var(--p-gray-950)` |
| `--bg-surface` | Фон карточки, панели, диалога — всего, что лежит поверх страницы. | `var(--p-gray-0)` | `var(--p-gray-d-surface)` |
| `--bg-surface-muted` | Приглушённый фон внутри карточки — шапка таблицы, невыбранная вкладка, поле только для чтения. | `var(--p-gray-100)` | `var(--p-gray-d-surface-muted)` |
| `--bg-inverse` | Тёмная подложка на светлой теме — подсказка, плеер, нижняя панель. | `var(--p-gray-900)` | `var(--p-gray-0)` |
| `--bg-inverse-elevated` | То же, что тёмная подложка, но на один уровень выше — вложенный элемент внутри неё. | `var(--p-gray-800)` | `var(--p-gray-100)` |
| `--bg-media` | Фон под видео и изображением. Чёрный не случайно — на нём не видно полей кадра. | `var(--p-black)` | — |
| `--border` | Обычная разделительная линия — рамка карточки, линия между строками. | `var(--p-gray-200)` | `var(--p-gray-d-border)` |
| `--border-strong` | Заметная линия — рамка поля ввода и переключателя. Светлее делать нельзя: 3:1 это порог, ниже которого поле перестаёт быть видимым как поле. <br><small>3.10:1 на bg-surface-muted — границы полей</small> | `var(--p-gray-450)` | `var(--p-gray-d-border-strong)` |
| `--border-on-inverse` | Линия на тёмной подложке. <br><small>3.53:1 на bg-inverse</small> | `var(--p-gray-500)` | `var(--p-gray-450)` |
| `--text-primary` | Заголовки и главное на экране. <br><small>17.79:1</small> | `var(--p-gray-900)` | `var(--p-gray-d-text)` |
| `--text-body` | Основной текст абзацев — тело урока, описания, письма. <br><small>9.37:1 — основной текст абзацев</small> | `var(--p-gray-700)` | `var(--p-gray-d-text)` |
| `--text-secondary` | Второстепенный текст — подписи, даты, счётчики. <br><small>5.40:1 на bg-surface-muted</small> | `var(--p-gray-600)` | `var(--p-gray-d-text-2)` |
| `--text-muted` | Самый бледный текст, который ещё разрешён. Светлее нельзя: 4.5:1 — это порог читаемости, а не вкус. Ниже него текст исчезает на солнце и на плохом экране. <br><small>4.58:1 на bg-surface-muted — светлее нельзя</small> | `var(--p-gray-500)` | `var(--p-gray-d-text-3)` |
| `--text-disabled` | Текст отключённого элемента. К нему порог контраста не применяется — он и должен читаться плохо. <br><small>отключённое состояние, порог не применяется</small> | `var(--p-gray-400)` | `#5C6673` |
| `--text-on-inverse` | Текст на тёмной подложке. | `var(--p-gray-0)` | `var(--p-gray-900)` |
| `--text-on-inverse-muted` | Второстепенный текст на тёмной подложке. <br><small>8.31:1 на bg-inverse</small> | `var(--p-gray-400)` | `var(--p-gray-600)` |
| `--skeleton` | Цвет «заглушки» на месте ещё не загруженного содержимого. | `var(--p-gray-200)` | `#232B35` |
| `--overlay` | Затемнение под модальным окном и нижним листом. | `rgba(20, 24, 31, .35)` | `rgba(0, 0, 0, .55)` |

**Было / стало:**

```css
:root { --bg-canvas: #FFFFFF; }   /* было серым, стало белым: интерфейс «плоский» */
:root { --bg-surface: #FFFDF7; }  /* карточки чуть тёплого оттенка */
:root { --border: transparent; }  /* было в рамках, стало без рамок */
:root { --text-primary: #000000; }
```

**Где это видно:**

- `--bg-canvas` — Подложка всех экранов кабинета и админки.
- `--bg-surface` — Карточка курса, таблица, боковая панель, модальное окно.
- `--bg-surface-muted` — Заголовочная строка таблиц, полоса вкладок, блок кода.
- `--bg-inverse` — Всплывающая подсказка, панель управления видео.
- `--bg-media` — Плеер урока, обложка курса до загрузки.
- `--border` — Карточки, таблицы, поля, вкладки.
- `--border-strong` — Поля ввода, флажки, переключатели, выпадающие списки.
- `--text-primary` — Названия курсов и уроков, заголовки разделов, суммы.
- `--text-body` — Содержимое урока, описание курса, текст в диалогах.
- `--text-secondary` — Дата заказа, счётчик уроков, подпись под полем.
- `--text-muted` — Подсказки в полях, «ничего не найдено», сноски.
- `--skeleton` — Список курсов и таблицы в первые доли секунды после открытия.
- `--overlay` — Любое диалоговое окно, нижний лист на телефоне.

### Шрифты и размеры текста

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--font-sans` | Основной шрифт. Менять целиком не обязательно: в начале списка стоит `--font-sans-brand`, и достаточно задать её одну — запасные варианты для случая «шрифт не загрузился» останутся нашими. | `var(--font-sans-brand), "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Liberation Sans", Arial, sans-serif` | — |
| `--font-mono` | Моноширинный шрифт для кода, ключей и идентификаторов. | `"JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace` | — |
| `--fw-regular` | Обычное начертание. | `400` | — |
| `--fw-medium` | Средняя жирность — подписи и активные пункты. | `500` | — |
| `--fw-semibold` | Полужирное — заголовки. | `600` | — |
| `--fw-bold` | Жирное — крупные заголовки и суммы. | `700` | — |
| `--fs-caption` | Самый мелкий текст — служебные подписи, значки. | `12px` | — |
| `--fs-meta` | Мелкий текст — даты, счётчики, сноски. | `13px` | — |
| `--fs-table` | Размер текста в таблицах. | `14px` | — |
| `--fs-body` | Основной размер текста. | `15px` | — |
| `--fs-body-mobile` | Основной размер на телефоне. Он больше настольного намеренно: 16px — порог, ниже которого Safari сам увеличивает страницу при попадании в поле ввода. | `16px` | — |
| `--fs-h3` | Заголовок третьего уровня — название карточки, подзаголовок в уроке. | `16px` | — |
| `--fs-h2` | Заголовок второго уровня — название раздела. | `20px` | — |
| `--fs-h1` | Заголовок страницы. | `24px` | — |
| `--fs-display` | Крупная цифра или заголовок витрины. | `30px` | — |
| `--fs-display-lg` | Самый крупный размер — обложки и главные экраны. | `38px` | — |
| `--lh-tight` | Плотная межстрочная — крупные заголовки. | `1.15` | — |
| `--lh-snug` | Умеренная межстрочная — подзаголовки и подписи. | `1.35` | — |
| `--lh-normal` | Обычная межстрочная — интерфейсный текст. | `1.5` | — |
| `--lh-relaxed` | Свободная межстрочная — тело урока, длинные абзацы. | `1.6` | — |
| `--ls-tightest` | Сильно поджатые буквы — крупные заголовки. | `-0.02em` | — |
| `--ls-tight` | Слегка поджатые буквы — заголовки. | `-0.01em` | — |
| `--ls-wide` | Разреженные буквы — мелкие подписи капителью. | `0.04em` | — |
| `--ls-widest` | Сильно разреженные буквы — служебные надписи над разделом. | `0.14em` | — |

**Было / стало:**

```css
:root { --font-sans-brand: "PT Sans"; }
:root { --fs-body: 17px; }   /* было 15 — стало крупнее во всей школе */
```

**Где это видно:**

- `--font-sans` — Весь интерфейс.
- `--font-mono` — Блоки кода в уроке, ключи API в настройках.
- `--fs-body` — Тело урока, описания, диалоги.
- `--lh-relaxed` — Содержимое урока.

### Отступы, скругления, размеры, тени, переходы

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--space-1` | Отступ, шаг 1. Вся сетка — кратные четырём, эта — самый мелкий шаг. | `4px` | — |
| `--space-2` | Отступ, шаг 2 — между значком и текстом. | `8px` | — |
| `--space-3` | Отступ, шаг 3 — внутри поля и кнопки. | `12px` | — |
| `--space-4` | Отступ, шаг 4 — основной внутренний отступ карточки. | `16px` | — |
| `--space-5` | Отступ, шаг 5. | `20px` | — |
| `--space-6` | Отступ, шаг 6 — между карточками. | `24px` | — |
| `--space-8` | Отступ, шаг 8 — между блоками страницы. | `32px` | — |
| `--space-10` | Отступ, шаг 10. | `40px` | — |
| `--space-12` | Отступ, шаг 12 — между разделами. | `48px` | — |
| `--space-16` | Отступ, шаг 16 — крупные поля страницы. | `64px` | — |
| `--radius-control` | Скругление кнопок, полей и переключателей. | `6px` | — |
| `--radius-card` | Скругление карточек и таблиц. | `10px` | — |
| `--radius-sheet` | Скругление диалогов и нижних листов. | `14px` | — |
| `--radius-phone` | Скругление крупных поверхностей на телефоне. | `20px` | — |
| `--radius-pill` | Полное скругление — значки-таблетки | `999px` | — |
| `--size-control-sm` | Маленькая кнопка или поле. | `32px` | — |
| `--size-control-md` | Обычная кнопка или поле. | `36px` | — |
| `--size-row` | Высота строки списка. | `44px` | — |
| `--size-row-compact` | Высота строки в плотном режиме таблицы. | `34px` | — |
| `--size-row-mobile` | Высота строки списка на телефоне. <br><small>строка списка на телефоне</small> | `56px` | — |
| `--size-row-sheet` | Высота строки выбора в нижнем листе и выпадающем списке. <br><small>строка выбора в нижнем листе и в выпадающем списке</small> | `48px` | — |
| `--size-otp-cell` | Ячейка ввода кода из письма. <br><small>ячейка кода: 44 по ширине × 48 по высоте</small> | `48px` | — |
| `--size-row-lesson` | Высота строки урока в оглавлении — две строки текста и значок. <br><small>строка урока: две строки текста + иконка</small> | `64px` | — |
| `--size-tabbar` | Высота нижней навигации на телефоне, без безопасного отступа. <br><small>нижняя навигация без safe-bottom</small> | `76px` | — |
| `--size-icon-button` | Кнопка-значок. | `32px` | — |
| `--size-panel` | Ширина боковой панели приложения. | `480px` | — |
| `--size-nav-rail` | Ширина свёрнутого бокового меню. | `56px` | — |
| `--size-queue-column` | Ширина колонки очереди проверки. | `340px` | — |
| `--size-readable` | Ширина колонки текста, за которой читать становится тяжело. Задана в `ch` — в ширинах символа, поэтому переживает смену шрифта и размера. | `68ch` | — |
| `--shadow-card` | Тень карточки. | `0 1px 2px rgba(20, 24, 31, .06)` | — |
| `--shadow-panel` | Тень боковой панели. | `-8px 0 24px rgba(20, 24, 31, .10)` | — |
| `--shadow-sticky-up` | Тень прилипшей снизу полосы действий. | `0 -6px 20px rgba(20, 24, 31, .06)` | — |
| `--shadow-modal` | Тень модального окна. | `0 12px 32px rgba(20, 24, 31, .18)` | — |
| `--shadow-float` | Тень всплывающего меню и подсказки. | `0 8px 28px rgba(20, 24, 31, .10)` | — |
| `--duration-fast` | Быстрый переход. Все три длительности обнуляются сами, если человек включил в системе «уменьшить движение», — отдельно об этом заботиться не надо. | `120ms` | — |
| `--duration-base` | Обычный переход — раскрытие, смена состояния. | `160ms` | — |
| `--duration-slow` | Медленный переход — выезд панели. | `200ms` | — |
| `--easing-standard` | Кривая обычного перехода. | `cubic-bezier(.2, 0, .38, 1)` | — |
| `--easing-out` | Кривая появления. | `cubic-bezier(0, 0, .38, 1)` | — |

**Было / стало:**

```css
:root { --space-4: 12px; }   /* было просторно — стало плотнее по всей школе */
:root { --radius-control: 0; }   /* острые углы вместо скруглённых */
:root { --radius-card: 0; }
[data-lms="rail"] { width: 200px; }   /* якорь; см. раздел «Якоря» */
:root { --shadow-card: none; }   /* было с тенью — стало плоско */
```

**Где это видно:**

- `--space-4` — Поля внутри карточек и диалогов.
- `--radius-control` — Все кнопки и поля ввода.
- `--radius-card` — Карточка курса, карточка заказа, панель.
- `--size-panel` — Панель фильтров, панель сведений о заказе.
- `--size-nav-rail` — Левое меню админки.
- `--size-readable` — Тело урока, длинные страницы документации.
- `--shadow-card` — Карточки курсов, панели.

### Кольцо фокуса

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--focus-width` | Толщина кольца фокуса. Увеличивать можно; убирать — значит закрыть школу для работы с клавиатуры. | `2px` | — |
| `--focus-offset` | Зазор между элементом и кольцом фокуса. | `2px` | — |

**Где это видно:**

- `--focus-width` — Любой элемент, на который встал фокус.

## Производные от бренда

Считаются из `--brand` сами, отдельно для светлой и тёмной темы. Переопределить по одной можно, но обычно не нужно: задав `--brand`, вы уже получили всю цепочку — и с проверенным контрастом.

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--accent` | Акцент как заливка. В тёмной теме автоматически светлеет, чтобы не слипаться с фоном. | `var(--brand)` | `oklch(from var(--brand) max(l, 0.72) calc(c * 0.9) h)` |
| `--accent-hover` | Акцент под курсором. | `oklch(from var(--accent) calc(l - 0.07) c h)` | `oklch(from var(--accent) calc(l + 0.06) c h)` |
| `--accent-active` | Акцент в момент нажатия. | `oklch(from var(--accent) calc(l - 0.13) c h)` | `oklch(from var(--accent) calc(l - 0.06) c h)` |
| `--accent-subtle` | Очень бледный акцент для подложек — выделенная строка, подсветка выбранного. | `oklch(from var(--accent) 0.965 calc(c * 0.35) h)` | `color-mix(in oklab, var(--accent) 14%, var(--bg-surface))` |
| `--accent-border` | Рамка в цвет акцента: контурная кнопка, выделенная карточка. | `oklch(from var(--accent) 0.905 calc(c * 0.55) h)` | `color-mix(in oklab, var(--accent) 34%, var(--bg-surface))` |
| `--text-on-accent` | Цвет текста поверх акцентной заливки. Считается сам: на тёмном акценте светлый, на светлом — тёмный. Поэтому песочная школа не получает белых букв на жёлтой кнопке. | `lch(from var(--accent) calc((49 - l) * infinity) 0 0)` | — |
| `--text-accent` | Акцент, когда он текст или ссылка. Всегда темнее заливки: акцент как текст обязан давать контраст 4.5:1, а фирменный цвет школы этого не гарантирует. | `oklch(from var(--accent) min(l, 0.52) c h)` | `var(--accent)` |
| `--accent-on-inverse` | Акцент на тёмной подложке — плеер, нижняя панель, тёмная тема. | `oklch(from var(--accent) max(l, 0.72) calc(c * 0.9) h)` | `var(--brand)` |
| `--focus-ring` | Цвет кольца фокуса. Намеренно НЕ равен акценту: у светлой школы акцент даёт 1.5:1, и кольцо просто исчезает — а вместе с ним и возможность работать с клавиатуры. | `var(--text-accent)` | `var(--accent)` |

**Где это видно:**

- `--accent` — Заливка главной кнопки, активный пункт меню, заполненная часть прогресса.

## Не отдаются школе

Эти переменные существуют, но менять их не следует. Цвета состояний — потому что зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах: иначе ученик и куратор перестают понимать экран с первого взгляда. Пороги попадания пальцем — потому что 44 пикселя это не вкус, а размер пальца.

| Переменная | Что делает | По умолчанию | В тёмной теме |
|---|---|---|---|
| `--success` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-green-600)` | `var(--p-green-400)` |
| `--success-subtle` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-green-50)` | `#12281F` |
| `--success-border` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-green-100)` | `#1E4835` |
| `--success-text` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-green-700)` | `#6FD3A6` |
| `--success-on-inverse` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-green-400)` | `var(--p-green-600)` |
| `--warning` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-amber-600)` | `var(--p-amber-400)` |
| `--warning-subtle` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-amber-50)` | `#2A2114` |
| `--warning-border` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-amber-100)` | `#4A3A1C` |
| `--warning-text` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-amber-700)` | `#EFC077` |
| `--warning-on-inverse` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-amber-400)` | `var(--p-amber-600)` |
| `--danger` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-600)` | `var(--p-red-400)` |
| `--danger-hover` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-650)` | `#FF8078` |
| `--danger-subtle` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-50)` | `#2A1614` |
| `--danger-border` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-100)` | `#55231F` |
| `--danger-text` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-700)` | `#FFB3AD` |
| `--danger-on-inverse` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-red-400)` | `var(--p-red-600)` |
| `--info-alt` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-violet-600)` | `#B69AE0` |
| `--info-alt-subtle` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-violet-50)` | `#241B33` |
| `--info-alt-text` | Цвет состояния: успех, предупреждение, ошибка, справка. Школе не отдаётся — зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах, иначе ученик и куратор перестают понимать экран с первого взгляда. | `var(--p-violet-700)` | `#D3C0F0` |
| `--size-control-mobile` | Минимальный размер любой цели на телефоне. Не отдаётся: 44 пикселя — порог, ниже которого палец не попадает, и это не вопрос вкуса. <br><small>минимум для любой цели на телефоне</small> | `44px` | — |
| `--size-control-mobile-lg` | Главное действие экрана на телефоне. Тот же порог, только с запасом. <br><small>главное действие экрана на телефоне</small> | `52px` | — |
| `--size-icon-button-mobile` | Кнопка-значок на телефоне: тот же порог попадания пальцем. | `44px` | — |
| `--hit-area-mobile` | Минимальная область попадания на телефоне. Порог, а не украшение. | `44px` | — |
| `--hit-area-desktop` | Минимальная область попадания мышью. | `32px` | — |
| `--hit-area-gap` | Минимальный зазор между двумя соседними целями, чтобы не промахнуться в соседнюю. | `8px` | — |

## Внутренние

Их 69: примитивы палитры `--p-*`, номера слоёв, безопасные отступы телефона, метрики оболочки редактора. **Мы меняем их свободно и без предупреждения.** Опираться на них нельзя — правило, написанное по внутренней переменной, однажды перестанет применяться, молча и при обновлении.

Перечислены здесь ровно затем, чтобы было видно: это не забытые переменные, а намеренно закрытые.

| Переменная | Почему внутренняя |
|---|---|
| `--p-black` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-0` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-25` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-100` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-200` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-300` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-400` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-450` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-500` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-800` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-900` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-950` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-border` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-border-strong` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-surface` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-surface-muted` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-text` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-text-2` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-gray-d-text-3` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-100` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-300` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-500` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-blue-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-green-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-green-100` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-green-400` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-green-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-green-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-amber-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-amber-100` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-amber-400` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-amber-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-amber-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-100` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-400` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-650` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-red-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-violet-50` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-violet-600` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--p-violet-700` | Примитив палитры. Сырой цвет, из которого собраны семантические переменные. Школе он не нужен: перекрасить надо не «серый 500», а то, что им нарисовано. |
| `--z-base` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-sticky` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-nav` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-panel` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-overlay` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-modal` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-toast` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--z-tooltip` | Номер слоя: что поверх чего. Меняется вместе с вёрсткой; переопределение роняет диалоги под панель, и происходит это не сразу, а на каком-то одном экране. |
| `--safe-top` | Безопасный отступ телефона (вырез, домашняя полоса). Значение приходит от системы через `env()`, задавать его руками нечем и незачем. |
| `--safe-bottom` | Безопасный отступ телефона (вырез, домашняя полоса). Значение приходит от системы через `env()`, задавать его руками нечем и незачем. |
| `--safe-left` | Безопасный отступ телефона (вырез, домашняя полоса). Значение приходит от системы через `env()`, задавать его руками нечем и незачем. |
| `--safe-right` | Безопасный отступ телефона (вырез, домашняя полоса). Значение приходит от системы через `env()`, задавать его руками нечем и незачем. |
| `--size-settings-panel` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-settings-panel-wide` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-doc-header` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-doc-tabs` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-outline` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--bp-editor-collapse` | Ширина окна, ниже которой оглавление редактора прячется, а панель ложится поверх холста. |
| `--size-field-textarea-min` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-field-textarea-max` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-field-media` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |
| `--size-field-preview` | Метрика оболочки редактора блоков. Живёт вместе с редактором и меняется вместе с ним. |

## Чего здесь ещё нет

**Деление на публичные и внутренние ещё не закреплено в коде.** По `02-architecture/customization.md` §2 внутренние переменные должны отличаться префиксом в самом `tokens.css`; сейчас префикс `--p-` есть только у примитивов, а «статусы школе не отдаются» написано комментарием, который машина читать не обязана. До тех пор признак живёт в `data/tokens.yml` рядом с описаниями, и приведённое деление — **предложение документации, а не принятое решение**.

**Не у всех переменных есть «где видно» и пример «было / стало».** `customization.md` §6 требует и то и другое у каждой записи: голый список имён бесполезен — за ним всё равно лезут в инспектор браузера. Чего не хватает по именам — в `reports/tokens-gaps.md` репозитория документации.

**Переменная `--font-sans-brand` в `tokens.css` не объявлена.** Она названа настройкой школы в комментарии и используется как запасное значение внутри `--font-sans`, но своей строки объявления у неё нет — значит машинно в справочник она не попадает, и её приходится называть словами здесь.