/* TehProf.kz Support — токены дизайн-системы. ЕДИНСТВЕННЫЙ источник.
   ⛔ support#F10334. Раньше этот блок жил внутри design.css (660 КБ админского кода), и
   публичные страницы — учебный центр, справочные статьи — брать бренд оттуда не могли:
   ради пяти цветов пришлось бы тащить весь интерфейс оператора. Поэтому у них завелись
   СВОИ палитры (учебный центр: #2563eb вместо фирменного #3a9fd8), и единый дизайн
   перестал быть единым ровно там, где его видит поисковик и будущий клиент.
   Теперь токены лежат здесь, design.css берёт их первой строкой, а публичная страница
   подключает только этот файл. Один источник, два читателя — второй копии палитры нет. */

/* TehProf.kz Support — Design System v3 */
/* Modern, brand-aligned, centralized tokens */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Color+Emoji&display=swap');

/* Global scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light, #ebeef1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #8c939b); }
* { scrollbar-width: thin; scrollbar-color: var(--border-light, #ebeef1) transparent; }

/* ═══ Light theme (default) ═══ */
:root {
  color-scheme: light;
  /* ⛔ F1260 — ОДНА точка отсчёта для всех липких шапок внутри области содержимого.
     По умолчанию она равна высоте шапки приложения: страница прокручивается целиком,
     и липкая полоса обязана вставать под шапкой. Под операторской оболочкой шапка стоит
     ВНЕ прокрутки (`app-shell.css`), и там это число обнуляется одной строкой — иначе
     каждая новая липкая полоса уезжает вниз на высоту шапки, и её приходится вспоминать
     поимённо (так потерялись шапка списка услуг и панель настроек). */
  --sticky-top: var(--header-h, 69px);
  /* Brand palette (aligned with logo: lightest → main matches logo face) */
  --brand-lightest: #5bc0eb;
  --brand-light: #4ab8e2;
  --brand-main: #3a9fd8;
  --brand-dark: #2176ae;
  --brand-darkest: #1a5a96;

  /* Backgrounds */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --card-bg: #ffffff;
  --surface-hover: #f8f9fb;
  /* ⛔ F1126 W10.12 — мягкая поверхность под плашками, полосами и кружками значков. Имя было в
     ходу у 74 мест кода, а в наборе тем его не объявляли НИКОГДА: все они рисовались прозрачным
     фоном, и заметить это можно было только глазом на конкретной плашке. Объявляем ссылкой на
     ту же поверхность, что и наведение, — тогда тёмная тема подхватывает её сама, без второго
     объявления (прежний класс ошибок F505/F508 — цвет мимо набора тем). */
  --bg-secondary: var(--surface-hover);

  /* Borders */
  --border: #dce1e6;
  --border-light: #ebeef1;

  /* Text */
  --text: #1a1d21;
  --text-secondary: #555e68;
  /* Подписи и время — не декоративный текст: 11–12px на белой карточке должны
     читаться без увеличения. Предыдущее #8c939b не проходило контраст для мелкого текста. */
  --text-muted: #626b76;

  /* Всплывающее сообщение: пара «фон/текст» на каждый вид. F1332 — раньше текст был белым
     на любом фоне и не читался (жёлтый фон давал 2.9:1 при норме 4.5:1). Зелёный и синий здесь
     темнее общих меток темы именно ради белого текста на них. */
  --toast-info-bg: #1d6fa5; --toast-info-fg: #ffffff;
  --toast-success-bg: #15803d; --toast-success-fg: #ffffff;
  --toast-warning-bg: #ca8a04; --toast-warning-fg: #1c1917;
  --toast-error-bg: #b91c1c; --toast-error-fg: #ffffff;

  /* Accent (brand-aligned) */
  --accent: #3a9fd8;
  --accent-hover: #2176ae;
  /* ⛔ support#F10079 — очерк галочки для отмеченных пунктов меню. Токеном, а не строкой по
     месту: то же изображение понадобится следующему переключателю, а вторая копия пути разойдётся
     с этой. Цвет не задан НАМЕРЕННО — маска красится currentColor и потому верна в обеих темах. */
  --ic-check-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  --accent-light: rgba(58,159,216,0.07);
  --call-tint-wait: color-mix(in srgb, rgb(58 159 216) 7%, var(--surface-raised, var(--surface)));
  /* F1126 W10.3 — налёт «сообщение взято в заявку»: кладётся внутренней тенью поверх фона,
     потому что сам фон пузыря занят цветом линии связи и заметкой. */
  --msg-taken-wash: rgba(58,159,216,0.12);
  /* Подпись с номером заявки: пара «фон/текст» задана явно, потому что белым по
     основному цвету мелкий текст не читается (контраст 2.9 при нужных 4.5). */
  --msg-taken-badge-bg: #dceef8;
  --msg-taken-badge-fg: #1a5c85;

  /* ⛔ support#F10130 W2 — ПАЛИТРА ЗАЯВОК ПЕРЕПИСКИ. Цвет закреплён за заявкой и красит и её
     вкладку в полосе, и её сообщения в ленте. До этой волны цвет был ОДИН на все заявки
     (`--msg-taken-wash`), и при трёх заявках человек не мог отличить, что куда предлагают забрать.
     ⛔ Оттенки разведены по кругу (45 / 142 / 190 / 245 / 292 / 345), а не взяты подряд: соседние
     оттенки на мелкой метке сливаются, а метка тут мелкая — точка и обводка пузыря.
     ⛔ Линия годится и под текст: каждая проверена против своей поверхности от 4.5:1, поэтому
     отдельного токена под подпись вкладки не заводится — второй он разошёлся бы с первым.
     ⛔ Палитра КОНЕЧНА. Заявок бывает больше шести, и тогда цвета повторяются — различие несёт
     номер на вкладке, а сама вкладка помечается (`.chats-tab-shared`). Молча слить две заявки в
     одну на глаз хуже, чем повторить цвет и сказать об этом. */
  --tkt-c0-line: #b45309; --tkt-c0-wash: rgba(180,83,9,0.10);
  --tkt-c1-line: #15803d; --tkt-c1-wash: rgba(21,128,61,0.10);
  --tkt-c2-line: #0e7490; --tkt-c2-wash: rgba(14,116,144,0.10);
  --tkt-c3-line: #4338ca; --tkt-c3-wash: rgba(67,56,202,0.10);
  --tkt-c4-line: #a21caf; --tkt-c4-wash: rgba(162,28,175,0.10);
  --tkt-c5-line: #be123c; --tkt-c5-wash: rgba(190,18,60,0.10);
  --accent-text: #ffffff;

  /* Semantic colors */
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --call-tint-talk: color-mix(in srgb, rgb(22 163 74) 8%, var(--surface-raised, var(--surface)));
  --warning: #ca8a04;
  /* ⛔ Предупреждающий ТЕКСТ отдельным токеном: сам --warning на светлом фоне даёт контраст
     2.94:1 при норме 4.5:1 — читаемо не всем. Для значков и рамок он годится, для текста нет.
     Найдено состязательным разбором второй моделью.
     ⛔ support#F10279.W2 — ТОКЕН ПОТЕМНЕЛ, И ЭТО ПОЧИНКА КЛАССА, А НЕ ОДНОГО МЕСТА.
     Прежний #a16207 считался против ОБЫЧНОГО фона страницы, а стоит он почти везде на СВОЕЙ
     заливке --warning-bg (design.css, chats.css, call-diag.css, полоса выдачи прав
     в admin-app.js). На ней та же пара давала 3,93:1 — ниже нормы у КАЖДОГО потребителя, а не
     только у плашки звонка, ради которой это нашлось. Замерено браузером на самой тёмной из
     этих заливок (rgb(238,229,211) — --warning-bg поверх плашки): было 3,93, стало 4,99 при
     норме 4,5. Тёмной темы не касается: там --warning-text = --warning и даёт 8:1.
     Сторож числа — tests/test-f10279-w2-word-is-readable.js, он судит ВЫЧИСЛЕННЫМ стилем. */
  --warning-text: #92500a;
  --warning-bg: rgba(202,138,4,0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220,38,38,0.06);
  --info: #0284c7;
  --info-bg: rgba(2,132,199,0.07);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* ⛔ Поверхность, ВСПЛЫВАЮЩАЯ над содержимым (F1126 W6): списки отбора, меню, подсказки.
     Обычная граница `--border` для них не годится — она задумана как разделитель строк ВНУТРИ
     карточки, где делит одинаковый фон, и её едва хватает на 1.3 против собственного фона.
     Отделить карточку ОТ страницы ей нечем: замер на живой службе дал 1.29 в тёмной теме и
     1.32 в светлой при пороге различимости 3 (WCAG 1.4.11). Человек читал это как «границ нет».
     Отсюда три отдельных значения: своя поверхность, своя видимая линия, своя тень. */
  --surface-raised: #ffffff;
  --hairline: #7f8c9e;                     /* 3.42 против своей поверхности, 3.15 против страницы */
  /* Тень многослойная и ТОНИРОВАННАЯ в синеву поверхности, а не чистая чёрная: одно-слойный
     чёрный размыв — стоковый признак, он читается как «эффект поверх», а не как поверхность. */
  --shadow-popover: 0 1px 2px rgba(23,26,33,0.06),
                    0 2px 6px rgba(50,60,93,0.08),
                    0 10px 24px rgba(50,60,93,0.12);

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* Typography */
  --font: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', system-ui, -apple-system, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.55;

  /* Spacing scale (4px base) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* AI feature color (purple — industry standard: Notion AI, Linear, GitHub Copilot) */
  --ai: #7C3AED;
  --ai-hover: #6D28D9;
  --ai-light: rgba(124,58,237,0.08);
  --ai-border: rgba(124,58,237,0.2);

  /* Gradient (brand 3D style) */
  --gradient-brand: linear-gradient(135deg, var(--brand-main) 0%, var(--brand-dark) 100%);
  --gradient-brand-light: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-main) 100%);
  /* ⛔ F1292: в СВЕТЛОЙ теме главная кнопка начиналась со светло-синего, и белая надпись на
     нём давала контраст 2,95 при норме 4,5 — левая половина кнопки читалась плохо. Тёмная
     тема этим не страдала: там надпись почти чёрная и контраст 9,3. Поэтому светлый набор
     начинается с более глубокого синего (4,96) и уходит в самый тёмный (7,19) — узнаваемость
     цвета сохраняется, надпись читается по всей ширине. Тёмные наборы ниже не тронуты. */
  --gradient-brand-accent: linear-gradient(135deg, var(--accent-hover) 0%, var(--brand-darkest) 100%);

  /* Layout */
  --header-bg: rgba(255,255,255,0.92);
  --header-border: var(--border-light);
  --input-bg: var(--surface);
  --badge-text: #fff;
  --msg-support-bg: #f0f4f8;
}

/* ═══ Dark theme ═══ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-lightest: #8edaf4;
    --brand-light: #7dd3f0;
    --brand-main: #5bc0eb;
    --brand-dark: #3a9fd8;
    --brand-darkest: #2176ae;
    --bg: #0f1115;
    --surface: #1a1d23;
    --card-bg: #1a1d23;
    --surface-hover: #22262d;
    --border: #2d3139;
    --border-light: #23272e;
    --text: #e8eaed;
    --text-secondary: #adb3bc;
    --text-muted: #a8b1bd;
    --accent: #5bc0eb;
    --accent-hover: #7dd3f0;
    --accent-light: rgba(91,192,235,0.1);
    --call-tint-wait: color-mix(in srgb, rgb(91 192 235) 10%, var(--surface-raised, var(--surface)));
    /* F1126 W10.3 — налёт «сообщение взято в заявку»: кладётся внутренней тенью поверх фона,
       потому что сам фон пузыря занят цветом линии связи и заметкой. */
    --msg-taken-wash: rgba(91,192,235,0.16);
    /* Подпись с номером заявки: пара «фон/текст» задана явно, потому что белым по
       основному цвету мелкий текст не читается (контраст 2.9 при нужных 4.5). */
    --msg-taken-badge-bg: #28414f;
    --msg-taken-badge-fg: #bfe6f7;

  /* ⛔ support#F10130 W2 — ПАЛИТРА ЗАЯВОК ПЕРЕПИСКИ. Цвет закреплён за заявкой и красит и её
     вкладку в полосе, и её сообщения в ленте. До этой волны цвет был ОДИН на все заявки
     (`--msg-taken-wash`), и при трёх заявках человек не мог отличить, что куда предлагают забрать.
     ⛔ Оттенки разведены по кругу (45 / 142 / 190 / 245 / 292 / 345), а не взяты подряд: соседние
     оттенки на мелкой метке сливаются, а метка тут мелкая — точка и обводка пузыря.
     ⛔ Линия годится и под текст: каждая проверена против своей поверхности от 4.5:1, поэтому
     отдельного токена под подпись вкладки не заводится — второй он разошёлся бы с первым.
     ⛔ Палитра КОНЕЧНА. Заявок бывает больше шести, и тогда цвета повторяются — различие несёт
     номер на вкладке, а сама вкладка помечается (`.chats-tab-shared`). Молча слить две заявки в
     одну на глаз хуже, чем повторить цвет и сказать об этом. */
    --tkt-c0-line: #fbbf24; --tkt-c0-wash: rgba(251,191,36,0.16);
    --tkt-c1-line: #4ade80; --tkt-c1-wash: rgba(74,222,128,0.16);
    --tkt-c2-line: #22d3ee; --tkt-c2-wash: rgba(34,211,238,0.16);
    --tkt-c3-line: #818cf8; --tkt-c3-wash: rgba(129,140,248,0.16);
    --tkt-c4-line: #e879f9; --tkt-c4-wash: rgba(232,121,249,0.16);
    --tkt-c5-line: #fb7185; --tkt-c5-wash: rgba(251,113,133,0.16);
    --accent-text: #0f1115;
    --success: #4ade80;
    --success-bg: rgba(74,222,128,0.1);
    --call-tint-talk: color-mix(in srgb, rgb(74 222 128) 10%, var(--surface-raised, var(--surface)));
    --warning: #facc15;
    --warning-text: var(--warning);  /* на тёмном сам --warning даёт 11:1 */
  --toast-info-bg: #5bc0eb; --toast-info-fg: #0b1220;
  --toast-success-bg: #4ade80; --toast-success-fg: #0b1220;
  --toast-warning-bg: #facc15; --toast-warning-fg: #1c1917;
  --toast-error-bg: #f87171; --toast-error-fg: #0b1220;
    --warning-bg: rgba(250,204,21,0.1);
    --danger: #f87171;
    --danger-bg: rgba(248,113,113,0.08);
    --info: #38bdf8;
    --info-bg: rgba(56,189,248,0.1);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    /* ⛔ В тёмной теме край держит НЕ тень, а более светлая поверхность: чёрная тень на тёмном
       фоне не видна физически, сколько её ни клади. Поднимаем саму поверхность (1.43 против
       страницы, 1.28 против карточки) и даём видимую линию (3.21 против своей поверхности). */
    --surface-raised: #2b303c;
    --hairline: #727d98;
    --shadow-popover: 0 2px 6px rgba(6,9,15,0.5), 0 12px 32px rgba(6,9,15,0.55);
    --gradient-brand: linear-gradient(135deg, var(--brand-main) 0%, var(--brand-dark) 100%);
    --gradient-brand-light: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-main) 100%);
    --gradient-brand-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    --header-bg: rgba(15,17,21,0.92);
    --header-border: var(--border-light);
    --input-bg: #15171c;
    --msg-support-bg: #1e2228;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand-lightest: #8edaf4;
  --brand-light: #7dd3f0;
  --brand-main: #5bc0eb;
  --brand-dark: #3a9fd8;
  --brand-darkest: #2176ae;
  --bg: #0f1115;
  --surface: #1a1d23;
  --card-bg: #1a1d23;
  --surface-hover: #22262d;
  --border: #2d3139;
  --border-light: #23272e;
  --text: #e8eaed;
  --text-secondary: #adb3bc;
  --text-muted: #a8b1bd;
  --accent: #5bc0eb;
  --accent-hover: #7dd3f0;
  --accent-light: rgba(91,192,235,0.1);
  --call-tint-wait: color-mix(in srgb, rgb(91 192 235) 10%, var(--surface-raised, var(--surface)));
  /* F1126 W10.3 — налёт «сообщение взято в заявку»: кладётся внутренней тенью поверх фона,
     потому что сам фон пузыря занят цветом линии связи и заметкой. */
  --msg-taken-wash: rgba(91,192,235,0.16);
  /* Подпись с номером заявки: пара «фон/текст» задана явно, потому что белым по
     основному цвету мелкий текст не читается (контраст 2.9 при нужных 4.5). */
  --msg-taken-badge-bg: #28414f;
  --msg-taken-badge-fg: #bfe6f7;

  /* ⛔ support#F10130 W2 — ПАЛИТРА ЗАЯВОК ПЕРЕПИСКИ. Цвет закреплён за заявкой и красит и её
     вкладку в полосе, и её сообщения в ленте. До этой волны цвет был ОДИН на все заявки
     (`--msg-taken-wash`), и при трёх заявках человек не мог отличить, что куда предлагают забрать.
     ⛔ Оттенки разведены по кругу (45 / 142 / 190 / 245 / 292 / 345), а не взяты подряд: соседние
     оттенки на мелкой метке сливаются, а метка тут мелкая — точка и обводка пузыря.
     ⛔ Линия годится и под текст: каждая проверена против своей поверхности от 4.5:1, поэтому
     отдельного токена под подпись вкладки не заводится — второй он разошёлся бы с первым.
     ⛔ Палитра КОНЕЧНА. Заявок бывает больше шести, и тогда цвета повторяются — различие несёт
     номер на вкладке, а сама вкладка помечается (`.chats-tab-shared`). Молча слить две заявки в
     одну на глаз хуже, чем повторить цвет и сказать об этом. */
  --tkt-c0-line: #fbbf24; --tkt-c0-wash: rgba(251,191,36,0.16);
  --tkt-c1-line: #4ade80; --tkt-c1-wash: rgba(74,222,128,0.16);
  --tkt-c2-line: #22d3ee; --tkt-c2-wash: rgba(34,211,238,0.16);
  --tkt-c3-line: #818cf8; --tkt-c3-wash: rgba(129,140,248,0.16);
  --tkt-c4-line: #e879f9; --tkt-c4-wash: rgba(232,121,249,0.16);
  --tkt-c5-line: #fb7185; --tkt-c5-wash: rgba(251,113,133,0.16);
  --accent-text: #0f1115;
  --success: #4ade80;
  --success-bg: rgba(74,222,128,0.1);
  --call-tint-talk: color-mix(in srgb, rgb(74 222 128) 10%, var(--surface-raised, var(--surface)));
  --warning: #facc15;
  --warning-text: var(--warning);  /* на тёмном сам --warning даёт 11:1 */
  --toast-info-bg: #5bc0eb; --toast-info-fg: #0b1220;
  --toast-success-bg: #4ade80; --toast-success-fg: #0b1220;
  --toast-warning-bg: #facc15; --toast-warning-fg: #1c1917;
  --toast-error-bg: #f87171; --toast-error-fg: #0b1220;
  --warning-bg: rgba(250,204,21,0.1);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,0.08);
  --info: #38bdf8;
  --info-bg: rgba(56,189,248,0.1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  /* ⛔ Тот же набор, что в блоке темы по настройке системы: край держит поверхность и линия,
     не тень. Значения обязаны совпадать — иначе одна и та же тёмная тема выглядит по-разному
     в зависимости от того, выбрал человек её сам или её выбрала система. */
  --surface-raised: #2b303c;
  --hairline: #727d98;
  --shadow-popover: 0 2px 6px rgba(6,9,15,0.5), 0 12px 32px rgba(6,9,15,0.55);
  --gradient-brand: linear-gradient(135deg, var(--brand-main) 0%, var(--brand-dark) 100%);
  --gradient-brand-light: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-main) 100%);
  --gradient-brand-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  --header-bg: rgba(15,17,21,0.92);
  --header-border: var(--border-light);
  --input-bg: #15171c;
  --msg-support-bg: #1e2228;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-hover: #f8f9fb;
  --border: #dce1e6;
  --border-light: #ebeef1;
  --text: #1a1d21;
  --text-secondary: #555e68;
  --text-muted: #626b76;
  --accent: #3a9fd8;
  --accent-hover: #2176ae;
  --accent-light: rgba(58,159,216,0.07);
  --call-tint-wait: color-mix(in srgb, rgb(58 159 216) 7%, var(--surface-raised, var(--surface)));
  /* F1126 W10.3 — налёт «сообщение взято в заявку»: кладётся внутренней тенью поверх фона,
     потому что сам фон пузыря занят цветом линии связи и заметкой. */
  --msg-taken-wash: rgba(58,159,216,0.12);
  /* Подпись с номером заявки: пара «фон/текст» задана явно, потому что белым по
     основному цвету мелкий текст не читается (контраст 2.9 при нужных 4.5). */
  --msg-taken-badge-bg: #dceef8;
  --msg-taken-badge-fg: #1a5c85;

  /* ⛔ support#F10130 W2 — ПАЛИТРА ЗАЯВОК ПЕРЕПИСКИ. Цвет закреплён за заявкой и красит и её
     вкладку в полосе, и её сообщения в ленте. До этой волны цвет был ОДИН на все заявки
     (`--msg-taken-wash`), и при трёх заявках человек не мог отличить, что куда предлагают забрать.
     ⛔ Оттенки разведены по кругу (45 / 142 / 190 / 245 / 292 / 345), а не взяты подряд: соседние
     оттенки на мелкой метке сливаются, а метка тут мелкая — точка и обводка пузыря.
     ⛔ Линия годится и под текст: каждая проверена против своей поверхности от 4.5:1, поэтому
     отдельного токена под подпись вкладки не заводится — второй он разошёлся бы с первым.
     ⛔ Палитра КОНЕЧНА. Заявок бывает больше шести, и тогда цвета повторяются — различие несёт
     номер на вкладке, а сама вкладка помечается (`.chats-tab-shared`). Молча слить две заявки в
     одну на глаз хуже, чем повторить цвет и сказать об этом. */
  --tkt-c0-line: #b45309; --tkt-c0-wash: rgba(180,83,9,0.10);
  --tkt-c1-line: #15803d; --tkt-c1-wash: rgba(21,128,61,0.10);
  --tkt-c2-line: #0e7490; --tkt-c2-wash: rgba(14,116,144,0.10);
  --tkt-c3-line: #4338ca; --tkt-c3-wash: rgba(67,56,202,0.10);
  --tkt-c4-line: #a21caf; --tkt-c4-wash: rgba(162,28,175,0.10);
  --tkt-c5-line: #be123c; --tkt-c5-wash: rgba(190,18,60,0.10);
  --accent-text: #ffffff;
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --call-tint-talk: color-mix(in srgb, rgb(22 163 74) 8%, var(--surface-raised, var(--surface)));
  --warning: #ca8a04;
  /* ⛔ support#F10279.W2 — то же значение, что у :root выше; довод там же. */
  --warning-text: #92500a;
  --warning-bg: rgba(202,138,4,0.08);
  --danger: #dc2626;
  --danger-bg: rgba(220,38,38,0.06);
  --info: #0284c7;
  --info-bg: rgba(2,132,199,0.07);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  /* ⛔ В светлой теме поверхность и так белая, поэтому край держат ЛИНИЯ и тень.
     Прежняя линия давала 1.32 против белого — человек видел бледное пятно без края. */
  --surface-raised: #ffffff;
  --hairline: #7f8c9e;
  --shadow-popover: 0 1px 2px rgba(23,26,33,0.06),
                    0 2px 6px rgba(50,60,93,0.08),
                    0 10px 24px rgba(50,60,93,0.12);
  --header-bg: rgba(255,255,255,0.92);
  --header-border: var(--border-light);
  --input-bg: var(--surface);
  --msg-support-bg: #f0f4f8;
}