/* ============================================================================
   X.SUP UI-kit — ТОКЕНЫ. Единственный источник палитры и всех шкал платформы.
   Читается всеми модулями по https://<модуль>.sup-shop.ru/xsup/tokens.css

   Выгружено из X.CRM (app/static/css/app.css) 10.08.2026 — см. DESIGN_SYSTEM.md §1.1.
   Значения перенесены БЕЗ изменений: канон описывает то, что работает в бою.

   ПРАВИЛА ЭТОГО ФАЙЛА
   1. Новых оттенков не заводить. Нужен цвет — сначала проверить, не решается ли
      задача существующей парой «фон + текст».
   2. Правка здесь мгновенно уезжает во ВСЕ модули: отдельного деплоя у кита нет.
      Менять — только осознанно и с проверкой хотя бы двух модулей.
   3. Модуль-специфичные переменные объявляет сам модуль в своём CSS. Сюда
      попадает только то, что нужно больше чем одному.
   ============================================================================ */

:root {
  /* ---- Поверхности и текст (ТЁПЛАЯ шкала; холодная tailwind-серая удалена) ---- */
  --bg: #F8F7F5;             /* фон страницы */
  --surface: #FFFFFF;        /* карточки, панели */
  --surface-2: #F3F2EE;      /* вторичная поверхность: бейджи, hover */
  --surface-3: #FAFAF9;      /* «колодцы»: внутренние строки, вложения */
  --text: #141414;
  --text-dim: #6B6B6B;
  --text-dim2: #9CA3AF;      /* совсем бледный: подписи, каретки */
  --border: #E5E4E1;
  --border-soft: #F1F1EF;    /* разделители ВНУТРИ карточки */
  --border-hover: #D1D0CD;   /* граница при наведении */

  /* ---- Функциональные цвета: на каждое состояние ПАРА «фон + текст» ---- */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-bg: #EEF2FE;
  --accent-tint: rgba(37, 99, 235, .10);   /* подсветка новой строки (гаснет) */
  --accent-tint-0: rgba(37, 99, 235, 0);   /* она же в нуле — конец fade-out */
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --danger-border: #FECACA;
  --success: #15803D;
  --success-bg: #DCFCE7;
  --success-border: #BFE8CB;
  --warning: #92400E;        /* ТЕКСТ предупреждения */
  --warning-bg: #FEF3C7;
  --warning-border: #FDE68A;
  /* Заливной янтарный. Заведён в ките, чтобы модули не плодили пятый жёлтый:
     в X.CRM он жил сырой тройкой rgba(245,158,11,…) в градиентах (DESIGN_SYSTEM §1.5б). */
  --warning-solid: #F59E0B;
  --pin: #F5C36B;            /* золото «горящего»/закреплённого */
  --pin-hover: #E5A933;
  --pin-bg: #FEF6E7;

  /* ---- Фирменные цвета внешних каналов ---- */
  --brand-wa: #25D366;
  --brand-wa-dark: #128C7E;
  --brand-tg: #229ED9;       /* был без токена, хотя у WhatsApp он есть (§1.5г) */

  /* ---- Радиусы: ТРИ ступени + пилюля + модалка. Больше ничего ---- */
  --radius: 12px;            /* карточки, блоки */
  --radius-ctl: 10px;        /* кнопки, поля, селекты */
  --radius-sm: 8px;          /* внутренние строки, мелкие иконочные кнопки */
  --radius-lg: 16px;         /* модалки и шторки */
  --radius-pill: 999px;
  /* Скругление ГЛИФОВ ДАННЫХ — столбик спарклайна, квадратик легенды. Это не
     ступень компонентной шкалы: на 6-пиксельном столбике даже --radius-sm (8px)
     съедает саму фигуру. Для интерфейсных элементов НЕ применять. */
  --radius-bar: 3px;

  /* ---- Тени: единая ТЁПЛАЯ база rgba(20,20,20,…), не rgba(0,0,0,…) ---- */
  --shadow: 0 1px 3px rgba(20,20,20,.06), 0 1px 2px rgba(20,20,20,.04);
  --shadow-hover: 0 4px 12px rgba(20,20,20,.08);
  --shadow-sheet: 0 -8px 24px rgba(20,20,20,.18);   /* шторки снизу */
  --scrim: rgba(20,20,20,.45);                      /* подложка модалок */

  /* ---- Типографика ---- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --lh-tight: 1.3;
  --lh-base: 1.45;
  /* Моноширинный стек — только для того, что читают ПОСИМВОЛЬНО и сверяют:
     артикулы, трек-номера, номера заказов. Для текста не применять.
     Стек описан в DESIGN_SYSTEM §1.2, но токена под него не было — модули
     писали его руками и разошлись в составе. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Отступы. Шкала 4/6/8/10/12/16/24; 20px — это --sp-5, а не «пусть будет» ---- */
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-2h: 10px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* ---- Высоты контролов — три и только три ---- */
  --h-ctl: 44px;             /* базовая кнопка/поле */
  --h-ctl-sm: 36px;          /* компактная кнопка, иконочная кнопка */
  --h-ctl-xs: 28px;          /* степпер, мини-иконки */

  /* ---- Высота межмодульного навбара. Смещения липких элементов модуля
         считаются ТОЛЬКО отсюда через calc() — руками px в top не писать ---- */
  --h-xsup-nav: 44px;
}