/* Solara — общие нецветовые токены для страниц ядра (главная, /calc, разбор,
 * матрица, платная матрица, пример разбора). Цвет здесь не живёт: палитра —
 * в самих страницах (:root + snav-critical), гард api/palette-canon.test.ts.
 *
 * Шкала отступов — решение владельца 10.11.2026: 8 / 16 / 24 / 40 / 64.
 * Плюс --sp-0 = 4px для микрозазоров внутри элемента (подпись → поле, иконка →
 * текст). Всё, что больше 4px, берётся только из шкалы: «подвинуть на два
 * пикселя» становится некуда, и вёрстка перестаёт расползаться.
 *
 * Файл в КОРНЕ репозитория (не в web/: оттуда отдаётся по /web/…, и /ui.css
 * дал бы тихий 404). Подключается в <head> страницы ядра до её <style>.
 * Те же значения шкалы объявляет site-nav.js для подвала — гард сверяет.
 */
:root {
  --sp-0: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  /* Три радиуса вместо двенадцати: поле ввода, карточка, «таблетка». */
  --r-field: 12px;
  --r-card: 16px;
  --r-pill: 999px;
  /* Чекбокс 18px: с --r-field он становится кружком и читается как радиокнопка. */
  --r-check: 4px;

  /* Размеры текста. Решение владельца 11.11.2026 («Да, увеличь»): аудитория
   * старше интерфейса — 62% оплативших 35–44 года, 64% оставивших почту 35–54,
   * 70% визитов с телефона. Поэтому:
   *   --fs-xs  значки, бейджи, мелкие метки — не меньше 13px нигде;
   *   --fs-s   второстепенный текст (подписи полей, подсказки, согласия,
   *            сноски, текст карточек) — 14px на компьютере, 15px на телефоне;
   *   --fs-m   крупный второстепенный и кнопки — 15 / 16px;
   *   --fs-body основной текст — 16 / 17px.
   * Литералы font-size меньше 17px на страницах переведены на эти токены
   * (с запасным значением внутри var()), гард — api/type-scale.test.ts.
   * Меньше 13px — только юридический подвал (site-nav.js). */
  --fs-xs: 13px;
  --fs-s: 14px;
  --fs-m: 15px;
  --fs-body: 16px;

  --fs-1: var(--fs-xs);
  --fs-2: var(--fs-s);
  --fs-3: var(--fs-m);
  --fs-4: 1.6rem;
  --fs-5: 2.1rem;
}
@media (max-width: 600px) {
  :root { --fs-s: 15px; --fs-m: 16px; --fs-body: 17px; }
}
/* Базовый размер для страниц, где body не задаёт свой. */
body { font-size: var(--fs-body); }
/* Пол для размеров в em (зачёркнутая старая цена, <small>): .8em от 14px
 * давало 11px. Ниже --fs-xs не опускаемся. */
small { font-size: max(.85em, var(--fs-xs)); }
.price-was { font-size: max(.8em, var(--fs-xs)) !important; }
/* Поля даты и времени на телефоне — в пол-ширины: с 17px и обычными
 * отступами год «1985» обрезался иконкой календаря. 16px — порог, ниже
 * которого iOS зумит страницу при фокусе. */
@media (max-width: 600px) {
  html input[type="date"], html input[type="time"] { font-size: 16px; padding-left: var(--sp-1); padding-right: var(--sp-1); }
}
/* Пустые поля даты и времени: браузер рисует маску «дд.мм.гггг» / «--:--»
 * цветом введённого текста — она читалась как уже заполненное значение и
 * отвлекала (владелец, 11.11.2026). Пока поле пустое и не в фокусе — маска
 * приглушена, как обычный placeholder. Метку data-empty ставит site-nav.js. */
input[type="date"][data-empty]:not(:focus)::-webkit-datetime-edit,
input[type="time"][data-empty]:not(:focus)::-webkit-datetime-edit { opacity: .4; }
@supports not selector(::-webkit-datetime-edit) {
  input[type="date"][data-empty]:not(:focus), input[type="time"][data-empty]:not(:focus) { color: var(--muted2, #9aa6c4); }
}
/* Плейсхолдеры обычных полей: цвет страницы берут из серых токенов, а те после
 * 11.11.2026 подняты до 7:1 для текста — подсказка в пустом поле стала
 * выглядеть как введённое значение. Прозрачность возвращает ей роль подсказки. */
html input::placeholder, html textarea::placeholder { opacity: .55; }
/* Карточка формы на страницах матриц, Пифагора и совместимости по HD на
 * телефоне стояла от края до края экрана (её контейнер без полей), а у
 * /calc и /hd — с отступом. По киту у карточки поле 16px с обеих сторон. */
@media (max-width: 600px) {
  html .form-card { margin-left: var(--sp-2); margin-right: var(--sp-2); }
}