/* ============================================================
   tokens.css — CSS-переменные дизайн-системы COSORI (ночная задача
   Founder 04.09.2026: «переверстать меню и футер и подключить ДС»).

   Значения сняты пипеткой с эталонов ДС (scratchpad/ds/*.png, скрины
   Figma: header-vitrina / header-mobile / menu-mobile / footer-desktop /
   footer-mobile) и сверены с уже одобренной темой theme.css (Figma
   P25e34xeCl5ayzEao1yOBt). Ничего не выдумано.

   Зачем отдельный файл, а не theme.css: theme.css несёт @import
   "tailwindcss" с глобальным сбросом — на слепках Тильды (морда) его
   подключать нельзя. Этот файл — только переменные, безопасен везде:
   инлайнится в MordaBase, импортируется блогом, а footer.css/header.css
   ссылаются на переменные с фолбэками, поэтому и футер Django (который
   получает голый footer.css без этого файла) не деградирует.

   Правило пользования: компоненты берут токены, а не хардкод; фолбэк в
   var() обязан совпадать со значением здесь (страховка для страниц, куда
   tokens.css ещё не доехал).
   ============================================================ */
:root {
  /* --- Шрифт --- */
  --cs-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- Палитра: акцент (пипетка: CTA и бейджи макетов) --- */
  --cs-accent:         #fe5834;
  --cs-accent-hover:   #e94b2c;  /* hover из theme.css (brand-600) */
  --cs-accent-pressed: #c93f25;  /* pressed из theme.css (brand-700) */
  --cs-accent-soft:    #fff5f2;  /* светлая подложка hover белых кнопок */

  /* --- Палитра: текст --- */
  --cs-ink:    #231f20;  /* основной текст, подписи шапки */
  --cs-ink-2:  #4a4f53;  /* вторичный текст */
  --cs-muted:  #717171;  /* приглушённый: объёмы, подписи моделей */

  /* --- Палитра: поверхности и линии (светлая зона) --- */
  --cs-bg:       #ffffff;
  --cs-surface:  #f6f6f6;  /* плитки-миниатюры, подложки секций */
  --cs-line:     #d9d9d9;  /* границы, линия под мобильной шапкой */
  --cs-hairline: #e7e7e7;  /* волосяные разделители в меню (пипетка) */

  /* --- Палитра: тёмная зона (футер; пипетка footer-desktop.png) --- */
  --cs-dark-bg:      #1a1a1a;  /* фон футера */
  --cs-dark-surface: #2b2b2b;  /* круги соцсетей */
  --cs-dark-line:    #464646;  /* разделители футера */
  --cs-dark-link:    #c6c6c6;  /* ссылки колонок */
  --cs-dark-dim:     #9a9a9a;  /* приглушённые подписи футера */

  /* --- Радиусы (шкала ДС) --- */
  --cs-r-8:    8px;    /* мелкие плитки, фокус-обводки */
  --cs-r-16:   16px;   /* узкие панели меню */
  --cs-r-20:   20px;   /* промо-плитка, карточки */
  --cs-r-32:   32px;   /* крупные панели мега-меню, секции */
  --cs-r-pill: 999px;  /* пилюли и круги */

  /* --- Отступы (шкала 4-8-12-16-24-32-48-64) --- */
  --cs-sp-4:  4px;
  --cs-sp-8:  8px;
  --cs-sp-12: 12px;
  --cs-sp-16: 16px;
  --cs-sp-24: 24px;
  --cs-sp-32: 32px;
  --cs-sp-48: 48px;
  --cs-sp-64: 64px;

  /* --- Текстовые стили (шорткаты font; сняты с макетов шапки/футера) --- */
  --cs-t-nav:       500 16px/1.55 var(--cs-font);  /* пункты десктоп-меню */
  --cs-t-nav-strong:600 16px/1.2  var(--cs-font);  /* кнопки-пилюли */
  --cs-t-menu-row:  600 17px/1.2  var(--cs-font);  /* строки мобильного меню */
  --cs-t-menu-sub:  500 16px/1.3  var(--cs-font);  /* подпункты мобильного меню */
  --cs-t-body:      400 16px/1.4  var(--cs-font);
  --cs-t-body-s:    400 14px/1.4  var(--cs-font);
  --cs-t-title-m:   600 20px/1.3  var(--cs-font);  /* заголовки колонок футера */
  --cs-t-title-s:   700 13px/1.4  var(--cs-font);  /* аккордеоны мобильного футера (в верхнем регистре) */
}