/* ==========================================================================
   Дизайн-токены личного кабинета TWS (редизайн 10.2026, см.
   docs/UX_AUDIT_2026-10.md, раздел «Дизайн-система»).

   Подключается в cabinet_base.html ПЕРВЫМ — до cabinet.css и стилей
   разделов. Три уровня:
     1. Палитра (--gray-*, --navy-*, --orange-*, ...) — сырые значения,
        в компонентах напрямую не используются.
     2. Семантика (--color-*, --space-*, --text-*, --radius-*, --shadow-*) —
        «что значит», от неё зависят все компоненты.
     3. Совместимость (--primary, --panel, --muted, --border, --good, ...) —
        старые имена, на которые опираются cabinet.css и CSS разделов
        (crm_board.css, monitoring_board.css, annotations.css, ...). Они
        ссылаются на семантику, поэтому тёмная тема переключает и их.

   Темы: по умолчанию data-theme="auto" — как в системе (с 02.10.2026, после
   чистки цветов в CSS разделов); явно — <html data-theme="light|dark">.
   Выбор пользователя хранит static/js/ui_prefs.js (localStorage, в try/catch).

   Контраст (WCAG 2.2 AA) проверен для пар «текст/фон»:
     --color-text на --color-surface ≈ 15:1, --color-text-muted ≈ 6.2:1,
     --color-text-subtle ≈ 4.5:1, --color-on-action на --color-action ≈ 4.6:1
     (бренд-оранжевый #f0740f с белым текстом даёт 2.9:1 — поэтому кнопки
     темнее бренда, а сам бренд — только акценты/индикаторы),
     --color-border-input на белом ≈ 3.3:1 (граница поля, WCAG 1.4.11),
     статусы success/warning/danger/info на своих фонах ≥ 4.7:1.
   ========================================================================== */

/* ---- 1. Палитра ------------------------------------------------------- */
:root{
  --gray-0:#ffffff; --gray-25:#fafbfc; --gray-50:#f5f7fa; --gray-75:#f0f3f7;
  --gray-100:#eaeef3; --gray-150:#e3e8ee; --gray-200:#dde3ea; --gray-300:#c8d0db;
  --gray-400:#848fa2; --gray-500:#64748b; --gray-600:#556275; --gray-700:#3a4659;
  --gray-800:#263142; --gray-900:#172031; --gray-950:#0e1626;

  --navy-50:#f3f6fb; --navy-100:#eaf0f8; --navy-200:#d3dff0; --navy-500:#3466b0;
  --navy-600:#27538f; --navy-700:#1a3a66; --navy-800:#142f53; --navy-900:#0f2747;

  --orange-50:#fff4ec; --orange-100:#ffe6d3; --orange-200:#fdc9a3; --orange-400:#f59a4b;
  --orange-500:#f0740f; --orange-600:#d9610b; --orange-700:#c4520c; --orange-800:#a3440b;

  --green-50:#ecfdf3; --green-200:#bbe7cc; --green-600:#1f9d63; --green-700:#15803d;
  --amber-50:#fffbeb; --amber-200:#f6dc9c; --amber-500:#d69e2e; --amber-700:#b45309;
  --red-50:#fef2f2; --red-200:#f5c2c2; --red-600:#dc2626; --red-700:#b91c1c;
  --blue-50:#eff6ff; --blue-200:#c6dbf6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af;
}

/* ---- 2. Семантика (светлая тема) ---------------------------------------- */
:root{
  color-scheme:light;

  /* Поверхности */
  --color-bg:var(--gray-50);              /* фон рабочей области */
  --color-surface:var(--gray-0);          /* карточки, таблицы, поля */
  --color-surface-2:#f7f9fb;              /* шапки карточек/таблиц, вторичные блоки */
  --color-surface-3:var(--gray-100);      /* утопленные области, чипы */
  --color-surface-hover:rgba(15,39,71,.045);
  --color-surface-selected:var(--navy-100);
  --color-overlay:rgba(14,22,38,.48);

  /* Текст */
  --color-text:var(--gray-900);
  --color-text-2:var(--gray-700);
  --color-text-muted:var(--gray-600);
  --color-text-subtle:var(--gray-500);
  --color-text-placeholder:#6b778c;
  --color-heading:var(--navy-900);
  --color-link:#1f56b3;
  --color-link-hover:var(--navy-700);

  /* Границы */
  --color-border:var(--gray-200);
  --color-border-strong:var(--gray-300);
  --color-border-input:var(--gray-400);
  --color-focus:var(--blue-600);

  /* Бренд и действие */
  --color-brand:var(--navy-900);
  --color-accent:var(--orange-500);           /* индикаторы, иконки, полосы */
  --color-accent-soft:rgba(240,116,15,.12);
  --color-accent-text:var(--orange-800);      /* текст в оранжевых бейджах */
  --color-action:var(--orange-700);           /* фон основной кнопки */
  --color-action-hover:var(--orange-800);
  --color-on-action:#ffffff;
  --color-action-2:var(--navy-700);           /* «тёмная» кнопка */
  --color-action-2-hover:var(--navy-900);

  /* Статусы: fg — текст/иконка, bg — заливка, border — рамка */
  --color-on-success:#ffffff; --color-success:var(--green-700); --color-success-bg:var(--green-50); --color-success-border:var(--green-200);
  --color-warning:var(--amber-700); --color-warning-bg:var(--amber-50); --color-warning-border:var(--amber-200);
  --color-danger:var(--red-700);    --color-danger-bg:var(--red-50);    --color-danger-border:var(--red-200);
  --color-info:var(--blue-800);     --color-info-bg:var(--blue-50);     --color-info-border:var(--blue-200);

  /* Боковое меню */
  --color-sidebar-bg:var(--gray-0);
  --color-sidebar-border:var(--gray-200);
  --color-nav-text:var(--gray-700);
  --color-nav-icon:var(--gray-500);
  --color-nav-section:var(--gray-500);
  --color-nav-hover-bg:var(--gray-75);
  --color-nav-active-bg:var(--navy-100);
  --color-nav-active-text:var(--navy-900);
  --color-scrollbar:rgba(15,39,71,.28);

  /* Отступы: шкала 4/8 */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;

  /* Типографика: Inter (self-host), числа — tabular-nums */
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
  --text-lg:16px; --text-xl:18px; --text-2xl:22px; --text-3xl:28px;
  --leading-tight:1.25; --leading-snug:1.4; --leading-normal:1.5;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Геометрия */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,39,71,.05);
  --shadow-sm:0 1px 2px rgba(15,39,71,.06),0 1px 3px rgba(15,39,71,.04);
  --shadow-md:0 4px 12px rgba(15,39,71,.08),0 2px 4px rgba(15,39,71,.04);
  --shadow-lg:0 16px 40px rgba(15,39,71,.16),0 4px 10px rgba(15,39,71,.06);
  --ring-width:2px;

  /* Движение */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:240ms;

  /* Размеры элементов управления */
  --control-h-sm:28px; --control-h-md:36px; --control-h-lg:44px;

  /* Каркас */
  --sidebar-w:248px; --sidebar-w-collapsed:64px; --topbar-h:56px; --content-max:1240px;
}

/* ---- 2b. Тёмная тема ---------------------------------------------------- */
/* Один и тот же набор значений для двух селекторов: явный выбор
   (data-theme="dark") и «как в системе» (data-theme="auto"). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#0e1626; --color-surface:#141e30; --color-surface-2:#182336; --color-surface-3:#1e2a3f;
  --color-surface-hover:rgba(255,255,255,.045); --color-surface-selected:#1f3152;
  --color-overlay:rgba(3,7,15,.66);
  --color-text:#e6ebf3; --color-text-2:#c6cfdd; --color-text-muted:#a3afc2; --color-text-subtle:#8d9ab0;
  --color-text-placeholder:#8d9ab0; --color-heading:#f1f4f9;
  --color-link:#7aa2f7; --color-link-hover:#a5c0fa;
  --color-border:#26334a; --color-border-strong:#33425c; --color-border-input:#5b6b86; --color-focus:#6ea8fe;
  --color-brand:#e6ebf3;
  --color-accent:#ff8a3d; --color-accent-soft:rgba(255,138,61,.14); --color-accent-text:#fdba74;
  --color-action:var(--orange-700); --color-action-hover:var(--orange-600); --color-on-action:#ffffff;
  --color-action-2:#2b4a7d; --color-action-2-hover:#335a96;
  --color-on-success:#0b2a18; --color-success:#86efac; --color-success-bg:#13261d; --color-success-border:#24553a;
  --color-warning:#fcd34d; --color-warning-bg:#2a2210; --color-warning-border:#5a4615;
  --color-danger:#fca5a5;  --color-danger-bg:#2c1517;  --color-danger-border:#5f2a2d;
  --color-info:#93c5fd;    --color-info-bg:#13213a;    --color-info-border:#24406b;
  --color-sidebar-bg:#111a2b; --color-sidebar-border:#22304a;
  --color-nav-text:#c6cfdd; --color-nav-icon:#8d9ab0; --color-nav-section:#8d9ab0;
  --color-nav-hover-bg:rgba(255,255,255,.05); --color-nav-active-bg:#1f3152; --color-nav-active-text:#ffffff;
  --color-scrollbar:rgba(255,255,255,.26);
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  --shadow-md:0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 18px 44px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    color-scheme:dark;
    --color-bg:#0e1626; --color-surface:#141e30; --color-surface-2:#182336; --color-surface-3:#1e2a3f;
    --color-surface-hover:rgba(255,255,255,.045); --color-surface-selected:#1f3152;
    --color-overlay:rgba(3,7,15,.66);
    --color-text:#e6ebf3; --color-text-2:#c6cfdd; --color-text-muted:#a3afc2; --color-text-subtle:#8d9ab0;
    --color-text-placeholder:#8d9ab0; --color-heading:#f1f4f9;
    --color-link:#7aa2f7; --color-link-hover:#a5c0fa;
    --color-border:#26334a; --color-border-strong:#33425c; --color-border-input:#5b6b86; --color-focus:#6ea8fe;
    --color-brand:#e6ebf3;
    --color-accent:#ff8a3d; --color-accent-soft:rgba(255,138,61,.14); --color-accent-text:#fdba74;
    --color-action:var(--orange-700); --color-action-hover:var(--orange-600); --color-on-action:#ffffff;
    --color-action-2:#2b4a7d; --color-action-2-hover:#335a96;
    --color-on-success:#0b2a18; --color-success:#86efac; --color-success-bg:#13261d; --color-success-border:#24553a;
    --color-warning:#fcd34d; --color-warning-bg:#2a2210; --color-warning-border:#5a4615;
    --color-danger:#fca5a5;  --color-danger-bg:#2c1517;  --color-danger-border:#5f2a2d;
    --color-info:#93c5fd;    --color-info-bg:#13213a;    --color-info-border:#24406b;
    --color-sidebar-bg:#111a2b; --color-sidebar-border:#22304a;
    --color-nav-text:#c6cfdd; --color-nav-icon:#8d9ab0; --color-nav-section:#8d9ab0;
    --color-nav-hover-bg:rgba(255,255,255,.05); --color-nav-active-bg:#1f3152; --color-nav-active-text:#ffffff;
    --color-scrollbar:rgba(255,255,255,.26);
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
    --shadow-md:0 4px 14px rgba(0,0,0,.4);
    --shadow-lg:0 18px 44px rgba(0,0,0,.55);
  }
}

/* ---- 3. Совместимость: старые имена → семантика --------------------------- */
/* Не удалять: на них опираются CSS разделов и inline-стили шаблонов. Новые
   стили пишем на --color-* / --space-* / --text-*. */
:root{
  --primary:var(--color-heading); --primary2:var(--color-link-hover); --primary3:var(--navy-600);
  --accent:var(--color-accent); --accent-dark:var(--color-action-hover); --accent-soft:var(--color-accent-soft);
  --bg:var(--color-bg); --panel:var(--color-surface); --panel-2:var(--color-surface-2); --panel-3:var(--color-surface-3);
  --text:var(--color-text); --text-2:var(--color-text-2); --muted:var(--color-text-muted); --muted-2:var(--color-text-subtle);
  --border:var(--color-border); --border-strong:var(--color-border-strong); --border-focus:var(--color-focus);
  --good:var(--color-success); --good-bg:var(--color-success-bg); --good-border:var(--color-success-border);
  --warning:var(--color-warning); --warning-bg:var(--color-warning-bg); --warning-border:var(--color-warning-border);
  --danger:var(--color-danger); --danger-bg:var(--color-danger-bg); --danger-border:var(--color-danger-border);
  --info:var(--color-info); --info-bg:var(--color-info-bg); --info-border:var(--color-info-border);
  --shadow-card:var(--shadow-xs);
  --focus-ring:0 0 0 var(--ring-width) var(--color-surface),0 0 0 calc(var(--ring-width) * 2) var(--color-focus);
  --nav-text:var(--color-nav-text); --nav-text-hover:var(--color-text); --nav-text-active:var(--color-nav-active-text);
  --nav-section:var(--color-nav-section); --nav-hover-bg:var(--color-nav-hover-bg);
  --nav-active-bg:var(--color-nav-active-bg); --nav-divider:var(--color-sidebar-border);
}
:root[data-theme="dark"]{--primary3:#7aa2f7}

/* ---- 4. Доп. семантика для CSS разделов (агент №3, чистка цветов 10.2026) ----
   Категориальные цвета меток/чипов (фиолетовый — аванс, бирюзовый — метки),
   рамка «горит», сплошные статусы под белый текст, тост, подсветка совпадений,
   полупрозрачная «таблетка» на пастельном цвете стадии воронки (цвет из БД).
   Пары текст/фон ≥ 4.5:1 в обеих темах. */
:root{
  --color-violet:#5b21b6; --color-violet-bg:#f3eefe; --color-violet-border:#dccdf8;
  --color-teal:#0f766e;   --color-teal-bg:#e6f6f5;   --color-teal-border:#bde4e2;
  --color-accent-border:rgba(240,116,15,.45);
  --color-info-solid:var(--blue-700); --color-danger-solid:var(--red-700); --color-success-solid:var(--green-700);
  --color-toast-bg:var(--gray-900); --color-toast-text:#ffffff;
  --color-mark-bg:rgba(240,116,15,.2);
  --color-stage-chip:rgba(255,255,255,.66);
  --color-track:var(--gray-100);              /* дорожка прогресс-бара / бара KPI */
  /* Ряд для графиков дашборда (dataviz: один оттенок + акцент, без радуги) */
  --chart-1:var(--navy-600); --chart-2:#6b8cc4; --chart-accent:var(--orange-600);
}
:root[data-theme="dark"]{
  --color-violet:#c4b5fd; --color-violet-bg:#231b3d; --color-violet-border:#41326e;
  --color-teal:#5eead4;   --color-teal-bg:#0f2a2a;   --color-teal-border:#1f4f4c;
  --color-accent-border:rgba(255,138,61,.45);
  --color-info-solid:#2f5fb3; --color-danger-solid:#b42323; --color-success-solid:#1f7a45;
  --color-toast-bg:#2b3a55; --color-toast-text:#f1f4f9;
  --color-mark-bg:rgba(255,138,61,.28);
  --color-stage-chip:rgba(14,22,38,.45);
  --color-track:#1e2a3f;
  --chart-1:#7aa2f7; --chart-2:#4d6a9c; --chart-accent:#ff8a3d;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --color-violet:#c4b5fd; --color-violet-bg:#231b3d; --color-violet-border:#41326e;
    --color-teal:#5eead4;   --color-teal-bg:#0f2a2a;   --color-teal-border:#1f4f4c;
    --color-accent-border:rgba(255,138,61,.45);
    --color-info-solid:#2f5fb3; --color-danger-solid:#b42323; --color-success-solid:#1f7a45;
    --color-toast-bg:#2b3a55; --color-toast-text:#f1f4f9;
    --color-mark-bg:rgba(255,138,61,.28);
    --color-stage-chip:rgba(14,22,38,.45);
    --color-track:#1e2a3f;
    --chart-1:#7aa2f7; --chart-2:#4d6a9c; --chart-accent:#ff8a3d;
    --primary3:#7aa2f7;
  }
}

/* 09.10.2026 (адаптивность): без задержки двойного тапа и с мягкой подсветкой касания вместо серой вспышки. */
a,button,summary,label,[role="button"],input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:rgba(15,39,71,.12)}