/* ============================================================
   cs-tokens.css — ЕДИНАЯ шкала отступов, радиусов и высот cosori.ru.

   Зачем (Founder 07.09.2026: «отступы пиздец везде»): до этого файла
   каждый блок писал отступы на глаз в свой инлайновый <style>, и по
   нашим шаблонам набрался зоопарк — gap 5/6/7/9/11/13/14/15/18/22/26,
   padding 7 14, 8 12, 13 16, 22 18, 28 32, 36 40 и так далее. Причина
   класса — не кривые руки билдера, а отсутствие шкалы и машины,
   которая её проверяет. Файл закрывает первую половину, страж
   «шкала отступов» в deploy/server/tests/test_app_overrides.py — вторую.

   Откуда числа: макет Figma P25e34xeCl5ayzEao1yOBt, узел 3864:2
   (страница рецепта). Панели — радиус 20, внутренний отступ 30
   (десктоп), между панелями 20, между заголовком блока и содержимым 20,
   между кнопками в ряду 10; поля и степперы — радиус 10, кнопки — 16,
   пилюли — 999. Высоты контролов 44 / 48 / 60 (степпер 60).
   Полная выкладка и правила пользования: sites/cosori/docs/design-tokens.md.

   Где подключён:
     * Django — templates/head.html (одна строка на все серверные страницы);
     * Astro  — src/layouts/BlogBase.astro и MordaBase.astro через
       ПОБАЙТОВУЮ копию src/styles/cs-tokens.css; совпадение копии с этим
       файлом проверяет тот же страж (двух разных шкал быть не может).

   Правило: новые блоки берут значения ОТСЮДА. Литерал в px допустим,
   но только из шкалы — страж не различает var() и число, он смотрит
   на значение.
   ============================================================ */

:root {
  /* ── Шкала отступов: 4 · 8 · 10 · 12 · 16 · 20 · 24 · 30 · 40 · 60 ──
     Промежуточных значений нет намеренно: именно они и дали зоопарк.
     Нужно «чуть-чуть не так» — берётся соседняя ступень, а не 14 и 18. */
  --cs-s1:   4px;
  --cs-s2:   8px;
  --cs-s3:  10px;
  --cs-s4:  12px;
  --cs-s5:  16px;
  --cs-s6:  20px;
  --cs-s7:  24px;
  --cs-s8:  30px;
  --cs-s9:  40px;
  --cs-s10: 60px;

  /* ── Радиусы (макет: поле/степпер 10, кнопка 16, панель 20, пилюля) ── */
  --cs-r-field: 10px;
  --cs-r-btn:   16px;
  --cs-r-panel: 20px;
  --cs-r-pill:  999px;

  /* ── Композиция панелей (макет 3864:2) ──
     Панель = --cs-panel-pad внутри, --cs-panel-gap до соседней панели,
     --cs-block-gap от заголовка блока до содержимого, --cs-row-gap
     между кнопками в одном ряду. Кнопка НЕ прижимается к краю панели:
     минимальный воздух — --cs-s5. */
  --cs-panel-pad:  30px;
  --cs-panel-gap:  20px;
  --cs-block-gap:  20px;
  --cs-row-gap:    10px;

  /* ── Высоты контролов ──
     44 — компактный (чипсы, вкладки, кнопки в плотных рядах),
     48 — обычная кнопка и поле формы,
     60 — степпер и крупные кнопки страницы рецепта (по макету). */
  --cs-h-sm: 44px;
  --cs-h-md: 48px;
  --cs-h-lg: 60px;
}

/* Телефон: панель ужимается по внутреннему отступу, шкала не меняется. */
@media (max-width: 575.98px) {
  :root { --cs-panel-pad: 16px; }
}