/* ═══════════════════════════════════════════════════════════
   ДИЗАЙН-ТОКЕНЫ
   Единственное место, где заданы цвета, шрифты и размеры.
   Источник решений — docs/brand-guidelines.md
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Бренд ─────────────────────────────────────────── */
  --brand-50:  #E4EDE8;
  --brand-100: #C6DCD1;
  --brand-200: #94BFAB;
  --brand-300: #5C9E80;
  --brand-400: #2E7D5C;
  --brand-500: #16624A;   /* основной — 7.3:1 на белом */
  --brand-600: #114E3B;
  --brand-700: #0D3C2D;
  --brand-800: #0A2C21;
  --brand-900: #061D16;

  /* ─── Нейтральные (тёплые) ──────────────────────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;   /* фон страницы — тёплый белый, не кремовый */
  --n-50:  #F5F4F1;   /* мягкая подложка */
  --n-100: #E7E5E0;   /* тонкая граница — тёплый серый, НЕ бежевый */
  --n-200: #D5D2CB;   /* граница */
  --n-300: #B8B4AB;
  --n-400: #918C84;   /* приглушённый текст */
  --n-500: #6B6862;   /* вторичный текст — 5.4:1 */
  --n-600: #514E49;
  --n-700: #3A3833;
  --n-800: #1F1E1C;   /* основной текст — 16.1:1 */
  --n-900: #121110;

  /* ─── Семантика ─────────────────────────────────────── */
  --ok:        #16624A;
  --ok-bg:     #E4EDE8;
  --warn:      #8A5D1F;   /* текст */
  --warn-tint: #C08A2E;   /* плашки, иконки, рамки */
  --warn-bg:   #FBF2E1;
  --danger:    #A63B2C;
  --danger-bg: #FAEAE7;
  --info:      #3D6478;
  --info-bg:   #EAF1F5;

  /* ─── Палитра графиков ──────────────────────────────────
     ВНИМАНИЕ: это НЕ цвета интерфейса. Приглушённые брендовые
     оттенки в графиках читаются как серые и сливаются при
     дальтонизме — проверено валидатором и провалено.
     Этот набор прошёл все проверки (полоса светлоты, насыщенность,
     различимость при протанопии/тританопии, контраст к фону).
     Порядок фиксированный: не тасовать, не добавлять «ещё один цвет».
     Нужна 5-я категория — объединяем в «Прочее». */
  --dv-1: #00814F;   /* зелёный  */
  --dv-2: #C1820C;   /* янтарный */
  --dv-3: #2B6BAD;   /* синий    */
  --dv-4: #C43D30;   /* красный  */

  /* Последовательная шкала (одна тональность, светлая → тёмная) */
  --seq-1: #D6EAE0;
  --seq-2: #A3D0BB;
  --seq-3: #6BB394;
  --seq-4: #33926F;
  --seq-5: #00814F;

  /* ─── Семантические роли (используем ИХ, не сырые цвета) ── */
  --bg:          var(--n-25);
  --surface:     var(--n-0);
  --surface-2:   var(--n-50);
  --border:      var(--n-100);
  --border-strong: var(--n-200);
  --text:        var(--n-800);
  --text-2:      var(--n-500);
  --text-3:      var(--n-400);
  --accent:      var(--brand-500);
  --accent-hover:var(--brand-600);
  --accent-soft: var(--brand-50);

  /* ─── Типографика ───────────────────────────────────── */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;

  --fs-3xl: 32px;
  --fs-2xl: 24px;
  --fs-xl:  19px;
  --fs-lg:  16px;
  --fs-md:  14px;   /* база интерфейса */
  --fs-sm:  13px;   /* таблицы */
  --fs-xs:  12px;   /* подписи */
  --fs-2xs: 11px;   /* метки-капс */

  /* ─── Сетка 4px ─────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ─── Форма ─────────────────────────────────────────── */
  --r-sm:   6px;
  --r:      8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-full: 999px;

  --shadow-pop: 0 8px 28px rgba(43, 39, 35, 0.12);
  --shadow-modal: 0 20px 60px rgba(43, 39, 35, 0.20);

  --sidebar-w: 244px;
  --row-h: 44px;

  --t-fast: 120ms ease;
  --t: 180ms ease;
}