:root {
  --ui-landing-team-card-bg: #fff;
  --ui-landing-advantages-bg: #dde8e2;
  --ui-landing-advantages-card: #fffefa;
  --ui-landing-advantages-fg: #163a34;
  --ui-landing-advantages-muted: #52655d;
  color-scheme: light;

  /* Холст страницы вокруг карточек, таблиц и сайдбара */
  --ui-bg: oklch(97% 0.008 250);
  /* Поднятые поверхности: карточки, модалки, попапы, поля, строки таблицы */
  --ui-surface: oklch(99.5% 0.004 250);
  /* Вложенный фон: hover строк, disabled-поля, пункты селекта */
  --ui-surface-2: oklch(95% 0.01 250);
  /* Фон бокового меню */
  --ui-sidebar: oklch(94% 0.01 250);

  /* Основной текст и иконки */
  --ui-fg: oklch(17% 0.014 255);
  /* Вторичный текст: хинты, шапка таблицы, подписи, иконки в полях */
  --ui-fg-muted: oklch(44% 0.016 255);
  /* Приглушённый текст: плейсхолдеры, группы меню, drag-handle */
  --ui-fg-subtle: oklch(59% 0.014 250);

  /* Бордер полей, чекбоксов, радио и селекта */
  --ui-border: oklch(87% 0.01 250);
  /* Тонкий разделитель: нижняя граница шапки таблицы */
  --ui-border-subtle: oklch(93% 0.008 250);
  /* Hover-бордер поля и селекта */
  --ui-border-hover: oklch(76% 0.014 250);
  /* Фокус-бордер поля и открытого селекта */
  --ui-border-focus: oklch(45% 0.022 255);
  /* Кольцо :focus-visible у управляющих элементов */
  --ui-ring: oklch(38% 0.03 255);
  /* Затемнение под модалкой */
  --ui-overlay: oklch(12% 0.02 260 / 55%);

  /* Основное действие: primary-кнопка, checked checkbox / radio / switch */
  --ui-primary: oklch(23% 0.032 260);
  /* Текст и иконка на primary-фоне */
  --ui-primary-fg: oklch(99% 0.004 250);
  /* Свои сообщения в чате: мягкий голубой, чтобы пузырь не спорил с почти чёрным primary */
  --ui-chat-own: oklch(87% 0.055 235);
  --ui-chat-own-fg: oklch(26% 0.04 250);
  /* Мессенджер текущего чата: фирменный оттенок на мягком фоне */
  --ui-messenger-telegram-bg: oklch(94% 0.035 235);
  --ui-messenger-telegram-fg: oklch(47% 0.12 235);
  --ui-messenger-max-bg: oklch(94% 0.035 285);
  --ui-messenger-max-fg: oklch(47% 0.2 285);
  --ui-badge-hover-overlay: oklch(0% 0 0 / 3%);
  --ui-sms-border: oklch(72% 0.09 165);
  --ui-sms-glow: oklch(60% 0.12 165 / 8%);
  /* Фон вторичной кнопки */
  --ui-secondary: oklch(91.56% 0.012 248);
  /* Текст вторичной кнопки */
  --ui-secondary-fg: oklch(24% 0.016 260);
  /* Hover ghost/secondary кнопок и иконки закрытия модалки */
  --ui-ghost-hover: oklch(91% 0.01 250);
  /* Активный таб внутри трека secondary: поднятая плашка */
  --ui-tab-active: var(--ui-surface);
  /* Тултип: в светлой теме инверсия основного текста */
  --ui-tooltip: var(--ui-fg);
  --ui-tooltip-fg: var(--ui-bg);

  /* Destructive-кнопка и текст ошибки у поля */
  --ui-destructive: oklch(52% 0.18 18);
  /* Текст на destructive-кнопке */
  --ui-destructive-fg: oklch(99% 0.004 250);

  /* Скелетон загрузки */
  --ui-placeholder: oklch(89% 0.01 250);
  /* Блик шиммера скелетона */
  --ui-placeholder-fg: oklch(95% 0.008 250);

  /* Success-кнопка: фон и текст */
  --ui-success: oklch(50% 0.13 155);
  --ui-success-solid-fg: oklch(99% 0.006 155);
  /* Бейдж success: фон и текст */
  --ui-success-bg: oklch(92% 0.04 165);
  --ui-success-fg: oklch(37% 0.09 165);
  /* Карточка записи звонка: бледнее бейджа success; основная кнопка внутри неё */
  --ui-call-bg: oklch(44.6% 0.07 159 / 0.06); /* ≈ #2d60460f */
  --ui-call-fg: oklch(41.7% 0.026 166.2); /* #3f5149 — текст карточки звонка; плеер остаётся success */
  --ui-call-action: var(--ui-primary);
  --ui-call-action-fg: var(--ui-primary-fg);
  /* Бейдж info: фон и текст */
  --ui-info-bg: oklch(92% 0.04 245);
  --ui-info-fg: oklch(38% 0.1 250);
  /* Новый лид в списке: фон и выбранное состояние */
  --ui-lead-new-bg: oklch(98% 0.012 245);
  --ui-lead-new-bg-active: oklch(94% 0.022 245);
  /* Непрочитанный чат в списке лидов и клиентов */
  --ui-chat-unread-bg: oklch(97.2% 0.016 232);
  --ui-chat-unread-bg-active: oklch(94.8% 0.022 232);
  /* Warning-кнопка и счётчик: фон и текст */
  --ui-warning: oklch(73% 0.16 59.15);
  --ui-warning-solid-fg: oklch(99% 0.01 80);
  /* Бейдж warning: фон и текст */
  --ui-warning-bg: oklch(94% 0.06 90);
  --ui-warning-fg: oklch(42% 0.1 80);
  /* Акцент задач: кнопки, бейджи и теги. Карточки задач остаются обычной поверхностью. */
  --ui-task-btn: oklch(85.2% 0.112 70.9);
  --ui-task-btn-fg: oklch(30% 0.055 55);
  --ui-task-soft: oklch(95% 0.04 78);
  --ui-task-soft-fg: oklch(36% 0.06 55);
  /* Счётчик на кнопке задач и точка непрочитанного */
  --ui-task-count: var(--ui-surface);
  --ui-task-count-fg: var(--ui-task-btn-fg);
  --ui-task-dot: var(--ui-task-btn-fg);
  /* Канбан: фон колонки, карточка в колонке и её hover / выбранное состояние */
  --ui-kanban-column: var(--ui-secondary);
  --ui-kanban-card: var(--ui-surface);
  --ui-kanban-card-active: var(--ui-surface-2);
  /* Бейдж vip: фон и текст */
  --ui-vip-bg: oklch(93% 0.05 115);
  --ui-vip-fg: oklch(38% 0.07 110);
  /* Бейдж danger: фон и текст */
  --ui-danger-bg: oklch(93% 0.04 18);
  --ui-danger-fg: oklch(46% 0.16 18);
  /* Бейдж teal: фон и текст */
  --ui-teal-bg: oklch(92% 0.04 195);
  --ui-teal-fg: oklch(36% 0.08 200);
  /* Бейдж turquoise: фон и текст */
  --ui-turquoise-bg: oklch(93% 0.035 179);
  --ui-turquoise-fg: oklch(43.1% 0.079 179);
  /* Бейдж orange: фон и текст */
  --ui-orange-bg: oklch(94% 0.05 55);
  --ui-orange-fg: oklch(42% 0.12 50);
  /* Бейдж indigo: фон и текст */
  --ui-indigo-bg: oklch(93% 0.035 270);
  --ui-indigo-fg: oklch(39.9% 0.087 270);
  /* Бейдж violet: фон и текст */
  --ui-violet-bg: oklch(93% 0.04 289);
  --ui-violet-fg: oklch(37.1% 0.103 289);
  /* Бейдж pink: фон и текст */
  --ui-pink-bg: oklch(93% 0.04 350);
  --ui-pink-fg: oklch(42% 0.12 352);
  /* Бейдж moss: текст #5b5a20 */
  --ui-moss-bg: oklch(93% 0.04 108.23);
  --ui-moss-fg: oklch(45.58% 0.0788 108.23);
  /* Бейдж forest: фон и текст */
  --ui-forest-bg: oklch(93% 0.04 135);
  --ui-forest-fg: oklch(41.5% 0.108 135);
  /* Бейдж olive: фон и текст */
  --ui-olive-bg: oklch(93% 0.035 97);
  --ui-olive-fg: oklch(36.4% 0.060 97);
  /* Бейдж neutral и трек выключенного switch */
  --ui-neutral-bg: oklch(92% 0.01 250);
  --ui-neutral-fg: oklch(39% 0.014 255);

  /* Графики аналитики: текущий и сравниваемый периоды */
  --ui-chart-current: oklch(53% 0.16 252);
  --ui-chart-previous: oklch(67% 0.03 255);
  /* Линии графиков: те же оттенки бейджей, светлее текста */
  --ui-chart-info: oklch(66% 0.11 250);
  --ui-chart-teal: oklch(66% 0.08 195);
  --ui-chart-forest: oklch(66% 0.1 135);
  --ui-chart-orange: oklch(74% 0.12 55);
  --ui-chart-violet: oklch(70% 0.1 289);

  /* QR-код: всегда тёмное на светлом, иначе банковские сканеры его не читают */
  --ui-qr-bg: oklch(100% 0 0);
  --ui-qr-fg: oklch(17% 0.014 255);

  /* Тень поднятых поверхностей: Card, Popover, Modal, drag-overlay таблицы */
  --ui-shadow: 0 14px 36px oklch(20% 0.02 260 / 8%);
}

/*
 * Тёмная тема. Включается атрибутом data-theme="dark" на <html> (пока только в Storybook).
 * Оттенки (hue) всех токенов совпадают со светлой темой — меняется только светлота:
 * мягкие фоны статусов темнеют, текст на них светлеет. Иерархия поверхностей
 * читается через светлоту: меню < холст < поверхность < вложенная < вторичная.
 */
[data-theme="dark"] {
  color-scheme: dark;

  --ui-bg: oklch(16.5% 0.008 250);
  --ui-surface: oklch(20.5% 0.01 250);
  --ui-surface-2: oklch(24.5% 0.012 250);
  --ui-sidebar: oklch(14% 0.008 250);

  --ui-fg: oklch(94.5% 0.006 250);
  --ui-fg-muted: oklch(72% 0.014 255);
  --ui-fg-subtle: oklch(56% 0.014 250);

  --ui-border: oklch(31% 0.012 250);
  --ui-border-subtle: oklch(25.5% 0.01 250);
  --ui-border-hover: oklch(40% 0.014 250);
  --ui-border-focus: oklch(60% 0.022 255);
  --ui-ring: oklch(74% 0.04 255);
  --ui-overlay: oklch(6% 0.01 260 / 72%);

  /* Primary — приглушённый тёмно-голубой того же холодного оттенка: заметен, но не слепит */
  --ui-primary: oklch(35% 0.092 263.2); /* #20386a */
  --ui-primary-fg: oklch(97% 0.008 250);
  --ui-chat-own: oklch(30.4% 0.06 263.6); /* #1f2e4d */
  --ui-chat-own-fg: oklch(93% 0.02 263.6);
  --ui-messenger-telegram-bg: oklch(29% 0.05 235);
  --ui-messenger-telegram-fg: oklch(79% 0.11 235);
  --ui-messenger-max-bg: oklch(29% 0.06 285);
  --ui-messenger-max-fg: oklch(80% 0.12 285);
  --ui-badge-hover-overlay: oklch(100% 0 0 / 4%);
  --ui-sms-border: oklch(48% 0.07 165);
  --ui-sms-glow: oklch(60% 0.12 165 / 7%);
  /* Secondary — графит на ступень светлее вложенной поверхности, hover ещё светлее */
  --ui-secondary: oklch(28.5% 0.014 248);
  --ui-secondary-fg: oklch(92% 0.01 250);
  --ui-ghost-hover: oklch(31.5% 0.014 250);
  --ui-tab-active: oklch(37% 0.016 250);
  /* Тултип — приподнятый графит, а не белая инверсия: не слепит на тёмном */
  --ui-tooltip: oklch(34% 0.016 250);
  --ui-tooltip-fg: oklch(95% 0.006 250);

  --ui-destructive: oklch(60% 0.18 18);
  --ui-destructive-fg: oklch(98% 0.006 18);

  --ui-placeholder: oklch(26% 0.012 250);
  --ui-placeholder-fg: oklch(31% 0.014 250);

  --ui-success: oklch(49.6% 0.089 167.7); /* #1f7258 */
  --ui-success-solid-fg: oklch(98% 0.01 167.7);
  --ui-success-bg: oklch(29% 0.045 165);
  --ui-success-fg: oklch(82% 0.1 165);
  /* Синий primary спорит с зелёной карточкой — в тёмной теме кнопка зелёная, как play */
  --ui-call-bg: oklch(45% 0.03 160.17 / 0.06);
  --ui-call-fg: oklch(91.4% 0.024 167.1); /* #d4e8df */
  --ui-call-action: var(--ui-success);
  --ui-call-action-fg: var(--ui-success-solid-fg);
  --ui-info-bg: oklch(29% 0.05 245);
  --ui-info-fg: oklch(82% 0.085 250);
  --ui-lead-new-bg: oklch(25.5% 0.03 245);
  --ui-lead-new-bg-active: oklch(29.5% 0.04 245);
  --ui-chat-unread-bg: oklch(25.5% 0.032 232);
  --ui-chat-unread-bg-active: oklch(29.5% 0.042 232);
  --ui-warning: oklch(70% 0.15 59.15);
  --ui-warning-solid-fg: oklch(22% 0.05 59.15);
  --ui-warning-bg: oklch(30% 0.05 90);
  --ui-warning-fg: oklch(86% 0.1 80);
  --ui-task-btn: oklch(74% 0.105 70.9);
  --ui-task-btn-fg: oklch(24% 0.05 55);
  --ui-task-soft: oklch(30% 0.045 78);
  --ui-task-soft-fg: oklch(85% 0.075 70);
  /* surface в тёмной теме тёмный — счётчик светлый кремовый, точка — яркий песочный */
  --ui-task-count: oklch(96% 0.02 78);
  --ui-task-count-fg: var(--ui-task-btn-fg);
  --ui-task-dot: oklch(80% 0.12 55);
  /* Колонка как карточка, строки в ней на ступень светлее */
  --ui-kanban-column: var(--ui-surface);
  --ui-kanban-card: var(--ui-surface-2);
  --ui-kanban-card-active: oklch(28.5% 0.014 250);
  --ui-vip-bg: oklch(30% 0.045 115);
  --ui-vip-fg: oklch(86% 0.09 110);
  --ui-danger-bg: oklch(29% 0.06 18);
  --ui-danger-fg: oklch(80% 0.1 18);
  --ui-teal-bg: oklch(29% 0.045 195);
  --ui-teal-fg: oklch(82% 0.075 200);
  --ui-turquoise-bg: oklch(29% 0.045 179);
  --ui-turquoise-fg: oklch(83% 0.08 179);
  --ui-orange-bg: oklch(30% 0.055 55);
  --ui-orange-fg: oklch(83% 0.1 50);
  --ui-indigo-bg: oklch(29% 0.05 270);
  --ui-indigo-fg: oklch(82% 0.075 270);
  --ui-violet-bg: oklch(29% 0.055 289);
  --ui-violet-fg: oklch(82% 0.085 289);
  --ui-pink-bg: oklch(29% 0.055 350);
  --ui-pink-fg: oklch(82% 0.09 352);
  --ui-moss-bg: oklch(30% 0.045 108.23);
  --ui-moss-fg: oklch(85% 0.085 108.23);
  --ui-forest-bg: oklch(29% 0.05 135);
  --ui-forest-fg: oklch(84% 0.1 135);
  --ui-olive-bg: oklch(30% 0.04 97);
  --ui-olive-fg: oklch(85% 0.07 97);
  --ui-neutral-bg: oklch(32% 0.012 250);
  --ui-neutral-fg: oklch(82% 0.012 255);

  --ui-chart-current: oklch(66% 0.15 252);
  --ui-chart-previous: oklch(52% 0.03 255);
  --ui-chart-info: oklch(70% 0.1 250);
  --ui-chart-teal: oklch(70% 0.08 195);
  --ui-chart-forest: oklch(70% 0.1 135);
  --ui-chart-orange: oklch(74% 0.11 55);
  --ui-chart-violet: oklch(70% 0.1 289);

  --ui-qr-bg: oklch(100% 0 0);
  --ui-qr-fg: oklch(17% 0.014 255);

  /* На тёмном фоне тень почти не видна — добавляем тонкий светлый контур поверхности */
  --ui-shadow: 0 0 0 1px oklch(100% 0 0 / 6%), 0 16px 40px oklch(4% 0.01 260 / 55%);
}