:root {
  /* Основной цвет марки (ТЗ №21) — единственная переменная, которую меняет
     config/brand.json / «Настройки». Всё, что раньше было отдельно
     --brand-green (не использовался нигде) и захардкоженным #252C31 в
     --btn-primary-bg/--sidebar-text-color, теперь ссылается на неё —
     смена одного значения перекрашивает кнопки, активные вкладки и т.д. */
  --brand-primary: #252C31;

  /* «Мягкий современный» вид (ТЗ №66, задача 3): светлая боковая панель с мягким фоном выбранного пункта —
     как у Linear и Notion; тёмная — в тёмной теме. Выбранный пункт — мягкий фон со скруглением в обеих темах. */
  --sidebar-bg: #F7F7F8;
  --sidebar-text: #1F2328;
  --sidebar-text-muted: #5F6773;
  --sidebar-active-bg: #E8E9ED;
  --sidebar-active-text: #111827;
  --sidebar-border: #E6E7EB;

  --content-bg: #FFFFFF;
  --card-border: #E6E8EB;
  --tile-bg: #F7F8FA;
  --card-bg: #FFFFFF;
  /* Чётные строки таблиц («зебра», ТЗ №49). С ТЗ №66 строки разделены тонкой линией, «зебры» нет — цвет совпадает
     с фоном карточки (переменная оставлена: на неё ссылаются правила и проверка контраста). */
  --row-alt-bg: #FFFFFF;

  --text-primary: #252C31;
  /* Контраст на белом (ТЗ №36, 10.5, проверяется тестом webapp/lib/contrast.test.js):
     primary 14,8:1, secondary 7,0:1, tertiary 4,8:1 — все выше порога 4.5:1.
     Прежние #6B7280 (secondary) и #9CA3AF (tertiary) давали 4,8:1 и 2,54:1 — подсказки
     и подписи были нечитаемы. */
  --text-secondary: #55606E;
  --text-tertiary: #5E6672; /* ≥ 4.5:1 и на белом, и на мягком фоне наведения/реплик (AA, ТЗ №66, задача 6) */
  --link: #2563EB;

  --btn-primary-bg: var(--brand-primary);
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-border: #E5E7EB;

  --success: #16A34A;
  --success-bg: #E7F6EE;
  --error: #DC2626;
  --error-bg: #FDECEC;
  --warning: #D97706;
  --warning-bg: #FDF3DD;
  --info: #0284C7;
  --info-bg: #EAF2FE;
  /* Нейтральная метка (ТЗ №66): мягкий серый фон и текст — «не оценивается», «скачан», «исходящий». */
  --neutral-bg: #F1F2F4;
  --neutral-text: #4B5563;

  /* Текст НА цветной плашке (пилюли, alert): те же цвета темнее, чтобы контраст с их
     светлым фоном был не ниже 4.5:1 (проверяется webapp/lib/contrast.test.js).
     Исходные --error/--success/--warning/--info — для линий, полос и рамок. */
  --success-text: #046C40;
  --error-text: #B31515;
  --warning-text: #8A5200;
  --info-text: #01578F;

  /* ---------- Единый набор «мягкого современного» вида (ТЗ №66, задача 3) ----------
     Дальше в стилях — только эти переменные (и прежние имена ниже, которые теперь ссылаются сюда же).
       шрифт      — системный стек; размеры 12 / 13 / 14 / 16 / 20 / 24; числа — tabular-nums (layout.css, body);
       скругления — 6 px поля и кнопки, 10 px карточки и выпадающие списки, 999 px «таблетки»;
       тени       — три уровня: карточка, выпадающий список, окно; в тёмной теме вместо тени — светлая обводка 1 px;
       отступы    — шаг 4 px: 4, 8, 12, 16, 24, 32 (--sp-1 … --sp-6);
       состояния  — фон наведения, фон выбранного, кольцо фокуса 2 px цвета акцента (только :focus-visible);
       анимации   — --t-fast / --t-base / --t-slow (ниже, ТЗ №82), при prefers-reduced-motion отключаются (layout.css). */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ТЗ №83, п. 1.2: шесть размеров и больше нет — 12 (пояснение, шапка таблицы), 14 (текст), 16 (заголовок блока),
     24 (заголовок страницы), 28 (цифра в плитке), 36 (цифра в «Отчёте директору»). 13 и 20 — прежние имена,
     указывают на ближайший размер набора (ни один стиль не должен давать размер вне набора, проверяет
     webapp/page_order.browser.test.js). */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-13: var(--fs-12);
  --fs-20: var(--fs-16);
  --r-control: 6px;
  --r-card: 10px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-modal: 0 24px 56px rgba(16, 24, 40, 0.20), 0 6px 16px rgba(16, 24, 40, 0.08);
  /* «Подъём» кликабельной карточки при наведении — между карточкой и выпадающим списком. */
  --shadow-lift: 0 6px 16px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
  --accent: #2563EB;
  --bg-hover: #F3F4F6;
  --bg-selected: #EEF2FF;
  --text-selected: #1E3A8A;
  --focus-ring-width: 2px;
  --control-bg: #FFFFFF;
  --control-border: #D9DCE1;
  --control-border-hover: #C3C7CE;
  /* ТЗ №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;
  /* Кружок с инициалами оператора (ТЗ №66, задача 5): 8 мягких цветов, выбор — по имени (components/badges.js). */
  --av-1-bg: #DBEAFE; --av-1-fg: #1E40AF;
  --av-2-bg: #DCFCE7; --av-2-fg: #166534;
  --av-3-bg: #FEF3C7; --av-3-fg: #92400E;
  --av-4-bg: #EDE9FE; --av-4-fg: #5B21B6;
  --av-5-bg: #FCE7F3; --av-5-fg: #9D174D;
  --av-6-bg: #CFFAFE; --av-6-fg: #155E75;
  --av-7-bg: #FFEDD5; --av-7-fg: #9A3412;
  --av-8-bg: #E2E8F0; --av-8-fg: #334155;
  /* Цвет компании — точка в переключателе компании (ТЗ №66, задача 4): стабильный по id компании. */
  --org-1: #2563EB;
  --org-2: #16A34A;
  --org-3: #D97706;
  --org-4: #7C3AED;
  --org-5: #DB2777;
  --org-6: #0891B2;

  /* Система шкал (ТЗ №36, задача 10.1). Всё оформление берёт значения ТОЛЬКО отсюда —
     числом прямо в стилях страниц задавать нельзя.
       шрифт  — шесть ступеней: 12 / 14 / 16 / 20 / 26 / 40 px;
       отступы — 4 / 8 / 12 / 16 / 24 / 32 px;
       радиус — один (8 px; полностью круглые формы — --radius-pill);
       тень   — одна (для выпадающих панелей и окон).
     Прежние имена (--font-size-*, --space-*, --radius-*) оставлены и указывают на эти же
     значения, поэтому старые правила не сломаны. На телефоне (до 720 px) самая мелкая
     ступень шрифта — 14 px: см. @media в layout.css. */
  --fs-caption: var(--fs-12);
  --fs-small: var(--fs-13);
  --fs-body: var(--fs-14);
  --fs-lead: var(--fs-16);
  --fs-title: var(--fs-16);
  --fs-heading: var(--fs-24);
  --fs-display: var(--fs-28);

  /* ТЗ №83, п. 1.1: шаг отступов 8 px — внутри блока 16, между блоками 24, между разделами 40; ширина содержимого не больше
     1 200 px по центру, поля 24 px (на телефоне 16). 4 и 12 px — только внутри элементов управления (кнопка, поле, «таблетка»). */
  --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-28);
  --font-size-5xl: var(--fs-display);

  /* Графики дашборда v2 (ТЗ №53): линия, прошлый период, сетка, подписи, отметки версий карты,
     части кольца качества лида. В тёмной теме переопределяются (theme-dark ниже). */
  --chart-line: #2563EB;
  --chart-prev: #9CA3AF;
  --chart-grid: #E5E7EB;
  --chart-text: #6B7280;
  --chart-marker: #8A5200;
  --chart-bar: #2563EB;
  /* Часть «без ответа» на полосе (ТЗ №65, задача 4) — второй цвет той же палитры, контраст с плиткой ≥ 3:1. */
  --chart-bar-missed: #C2410C;
  --lead-1: #DC2626;
  --lead-2: #D97706;
  --lead-3: #6B7280;

  /* Цвета, которые раньше были прописаны прямо в стилях страниц (ТЗ №53, задача 6): теперь все —
     здесь, чтобы тёмная тема перекрашивала их одним блоком ниже. */
  --overlay: rgba(17, 24, 39, 0.45);
  --sidebar-divider: #E6E7EB;
  --sidebar-hover: #EEEFF2;
  --row-review-bg: #FFFCF2;
  --row-review-hover: #FEF6E0;
  --row-review-border: #FDE68A;
  --row-muted-bg: #F9FAFB;
  --row-muted-hover: #F3F4F6;
  --dot-gray: #D1D5DB;
  --speaker-operator-bg: #F0F5FF;
  --speaker-client-bg: #F7F8FA;
  --questionable-bg: #FEF3C7;
  --questionable-operator-bg: #FDE9C8;
  --warning-border: #FCD34D;
  --skeleton-shine: #F3F4F6;
  /* ТЗ №82: жёлтая подложка новой строки (гаснет за 2 с) и блик полосы прогресса, пока AI работает. */
  --new-row-bg: #FEF9C3;
  --glint: rgba(255, 255, 255, 0.55);
  /* Фон отдельного экрана — вход (ТЗ №67, задача 8): мягкий серый, на нём белая карточка; в тёмной — фон страницы. */
  --screen-bg: var(--tile-bg);
  --on-accent-soft: rgba(255, 255, 255, 0.25);
  --on-warning: #1A1A1A;
  --series-1: #2563EB;
  --series-2: #7C3AED;
  --series-3: #0891B2;
  --series-4: #CA8A04;
  /* Печать и PDF — всегда светлые (тёмная тема действует только на экране). */
  --print-text: #000000;
  --print-border: #999999;
  --print-muted: #444444;

  --border-width: 1px;
  /* Высота всех кнопок на компьютере (ТЗ №49, задача 3); на телефоне — 44 px. */
  --btn-height: 36px;
  color-scheme: light;
}

/* ---------- Тёмная тема (ТЗ №53, задача 6) ----------
   Включается атрибутом data-theme="dark" на <html> (js/theme_boot.js — до первой отрисовки).
   Только для экрана: печать и PDF («Итоги пилота») всегда светлые. Контраст пар «текст на фоне» —
   тот же тест webapp/lib/contrast.test.js, что и для светлой. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --sidebar-bg: #0C1016;
    --sidebar-text: #E8EAED;
    --sidebar-text-muted: #9AA3AF;
    --sidebar-active-bg: #1C2330;
    --sidebar-active-text: #F3F4F6;
    --sidebar-border: #1F2631;

    --content-bg: #10151C;
    --card-border: #262E3A;
    --tile-bg: #18202B;
    --card-bg: #151B24;
    --row-alt-bg: #151B24;

    --text-primary: #F3F4F6;
    --text-secondary: #D1D5DB;
    --text-tertiary: #A3ABB8;
    --link: #93C5FD;

    --btn-primary-bg: #E5E7EB;
    --btn-primary-text: #111827;
    --btn-secondary-bg: #161E2B;
    --btn-secondary-border: #374151;

    --success: #34D399;
    --success-bg: #0F2B21;
    --error: #F87171;
    --error-bg: #351719;
    --warning: #FBBF24;
    --warning-bg: #2F2311;
    --info: #38BDF8;
    --info-bg: #0F2539;
    --neutral-bg: #1F2632;
    --neutral-text: #C4CBD6;
    --success-text: #6EE7B7;
    --error-text: #FCA5A5;
    --warning-text: #FCD34D;
    --info-text: #7DD3FC;

    /* Тени в тёмной теме не видны — вместо них светлая обводка 1 px (ТЗ №66, задача 3). */
    --shadow-card: none;
    --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);
    --accent: #60A5FA;
    --bg-hover: #1C2330;
    --bg-selected: #1D2A44;
    --text-selected: #C7D7FE;
    --control-bg: #121820;
    --control-border: #2E3745;
    --control-border-hover: #3C4757;
    --av-1-bg: #1C3353; --av-1-fg: #BFDBFE;
    --av-2-bg: #173A28; --av-2-fg: #BBF7D0;
    --av-3-bg: #3D2B0C; --av-3-fg: #FDE68A;
    --av-4-bg: #2D2152; --av-4-fg: #DDD6FE;
    --av-5-bg: #45182F; --av-5-fg: #FBCFE8;
    --av-6-bg: #133B47; --av-6-fg: #A5F3FC;
    --av-7-bg: #43220F; --av-7-fg: #FED7AA;
    --av-8-bg: #26303F; --av-8-fg: #CBD5E1;
    --org-1: #60A5FA;
    --org-2: #34D399;
    --org-3: #FBBF24;
    --org-4: #A78BFA;
    --org-5: #F472B6;
    --org-6: #22D3EE;

    --chart-line: #60A5FA;
    --chart-prev: #6B7280;
    --chart-grid: #2B3544;
    --chart-text: #A3ABB8;
    --chart-marker: #FCD34D;
    --chart-bar: #60A5FA;
    --chart-bar-missed: #FB923C;
    --lead-1: #F87171;
    --lead-2: #FBBF24;
    --lead-3: #9CA3AF;

    --overlay: rgba(0, 0, 0, 0.6);
    --sidebar-divider: #1F2631;
    --sidebar-hover: #161C26;
    --row-review-bg: #241D10;
    --row-review-hover: #2E2514;
    --row-review-border: #B45309;
    --row-muted-bg: #1A2230;
    --row-muted-hover: #222C3B;
    --dot-gray: #4B5563;
    --speaker-operator-bg: #15233A;
    --speaker-client-bg: #18202B;
    --questionable-bg: #45290A;
    --questionable-operator-bg: #4D300C;
    --warning-border: #B45309;
    --skeleton-shine: #243041;
    --new-row-bg: #4A3F12;
    --glint: rgba(255, 255, 255, 0.28);
    --screen-bg: var(--content-bg);
    --on-accent-soft: rgba(17, 24, 39, 0.25);
    --on-warning: #111827;
    --series-1: #60A5FA;
    --series-2: #A78BFA;
    --series-3: #22D3EE;
    --series-4: #FACC15;
  }
}