/* ════════════════════════════════════════════════════════════════════
   AIR «Воздух» v2.0 — канонический токен-слой.
   ЕДИНСТВЕННЫЙ источник стилевой истины. Подключается ПЕРВЫМ.

   Эталон значений — рантайм ФинПо (frontend/src/styles/air/*.css):
   он проверен в проде на 20+ вертикалях, поэтому имена и значения взяты
   оттуда. Из пакета v1.1 сохранены структурные сущности, которых у ФинПо
   не было: z-слои, геометрия плотности, каркас навигации, флоу-канвас,
   бренд-цвет, уровни движения.

   Персонализация — data-атрибуты на <html>:
     data-theme     = light | dark | indigo | emerald | amber | rose | graphite
     data-accent    = blue | iris | emerald | ochre | magenta | graphite
                      (действует только в light/dark; в 5 фикс. темах игнорируется)
     data-bg-shade  = 0 | 1 | 2            (ступень канваса текущей темы)
     data-density   = 48 | 42 | 36         (высота строки таблиц)
     data-nav       = sidebar | topbar | rail
     data-motion    = full | reduced | off

   ПРАВИЛА (нарушение = система не применена):
   · В компонентах НОЛЬ хардкод-значений — только var(--air-*).
   · Тема меняет ТОЛЬКО цвет. Layout / spacing / radius / motion / z — инвариант.
   · Бренд-цвет --air-brand НЕ подчиняется data-accent.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Каркас и инварианты ─────────────────────────────────────────── */
:root {
  /* каркас навигации */
  /* Потолок задан каноном раскладки Antrop: «боковая колонка ≤240px из 1280 по ширине»,
     содержимому остаётся ≥80%. Было 276 — 21,6% ноутбучного экрана вместо 18,75%, то есть
     продукт, одетый в «Воздух», нарушал бюджет служебного С ПЕРВОЙ МИНУТЫ и ничего об этом не
     знал. Человек по-прежнему может растянуть колонку до 320 сам — но это его решение, а не
     умолчание системы. */
  --air-sidebar-w: 240px;        /* полный сайдбар */
  --air-sidebar-w-min: 216px;    /* drag-resize */
  --air-sidebar-w-max: 320px;
  --air-rail-w: 64px;            /* режим rail */
  --air-topbar-h: 52px;          /* режим topbar */
  --air-nav-w: var(--air-sidebar-w);  /* фактическая ширина; переопределяется data-nav */
  --air-content-max: 1080px;

  /* пространство — шаг 4 */
  --air-s-1: 4px;  --air-s-2: 8px;   --air-s-3: 12px; --air-s-4: 16px;
  --air-s-5: 20px; --air-s-6: 24px;  --air-s-7: 32px; --air-s-8: 40px;
  --air-s-9: 48px; --air-s-10: 64px;

  --air-gap-card: 20px;      /* сетки карточек */
  --air-gap-section: 40px;   /* между секциями страницы */
  --air-pad-card: 24px;      /* внутренний отступ карточки */
  --air-pad-page: 48px;      /* поля контентной области */

  /* радиусы — форма-язык Air, темой не меняются */
  --air-r-xs: 6px;    /* мелкие чипы-коды */
  --air-r-sm: 8px;    /* инпуты-компакты, ячейки */
  --air-r-md: 10px;   /* кнопки, контролы */
  --air-r-base: 12px; /* малые карточки, поповеры */
  --air-r-lg: 16px;   /* карточки, сайдбар */
  --air-r-xl: 20px;   /* крупные карточки, модалки */
  --air-r-pill: 999px;

  /* высоты контролов */
  --air-control-h: 40px;
  --air-control-h-sm: 32px;
  --air-control-h-lg: 48px;
  --air-item-h: 36px;   /* пункт меню / списка */
  --air-gap: 10px;      /* базовый внутренний зазор */
  --air-leading: 1.5;   /* интерлиньяж по умолчанию для свободного текста */

  /* z-слои — единая лестница, z-index по месту запрещён */
  --air-z-sticky: 30;  --air-z-nav: 40;     --air-z-overlay: 90;
  --air-z-modal: 100;  --air-z-popover: 110; --air-z-toast: 120; --air-z-tooltip: 130;

  /* бренд — фиксирован, пользовательскому акценту НЕ подчиняется */
  --air-brand: #3E6FE3;
  --air-on-brand: #FFFFFF;
}

/* ── 2. Типографика ─────────────────────────────────────────────────── *
 * Атомы (вес/размер/интерлиньяж) объявлены ОДИН раз, композиты собраны
 * из атомов — значение не дублируется, менять нужно в одном месте.       */
:root {
  --air-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --air-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* размеры */
  --air-fs-display: 30px; --air-fs-h1: 26px;     --air-fs-h2: 20px;   --air-fs-h3: 16px;
  --air-fs-body-lg: 15px; --air-fs-body: 14px;   --air-fs-body-sm: 13.5px;
  /* `micro` — 12px, пол кегля канона `readability`: ниже этой границы WCAG требует полного 4.5:1,
     а текст перестаёт быть текстом. До 06.08.2026 роль стояла 11px — и это была ловушка не для
     невнимательного, а для добросовестного: исполнитель берёт ШТАТНУЮ роль системы под служебную
     подпись и нарушает канон, ничего не нарушив в системе. Об этом отдельно написал Кузя
     (PATCHES п.4), обойдя роль у себя стороной. Роль чинится в объявлении — тогда её чинит всем. */
  --air-fs-caption: 12.5px; --air-fs-micro: 12px;
  --air-fs-num-xl: 28px;  --air-fs-num: 24px;    --air-fs-mono: 12px;

  /* интерлиньяж */
  --air-lh-display: 36px; --air-lh-h1: 32px;     --air-lh-h2: 26px;   --air-lh-h3: 22px;
  --air-lh-body-lg: 24px; --air-lh-body: 22px;   --air-lh-body-sm: 20px;
  --air-lh-caption: 18px; --air-lh-micro: 16px;
  --air-lh-num-xl: 32px;  --air-lh-num: 28px;    --air-lh-mono: 18px;

  /* веса */
  --air-fw-head: 800; --air-fw-strong: 700; --air-fw-medium: 600; --air-fw-body: 500;

  /* композиты (font shorthand) */
  --air-type-display: var(--air-fw-head) var(--air-fs-display)/var(--air-lh-display) var(--air-font-ui);
  --air-type-h1:      var(--air-fw-head) var(--air-fs-h1)/var(--air-lh-h1) var(--air-font-ui);
  --air-type-h2:      var(--air-fw-head) var(--air-fs-h2)/var(--air-lh-h2) var(--air-font-ui);
  --air-type-h3:      var(--air-fw-head) var(--air-fs-h3)/var(--air-lh-h3) var(--air-font-ui);
  --air-type-body-lg: var(--air-fw-body) var(--air-fs-body-lg)/var(--air-lh-body-lg) var(--air-font-ui);
  --air-type-body:    var(--air-fw-body) var(--air-fs-body)/var(--air-lh-body) var(--air-font-ui);
  --air-type-body-sm: var(--air-fw-body) var(--air-fs-body-sm)/var(--air-lh-body-sm) var(--air-font-ui);
  --air-type-caption: var(--air-fw-medium) var(--air-fs-caption)/var(--air-lh-caption) var(--air-font-ui);
  --air-type-micro:   var(--air-fw-strong) var(--air-fs-micro)/var(--air-lh-micro) var(--air-font-ui);
  --air-type-num-xl:  var(--air-fw-head) var(--air-fs-num-xl)/var(--air-lh-num-xl) var(--air-font-ui);
  --air-type-num:     var(--air-fw-head) var(--air-fs-num)/var(--air-lh-num) var(--air-font-ui);
  --air-type-mono:    var(--air-fw-body) var(--air-fs-mono)/var(--air-lh-mono) var(--air-font-mono);

  --air-ls-tight: -0.025em;  /* display, num-xl */
  --air-ls-head: -0.02em;    /* h1, h2, num */
  --air-ls-caps: 0.1em;      /* micro, uppercase */
}

/* ── 3. Движение ────────────────────────────────────────────────────── *
 * Характер «выдох» — быстрый старт, долгое мягкое торможение. Дистанции
 * 8–16px, вход из лёгкой дымки. Bounce и upscale запрещены.              */
:root {
  --air-t-fast: 140ms;   /* hover, цвет, фокус */
  --air-t-base: 240ms;   /* появление карточек, чипы, тултипы */
  --air-t-slow: 400ms;   /* дровер, модалка, смена вкладки */
  --air-t-page: 520ms;   /* переход страницы */
  --air-stagger: 30ms;   /* каскад списков, до 8 элементов */

  --air-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* основная — «выдох» */
  --air-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* микро-переходы */
  --air-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* перемещения на месте */

  --air-hover-lift: translateY(-2px);   /* + shadow-card → shadow-hover */
  --air-press-scale: scale(0.98);
}

[data-motion='reduced'] { --air-t-fast: 1ms; --air-t-base: 1ms; --air-t-slow: 1ms; --air-t-page: 1ms; }
[data-motion='off']     { --air-t-fast: 0ms; --air-t-base: 0ms; --air-t-slow: 0ms; --air-t-page: 0ms; }

@keyframes air-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes air-rise      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Появление «из дымки» — фирменный вход контента */
@keyframes air-mist      { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes air-scale-in  { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes air-drawer-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes air-toast-in  { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes air-modal-in  { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes air-bar-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }  /* transform-origin: bottom */
@keyframes air-spin      { to { transform: rotate(360deg); } }
@keyframes air-shimmer   { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }  /* 2.4s linear */
@keyframes air-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 164, 93, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(34, 164, 93, 0); } }
/* Уход контента при смене страницы/таба — вверх в дымку, 200ms */
@keyframes air-page-out  { to { opacity: 0; transform: translateY(-8px); filter: blur(3px); } }
@keyframes air-menu-in   { from { opacity: 0; transform: scale(0.96) translateY(-5px); } }
@keyframes air-tooltip-in{ from { opacity: 0; transform: translateY(4px); } }
@keyframes air-row-in    { from { max-height: 0; opacity: 0; transform: translateY(6px); } to { max-height: 48px; opacity: 1; transform: translateY(0); } }
@keyframes air-flash     { from { background: var(--air-accent-soft); } to { background: transparent; } }
@keyframes air-indeterminate { from { left: -35%; } to { left: 105%; } }
/* «Дыхание покоя» — левитация ключевых карточек. Применять точечно. */
@keyframes air-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 10px 24px rgba(18, 32, 58, 0.10); }
  50%      { transform: translateY(-7px); box-shadow: 0 26px 48px rgba(18, 32, 58, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --air-t-fast: 1ms; --air-t-base: 1ms; --air-t-slow: 1ms; --air-t-page: 1ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 4. Тени, фокус, блюр ───────────────────────────────────────────── *
 * Глубина через мягкие широкие тени, а не границы. Границы — только на
 * контролах и hairline-разделители внутри карточек.                      */
:root {
  --air-shadow-xs:    0 1px 2px rgba(18, 32, 58, 0.05);
  --air-shadow-card:  0 4px 16px rgba(18, 32, 58, 0.06);
  --air-shadow-hover: 0 10px 26px rgba(18, 32, 58, 0.10);
  --air-shadow-float: 0 8px 28px rgba(18, 32, 58, 0.07), 0 1px 2px rgba(18, 32, 58, 0.04);
  --air-shadow-modal: 0 24px 60px rgba(18, 32, 58, 0.18), 0 4px 16px rgba(18, 32, 58, 0.08);
  --air-shadow-accent: 0 6px 16px rgba(62, 111, 227, 0.35);  /* только primary-кнопка */
  --air-focus-ring: 0 0 0 3px var(--air-accent-ring);        /* + border-color: var(--air-accent) */
  --air-blur-nav: saturate(1.4) blur(12px);                  /* липкие шапки поверх контента */
}
html[data-theme='dark'], html[data-theme='indigo'], html[data-theme='graphite'] {
  --air-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --air-shadow-card:  0 4px 16px rgba(0, 0, 0, 0.35);
  --air-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.45);
  --air-shadow-float: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --air-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ── 5. Темы ×7 — ТОЛЬКО цвет ───────────────────────────────────────── */

/* 5.1 LIGHT (по умолчанию) — акцент настраивается */
:root,
html[data-theme='light'] {
  --air-bg: #F9FAFC;
  --air-bg-tint: #F0F4FE;
  --air-surface: #FFFFFF;
  --air-surface-sub: #F8FAFC;
  --air-elevated: #FFFFFF;

  --air-hairline: #EDF0F5;
  --air-border: #E3E8F0;
  --air-border-strong: #C9D2E0;

  --air-text-strong: #1A1F36;
  --air-text: #4F566B;
  --air-text-soft: #8792A2;
  --air-text-faint: #A5B0C0;
  --air-on-accent: #FFFFFF;

  --air-accent: #3E6FE3;
  --air-accent-deep: #2F5DCB;
  --air-accent-soft: rgba(62, 111, 227, 0.10);
  --air-accent-ring: rgba(62, 111, 227, 0.25);

  --air-scrim: rgba(18, 32, 58, 0.40);
  color-scheme: light;
}

/* 5.2 DARK — акцент настраивается */
html[data-theme='dark'] {
  --air-bg: #0E1220;
  --air-bg-tint: rgba(107, 147, 242, 0.08);
  --air-surface: #161B2C;
  --air-surface-sub: #1B2134;
  --air-elevated: #1C2338;

  --air-hairline: rgba(255, 255, 255, 0.06);
  --air-border: rgba(255, 255, 255, 0.10);
  --air-border-strong: rgba(255, 255, 255, 0.18);

  --air-text-strong: #F2F4F9;
  --air-text: #B9C0D4;
  --air-text-soft: #7C86A2;
  --air-text-faint: #5A6380;
  --air-on-accent: #FFFFFF;

  --air-accent: #6B93F2;
  --air-accent-deep: #85A7F5;
  --air-accent-soft: rgba(107, 147, 242, 0.14);
  --air-accent-ring: rgba(107, 147, 242, 0.30);

  --air-scrim: rgba(4, 8, 20, 0.60);
  color-scheme: dark;
}

/* 5.3–5.7 ФИКСИРОВАННЫЕ темы — полные палитры со своим акцентом.
   Двойной селектор перебивает [data-accent]: пользовательский акцент
   в этих темах игнорируется. */

/* Индиго — глубокая тёмно-синяя */
html[data-theme='indigo'], html[data-theme='indigo'][data-accent] {
  --air-bg: #131845;
  --air-bg-tint: rgba(141, 155, 255, 0.10);
  --air-surface: #1B2158;
  --air-surface-sub: #212866;
  --air-elevated: #262E73;

  --air-hairline: rgba(180, 190, 255, 0.10);
  --air-border: rgba(180, 190, 255, 0.16);
  --air-border-strong: rgba(180, 190, 255, 0.28);

  --air-text-strong: #EDEFFF;
  --air-text: #C0C6F2;
  --air-text-soft: #8B93CF;
  --air-text-faint: #6970AC;
  --air-on-accent: #10143B;

  --air-accent: #8D9BFF;
  --air-accent-deep: #A5B1FF;
  --air-accent-soft: rgba(141, 155, 255, 0.14);
  --air-accent-ring: rgba(141, 155, 255, 0.30);
  --air-scrim: rgba(5, 8, 30, 0.60);
  color-scheme: dark;
}

/* Изумруд — светлая зелёная */
html[data-theme='emerald'], html[data-theme='emerald'][data-accent] {
  --air-bg: #EAF3EE;
  --air-bg-tint: #DCEDE3;
  --air-surface: #FCFEFD;
  --air-surface-sub: #F2F9F5;
  --air-elevated: #FFFFFF;

  --air-hairline: #E2EEE7;
  --air-border: #D3E5DB;
  --air-border-strong: #B3CFC0;

  --air-text-strong: #16281F;
  --air-text: #45604F;
  --air-text-soft: #77937F;
  --air-text-faint: #9AB3A2;
  --air-on-accent: #FFFFFF;

  --air-accent: #128A5F;
  --air-accent-deep: #0E7350;
  --air-accent-soft: rgba(18, 138, 95, 0.10);
  --air-accent-ring: rgba(18, 138, 95, 0.24);
  --air-scrim: rgba(15, 35, 25, 0.40);
  color-scheme: light;
}

/* Янтарь — светлая песочная */
html[data-theme='amber'], html[data-theme='amber'][data-accent] {
  --air-bg: #F6EEDD;
  --air-bg-tint: #F0E4CB;
  --air-surface: #FFFCF5;
  --air-surface-sub: #FAF4E6;
  --air-elevated: #FFFFFF;

  --air-hairline: #EFE5D0;
  --air-border: #E3D5B9;
  --air-border-strong: #C9B48D;

  --air-text-strong: #2E2412;
  --air-text: #5F4F30;
  --air-text-soft: #93805C;
  --air-text-faint: #B3A17E;
  --air-on-accent: #FFFFFF;

  --air-accent: #A9731A;
  --air-accent-deep: #8C5E12;
  --air-accent-soft: rgba(169, 115, 26, 0.12);
  --air-accent-ring: rgba(169, 115, 26, 0.26);
  --air-scrim: rgba(46, 36, 18, 0.40);
  color-scheme: light;
}

/* Роза — светлая пудровая */
html[data-theme='rose'], html[data-theme='rose'][data-accent] {
  --air-bg: #F9ECF1;
  --air-bg-tint: #F4DEE8;
  --air-surface: #FFFBFC;
  --air-surface-sub: #FBF2F6;
  --air-elevated: #FFFFFF;

  --air-hairline: #F2E2E9;
  --air-border: #E8CEDA;
  --air-border-strong: #D3A8BC;

  --air-text-strong: #331520;
  --air-text: #64404F;
  --air-text-soft: #97707F;
  --air-text-faint: #B795A2;
  --air-on-accent: #FFFFFF;

  --air-accent: #C13B77;
  --air-accent-deep: #A32C62;
  --air-accent-soft: rgba(193, 59, 119, 0.10);
  --air-accent-ring: rgba(193, 59, 119, 0.24);
  --air-scrim: rgba(51, 21, 32, 0.40);
  color-scheme: light;
}

/* Графит — тёмная нейтральная */
html[data-theme='graphite'], html[data-theme='graphite'][data-accent] {
  --air-bg: #141519;
  --air-bg-tint: rgba(255, 255, 255, 0.05);
  --air-surface: #1D1F24;
  --air-surface-sub: #22242A;
  --air-elevated: #26282F;

  --air-hairline: rgba(255, 255, 255, 0.06);
  --air-border: rgba(255, 255, 255, 0.10);
  --air-border-strong: rgba(255, 255, 255, 0.18);

  --air-text-strong: #F2F3F5;
  --air-text: #B6B9C2;
  --air-text-soft: #82858F;
  --air-text-faint: #5E616B;
  --air-on-accent: #17181C;

  --air-accent: #C7CDDA;
  --air-accent-deep: #E2E6EF;
  --air-accent-soft: rgba(199, 205, 218, 0.12);
  --air-accent-ring: rgba(199, 205, 218, 0.28);
  --air-scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ── 6. Семантика статусов (все темы) ───────────────────────────────── */
:root {
  /* Каждая пара «текст на своём фоне» замерена, а не подобрана на глаз (замер 06.08.2026, живой
     рендер Billy, композиция всех полупрозрачных слоёв на канву). Светлая половина: успех 4.78 ·
     предупреждение 4.69 · опасность 4.91 · сведения 4.51 · нейтральный 4.71 — все выше 4.5 для
     мелкого текста. Тёмная: 6.1–7.4, запас есть.

     Предупреждение и нейтральный до 06.08.2026 стояли #9A6A1B (4.28) и #6F7686 (4.07) — ниже
     порога. Оба углублены подмешиванием чёрного В OKLAB на 4% и 6%: тон и характер цвета
     сохраняются точно, меняется только глубина. Ошибка была не видна ни tsc, ни линту — только
     замеру на живом рендере. */
  --air-success: #22A45D;  --air-success-text: #177A45;  --air-success-bg: #E7F5EC;
  --air-warning: #E8A13C;  --air-warning-text: #926419;  --air-warning-bg: #FBF3E4;
  --air-danger:  #E5484D;  --air-danger-text:  #C22F2F;  --air-danger-bg:  #FDECEC;
  --air-info:    #0E9BD8;  --air-info-text:    #0A76A6;  --air-info-bg:    #E7F4FB;
  --air-neutral-bg: #F1F2F4; --air-neutral-text: #666C7B;
  /* Текст на СПЛОШНОМ статусном фоне. Заведён под единственный хардкод, который оставался в
     системе: кнопка удаления во флоу-канвасе красила подпись `#fff` по месту. Значение одно на обе
     схемы — статусные заливки достаточно тёмные в любой теме. */
  --air-on-status: #FFFFFF;
}
html[data-theme='dark'],
html[data-theme='indigo'],
html[data-theme='graphite'] {
  --air-success-bg: rgba(34, 164, 93, 0.16);  --air-success-text: #5ECD93;
  --air-warning-bg: rgba(232, 161, 60, 0.16); --air-warning-text: #EEBB6E;
  --air-danger-bg:  rgba(229, 72, 77, 0.16);  --air-danger-text:  #F08A8D;
  --air-info-bg:    rgba(14, 155, 216, 0.16); --air-info-text:    #62C2EA;
  --air-neutral-bg: rgba(255, 255, 255, 0.08); --air-neutral-text: #9AA3B8;
}

/* ── 7. Акценты — 6 кураторских, CSS-first ──────────────────────────── *
 * Значения совпадают с рантаймом ФинПо байт-в-байт, КРОМЕ dark/graphite:
 * формула ФинПо давала #5D657D — контраст 2.95 к поверхности, ниже
 * порога WCAG 1.4.11 (3:1) для нетекстовых UI-элементов. Гарант контраста
 * досветлил до #616A83 (3.18). Остальные 11 пар не изменились.
 * Продукт со своим брендовым акцентом получает те же значения из
 * computeAccentVars() в tokens.ts — формула и гарант там те же.          */
html[data-theme='light'][data-accent='iris'] {
  --air-accent: #4F5FE3; --air-accent-deep: #2C3FDD;
  --air-accent-soft: rgba(79, 95, 227, 0.1); --air-accent-ring: rgba(79, 95, 227, 0.25);
}
html[data-theme='light'][data-accent='emerald'] {
  --air-accent: #17A673; --air-accent-deep: #12825A;
  --air-accent-soft: rgba(23, 166, 115, 0.1); --air-accent-ring: rgba(23, 166, 115, 0.25);
}
html[data-theme='light'][data-accent='ochre'] {
  --air-accent: #C7861E; --air-accent-deep: #A46E19;
  --air-accent-soft: rgba(199, 134, 30, 0.1); --air-accent-ring: rgba(199, 134, 30, 0.25);
}
html[data-theme='light'][data-accent='magenta'] {
  --air-accent: #D84A8B; --air-accent-deep: #CD2C76;
  --air-accent-soft: rgba(216, 74, 139, 0.1); --air-accent-ring: rgba(216, 74, 139, 0.25);
}
html[data-theme='light'][data-accent='graphite'] {
  --air-accent: #3A3F4E; --air-accent-deep: #292C37;
  --air-accent-soft: rgba(58, 63, 78, 0.1); --air-accent-ring: rgba(58, 63, 78, 0.25);
}

html[data-theme='dark'][data-accent='iris'] {
  --air-accent: #959FEE; --air-accent-deep: #B9BFF4;
  --air-accent-soft: rgba(149, 159, 238, 0.14); --air-accent-ring: rgba(149, 159, 238, 0.3);
}
html[data-theme='dark'][data-accent='emerald'] {
  --air-accent: #2DE2A1; --air-accent-deep: #51E7B1;
  --air-accent-soft: rgba(45, 226, 161, 0.14); --air-accent-ring: rgba(45, 226, 161, 0.3);
}
html[data-theme='dark'][data-accent='ochre'] {
  --air-accent: #E5AC52; --air-accent-deep: #EABD75;
  --air-accent-soft: rgba(229, 172, 82, 0.14); --air-accent-ring: rgba(229, 172, 82, 0.3);
}
html[data-theme='dark'][data-accent='magenta'] {
  --air-accent: #E68DB6; --air-accent-deep: #EEAFCC;
  --air-accent-soft: rgba(230, 141, 182, 0.14); --air-accent-ring: rgba(230, 141, 182, 0.3);
}
html[data-theme='dark'][data-accent='graphite'] {
  --air-accent: #616A83; --air-accent-deep: #6F7894;
  --air-accent-soft: rgba(97, 106, 131, 0.14); --air-accent-ring: rgba(97, 106, 131, 0.3);
}

/* ── 8. Оттенок канваса — 3 ступени на тему ─────────────────────────── *
 * Ступень 0 = --air-bg темы (объявлена выше), поэтому не дублируется.    */
html[data-theme='light'][data-bg-shade='1']    { --air-bg: #F1F4F8; }
html[data-theme='light'][data-bg-shade='2']    { --air-bg: #E7EBF1; }
html[data-theme='dark'][data-bg-shade='1']     { --air-bg: #151A2B; }
html[data-theme='dark'][data-bg-shade='2']     { --air-bg: #1C2237; }
html[data-theme='indigo'][data-bg-shade='1']   { --air-bg: #1A2054; }
html[data-theme='indigo'][data-bg-shade='2']   { --air-bg: #212963; }
html[data-theme='emerald'][data-bg-shade='1']  { --air-bg: #F0F7F3; }
html[data-theme='emerald'][data-bg-shade='2']  { --air-bg: #F7FBF9; }
html[data-theme='amber'][data-bg-shade='1']    { --air-bg: #F9F4E9; }
html[data-theme='amber'][data-bg-shade='2']    { --air-bg: #FCF9F3; }
html[data-theme='rose'][data-bg-shade='1']     { --air-bg: #FBF2F6; }
html[data-theme='rose'][data-bg-shade='2']     { --air-bg: #FDF8FA; }
html[data-theme='graphite'][data-bg-shade='1'] { --air-bg: #1B1C21; }
html[data-theme='graphite'][data-bg-shade='2'] { --air-bg: #222329; }

/* ── 9. Плотность таблиц ────────────────────────────────────────────── */
:root, [data-density='48'] { --air-row-h: 48px; }
[data-density='42'] { --air-row-h: 42px; }
[data-density='36'] { --air-row-h: 36px; }

/* ── 10. Вариант навигации ──────────────────────────────────────────── */
[data-nav='sidebar'] { --air-nav-w: var(--air-sidebar-w); }
[data-nav='rail']    { --air-nav-w: var(--air-rail-w); }
[data-nav='topbar']  { --air-nav-w: 0px; }

/* ── 11. Цветовые коды доменов — 22 слота ───────────────────────────── *
 * Домен (продукт/модуль платформы) обозначается ЦВЕТОВОЙ МЕТКОЙ;
 * текстовые аббревиатуры в UI не используются. Маппинг задаёт продукт.   */
:root {
  --domain-1: #3E6FE3;  --domain-1-soft: rgba(62, 111, 227, 0.12);
  --domain-2: #7C5CE0;  --domain-2-soft: rgba(124, 92, 224, 0.12);
  --domain-3: #0E9BD8;  --domain-3-soft: rgba(14, 155, 216, 0.12);
  --domain-4: #17A673;  --domain-4-soft: rgba(23, 166, 115, 0.12);
  --domain-5: #0FA3A0;  --domain-5-soft: rgba(15, 163, 160, 0.12);
  --domain-6: #C7861E;  --domain-6-soft: rgba(199, 134, 30, 0.12);
  --domain-7: #DE6A32;  --domain-7-soft: rgba(222, 106, 50, 0.12);
  --domain-8: #D84A8B;  --domain-8-soft: rgba(216, 74, 139, 0.12);
  --domain-9: #B44AC8;  --domain-9-soft: rgba(180, 74, 200, 0.12);
  --domain-10: #5E5BD9; --domain-10-soft: rgba(94, 91, 217, 0.12);
  --domain-11: #6C9A1F; --domain-11-soft: rgba(108, 154, 31, 0.12);
  --domain-12: #2F9E44; --domain-12-soft: rgba(47, 158, 68, 0.12);
  --domain-13: #C0392B; --domain-13-soft: rgba(192, 57, 43, 0.12);
  --domain-14: #B08D1E; --domain-14-soft: rgba(176, 141, 30, 0.12);
  --domain-15: #387CA8; --domain-15-soft: rgba(56, 124, 168, 0.12);
  --domain-16: #8A4FBF; --domain-16-soft: rgba(138, 79, 191, 0.12);
  --domain-17: #A13E63; --domain-17-soft: rgba(161, 62, 99, 0.12);
  --domain-18: #2E8B84; --domain-18-soft: rgba(46, 139, 132, 0.12);
  --domain-19: #7A5230; --domain-19-soft: rgba(122, 82, 48, 0.12);
  --domain-20: #64748B; --domain-20-soft: rgba(100, 116, 139, 0.12);
  --domain-21: #1E7FA8; --domain-21-soft: rgba(30, 127, 168, 0.12);
  --domain-22: #5A3FBF; --domain-22-soft: rgba(90, 63, 191, 0.12);
}

/* ── 12. Графики ────────────────────────────────────────────────────── */
:root {
  --chart-1: #3E6FE3; --chart-2: #7195EA; --chart-3: #A3BBF2; --chart-4: #CFDCF9;
}

/* ── 13. Производные тинты ──────────────────────────────────────────── *
 * «Ховер нейтральный» = тинт strong-текста 5%. Работает во всех 7 темах
 * через color-mix — не хардкодим rgba на каждую тему.                    */
:root {
  --air-tint-hover:    color-mix(in srgb, var(--air-text-strong) 5%, transparent);
  --air-tint-press:    color-mix(in srgb, var(--air-text-strong) 8%, transparent);
  --air-tint-selected: color-mix(in srgb, var(--air-accent) 6%, transparent);
}

/* ── 14. Флоу-канвас (автоматизации) ────────────────────────────────── */
:root {
  --air-flow-bg: var(--air-surface-sub);
  --air-flow-dot: rgba(18, 32, 58, 0.10);      /* точки сетки, шаг 18px */
  --air-flow-edge: #C9D2E0;                    /* связь 1.75px */
  --air-flow-edge-active: var(--air-accent);   /* активный путь 2px */
  --air-node-w: 188px;                         /* 188–240 */
  --air-port: 10px;                            /* hit-area ≥ 24px */
  --air-node-trigger: var(--air-accent);
  --air-node-action: #17A673;
  --air-node-condition: #C7861E;
  --air-node-delay: #0E9BD8;
  --air-node-branch: #8E3AA0;
}
html[data-theme='dark'], html[data-theme='indigo'], html[data-theme='graphite'] {
  --air-flow-dot: rgba(255, 255, 255, 0.09);
  --air-flow-edge: rgba(255, 255, 255, 0.25);
  --air-node-action: #3BC391;
  --air-node-condition: #E0A23F;
  --air-node-delay: #4FB8E8;
  --air-node-branch: #C77BD6;
}

/* ── 15. База ───────────────────────────────────────────────────────── */
html { background: var(--air-bg); }
body {
  margin: 0;
  background: var(--air-bg);
  color: var(--air-text);
  font: var(--air-type-body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: none;
  box-shadow: var(--air-focus-ring);
  border-radius: var(--air-r-sm);
}
::selection { background: var(--air-accent-soft); }

/* Кроссфейд смены темы — 240ms, без движения элементов.
 * Класс навешивается на <html> движком персонализации на время перехода. */
.air-theme-fade, .air-theme-fade * {
  transition: background-color var(--air-t-base) var(--air-ease-out),
              border-color var(--air-t-base) var(--air-ease-out),
              color var(--air-t-base) var(--air-ease-out),
              box-shadow var(--air-t-base) var(--air-ease-out) !important;
}

/* ═══ 12. Полоса прокрутки — своя, не системная ══════════════════════════
   Канон Antrop `custom-controls-only`: браузер рисует полосу по-своему, и в тёмной теме на светлой
   ОС она остаётся светлой. Правило стоит на КОРНЕ и потому действует везде, включая коробки, которые
   никто не переписывал; перечислять контейнеры поимённо значило бы пропустить половину. Скрытые
   полосы каркаса (`.air-shell__topnav`) выигрывают своей специфичностью и остаются скрытыми. */
:root { scrollbar-width: thin; scrollbar-color: var(--air-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--air-border-strong); background-clip: padding-box;
  border: 3px solid transparent; border-radius: var(--air-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--air-text-faint); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }