/* Единственный файл цветов, размеров, радиусов и теней (ТЗ №90, п. 1). Страницы и компоненты берут значения ТОЛЬКО отсюда:
   ни цвета (#…, rgb()), ни размера шрифта, ни радиуса числом в стилях страниц нет (проверяет webapp/lib/design_tokens.test.js).

   Устройство файла:
     1. «--ds-*» — новая система по макету «salesai — новый вид»: фон страницы, поверхность, рамка, текст, акцент, тёмное меню,
        пять смысловых пар «фон / текст» (хорошо, внимание, плохо, информация, нейтрально).
     2. Прежние имена (--content-bg, --card-bg, --text-primary, --success-bg, --fs-body, --sp-*, …) оставлены и указывают на новые
        значения: на них ссылаются сотни правил, а вид у всех страниц обязан стать один.
     3. Тёмная тема (data-theme="dark") — те же роли со своими значениями; контраст текста не ниже 4,5:1 в обеих (тест). */
:root {
  /* ---------- 1. Новая система (ТЗ №90, п. 1) ---------- */
  --ds-page: #F3F5F7;
  --ds-surface: #FFFFFF;
  --ds-border: #E3E7EB;
  --ds-line: #EEF1F4;          /* тонкая линия между строками внутри поверхности */
  --ds-border-strong: #D5DBE1; /* рамка кнопок и полей */
  --ds-text: #16181A;
  --ds-text-2: #5B6166;
  --ds-accent: #0B6B62;
  --ds-accent-hover: #084F49;

  /* Меню: тёмная колонка, активный пункт, текст. */
  --ds-menu-bg: #152532;
  --ds-menu-active: #1F3A4D;
  --ds-menu-hover: #1A2F40;
  --ds-menu-text: #C9D3DC;
  --ds-menu-text-active: #FFFFFF;
  --ds-menu-muted: #8FA3B4;
  --ds-menu-line: #243A4C;
  --ds-menu-field: #0F1C26;

  /* Смысловые пары «фон / текст». Цвет иконки и метки выбирается по СМЫСЛУ плитки или статуса, не по настроению. */
  --ds-ok-bg: #D9EFE8;      --ds-ok-fg: #0B6B62;
  --ds-warn-bg: #FFF4D6;    --ds-warn-fg: #9A5B0C;
  --ds-bad-bg: #FBE9E7;     --ds-bad-fg: #B42318;
  --ds-info-bg: #E3F1FB;    --ds-info-fg: #1D6FA8;
  --ds-neutral-bg: #EEF1F4; --ds-neutral-fg: #5B6166;
  /* Жёлтая плашка «сейчас»: рамка и квадрат иконки. */
  --ds-warn-border: #F3D88A;
  --ds-warn-icon-bg: #F7C948;
  --ds-warn-icon-fg: #5B4A0F;
  --ds-warn-text: #5B4A0F;
  /* Кнопки. */
  --ds-btn-bg: #16181A;
  --ds-btn-fg: #FFFFFF;
  --ds-btn-danger: #B42318;
  --ds-on-danger: #FFFFFF;  /* текст на красной кнопке */
  --ds-on-solid: #FFFFFF;   /* текст на красном счётчике меню */
  --ds-counter-bg: #B42318; /* красный счётчик на пункте меню («Проверка 249») */
  /* Мягкие оттенки фона под строки и подписи. */
  --ds-ok-soft: #F4FAF8;
  --ds-warn-soft: #FFF8EC;

  /* Радиусы: поверхность и плитка — 14, кнопка и поле — 9, метка — 6, пилюля — полностью круглая. */
  --ds-r-card: 14px;
  --ds-r-ctl: 9px;
  --ds-r-badge: 6px;
  --ds-r-seg: 7px;
  --ds-r-icon: 10px;
  --ds-r-bar: 4px;     /* полоса прогресса и дорожка */
  --ds-r-counter: 10px; /* красный счётчик меню и число во вкладке */
  --ds-r-tiny: 2px;    /* подсветка найденного слова */

  /* Шрифт: Manrope (файлы лежат в /fonts), запасной — Inter и системный. Размеры: заголовок страницы 26/800, раздела 16/800, текст 15/500–600,
     подпись 13, подпись плитки 12/700 капителью с разрядкой .05em, число плитки 34/800 табличными цифрами. Больше размеров нет. */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-26: 26px;
  --fs-34: 34px;
  --fw-text: 500;
  --fw-strong: 700;
  --fw-heavy: 800;
  --ls-caps: 0.05em;

  /* Отступы и размеры блоков по макету. */
  --ds-menu-w: 232px;
  /* ТЗ №96, п. 8: рабочая область — на всю ширину окна справа от меню, предел 1 680 px вместе с полями по 24 px (было 1 048 с полями 36: на 1 920 px справа пустело 676 px). Единственное место ограничения. */
  --ds-main-max: 1680px;
  --ds-main-pad-y: 28px;
  --ds-main-pad-x: 24px;
  --ds-gap: 14px;
  --ds-gap-page: 24px;
  --ds-pad-card: 20px 22px;
  --ds-pad-tile: 18px 18px 16px;
  --ds-icon-box: 34px;
  --ds-avatar: 28px;
  --ds-btn-h: 38px;

  /* ---------- 2. Прежние имена → новые значения ---------- */
  /* Основной цвет марки (ТЗ №21): «Настройки → Оформление» меняет одну переменную; по умолчанию — чёрная основная кнопка. */
  --brand-primary: #16181A;

  --sidebar-bg: var(--ds-menu-bg);
  --sidebar-text: var(--ds-menu-text);
  --sidebar-text-muted: var(--ds-menu-muted);
  --sidebar-active-bg: var(--ds-menu-active);
  --sidebar-active-text: var(--ds-menu-text-active);
  --sidebar-border: var(--ds-menu-bg);
  --sidebar-divider: var(--ds-menu-line);
  --sidebar-hover: var(--ds-menu-hover);

  --content-bg: var(--ds-page);
  --card-border: var(--ds-border);
  --tile-bg: var(--ds-neutral-bg);
  --card-bg: var(--ds-surface);
  /* Строки таблиц разделены тонкой линией, «зебры» нет — цвет совпадает с фоном карточки (на переменную ссылается проверка контраста). */
  --row-alt-bg: var(--ds-surface);

  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-2);
  --text-tertiary: var(--ds-text-2);
  --link: var(--ds-accent);

  --btn-primary-bg: var(--brand-primary);
  --btn-primary-text: var(--ds-btn-fg);
  --btn-secondary-bg: var(--ds-surface);
  --btn-secondary-border: var(--ds-border-strong);

  --success: var(--ds-ok-fg);
  --success-bg: var(--ds-ok-bg);
  --error: var(--ds-bad-fg);
  --error-bg: var(--ds-bad-bg);
  --warning: #B8730A;
  --warning-bg: var(--ds-warn-bg);
  --info: var(--ds-info-fg);
  --info-bg: var(--ds-info-bg);
  --neutral-bg: var(--ds-neutral-bg);
  --neutral-text: var(--ds-neutral-fg);

  /* Текст НА цветной плашке (метки, оповещения). Исходные --error/--success/--warning/--info — для линий, полос и рамок. */
  --success-text: var(--ds-ok-fg);
  --error-text: var(--ds-bad-fg);
  --warning-text: var(--ds-warn-fg);
  --info-text: var(--ds-info-fg);

  /* Размеры шрифта: прежние имена указывают на ближайший размер нового набора (ни один стиль не даёт размер вне набора). */
  --fs-caption: var(--fs-12);
  --fs-small: var(--fs-13);
  --fs-body: var(--fs-15);
  --fs-lead: var(--fs-16);
  --fs-title: var(--fs-16);
  --fs-heading: var(--fs-26);
  --fs-display: var(--fs-34);
  --fs-20: var(--fs-16);
  --fs-24: var(--fs-26);
  --fs-28: var(--fs-34);
  --fs-36: var(--fs-34);

  --r-control: var(--ds-r-ctl);
  --r-card: var(--ds-r-card);
  --r-pill: 999px;
  /* Макет плоский: карточка — рамка без тени; тень только у всплывающих окон. */
  --shadow-card: none;
  --shadow-pop: 0 8px 24px rgba(22, 24, 26, 0.12), 0 2px 6px rgba(22, 24, 26, 0.06);
  --shadow-modal: 0 24px 56px rgba(22, 24, 26, 0.20), 0 6px 16px rgba(22, 24, 26, 0.08);
  --shadow-lift: 0 6px 16px rgba(22, 24, 26, 0.08), 0 2px 4px rgba(22, 24, 26, 0.05);
  --accent: var(--ds-accent);
  --bg-hover: var(--ds-neutral-bg);
  --bg-selected: var(--ds-info-bg);
  --text-selected: var(--ds-info-fg);
  --focus-ring-width: 2px;
  --control-bg: var(--ds-surface);
  --control-border: var(--ds-border-strong);
  --control-border-hover: var(--ds-text-2);

  /* ТЗ №82: движение отвечает на три вопроса — что изменилось, куда делось, что сейчас происходит; остальное — тишина.
     Чем чаще действие, тем быстрее: то, что делают сто раз в день, — не дольше 120 мс, то, что раз в неделю, — до 400 мс.
     Три длительности и одна кривая; в стилях других значений нет (проверяет webapp/lib/motion_tokens.test.js).
     Ниже — именованные исключения: подсветки, которые должны гаснуть дольше (цифра — 1,5 с, новая строка — 2 с), и «живые»
     бесконечные индикаторы (дыхание точки, блик полосы, крутилка, мерцание каркаса). */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-theme: 250ms;
  --t-flash: 1500ms;
  --t-new-row: 2000ms;
  --t-skeleton-delay: 150ms;
  --t-breathe: 3s;
  --t-glint: 2s;
  --t-spin: 0.7s;
  --t-shimmer: 1.6s;
  --t-bar-run: 1.1s;
  /* Кружок с инициалами оператора: 8 мягких цветов, выбор — по имени (components/badges.js). Те же пять смысловых пар + три добавочных оттенка. */
  --av-1-bg: var(--ds-info-bg);    --av-1-fg: var(--ds-info-fg);
  --av-2-bg: var(--ds-ok-bg);      --av-2-fg: var(--ds-ok-fg);
  --av-3-bg: var(--ds-warn-bg);    --av-3-fg: var(--ds-warn-fg);
  --av-4-bg: #EDE9FE;              --av-4-fg: #5B21B6;
  --av-5-bg: var(--ds-bad-bg);     --av-5-fg: var(--ds-bad-fg);
  --av-6-bg: #D5F1F5;              --av-6-fg: #0E5A68;
  --av-7-bg: #F4EBDD;              --av-7-fg: #8A4F0A;
  --av-8-bg: var(--ds-neutral-bg); --av-8-fg: var(--ds-neutral-fg);
  /* Цвет компании — точка в переключателе компании: стабильный по id компании. */
  --org-1: #1D6FA8;
  --org-2: #0B6B62;
  --org-3: #B8730A;
  --org-4: #7C3AED;
  --org-5: #DB2777;
  --org-6: #0891B2;

  /* Система шкал: шесть ступеней шрифта (12 / 13 / 14 / 15 / 16 / 26 / 34 — выше), отступы 4 / 8 / 12 / 16 / 24 / 32 px, радиусы выше.
     ТЗ №83, п. 1.1: шаг отступов 8 px — внутри блока 16, между блоками 24, между разделами 40; в макете №90 плитки и блоки имеют свои отступы (--ds-pad-*). */
  --page-max: 1200px;
  --page-pad: 24px;
  --gap-in: 16px;
  --gap-blocks: 24px;
  --gap-sections: 40px;
  --row-h: 44px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius: var(--r-control);
  --radius-pill: var(--r-pill);
  --radius-lg: var(--r-card);
  --radius-md: var(--r-card);
  --radius-sm: var(--r-control);

  --shadow: var(--shadow-pop);

  --space-1: var(--sp-1);
  --space-2: var(--sp-1);
  --space-3: var(--sp-2);
  --space-4: var(--sp-2);
  --space-5: var(--sp-3);
  --space-6: var(--sp-3);
  --space-7: var(--sp-4);
  --space-8: var(--sp-4);
  --space-9: var(--sp-4);
  --space-10: var(--sp-5);
  --space-11: var(--sp-5);
  --space-12: var(--sp-6);

  --font-size-xs: var(--fs-caption);
  --font-size-sm: var(--fs-caption);
  --font-size-base: var(--fs-body);
  --font-size-md: var(--fs-body);
  --font-size-lg: var(--fs-lead);
  --font-size-xl: var(--fs-lead);
  --font-size-2xl: var(--fs-title);
  --font-size-3xl: var(--fs-heading);
  --font-size-4xl: var(--fs-34);
  --font-size-5xl: var(--fs-display);

  /* Графики: линия, прошлый период, сетка, подписи, отметки версий карты, части кольца качества лида. В тёмной теме переопределяются. */
  --chart-line: var(--ds-info-fg);
  --chart-prev: #9AA3AC;
  --chart-grid: var(--ds-border);
  --chart-text: var(--ds-text-2);
  --chart-marker: var(--ds-warn-fg);
  --chart-bar: var(--ds-info-fg);
  /* Часть «без ответа» на полосе — второй цвет той же палитры, контраст с плиткой ≥ 3:1. */
  --chart-bar-missed: #C2410C;
  --lead-1: var(--ds-bad-fg);
  --lead-2: #B8730A;
  --lead-3: var(--ds-text-2);

  /* Цвета, которые раньше были прописаны прямо в стилях страниц: теперь все — здесь, чтобы тёмная тема перекрашивала их одним блоком. */
  --overlay: rgba(22, 24, 26, 0.45);
  --row-review-bg: var(--ds-warn-soft);
  --row-review-hover: var(--ds-warn-bg);
  --row-review-border: var(--ds-warn-border);
  --row-muted-bg: var(--ds-page);
  --row-muted-hover: var(--ds-neutral-bg);
  --dot-gray: #C3CAD1;
  --speaker-operator-bg: var(--ds-info-bg);
  --speaker-client-bg: var(--ds-page);
  --questionable-bg: var(--ds-warn-bg);
  --questionable-operator-bg: #FBE7BC;
  --warning-border: var(--ds-warn-border);
  --skeleton-shine: var(--ds-line);
  /* Жёлтая подложка новой строки (гаснет за 2 с) и блик полосы прогресса, пока AI работает. */
  --new-row-bg: #FEF5C3;
  --glint: rgba(255, 255, 255, 0.55);
  /* Фон отдельного экрана — вход: мягкий серый, на нём белая карточка. */
  --screen-bg: var(--ds-page);
  --on-accent-soft: rgba(255, 255, 255, 0.25);
  --on-warning: #16181A;
  --series-1: var(--ds-info-fg);
  --series-2: #7C3AED;
  --series-3: #0891B2;
  --series-4: #B8730A;
  /* Печать и PDF — всегда светлые (тёмная тема действует только на экране). */
  --print-text: #000000;
  --print-border: #999999;
  --print-muted: #444444;

  --border-width: 1px;
  /* Высота всех кнопок на компьютере; на телефоне — 44 px. */
  --btn-height: var(--ds-btn-h);
  color-scheme: light;
}

/* ---------- 3. Тёмная тема ----------
   Включается атрибутом data-theme="dark" на <html> (js/theme_boot.js — до первой отрисовки). Только для экрана: печать и PDF («Итоги пилота»)
   всегда светлые. Те же роли, свои значения; контраст пар «текст на фоне» проверяет webapp/lib/design_tokens.test.js и contrast.test.js. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ds-page: #0E141A;
    --ds-surface: #151D25;
    --ds-border: #26313C;
    --ds-line: #1E2832;
    --ds-border-strong: #34414E;
    --ds-text: #EAEEF1;
    --ds-text-2: #A9B3BD;
    --ds-accent: #4FC4B0;
    --ds-accent-hover: #7AD9C8;

    --ds-menu-bg: #0B1218;
    --ds-menu-active: #1B2F3F;
    --ds-menu-hover: #14212C;
    --ds-menu-text: #C0CAD3;
    --ds-menu-text-active: #FFFFFF;
    --ds-menu-muted: #8696A5;
    --ds-menu-line: #1C2833;
    --ds-menu-field: #070C10;

    --ds-ok-bg: #123A33;      --ds-ok-fg: #7ADCC8;
    --ds-warn-bg: #3A2D0C;    --ds-warn-fg: #F2C14E;
    --ds-bad-bg: #40201D;     --ds-bad-fg: #FF9B8F;
    --ds-info-bg: #12304A;    --ds-info-fg: #85C5F5;
    --ds-neutral-bg: #212B35; --ds-neutral-fg: #B4BEC8;
    --ds-warn-border: #6B5214;
    --ds-warn-icon-bg: #F2C14E;
    --ds-warn-icon-fg: #2B2208;
    --ds-warn-text: #F2D88A;
    --ds-btn-bg: #EAEEF1;
    --ds-btn-fg: #16181A;
    --ds-btn-danger: #FF9B8F;
    --ds-on-danger: #16181A;
    --ds-on-solid: #FFFFFF;
    --ds-counter-bg: #B42318;
    --ds-ok-soft: #12302B;
    --ds-warn-soft: #2A2209;

    --brand-primary: #EAEEF1;
    --btn-secondary-bg: #18222B;
    --warning: #F2C14E;

    /* Тени в тёмной теме не видны — вместо них светлая обводка 1 px у всплывающих окон. */
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.14);

    --av-4-bg: #2D2152; --av-4-fg: #DDD6FE;
    --av-6-bg: #133B47; --av-6-fg: #A5F3FC;
    --av-7-bg: #43301A; --av-7-fg: #F5D9B0;

    --org-1: #85C5F5;
    --org-2: #7ADCC8;
    --org-3: #F2C14E;
    --org-4: #A78BFA;
    --org-5: #F472B6;
    --org-6: #22D3EE;

    --chart-prev: #6B7785;
    --chart-bar-missed: #FB923C;
    --lead-2: #F2C14E;

    --overlay: rgba(0, 0, 0, 0.6);
    --screen-bg: var(--content-bg);
    --questionable-operator-bg: #4D300C;
    --dot-gray: #4B5866;
    --new-row-bg: #4A3F12;
    --glint: rgba(255, 255, 255, 0.28);
    --on-accent-soft: rgba(22, 24, 26, 0.25);
    --on-warning: #16181A;
    --series-2: #A78BFA;
    --series-3: #22D3EE;
    --series-4: #FACC15;
  }
}