:root{
    color-scheme:dark;
    --neutral-0:hsl(0,0%,100%);
    --bg:hsl(222,47%,6%);
    --surface:hsl(222,40%,9%);
    --surface-2:hsl(222,34%,12%);
    --text:hsl(210,40%,97%);
    --text-2:hsl(210,30%,72%);
    --text-3:hsl(210,22%,55%);
    --border:hsl(222,30%,9%);
    --border-2:hsl(222,26%,14%);

    /* Фирменный тон — синий из настоящего логотипа компании (assets/logo/),
       не выдуманный: градиент плашки #006FBD→#005BA2→#56C5FF, это 205–206°.
       --brand взят на среднем стопе градиента (#005BA2, hsl(206,100%,32%)) —
       ровно та светлота, при которой один и тот же цвет даёт 6.96:1 и как
       белый текст на синей кнопке, и как синий текст на белом фоне (посчитано
       по WCAG). --accent — светлый стоп градиента (#56C5FF) для декоративных
       акцентов (рамка CTA-кнопки, искры в showcase), --accent-ink — тёмная
       ступень того же тона для текста/иконок на белом (7.6:1). */
    --brand:hsl(206,100%,32%);
    --brand-dark:hsl(206,100%,25%);

    /* Сигнатурный акцент раздела «ИИ-Ассистент» — светлая ступень фирменного тона */
    --accent:hsl(201,100%,67%);
    --accent-ink:hsl(201,95%,78%);
    --accent-soft:hsl(206,70%,14%);
    --accent-line:hsl(201,100%,67%);

    --ok:hsl(142,70%,55%);
    --ok-bg:hsl(142,45%,16%);
    --warn:hsl(38,90%,68%);
    --warn-bg:hsl(38,55%,16%);
    --danger:hsl(0,80%,66%);
    --danger-bg:hsl(0,55%,20%);
    --info:hsl(217,91%,64%);
    --info-bg:hsl(217,55%,20%);

    --topbar:hsl(222,50%,5%);
    --sidebar:hsl(222,45%,7.5%);

    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;
    --sh-sm:0 1px 2px hsla(0,0%,0%,.4);
    --sh-md:0 4px 14px hsla(0,0%,0%,.45);
    --sh-lg:0 14px 44px hsla(0,0%,0%,.6);

    --font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
    /* Моно — как у kestra (JetBrains Mono). Кириллица проверена: 122 глифа U+0400-04FF. */
    --mono:'JetBrains Mono',ui-monospace,'SF Mono','Menlo',monospace;

    /* Шкала отступов, снятая с mockup.css: там сетка с шагом 2px, и макет
       постоянно различает 10/12/14px (37/26/27 вхождений) — ступень грубее 2px
       разъехалась бы с вёрсткой, и её бы обходили сырыми пикселями. Индекс
       ступени = px/2; значения в rem, чтобы отступы ехали вместе с системным
       кеглем. Ряд неразрывный до 24px намеренно: пропуск в середине даёт
       невалидный var(), а он молча съедает свойство целиком. Крупнее 24px
       (в макете 32/36/56px — уровень секций) заведём, когда появится первый
       layout-компонент, которому это нужно. */
    /* Толщина линий и колец фокуса, вес и прозрачность — те значения, что
       раньше стояли сырыми числами в каждом компоненте по отдельности. Их
       ценность не в «одном месте ради одного места», а в том, что рамка и
       кольцо фокуса обязаны совпадать во всём разделе. */
    --bw-thin:1px;
    --focus-ring-width:2px;
    --focus-ring-offset:2px;
    --fw-semibold:600;
    /* Приглушённое состояние (форма отвечена) и недоступное (кнопка/поле). */
    --opacity-muted:.75;
    --opacity-disabled:.55;

    /* Размеры иконок. Базовая .icon в макете — 16px; эти две ступени для мест,
       где иконка визуально спорит с текстом рядом (11px в чипе вложения) или с
       рамкой кнопки (14px в «отправить»). До этого обе жили сырыми пикселями,
       одна из них — инлайн-стилем в шаблоне. */
    --icon-xs:0.6875rem; /* 11px */
    --icon-sm:0.875rem;  /* 14px */
    --sp-1:0.125rem;  /* 2px  */
    --sp-2:0.25rem;   /* 4px  */
    --sp-3:0.375rem;  /* 6px  */
    --sp-4:0.5rem;    /* 8px  */
    --sp-5:0.625rem;  /* 10px */
    --sp-6:0.75rem;   /* 12px */
    --sp-7:0.875rem;  /* 14px */
    --sp-8:1rem;      /* 16px */
    --sp-9:1.125rem;  /* 18px */
    --sp-10:1.25rem;  /* 20px */
    --sp-11:1.375rem; /* 22px */
    --sp-12:1.5rem;   /* 24px */

    /* Шкала кегля. Базовый размер интерфейса в макете — 13px, а не 16px:
       плотность задана кластером 11–13.5px (mockup.css: 12.5px ×21, 13px ×16,
       12px ×12, 11px ×12, 11.5px ×12). Полупиксели не переносим — это оптические
       подгонки, а не ступени. Заголовочный конец (17–24px) в макете почти весь
       одноразовый, поэтому свёрнут в две ступени. */
    --fs-xs:0.75rem;     /* 12px — мета, бейджи */
    --fs-sm:0.875rem;    /* 14px — Caption 14/20 */
    --fs-base:1rem;      /* 16px — Body M 16/24 */
    --fs-lg:1.125rem;    /* 18px — Body L */
    --fs-xl:1.25rem;     /* 20px */
    /* Единственная fluid-ступень: подвижный кегль оправдан на заголовках, а мелкий
       UI-текст от масштабирования по vw только теряет читаемость на узких экранах.
       Растёт 21→24px в диапазоне 360→1440px. */
    --fs-2xl:clamp(1.3125rem,0.28vw + 1.25rem,1.5rem); /* 21px → 24px */

    /* Палитра графиков в ответах ассистента. Оттенки взяты от акцента раздела
       и разведены по кругу, чтобы соседние серии различались и в тёмной теме. */
    --chart-1:var(--accent);
    --chart-2:hsl(190,80%,55%);
    --chart-3:var(--ok);
    --chart-4:var(--warn);
    --chart-5:hsl(322,80%,66%);
    --chart-6:var(--info);
    --chart-7:var(--danger);
    /* Разведён к 196°, чтобы не сливаться с --chart-3 (было 168° — 26° от
       зелёного, для дальтоника одна и та же серия). */
    --chart-8:hsl(196,55%,48%);

    /* Высота холста графика. `maintainAspectRatio:false` у chart.js отдаёт размер
       нам, и без явной высоты холст вырождается в нуль. Плавает по высоте
       вьюпорта, а не ширины: график живёт в колонке треда, где ограничивать надо
       именно долю экрана, которую он съедает. 28vh воспроизводит прежние 260px на
       вьюпорте ~930px, пол 200px оставляет оси читаемыми, потолок 340px не даёт
       одному графику занять весь экран на большом мониторе. */
    --chart-h:clamp(12.5rem,28vh,21.25rem);

    --dur:220ms; --ease:cubic-bezier(0.16,1,0.3,1);
  }
  html[data-theme="light"]{
    color-scheme:light;
    /* На белом фоне семантические тона слишком светлые для заливки: у янтарного
       --warn контраст 2.5:1, ниже порога 3:1 для графики. Поэтому в светлой теме
       палитра своя и затемнённая — проверено расчётом, все восемь ≥3.5:1. */
    --chart-1:hsl(258,70%,52%);
    --chart-2:hsl(190,70%,40%);
    --chart-3:hsl(142,60%,38%);
    --chart-4:hsl(38,90%,38%);
    --chart-5:hsl(322,65%,50%);
    --chart-6:hsl(217,75%,50%);
    --chart-7:hsl(0,70%,52%);
    --chart-8:hsl(196,60%,36%);
    --neutral-0:hsl(0,0%,100%);
    --bg:hsl(0,0%,100%);
    --surface:hsl(220,20%,98%);
    --surface-2:hsl(220,16%,94%);
    --text:hsl(222,30%,12%);
    --text-2:hsl(222,15%,35%);
    --text-3:hsl(222,10%,40%);
    --border:hsl(220,15%,88%);
    --border-2:hsl(220,15%,78%);

    --accent-ink:hsl(206,90%,30%);
    --accent-soft:hsl(206,70%,95%);

    /* На белом --ok из тёмной темы даёт 1.79:1 — статус формы был нечитаем.
       Здесь тот же зелёный, что и у слоя «Пульт»: одно значение — один цвет. */
    --ok:hsl(147,77%,28%);
    --ok-bg:hsl(142,55%,92%);
    --warn-bg:hsl(38,70%,90%);
    --danger-bg:hsl(0,60%,93%);
    --info-bg:hsl(217,65%,92%);

    --topbar:hsl(0,0%,100%);
    --sidebar:hsl(220,20%,98%);

    --sh-sm:0 1px 2px hsla(220,20%,20%,.08);
    --sh-md:0 4px 14px hsla(220,20%,20%,.1);
    --sh-lg:0 14px 44px hsla(220,20%,20%,.14);
  }