/* ============================================================================
   sage-tokens.css — ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ темы «Sage» (приглушённый зелёный).
   Глобальные :root-переменные. Питает ОБА мира:
     • кастом-страницы  → через sage.css (scoped .sage)
     • админку unfold   → значения цветов дублируются в settings.UNFOLD["COLORS"];
                          неколористику (радиусы/высоты/тени/типографика) тянет
                          admin-theme.css из этих же переменных.
   Порядок подключения: sage-tokens.css → sage.css → admin-theme.css.
   Офлайн on-prem: без CDN. Шрифт Golos Text — self-host (@font-face в
   admin-theme.css). Иконки — локальный Material Symbols (грузит unfold).
   ============================================================================ */

:root {

  /* ───────────────────── ЦВЕТОВЫЕ РАМПЫ 50–950 ─────────────────────────────
     Дублируются в UNFOLD["COLORS"] (см. MIGRATION.md, раздел 2). Значения —
     полноценные CSS-цвета. */

  /* primary — фирменный sage-зелёный, 600 = акцент */
  --primary-50:  #eef3ec;
  --primary-100: #dbe6d6;
  --primary-200: #bcd0b3;
  --primary-300: #95b489;
  --primary-400: #6f9560;
  --primary-500: #547a44;
  --primary-600: #456437;   /* акцент темы */
  --primary-700: #3a522f;
  --primary-800: #2f4127;
  --primary-900: #26341f;
  --primary-950: #1b2a16;

  /* base — ТЁПЛЫЙ sage-нейтральный (перекрашивает холодный gray unfold).
     Это и есть ключ к выравниванию нейтралей двух миров. */
  --base-50:  #f5f6f2;
  --base-100: #e7e9e2;
  --base-200: #d6dacf;
  --base-300: #bcc1b4;
  --base-400: #97a08c;
  --base-500: #6f7867;
  --base-600: #545d4b;
  --base-700: #424a39;
  --base-800: #2f3527;
  --base-900: #1c2117;
  --base-950: #141810;

  /* ───────────────────── СЕМАНТИЧЕСКИЕ ПОВЕРХНОСТИ ─────────────────────────
     Тёплые алиасы на рампы — удобные имена для компонентов. */
  --surface:        #ffffff;
  --canvas:         var(--base-50);   /* фон страницы               */
  --col-bg:         #f1f3ee;          /* колонки канбана / поля th   */
  --border:         #e3e6dd;
  --border-strong:  var(--base-200);  /* #d6dacf */
  --divider:        #ecefe7;

  --text:    #2a3024;                 /* основной  */
  --text-2:  var(--base-600);         /* вторичный #545d4b */
  --text-3:  var(--base-400);         /* приглушённый #97a08c */
  --muted:   var(--base-300);         /* #bcc1b4 */

  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-soft:   #e9ede4;          /* фон активного пункта / бордюр бейджа */
  --primary-softer: #f3f5ef;          /* фон чипа / бейджа стадии */

  /* ───────────────────── СЕМАНТИЧЕСКИЕ АКЦЕНТЫ ────────────────────────────
     В unfold идут оверрайдами в admin-theme.css (рампы COLORS их не покрывают). */
  --success:        #2f7d4f; --success-bg: #e6f1ea; --success-border: #c2ddca;
  --danger:         #c0492f; --danger-bg:  #f8e8e3; --danger-border:  #ecc5b9;
  --warning:        #b07d22; --warning-bg: #f6edd6; --warning-border: #e6d3a4;
  --info:           #36648f; --info-bg:    #e7eef4; --info-border:    #cddcea;

  /* ───────────────────── ВОРОНКА (5 стадий, светлая→тёмная = прогресс) ───── */
  --st-1: #95b489;
  --st-2: #6f9560;
  --st-3: #547a44;
  --st-4: #456437;
  --st-5: #3a522f;

  /* ───────────────────── РАДИУСЫ (шкала 4/6/8/12/pill) ────────────────────
     Канон: бейджи/инпуты-мелкие → 6; кнопки/поля/средние карточки → 8;
     крупные карточки/контейнеры → 12. 9/10/11/14 из исходников схлопываются. */
  --r-4:    4px;
  --r-6:    6px;
  --r-8:    8px;
  --r-12:   12px;
  --r-pill: 999px;

  /* ───────────────────── ВЫСОТЫ КОНТРОЛОВ (унифицированы) ─────────────────
     Канон: один рост для кнопок/полей/поиска/фильтра/select. Убирает 36/40px. */
  --ctrl-h:    38px;   /* основной рост контрола            */
  --ctrl-h-sm: 30px;   /* компактный: сегмент/чипы/таб       */
  --ctrl-px:   14px;   /* типовой горизонтальный паддинг     */

  /* ───────────────────── ТЕНИ ────────────────────────────────────────────── */
  --sh-card:  0 1px 2px rgba(28,33,23,.06), 0 1px 1px rgba(28,33,23,.04);
  --sh-lift:  0 12px 28px rgba(28,33,23,.16), 0 2px 6px rgba(28,33,23,.08);
  --sh-focus: 0 0 0 3px rgba(69,100,55,.18);   /* кольцо фокуса на primary */

  /* ───────────────────── АВАТАРЫ ─────────────────────────────────────────── */
  --avatar:       24px;   /* стандартный inline-аватар (= unfold .crm-avatar) */
  --avatar-dense: 22px;   /* плотный — только доска сделок                    */

  /* ───────────────────── ТИПОГРАФИКА ─────────────────────────────────────── */
  --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  --fs-page-title: 22px;  /* заголовок страницы (600)        */
  --fs-section:    18px;  /* подзаголовок секции (600)        */
  --fs-body:       14px;  /* основной текст                   */
  --fs-secondary:  13px;  /* вторичный                        */
  --fs-label:      12px;  /* метки/капс (600)                 */
  --fs-micro:      11.5px;/* th таблиц, мелкие подписи         */

  --lh-base: 1.45;

  /* ───────────────────── RACE-BAR (план vs факт): пороги — в JS/шаблоне ─────
     Цвет ступени берётся из семантики (3 различимых оттенка):
       ≥90% → --success (зелёный) | ≥65% → --info (синий) | <65% → --danger. */
  --race-good: var(--success);
  --race-mid:  var(--info);
  --race-bad:  var(--danger);
  --race-track: var(--col-bg);

  /* ───────────────────── СПАРКЛАЙН ──────────────────────────────────────── */
  --spark-line:   var(--primary-600);
  --spark-area:   color-mix(in srgb, var(--primary-600) 12%, transparent);
  --spark-dot:    var(--primary-700);
  --spark-empty:  var(--base-300);   /* плейсхолдер при пустых данных */
}