/* Дизайн-токены CRM («ТЗ: доработка интерфейса и дизайна», раздел 3).
   Единственное место, где задаются цвета, размеры шрифта, отступы, скругления и тени.
   В остальных CSS — только var(--…). */
:root {
  /* 3.1 Цвета */
  --c-nav: #16325C;
  --c-nav-text: #D6E2FF;            /* пункты шапки */
  --c-nav-accent: #8FB5FF;          /* подчёркивание активного пункта */
  --c-nav-field: #24426F;           /* поле поиска в шапке */
  --c-nav-field-border: #3A5A8C;
  --c-primary: #1F6FEB;
  --c-primary-hover: #1A5FCC;
  --c-on-primary: #FFFFFF;
  --c-bg: #F4F5F7;
  --c-surface: #FFFFFF;
  --c-surface-sunken: #EBEEF2;
  --c-border: #E2E5EA;
  --c-border-strong: #C9CED6;
  --c-text: #1D2330;
  --c-text-secondary: #5B6474;      /* контраст ≥ 4,5:1 на --c-bg */
  --c-text-disabled: #8A94A3;       /* иконки-переключатели, недоступные пункты (≥ 3:1) */
  --c-star: #B07A00;                /* звёздочка письма (≥ 3:1) */
  --c-success: #1A7F37;
  --c-success-bg: #E8F5EC;
  --c-warning: #B54708;
  --c-warning-bg: #FEF3E6;
  --c-danger: #C62828;
  --c-danger-bg: #FDECEC;
  --c-info-bg: #EAF2FE;
  --c-overlay: rgba(20, 30, 50, .35);
  --c-toast: #1D2330;
  --c-skeleton: #E6E9EE;
  --c-skeleton-shine: #F1F3F6;

  /* Цвета этапов воронки: 10 приглушённых оттенков, белый текст проходит контраст */
  --stage-1: #3D6FD8;  --stage-2: #7A55C9;  --stage-3: #A05E0F;  --stage-4: #1E7F8C;  --stage-5: #23845A;
  --stage-6: #1A7F37;  --stage-7: #0F6B4A;  --stage-8: #5C6B7A;  --stage-9: #B4485A;  --stage-10: #8A5A2B;
  /* аватары сотрудников */
  --avatar-1: #3D6FD8;  --avatar-2: #7A55C9;  --avatar-3: #1E7F8C;  --avatar-4: #23845A;  --avatar-5: #A05E0F;  --avatar-6: #B4485A;

  /* 3.2 Типографика */
  --font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 12px;   --lh-xs: 16px;
  --fs-sm: 13px;   --lh-sm: 18px;
  --fs-md: 14px;   --lh-md: 20px;
  --fs-lg: 16px;   --lh-lg: 24px;
  --fs-xl: 20px;   --lh-xl: 28px;
  --fs-2xl: 28px;  --lh-2xl: 36px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* 3.3 Отступы (шаг 4 px), скругления, тени, размеры */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px;
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-xl: 12px;  --r-full: 999px;
  --shadow-1: 0 2px 8px rgba(20, 30, 50, .12);
  --shadow-2: 0 10px 32px rgba(20, 30, 50, .22);
  --focus-ring: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-primary);
  --h-control-sm: 32px;   /* компактные — в таблицах */
  --h-control: 36px;
  --h-nav: 48px;
  --h-row: 38px;          /* строка таблицы 36–40 px */
  --icon-sm: 16px;
  --icon-md: 20px;
  --w-page: 1440px;       /* формы и карточки */
  --w-narrow: 1200px;
  --w-sidebar: 320px;     /* правая колонка карточки сделки */
  --w-drawer: 480px;      /* боковая панель быстрого просмотра */
  --w-kanban-col: 264px;
  --w-kanban-col-folded: 48px;
  --w-search: 320px;
  --w-modal: 520px;
  --w-modal-lg: 760px;
  --z-nav: 20;  --z-menu: 60;  --z-modal: 80;  --z-toast: 100;
  --t-fast: .15s;

  /* Старые имена переменных — синонимы токенов (шаблоны переводятся поэкранно) */
  --bg: var(--c-bg);  --card: var(--c-surface);  --text: var(--c-text);  --muted: var(--c-text-secondary);
  --line: var(--c-border);  --accent: var(--c-primary);  --ok: var(--c-success);  --warn: var(--c-warning);
  --bad: var(--c-danger);  --nav: var(--c-nav);
}

/* UI v2: значения прежнего :root сохранены. */
@font-face { font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap; src:url("/static/fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-style:normal; font-display:swap; src:url("/static/fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-style:normal; font-display:swap; src:url("/static/fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
:root {
  --c-order-overlay:rgba(15,23,42,.35);
  --fs-chart:11px; --fs-order-total:18px;
  --c-so-tabs:#f9f9fb;
  --c-delivery-green:#25BB5C; --c-delivery-yellow:#FFFF00;
  --c-delivery-purple:#DDB6FF; --c-delivery-coral:#FF6964; --c-delivery-red:#FF0000;
  --c-delivery-border:#d5d9e0; --c-delivery-new:#f8fbff;
  --c-delivery-selection:#2563eb; --c-delivery-row-number:#f4f6f8; --c-delivery-palette-border:#9aa3af;
  --c-chart-grid:#eef0f3; --c-chart-muted:#6b7280; --c-chart-divider:#d6dbe3;
  --c-chart-today:#e5484d; --c-chart-done:#b9c2cf; --c-contact-hover:#eef4ff;
}
:root[data-ui="v2"] {
  --font:"Inter","Segoe UI",Arial,sans-serif;
  --font-mono:"Inter","Segoe UI",Arial,sans-serif;
  --c-sidebar:#F1F2F4; --c-bg:#FFFFFF; --c-surface:#FFFFFF;
  --c-surface-sunken:#F7F8FA; --c-border:#E6E8EB; --c-border-strong:#8C929C;
  --c-text:#1F2328; --c-text-secondary:#59606B; --c-primary:#2557C7;
  --c-primary-hover:#1E47A3; --c-info-bg:#E8EEFB; --c-row-hover:#F5F7FA;
  --fs-xs:13px; --lh-xs:18px; --fs-sm:14px; --lh-sm:20px;
  --fs-md:15px; --lh-md:22px; --fs-lg:17px; --lh-lg:24px;
  --fs-chart:var(--fs-xs); --fs-order-total:var(--fs-lg);
  --w-nav:232px; --w-nav-collapsed:64px; --w-deal-panel:340px; --h-page-header:56px;
}
:root[data-ui="v2"][data-density="comfortable"] { --h-row:44px; }
:root[data-ui="v2"][data-density="compact"] { --h-row:36px; }