/* ============================================================================
   MB-UI-TOKENS — ЕДИНЫЙ ИСТОЧНИК стилей «Мастер Бут» (создан 24.07.2026)
   ----------------------------------------------------------------------------
   ЗАЧЕМ: до этого цвета/шрифты были зашиты в каждой странице (только зелёный —
   85 вхождений в витрине и подборе), а оранжевый «В корзине» вообще нигде не
   записан — его пришлось вылавливать с живой кнопки. Меняешь фирменный цвет —
   правишь десятки файлов и что-то забываешь.

   ПРАВИЛО: любая НОВАЯ страница/приложение/блок использует ТОЛЬКО эти переменные.
   Новый цвет вводится СНАЧАЛА сюда, потом применяется. Хардкодить #hex в
   страницах — нельзя.

   ПОДКЛЮЧЕНО глобально в bitrix/templates/proopt30_default/header.php (метка MB-UI-TOKENS).
   Значения сняты с БОЕВОГО сайта, не придуманы.
   ========================================================================== */
:root {
  /* ---------- ФИРМЕННЫЙ ЗЕЛЁНЫЙ (основное действие, акценты) ---------- */
  --mb-green:            #2A7D12;  /* базовый фирменный */
  --mb-green-hover:      #22650E;  /* ховер/нажатие */
  --mb-green-dark:       #1F5A0D;  /* глубокий (текст на светлом) */
  --mb-green-mid:        #2A6E12;  /* промежуточный */

  /* ---------- ОРАНЖЕВЫЙ (ВЫДЕЛЕНИЕ / «уже в корзине») ----------
     ⚠️ Смысловая разница: ЗЕЛЁНЫЙ = выбрано/нажато/основное действие.
        ОРАНЖЕВЫЙ = ВЫДЕЛЕНО, обрати внимание (чипс «Экспресс-заказ»,
        состояние «В корзине»). Не путать — иначе выделение читается как нажатие. */
  --mb-orange:           #C25A00;  /* = цвет кнопки «В корзине» в каталоге */
  --mb-orange-hover:     #A34C00;

  /* ---------- ЖЁЛТЫЙ «ВНИМАНИЕ» (светофор) ----------
     Третий смысл, чтобы не врать зелёным/оранжевым:
       зелёный  = выбрано / нажато (в слайсере штатный --mb-selected)
       оранжевый= в корзине
       ЖЁЛТЫЙ   = ОБРАТИ ВНИМАНИЕ (рамка + бейдж «новинка»), состоянием НЕ является.
     Утверждено владельцем 24.07: оттенок #FFD500. */
  --mb-attention:        #FFD500;
  --mb-attention-text:   #3A2E00;  /* текст на жёлтом — только тёмный, жёлтый на белом нечитаем */
  --mb-selected:         #33a716;  /* штатный зелёный выбранного чипса слайсера (opt-size-nav .is-active) */

  /* ---------- ТЕКСТ ---------- */
  --mb-text:             #2F3435;  /* основной */
  --mb-text-alt:         #41463F;  /* второстепенный тёмный */
  --mb-text-muted:       #6F6F6F;  /* приглушённый */
  --mb-text-faint:       #9A9A9A;  /* очень бледный (подписи) */
  --mb-link:             #0057C2;  /* синие ссылки темы */

  /* ---------- ПОВЕРХНОСТИ ---------- */
  --mb-surface:          #FFFFFF;
  --mb-surface-soft:     #F6F8F4;  /* мягкий фон блока */
  --mb-surface-green:    #EEF5E9;  /* зелёная подложка (баннеры, плашки) */
  --mb-surface-green-2:  #F3FAEF;  /* светлее */
  --mb-surface-card:     #FDFBF7;  /* карточка «гофро-ящик» */

  /* ---------- ГРАНИЦЫ ---------- */
  --mb-border:           #E9EAE6;
  --mb-border-soft:      #F2F2F2;
  --mb-border-green:     #CFE6C2;
  --mb-border-card:      #B09A76;  /* обводка гофро-карточки */

  /* ---------- СТАТУСЫ ---------- */
  --mb-danger:           #C62828;  /* ошибка */
  --mb-danger-soft:      #A3322F;
  --mb-warn:             #8A5400;  /* внимание/расхождение (текст) */
  --mb-warn-bg:          #FBF0DB;

  /* ---------- БЕЙДЖИ ТИПОВ КОРОБОК (§37) ---------- */
  --mb-badge-palette:    #1863B8;  --mb-badge-palette-bg: #E3F0FC;  --mb-badge-palette-br: #B9D8F5;
  --mb-badge-mix:        #A24B00;  --mb-badge-mix-bg:     #FDEFE0;  --mb-badge-mix-br:     #F3CFA6;

  /* ---------- ТИПОГРАФИКА ---------- */
  --mb-font:             'Montserrat', Arial, Helvetica, sans-serif;  /* шрифт темы сайта */
  --mb-fs-xs:            11px;
  --mb-fs-sm:            13px;
  --mb-fs-base:          14px;
  --mb-fs-lg:            17px;
  --mb-fw-normal:        400;
  --mb-fw-semibold:      600;
  --mb-fw-bold:          700;

  /* ---------- ГЕОМЕТРИЯ ---------- */
  --mb-radius-chip:      13px;  /* пилюля/чипс */
  --mb-radius:           10px;  /* карточка/блок */
  --mb-radius-sm:        6px;
  --mb-gap:              10px;
}