@rt-tools/ui-kit-v2 0.4.0 → 0.6.0

package/styles/tokens.css

@@ -1,40 +1,75 @@
 @charset "UTF-8";
+/* Порядок подслоёв кита. Объявляется раньше всего остального: слой, не названный здесь,
+   встаёт в каскад по первому появлению, а появляются подслои в порядке загрузки — стили
+   компонента Angular инжектит отдельным блоком, и он способен прийти раньше основы. Названные
+   заранее, оба подслоя держат порядок независимо от того, что загрузилось первым.
+
+   Правило приложения, объявленное вне слоя, выигрывает у любого правила отсюда независимо от
+   специфичности: неслоевое правило сильнее слоевого. Ради этого слой и заводится — перебивать
+   кит счётом специфичности потребителю больше не нужно.
+
+   Объявления свойств на корне страницы (`:root { --rt-* }`) в слой не уходят: их потребитель
+   перебивает порядком, объявляя свою линейку бренда после `tokens.css`.
+
+   Нижний подслой — `vendor`, и он для чужого CSS, который чинит кит: тема редактора текста,
+   готовые стили перекрытия. Слой опускает правила кита ниже всего, что объявлено вне слоя, —
+   не только ниже приложения, но и ниже такой библиотеки, и панель редактора перестраивалась
+   молча. Подключается чужой файл импортом с именем подслоя:
+
+       @import 'quill/dist/quill.snow.css' layer(rt-kit.vendor);
+
+   Кит его за потребителя не подключает: редактор текста опционален, и тянуть его тему в
+   пакет значило бы отдать её всем. */
+@layer rt-kit.vendor, rt-kit.base, rt-kit.components;
 /* Primitive design tokens — single source of truth для шкал. */
 :root {
-  /* Neutral scale — серо-сине-стальная. */
+  /* Neutral scale — серо-сине-стальная.
+
+     Ряд посчитан в OKLCH: тон 264.4° и цветность 0.0234 взяты у прежней ступени 600,
+     светлота идёт ровным шагом 0.0785 от 0.985 к 0.20. Ноль остаётся чистым белым —
+     это бумага, а не ступень ряда. В самом светлом конце цветность ужата охватом
+     sRGB: синеватого такой светлоты не существует.
+
+     До пересчёта ряд шкалой не был. Он держал два семейства сразу — чисто серое
+     (0, 50, 200, 500, 900) и синеватое (100, 300, 400, 600, 700, 800, 950), —
+     шаг светлоты гулял от 0.009 до 0.173, а ступень 900 была темнее ступени 950,
+     то есть ряд шёл назад. Ещё девять ступеней стояли между этими: заведённые под
+     одно место, они выглядели шкалой, но выбрать из такого ряда было нельзя. */
   --rt-neutral-0: #fff;
-  --rt-neutral-50: #fafafa;
-  --rt-neutral-100: #f6f7f9;
-  --rt-neutral-150: #eef0f4;
-  --rt-neutral-200: #e6e6e6;
-  --rt-neutral-250: #d2d2d2;
-  --rt-neutral-280: #bebebe;
-  --rt-neutral-300: #cad5e2;
-  --rt-neutral-350: #b1b1b1;
-  --rt-neutral-400: #90a1b9;
-  --rt-neutral-420: #9e9e9e;
-  --rt-neutral-450: #909090;
-  --rt-neutral-520: #707070;
-  --rt-neutral-500: #7e7e7e;
-  /* Самый светлый серый, проходящий порог AA (4.5:1) на белом — 4.54:1.
-     Ниже него подпись на светлой поверхности порог не берёт. */
-  --rt-neutral-510: #767676;
-  --rt-neutral-550: #666;
-  --rt-neutral-600: #6b7280;
-  --rt-neutral-700: #3b4557;
-  --rt-neutral-800: #364152;
-  --rt-neutral-900: #1f1f1f;
-  --rt-neutral-950: #122341;
-  /* Blue — brand accent */
-  --rt-blue-50: #eff6ff;
-  --rt-blue-100: #dbeafe;
-  --rt-blue-150: #ddebf6;
-  --rt-blue-300: #93c5fd;
-  --rt-blue-400: #5496ff; /* отметка прочтения в чате */
-  --rt-blue-500: #155dfc; /* brand */
-  --rt-blue-600: #0e4ad6;
-  --rt-blue-700: #0c3fb0;
-  --rt-blue-900: #182142;
+  --rt-neutral-50: #f8faff;
+  --rt-neutral-100: #d8e0f0;
+  --rt-neutral-200: #bfc7d6;
+  --rt-neutral-300: #a6aebd;
+  --rt-neutral-400: #8e96a4;
+  --rt-neutral-500: #777e8c;
+  --rt-neutral-600: #606775;
+  --rt-neutral-700: #4b515f;
+  --rt-neutral-800: #363c49;
+  --rt-neutral-900: #232934;
+  --rt-neutral-950: #111621;
+  /* Бренд — линейка цвета марки. Потребитель перекрашивает кит объявлением этих
+     одиннадцати ступеней после tokens.css: назначения, прозрачные оттенки и кольцо
+     фокуса берут цвет отсюда сами, в обеих темах.
+
+     Ряд посчитан в OKLCH: тон 262.87° и цветность взяты у ступени 500, светлота идёт
+     ровными шагами от 0.97 к 0.20. Ступень 500 — сам цвет марки, поэтому светлый конец
+     ряда темнее, чем у палитр, где 500 стоит серединой светлоты. У 600 и 700 цветность
+     ужата: с полной они не влезают в охват sRGB. */
+  --rt-brand-50: #f0f5ff;
+  --rt-brand-100: #cddaf1;
+  --rt-brand-200: #a8bfea;
+  --rt-brand-300: #7ea3e9;
+  --rt-brand-400: #4e84f2; /* отметка прочтения в чате */
+  --rt-brand-500: #155dfc; /* цвет марки */
+  --rt-brand-600: #0047df;
+  --rt-brand-700: #0038b5;
+  --rt-brand-800: #012a8a;
+  --rt-brand-900: #021d62;
+  --rt-brand-950: #02113c;
+  /* Navy — тёмная синева обвязки и рельсы прогресса. Цветом марки она не красится:
+     перекрасивший бренд не ждёт, что вместе с кнопкой сменится подложка шапки. */
+  --rt-navy-600: #435775; /* трек прогресса, тёмная тема */
+  --rt-navy-900: #182142; /* подложка шапки и боковой навигации */
   /* Charcoal — тёплый графит для тёмной темы. */
   --rt-charcoal-950: #17181c; /* глубокий фон / приподнятая alt-поверхность, subtle */
   --rt-charcoal-900: #1b1f22; /* фон страницы */
@@ -44,42 +79,49 @@
   --rt-charcoal-border-strong: #444a50; /* усиленная граница */
   /* Stepper rail — приглушённые оттенки трека/прогресса прогресс-полосы. */
   --rt-gray-350: #b3b3b3; /* трек, light */
-  --rt-navy-600: #435775; /* трек, dark */
   --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
-  /* Status — success/warning/danger/info */
+  /* Status — success/warning/danger/info.
+
+     Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
+     (ΔL = 0.0687 в OKLCH): тон и цветность берутся у 500, светлота убывает шагом.
+     До этого ряды были собраны вручную и шли неровно — у успеха 700 была светлее
+     600, а у опасности 600 отличалась от 500 неразличимо на глаз. Наведение и
+     нажатие действия берут именно эти ступени, и такая пара их сливала. */
   --rt-success-50: #ecfdf5;
   --rt-success-100: #eafaf5;
   --rt-success-500: #059669;
-  --rt-success-600: #047857;
-  --rt-success-700: #088e63;
+  --rt-success-600: #017f58;
+  --rt-success-700: #006848;
   --rt-warning-50: #fffbeb;
   --rt-warning-500: #d97706;
-  --rt-warning-600: #b45309;
+  --rt-warning-600: #bc6600;
+  --rt-warning-700: #9f5500;
   --rt-yellow-400: #f4d85a;
   --rt-amber-400: #f49f5a;
   --rt-danger-50: #fef2f2;
   --rt-danger-500: #dc2626;
-  --rt-danger-600: #d32f2f;
-  --rt-danger-700: #b91c1c;
-  --rt-info-50: #eff6ff;
-  --rt-info-500: #2563eb;
-  --rt-info-600: #1d4ed8;
-  /* Spacing — 8px base (off-grid half-steps помечены @deprecated). */
+  --rt-danger-600: #c00111;
+  --rt-danger-700: #9e000c;
+  /* Info разведён с маркой намеренно. До этого две палитры стояли на одном тоне —
+     262.9° у обеих, — различаясь только цветностью, а ступень 700 совпадала с
+     брендовой буквально. Уведомление «к сведению» — статус наравне с успехом и
+     опасностью, а не акцент марки: у потребителя с зелёной маркой оно иначе стало
+     бы неотличимо от успешного. Тон уведён к 250°: дальше охват sRGB режет
+     цветность вдвое, и синий уходит в бирюзу. */
+  --rt-info-50: #eef6ff;
+  --rt-info-500: #0173c6;
+  --rt-info-600: #005fa5;
+  --rt-info-700: #004c85;
+  /* Spacing — ряд с шагом 4px. Промежуточных ступеней в нём нет: 6, 10, 12 и 28
+     пикселей стояли ступенями под конкретные места, и выбрать из такого ряда было
+     нельзя. Употребления округлены к ближайшей ступени, при равенстве — вверх. */
   --rt-space-0: 0;
   --rt-space-0-5: 2px;
   --rt-space-1: 4px;
-  /* @deprecated off-grid — округлять к --rt-space-2 (8) или --rt-space-1 (4). */
-  --rt-space-1-5: 6px;
   --rt-space-2: 8px;
-  /* @deprecated off-grid — округлять к --rt-space-2 (8) или --rt-space-md (16). */
-  --rt-space-2-5: 10px;
-  /* @deprecated off-grid — округлять к --rt-space-md (16). */
-  --rt-space-3: 12px;
   --rt-space-4: 16px;
   --rt-space-5: 20px;
   --rt-space-6: 24px;
-  /* @deprecated off-grid — заведён под промежуток между группами панели навигации. */
-  --rt-space-7: 28px;
   --rt-space-8: 32px;
   --rt-space-10: 40px;
   --rt-space-12: 48px;
@@ -142,11 +184,42 @@
   /* Тень попапа профиля — один плотный слой: панель узкая, и рассеянные слои
      панели навигации размазывают её край вместо того, чтобы его очертить. */
   --rt-shadow-profile-menu: 0 16px 32px rgb(0 0 0 / 15%);
-  /* Form-control size primitives — raw-шкала высот/min-height для полей.
-     Semantic-слой (--rt-input-*) ссылается на эти значения. */
-  --rt-control-height-sm: 36px;
-  --rt-control-height-md: 45px;
-  --rt-control-height-lg: 52px;
+  /* Тень окна — тот же силуэт, что у shadow-card-soft, но вдвое плотнее: окно
+     лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
+  --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
+  /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
+     задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
+     и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к
+     соседней, а не заводит себе ступень по месту. */
+  --rt-size-1: 4px;
+  --rt-size-2: 8px;
+  --rt-size-3: 12px;
+  --rt-size-4: 16px;
+  --rt-size-5: 20px;
+  --rt-size-6: 24px;
+  --rt-size-8: 32px;
+  --rt-size-10: 40px;
+  --rt-size-12: 48px;
+  --rt-size-16: 64px;
+  --rt-size-20: 80px;
+  --rt-size-24: 96px;
+  --rt-size-30: 120px;
+  --rt-size-40: 160px;
+  --rt-size-60: 240px;
+  --rt-size-64: 256px;
+  --rt-size-100: 400px;
+  /* Control height — одна шкала высот на все интерактивные контролы: кнопку,
+     иконочную кнопку и семейство полей. Ряд идёт шагом 8px и ложится на сетку
+     отступов; ступень md остаётся сорока, потому что это самый ходовой размер
+     кнопки.
+
+     До свода рядов было три, и в одной строке они не совпадали: кнопка шла
+     30/40/50/60/70, поле 36/45/52, иконочная кнопка 28/36/44/52/60. */
+  --rt-control-height-sm: 32px;
+  --rt-control-height-md: 40px;
+  --rt-control-height-lg: 48px;
+  --rt-control-height-xl: 56px;
+  --rt-control-height-2xl: 64px;
   --rt-control-textarea-min-height-sm: 80px;
   --rt-control-textarea-min-height-md: 120px;
   --rt-control-textarea-min-height-lg: 160px;
@@ -171,10 +244,17 @@
   --rt-overlay-white-25: rgb(250 250 250 / 25%); /* disabled-текст на графите */
   --rt-overlay-white-40: rgb(250 250 250 / 40%); /* muted-текст на графите */
   --rt-overlay-black-50: rgb(0 0 0 / 50%);
-  --rt-overlay-blue-8: rgb(21 93 252 / 8%);
-  --rt-overlay-blue-24: rgb(21 93 252 / 24%);
-  --rt-overlay-danger-16: rgb(220 38 38 / 16%);
-  --rt-overlay-amber-16: rgb(244 159 90 / 16%);
+  /* Оттенки марки считаются от её ступени, а не повторяют код цвета: повторённое
+     значение расходится с источником молча, и перекрасивший бренд получал бы прежний
+     синий в подложке действия и в кольце фокуса. */
+  --rt-overlay-brand-8: color-mix(in srgb, var(--rt-brand-500) 8%, transparent);
+  --rt-overlay-brand-24: color-mix(in srgb, var(--rt-brand-500) 24%, transparent);
+  --rt-overlay-danger-16: color-mix(in srgb, var(--rt-danger-500) 16%, transparent);
+  --rt-overlay-amber-16: color-mix(in srgb, var(--rt-amber-400) 16%, transparent);
+  /* Подложка окна — синеватая, а не чёрная: окно стоит на странице обвязки, и
+     чёрное затемнение под ним холоднее её синевы. Считается от ступени обвязки
+     по той же причине, что и оттенки марки. */
+  --rt-overlay-navy-70: color-mix(in srgb, var(--rt-navy-900) 70%, transparent);
   /* Z-index */
   --rt-z-base: 0;
   --rt-z-dropdown: 1000;
@@ -208,34 +288,106 @@
   --rt-color-bg-subtle: var(--rt-neutral-100);
   --rt-color-bg-overlay: var(--rt-overlay-black-50);
   --rt-color-bg-inverse: var(--rt-neutral-900);
+  /* Подложка обвязки — шапка и боковая навигация. Отдельно от bg-inverse: тот
+     нейтральный и работает под перевёрнутым текстом, а этот синеватый и в обеих
+     темах один. */
+  --rt-color-bg-nav: var(--rt-navy-900); /* rt-theme-shared: обвязка тёмная в обеих темах */
   /* Text */
   --rt-color-text-primary: var(--rt-neutral-900);
-  --rt-color-text-muted: var(--rt-neutral-500);
+  /* Ступень 600, а не 500: приглушённый текст обязан брать порог, а после
+     пересчёта ряда самая светлая ступень, которая его берёт, — шестисотая.
+     Прежде эту роль держала off-grid ступень 510, заведённая ровно под неё. */
+  --rt-color-text-muted: var(--rt-neutral-600);
   --rt-color-text-disabled: var(--rt-neutral-400);
   --rt-color-text-inverse: var(--rt-neutral-0);
-  --rt-color-text-link: var(--rt-blue-500);
-  --rt-color-text-link-hover: var(--rt-blue-600);
+  --rt-color-text-link: var(--rt-brand-500);
+  --rt-color-text-link-hover: var(--rt-brand-600);
   /* Border */
   --rt-color-border-default: var(--rt-neutral-200);
   --rt-color-border-strong: var(--rt-neutral-300);
   --rt-color-border-subtle: var(--rt-neutral-200);
-  --rt-color-border-focus: var(--rt-blue-500);
-  /* Action */
-  --rt-color-action-primary: var(--rt-blue-500);
-  --rt-color-action-primary-hover: var(--rt-blue-600);
-  --rt-color-action-primary-subtle: var(--rt-overlay-blue-8);
+  --rt-color-border-focus: var(--rt-brand-500);
+  /* Action — роли действия.
+
+     Роль это пятёрка: подложка, наведение, нажатие, подпись на них и цвет самой
+     роли на поверхности. Кнопка берёт роль целиком и своих цветов не знает вовсе,
+     поэтому смена роли — одна строка здесь, а не правка стилей компонента.
+     Наведение и нажатие — соседние ступени своей шкалы; подпись светлая у всех
+     ролей, потому что все подложки тёмные.
+
+     Пятый член — `-on-surface` — красит безфоновые оформления: текстовое и
+     обводочное берут им подпись и рамку. Отдельным именем, а не подложкой роли:
+     подложка вправе быть поверхностью, и у вторичной роли на графите она ею
+     становится — подпись, взятая из подложки, легла бы сама на себя. У пяти ролей
+     цвет тот же, что и у подложки, и это записано ссылкой, а не повтором
+     значения. */
+  --rt-color-action-primary: var(--rt-brand-500); /* rt-theme-shared: цвет марки один в обеих темах */
+  --rt-color-action-primary-hover: var(--rt-brand-600); /* rt-theme-shared: цвет марки один в обеих темах */
+  --rt-color-action-primary-active: var(--rt-brand-700); /* rt-theme-shared: цвет марки один в обеих темах */
+  --rt-color-action-primary-subtle: var(--rt-overlay-brand-8);
   /* Focus-ring tint — насыщеннее subtle, для visible 3px outline. */
-  --rt-color-action-primary-soft: var(--rt-overlay-blue-24);
-  --rt-color-action-on-primary: var(--rt-neutral-0);
-  --rt-color-action-secondary: var(--rt-neutral-200);
-  --rt-color-action-on-secondary: var(--rt-neutral-900);
+  --rt-color-action-primary-soft: var(--rt-overlay-brand-24);
+  --rt-color-action-on-primary: var(--rt-neutral-0); /* rt-theme-shared: подпись на действии марки светлая в обеих темах */
+  --rt-color-action-primary-on-surface: var(--rt-color-action-primary);
+  /* Вторичное действие — единственная роль без своего цвета: она нейтральна и на
+     графите разворачивается в подложку поверхности, поэтому тёмная тема отвечает
+     на всю её тройку. По той же причине пятый член у неё свой: подложкой роли на
+     графите красить подпись нечем. */
+  --rt-color-action-secondary: var(--rt-neutral-600);
+  --rt-color-action-secondary-hover: var(--rt-neutral-700);
+  --rt-color-action-secondary-active: var(--rt-neutral-800);
+  --rt-color-action-on-secondary: var(--rt-neutral-0);
+  --rt-color-action-secondary-on-surface: var(--rt-neutral-600);
+  --rt-color-action-success: var(--rt-success-500); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-success-hover: var(--rt-success-600); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-success-active: var(--rt-success-700); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-on-success: var(--rt-neutral-0); /* rt-theme-shared: подпись на цветной подложке светлая в обеих темах */
+  --rt-color-action-success-on-surface: var(--rt-color-action-success);
+  --rt-color-action-warning: var(--rt-warning-500); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-warning-hover: var(--rt-warning-600); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-warning-active: var(--rt-warning-700); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-on-warning: var(--rt-neutral-0); /* rt-theme-shared: подпись на цветной подложке светлая в обеих темах */
+  --rt-color-action-warning-on-surface: var(--rt-color-action-warning);
+  --rt-color-action-danger: var(--rt-danger-500); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-danger-hover: var(--rt-danger-600); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-danger-active: var(--rt-danger-700); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-on-danger: var(--rt-neutral-0); /* rt-theme-shared: подпись на цветной подложке светлая в обеих темах */
+  --rt-color-action-danger-on-surface: var(--rt-color-action-danger);
+  --rt-color-action-info: var(--rt-info-500); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-info-hover: var(--rt-info-600); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-info-active: var(--rt-info-700); /* rt-theme-shared: цвет роли один в обеих темах */
+  --rt-color-action-on-info: var(--rt-neutral-0); /* rt-theme-shared: подпись на цветной подложке светлая в обеих темах */
+  --rt-color-action-info-on-surface: var(--rt-color-action-info);
+  /* Отключённое действие — своя пара, а не вторичная роль: делить подложку с ней
+     значит сделать отключённую вторичную кнопку неотличимой от доступной. */
+  --rt-color-action-disabled: var(--rt-neutral-200);
+  --rt-color-action-on-disabled: var(--rt-color-text-disabled);
+  /* Доли оттенка под наведение и нажатие безфоновых оформлений кнопки. Живут в
+     слое, а не в стилях компонента: тёмная тема их поднимает, а половина пары,
+     оставшаяся в компоненте, тёмному ответу не видна. */
+  --rt-btn-tint-hover: 8%;
+  --rt-btn-tint-active: 16%;
+  /* Кольцо фокуса разобрано на составляющие: толщину, отступ и цвет. Композит
+     собирается из них и остаётся на месте — восемь компонентов берут его целиком, и
+     менять их незачем. Отступ — зазор цвета поверхности между элементом и кольцом:
+     первая тень при нулевом отступе не рисует ничего. */
+  --rt-focus-ring-width: var(--rt-border-width-thick);
+  /* Ноль с единицей намеренно: безразмерный ноль внутри calc с длиной невалиден, и
+     браузер отбрасывает объявление кольца целиком — кольцо просто пропадает. */
+  --rt-focus-ring-offset: 0px;
+  --rt-focus-ring-color: var(--rt-color-action-primary-soft);
+  --rt-focus-ring-color-danger: var(--rt-overlay-danger-16); /* rt-theme-shared: оттенок опасного действия один в обеих темах */
   /* Focus-ring composite — для interactive элементов с custom focus-visible. */
-  --rt-shadow-focus-ring: 0 0 0 3px var(--rt-color-action-primary-soft);
-  --rt-shadow-focus-ring-danger: 0 0 0 3px var(--rt-overlay-danger-16);
+  --rt-shadow-focus-ring:
+      0 0 0 var(--rt-focus-ring-offset) var(--rt-color-bg-surface),
+      0 0 0 calc(var(--rt-focus-ring-offset) + var(--rt-focus-ring-width)) var(--rt-focus-ring-color);
+  --rt-shadow-focus-ring-danger:
+      0 0 0 var(--rt-focus-ring-offset) var(--rt-color-bg-surface),
+      0 0 0 calc(var(--rt-focus-ring-offset) + var(--rt-focus-ring-width)) var(--rt-focus-ring-color-danger);
   /* Stepper (rt-stepper) — рельса прогресса. Текущий шаг — янтарный (одинаков
      в обеих темах); трек/прогресс переопределяются в dark на приглушённые. */
-  --rt-color-stepper-current: var(--rt-amber-400);
-  --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16);
+  --rt-color-stepper-current: var(--rt-amber-400); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
+  --rt-color-stepper-current-subtle: var(--rt-overlay-amber-16); /* rt-theme-shared: янтарь текущего шага один в обеих темах */
   --rt-color-stepper-track: var(--rt-gray-350);
   --rt-color-stepper-progress: var(--rt-color-action-primary);
   /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
@@ -243,29 +395,32 @@
   /* Status-dot ring — halo вокруг точки «объект занят сейчас». */
   --rt-shadow-status-dot: 0 0 0 3px var(--rt-color-state-success-bg);
   /* State */
-  --rt-color-state-success: var(--rt-success-500);
+  --rt-color-state-success: var(--rt-success-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-success-bg: var(--rt-success-50);
-  --rt-color-state-warning: var(--rt-warning-500);
+  --rt-color-state-warning: var(--rt-warning-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-warning-bg: var(--rt-warning-50);
-  --rt-color-state-danger: var(--rt-danger-500);
+  /* Подпись на подложке предупреждения — ступенью темнее самого статуса: сам
+     статус на своей подложке порога контраста не берёт. Пара к error-text. */
+  --rt-color-state-warning-text: var(--rt-warning-600);
+  --rt-color-state-danger: var(--rt-danger-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-danger-bg: var(--rt-danger-50);
   --rt-color-state-error-text: var(--rt-danger-600);
-  --rt-color-state-info: var(--rt-info-500);
+  --rt-color-state-info: var(--rt-info-500); /* rt-theme-shared: цвет статуса один в обеих темах */
   --rt-color-state-info-bg: var(--rt-info-50);
   /* Chat — пузыри переписки. Входящее и своё различаются фоном, а не рамкой:
      рамка на каждом пузыре дробит ленту. Отметка прочтения синяя — единственный
      цветной элемент подвала пузыря, остальные статусы приглушены. */
-  --rt-chat-bubble-in-bg: var(--rt-blue-50);
-  --rt-chat-bubble-in-author: var(--rt-blue-700);
+  --rt-chat-bubble-in-bg: var(--rt-brand-50);
+  --rt-chat-bubble-in-author: var(--rt-brand-700);
   --rt-chat-bubble-own-bg: var(--rt-neutral-100);
   --rt-chat-bubble-own-author: var(--rt-neutral-500);
   --rt-chat-bubble-date: var(--rt-color-text-muted);
-  --rt-chat-status-read: var(--rt-blue-400);
+  --rt-chat-status-read: var(--rt-brand-400);
   /* Special — Auth surface (gradient bg + transparent card в dark) */
   --rt-color-bg-page-auth: var(--rt-neutral-50);
   --rt-color-bg-surface-auth-card: var(--rt-neutral-0);
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
-  --rt-space-2xs: 2px;
+  --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
   --rt-space-sm: var(--rt-space-2); /* 8px */
   --rt-space-md: var(--rt-space-4); /* 16px */
@@ -274,7 +429,7 @@
   --rt-space-2xl: var(--rt-space-12); /* 48px */
   --rt-space-3xl: var(--rt-space-16); /* 64px */
   /* Text size base — semantic alias для default body text */
-  --rt-text-base: 16px;
+  --rt-text-base: var(--rt-text-md);
   /* Form input — composition tokens. Единый контракт для всего input-семейства
      (rt-input, rt-input-number, rt-autocomplete, rt-select, rt-multiselect,
      rt-textarea). Namespace --rt-input-* / --rt-textarea-*. Компоненты
@@ -298,7 +453,7 @@
   --rt-input-max-width: var(--rt-control-max-width);
   /* Radius / spacing / border */
   --rt-input-radius: var(--rt-radius-lg);
-  --rt-input-padding-x: var(--rt-space-3);
+  --rt-input-padding-x: var(--rt-space-4);
   --rt-input-padding-y: var(--rt-space-0);
   --rt-input-border-width: var(--rt-border-width-thin);
   --rt-input-focus-outline-offset: var(--rt-border-width-thin);
@@ -326,7 +481,7 @@
      набирается табличными цифрами и держит ширину, иначе кнопки прыгают
      при переходе через десяток. */
   --rt-counter-gap: var(--rt-space-sm);
-  --rt-counter-value-min-width: 24px;
+  --rt-counter-value-min-width: var(--rt-size-6);
   --rt-counter-value-font-size: var(--rt-text-md);
   --rt-counter-value-color: var(--rt-color-text-primary);
   --rt-counter-row-gap: var(--rt-space-md);
@@ -341,93 +496,94 @@
   --rt-toggle-color-track-on: var(--rt-color-action-primary);
   --rt-toggle-color-border: var(--rt-color-border-strong);
   --rt-toggle-color-thumb: var(--rt-color-bg-surface);
-  --rt-toggle-color-icon: var(--rt-amber-400);
+  --rt-toggle-color-icon: var(--rt-amber-400); /* rt-theme-shared: янтарь иконки один в обеих темах */
   --rt-toggle-shadow-thumb: var(--rt-shadow-md);
   /* Рамка off-трека — inset-тенью, а не border: у border своя коробка, и
      отступы бегунка с иконками пришлось бы пересчитывать на её толщину. */
   --rt-toggle-shadow-border: inset 0 0 0 var(--rt-border-width-thin) var(--rt-toggle-color-border);
   /* Навигация (rt-page-header). Шапка — отдельная плашка; отступ от краёв
      страницы задаёт тот, кто её ставит. */
-  --rt-nav-header-padding: var(--rt-space-2-5) var(--rt-space-3);
-  --rt-nav-header-color-bg: var(--rt-neutral-150);
+  --rt-nav-header-padding: var(--rt-space-2) var(--rt-space-4);
+  --rt-nav-header-color-bg: var(--rt-neutral-50);
   /* Первый уровень. Пункт ряда несёт плашку цвета самой шапки: на общем фоне её
      не видно, и белым проступает только активный раздел. Наведение красит
      подпись, а не фон — иначе оно спорит с этой подсветкой. */
-  --rt-nav-item-height: 28px;
+  --rt-nav-item-height: var(--rt-size-6);
   --rt-nav-item-gap: var(--rt-space-1);
-  --rt-nav-item-padding: var(--rt-space-1-5) var(--rt-space-2);
-  --rt-nav-item-content-gap: var(--rt-space-1-5);
+  --rt-nav-item-padding: var(--rt-space-2) var(--rt-space-2);
+  --rt-nav-item-content-gap: var(--rt-space-2);
   --rt-nav-item-font-size: var(--rt-text-sm);
   --rt-nav-item-font-weight: var(--rt-font-weight-semibold);
   --rt-nav-item-line-height: var(--rt-leading-none);
   --rt-nav-item-color: var(--rt-color-text-primary);
   --rt-nav-item-color-hover: var(--rt-color-action-primary);
   --rt-nav-item-color-pressed: var(--rt-color-action-primary-hover);
-  --rt-nav-item-color-bg: var(--rt-neutral-150);
-  --rt-nav-item-color-border: var(--rt-neutral-150);
+  --rt-nav-item-color-bg: var(--rt-neutral-50);
+  --rt-nav-item-color-border: var(--rt-neutral-50);
   --rt-nav-item-color-bg-active: var(--rt-color-bg-surface);
-  --rt-nav-item-color-caret: var(--rt-neutral-250);
+  --rt-nav-item-color-caret: var(--rt-neutral-200);
   /* Фокус обведён пунктиром: сплошная рамка на плашке пункта неотличима от его
      же границы. */
   --rt-nav-color-focus: var(--rt-color-action-primary);
   /* Недоступный пункт светлее доступного, а не другого оттенка: общий
      `text-disabled` уходит в сине-стальной и рядом с серой подписью читается
      как второй цвет, а не как выключенное состояние. */
-  --rt-nav-color-disabled: var(--rt-neutral-350);
+  --rt-nav-color-disabled: var(--rt-neutral-300);
   /* Попап профиля. Подложку берёт у панели навигации, своего здесь — габариты
      блока пользователя, тень и набор строк: строк четыре, и они читаются как
      список действий, а не как выпадающее меню. */
-  --rt-profile-menu-min-width: 240px;
+  --rt-profile-menu-min-width: var(--rt-size-60);
   --rt-profile-menu-padding: var(--rt-space-5);
   --rt-profile-menu-shadow: var(--rt-shadow-profile-menu);
-  --rt-profile-avatar-size: 42px;
+  --rt-profile-avatar-size: var(--rt-size-10);
   --rt-profile-avatar-font-size: var(--rt-text-2xl);
-  --rt-profile-item-padding-y: var(--rt-space-3);
-  --rt-profile-item-content-gap: var(--rt-space-2-5);
+  --rt-profile-item-padding-y: var(--rt-space-4);
+  --rt-profile-item-content-gap: var(--rt-space-2);
   --rt-profile-item-font-size: var(--rt-text-md);
   --rt-profile-item-font-weight: var(--rt-font-weight-medium);
   --rt-profile-item-radius: var(--rt-radius-md);
   /* Строки выступают за содержимое панели на половину её отступа: так
      подсветка на наведении не упирается в рамку, а иконка остаётся на одной
      вертикали с содержимым. Это же число — горизонтальный отступ строки. */
-  --rt-profile-row-inset: var(--rt-space-2-5);
+  --rt-profile-row-inset: var(--rt-space-2);
   --rt-profile-theme-icon-padding: var(--rt-space-2);
   /* Габариты панели второго уровня: ширина считается числом колонок, поэтому
      колонка, промежуток и внутренний отступ — токены, из которых панель
      складывает свою ширину. По вертикали отступ крупнее: у первой группы над
      заголовком нет ничего, и панель иначе начинается впритык. */
-  --rt-nav-panel-column-width: 250px;
+  --rt-nav-panel-column-width: var(--rt-size-60);
   --rt-nav-panel-column-gap: var(--rt-space-5);
-  --rt-nav-panel-padding: var(--rt-space-3);
+  --rt-nav-panel-padding: var(--rt-space-4);
   --rt-nav-panel-padding-y: var(--rt-space-md);
-  --rt-nav-panel-group-gap: var(--rt-space-7);
+  --rt-nav-panel-group-gap: var(--rt-space-8);
   --rt-nav-panel-item-gap: var(--rt-space-0-5);
-  --rt-nav-panel-item-height: 24px;
+  --rt-nav-panel-item-height: var(--rt-size-6);
   --rt-nav-panel-item-padding: var(--rt-space-1) var(--rt-space-2);
   --rt-nav-panel-columns: 1;
   --rt-nav-panel-color-bg: var(--rt-color-bg-surface);
-  --rt-nav-panel-color-border: var(--rt-neutral-250);
+  --rt-nav-panel-color-border: var(--rt-neutral-200);
   --rt-nav-panel-shadow: var(--rt-shadow-nav-panel);
   /* Второй уровень набран легче первого: ряд разделов держит вес, а полтора
      десятка пунктов под ним читаются построчно. */
   --rt-nav-panel-item-font-size: var(--rt-text-sm);
   --rt-nav-panel-item-font-weight: var(--rt-font-weight-medium);
   --rt-nav-panel-item-content-gap: var(--rt-space-1);
-  --rt-nav-panel-item-color: var(--rt-neutral-520);
-  --rt-nav-panel-item-color-bg-hover: var(--rt-neutral-150);
+  --rt-nav-panel-item-color: var(--rt-neutral-600);
+  --rt-nav-panel-item-color-bg-hover: var(--rt-neutral-50);
   --rt-nav-panel-item-color-active: var(--rt-color-text-inverse);
   --rt-nav-panel-item-color-bg-active: var(--rt-color-action-primary);
   --rt-nav-panel-group-font-size: var(--rt-text-xs);
   --rt-nav-panel-group-font-weight: var(--rt-font-weight-medium);
-  /* Заголовок группы светлее пункта, но оба берут порог AA на белой панели:
-     4.95:1 у пункта и 4.54:1 у заголовка. */
-  --rt-nav-panel-group-color: var(--rt-neutral-510);
-  --rt-nav-panel-group-content-gap: var(--rt-space-1-5);
+  /* Заголовок группы светлее пункта, и оба берут порог контраста на белой панели.
+     Отношения обеих пар считает проверка тёмной темы; таблица замера — на странице
+     «Colors» витрины. */
+  --rt-nav-panel-group-color: var(--rt-neutral-600);
+  --rt-nav-panel-group-content-gap: var(--rt-space-2);
   /* Маркер непросмотренного. Точка стоит в потоке следом за подписью — и в ряду
      разделов, и в панели, и на узком экране: место ей даёт общий зазор
      содержимого пункта. */
-  --rt-nav-caret-size: 12px;
-  --rt-nav-marker-size: 4px;
+  --rt-nav-caret-size: var(--rt-size-3);
+  --rt-nav-marker-size: var(--rt-size-1);
   --rt-nav-marker-color: var(--rt-color-state-danger);
   /* Form field (rt-field) — обёртка анатомии поля: label / help / hint / error /
      required-маркер / read-only значение. Визуал label+hint в стиле Tailwind
@@ -481,13 +637,13 @@ html.rt-theme-dark {
   --rt-color-text-muted: var(--rt-overlay-white-40);
   --rt-color-text-disabled: var(--rt-overlay-white-25);
   --rt-color-text-inverse: var(--rt-neutral-900);
-  --rt-color-text-link: var(--rt-blue-300);
-  --rt-color-text-link-hover: var(--rt-blue-500);
+  --rt-color-text-link: var(--rt-brand-300);
+  --rt-color-text-link-hover: var(--rt-brand-500);
   /* Border — приглушённые на графите */
   --rt-color-border-default: var(--rt-charcoal-border);
   --rt-color-border-strong: var(--rt-charcoal-border-strong);
   --rt-color-border-subtle: var(--rt-charcoal-border);
-  --rt-color-border-focus: var(--rt-blue-500);
+  --rt-color-border-focus: var(--rt-brand-500);
   /* Input border видим в dark (в light — transparent). */
   --rt-input-color-border: var(--rt-charcoal-border);
   /* Stepper — в dark рельса уходит от яркого синего к приглушённому серо-синему
@@ -502,19 +658,39 @@ html.rt-theme-dark {
   --rt-nav-item-color-bg: var(--rt-charcoal-950);
   --rt-nav-item-color-border: var(--rt-charcoal-950);
   --rt-nav-item-color-bg-active: var(--rt-charcoal-800);
-  --rt-nav-item-color-caret: var(--rt-neutral-520);
+  --rt-nav-item-color-caret: var(--rt-neutral-600);
   --rt-nav-panel-color-bg: var(--rt-charcoal-800);
-  --rt-nav-panel-color-border: var(--rt-neutral-520);
-  --rt-nav-panel-item-color: var(--rt-neutral-280);
+  --rt-nav-panel-color-border: var(--rt-neutral-600);
+  --rt-nav-panel-item-color: var(--rt-neutral-200);
   --rt-nav-panel-item-color-bg-hover: var(--rt-charcoal-950);
-  --rt-nav-panel-group-color: var(--rt-neutral-420);
-  --rt-nav-color-disabled: var(--rt-neutral-520);
-  /* Action — primary остаётся синим в обеих темах */
-  --rt-color-action-primary-subtle: rgb(21 93 252 / 16%);
+  --rt-nav-panel-group-color: var(--rt-neutral-400);
+  --rt-nav-color-disabled: var(--rt-neutral-600);
+  /* Action — сам цвет марки один в обеих темах, а доля оттенка на графите вдвое
+     больше: слабый оттенок на тёмном фоне просто не виден. Считается от ступени
+     бренда, как и в светлой теме. */
+  --rt-color-action-primary-subtle: color-mix(in srgb, var(--rt-brand-500) 16%, transparent);
   /* Focus-ring в dark — ярче для контрастности на тёмных фонах. */
-  --rt-color-action-primary-soft: rgb(21 93 252 / 32%);
+  --rt-color-action-primary-soft: color-mix(in srgb, var(--rt-brand-500) 32%, transparent);
+  /* Вторичное действие нейтрально, и на графите вся его тройка разворачивается:
+     подложка садится на приподнятую поверхность, а наведение и нажатие идут вверх
+     по светлоте, а не вниз, — иначе они тонут в фоне страницы. */
   --rt-color-action-secondary: var(--rt-charcoal-700);
+  --rt-color-action-secondary-hover: var(--rt-charcoal-border);
+  --rt-color-action-secondary-active: var(--rt-charcoal-border-strong);
   --rt-color-action-on-secondary: var(--rt-neutral-50);
+  /* Пятый член роли идёт против всей её тройки: подложка садится на поверхность,
+     а цвет на поверхности обязан от неё оторваться. Ступень нейтрали, а не графита:
+     графит кончается границей, и любая его ступень на карточке даёт меньше двух к
+     одному. Светлая тема красит тем же именем, что и подложку, и разъехаться они
+     могут только здесь. */
+  --rt-color-action-secondary-on-surface: var(--rt-neutral-400);
+  /* Отключённое действие на графите — та же приподнятая поверхность; подпись
+     наследует ответ тёмной темы по ссылке на приглушённый текст. */
+  --rt-color-action-disabled: var(--rt-charcoal-700);
+  /* Оттенок наведения на графите вдвое насыщеннее: слабый след на тёмном фоне
+     не виден — та же причина, что и у оттенка марки выше. */
+  --rt-btn-tint-hover: 16%;
+  --rt-btn-tint-active: 32%;
   /* Soft card-shadow в dark — насыщеннее для отделения от фона. */
   --rt-shadow-card-soft: 0 0 40px rgb(0 0 0 / 25%);
   /* Hover-overlay инвертирован для dark (light overlay поверх тёмного фона). */
@@ -526,22 +702,27 @@ html.rt-theme-dark {
   --rt-toggle-color-track: var(--rt-charcoal-950);
   --rt-toggle-color-thumb: var(--rt-neutral-50);
   --rt-toggle-shadow-thumb: var(--rt-shadow-none);
-  /* State — surfaces под dark + ярче error-text */
-  --rt-color-state-success-bg: rgb(5 150 105 / 12%);
-  --rt-color-state-warning-bg: rgb(217 119 6 / 12%);
-  --rt-color-state-danger-bg: rgb(220 38 38 / 12%);
+  /* State — surfaces под dark + ярче error-text.
+
+     Подложка считается от ступени своего статуса, а не повторяет её код цвета
+     тройкой каналов: повторённое значение расходится с источником молча, и
+     правка ступени оставляла подложку прежней. */
+  --rt-color-state-success-bg: color-mix(in srgb, var(--rt-success-500) 12%, transparent);
+  --rt-color-state-warning-bg: color-mix(in srgb, var(--rt-warning-500) 12%, transparent);
+  --rt-color-state-danger-bg: color-mix(in srgb, var(--rt-danger-500) 12%, transparent);
   --rt-color-state-error-text: var(--rt-danger-500);
-  --rt-color-state-info-bg: rgb(37 99 235 / 12%);
+  --rt-color-state-warning-text: var(--rt-warning-500);
+  --rt-color-state-info-bg: color-mix(in srgb, var(--rt-info-500) 12%, transparent);
   /* Chat — на графите светлые фоны пузырей нечитаемы: входящее уходит в
      полупрозрачный синий, своё — в глубокий графит. */
-  --rt-chat-bubble-in-bg: rgb(37 99 235 / 12%);
-  --rt-chat-bubble-in-author: var(--rt-blue-300);
+  --rt-chat-bubble-in-bg: color-mix(in srgb, var(--rt-brand-500) 12%, transparent);
+  --rt-chat-bubble-in-author: var(--rt-brand-300);
   --rt-chat-bubble-own-bg: var(--rt-charcoal-950);
   --rt-chat-bubble-own-author: var(--rt-overlay-white-40);
   --rt-chat-bubble-date: var(--rt-overlay-white-40);
-  --rt-chat-status-read: var(--rt-blue-300);
+  --rt-chat-status-read: var(--rt-brand-300);
   /* Special — Auth surface (градиентный фон логина + прозрачная карточка). */
-  --rt-color-bg-page-auth: linear-gradient(156deg, #122341 12.68%, #182142 99.28%);
+  --rt-color-bg-page-auth: linear-gradient(156deg, var(--rt-neutral-950) 12.68%, var(--rt-navy-900) 99.28%);
   --rt-color-bg-surface-auth-card: transparent;
 }
 
@@ -550,286 +731,325 @@ html.rt-theme-dark {
    Остальные экраны его не видят — rt-container кроет body непрозрачным фоном
    страницы. Не shorthand `background:`, чтобы не сбросить body{}'ный
    `background-color`. */
-:root[data-theme=dark] body,
-html.rt-theme-dark body {
-  background-attachment: fixed;
-  background-image: linear-gradient(156deg, #122341 12.68%, #182142 99.28%);
+@layer rt-kit.base {
+  :root[data-theme=dark] body,
+  html.rt-theme-dark body {
+    background-attachment: fixed;
+    background-image: linear-gradient(156deg, #122341 12.68%, #182142 99.28%);
+  }
 }
-
 /* rt-logo (чёрный SVG) — инверсия для читаемости на тёмном фоне */
-:root[data-theme=dark] .rt-logo,
-html.rt-theme-dark .rt-logo {
-  filter: invert(1) brightness(1.5);
-}
-
-::-webkit-scrollbar {
-  width: 12px;
-}
-
-::-webkit-scrollbar:horizontal {
-  height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  border: var(--rt-border-width-thick) solid transparent;
-  border-radius: var(--rt-radius-md);
-  background: var(--rt-color-border-default);
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  border: var(--rt-border-width-medium) solid transparent;
-  background: var(--rt-color-border-strong);
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-track:hover {
-  border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
-}
-
-/* rt-* color namespace bridge — мост на семантические --rt-* токены.
-   Живёт здесь, потому что единственный потребитель — `.rt-button` ниже. */
-:root {
-  --rt-color-primary: var(--rt-color-action-primary);
-  --rt-color-primary-hover: var(--rt-color-action-primary-hover);
-  --rt-color-primary-active: var(--rt-color-action-primary-hover);
-  --rt-color-on-primary: var(--rt-color-action-on-primary);
-}
-
-.rt-button {
-  --rt-btn-height: 40px;
-  --rt-btn-padding: 0 1.25rem;
-  --rt-btn-gap: 0.5rem;
-  --rt-btn-radius: 10px;
-  --rt-btn-font-size: 0.95rem;
-  --rt-btn-icon-size: 1rem;
-  --rt-btn-spinner-size: 1rem;
-  --rt-btn-spinner-border-width: 2px;
-  --rt-btn-bg: var(--rt-color-primary, #10b981);
-  --rt-btn-bg-hover: var(--rt-color-primary-hover, #059669);
-  --rt-btn-bg-active: var(--rt-color-primary-active, #047857);
-  --rt-btn-color: var(--rt-color-on-primary, #fff);
-  --rt-btn-border-color: var(--rt-btn-bg);
-  --rt-btn-border-color-hover: var(--rt-btn-bg-hover);
-  --rt-btn-shadow: none;
-  display: inline-flex;
-  height: var(--rt-btn-height);
-  min-height: var(--rt-btn-height);
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  padding: var(--rt-btn-padding);
-  border: var(--rt-border-width-thin) solid var(--rt-btn-border-color);
-  border-radius: var(--rt-btn-radius);
-  margin: 0;
-  background: var(--rt-btn-bg);
-  box-shadow: var(--rt-btn-shadow);
-  color: var(--rt-btn-color);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--rt-btn-font-size);
-  font-weight: var(--rt-font-weight-medium);
-  gap: var(--rt-btn-gap);
-  line-height: var(--rt-leading-none);
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  text-decoration: none;
-  transition: background-color var(--rt-duration-fast), color var(--rt-duration-fast), border-color var(--rt-duration-fast), box-shadow var(--rt-duration-fast);
-  user-select: none;
-  white-space: nowrap;
-}
-.rt-button:hover:not(:disabled) {
-  border-color: var(--rt-btn-border-color-hover);
-  background: var(--rt-btn-bg-hover);
-}
-.rt-button:active:not(:disabled) {
-  background: var(--rt-btn-bg-active);
-}
-.rt-button:focus-visible {
-  box-shadow: var(--rt-shadow-focus-ring);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.rt-button:disabled {
-  --rt-btn-bg: var(--rt-color-disabled, #d1d5db);
-  --rt-btn-bg-hover: var(--rt-color-disabled, #d1d5db);
-  --rt-btn-border-color: var(--rt-color-disabled, #d1d5db);
-  --rt-btn-border-color-hover: var(--rt-color-disabled, #d1d5db);
-  --rt-btn-color: var(--rt-color-on-disabled, #6b7280);
-  cursor: not-allowed;
-}
-.rt-button {
-  /* `flex-shrink: 0` — иконке заданного размера. Без него в кнопке, которой ширину
-     навязали снаружи (пункт меню `rt-split-button` берёт её от панели), лейбл давит
-     на иконку, и та сжимается до нуля: место занято, а иконки не видно. */
-}
-.rt-button__icon {
-  display: inline-flex;
-  width: var(--rt-btn-icon-size);
-  height: var(--rt-btn-icon-size);
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--rt-btn-icon-size);
-}
-.rt-button__label {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-}
-.rt-button__spinner {
-  --rt-btn-spinner-fade-duration: 0.3s;
-  --rt-btn-spinner-rotation-duration: 0.7s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  animation: rt-button-fade-in var(--rt-btn-spinner-fade-duration) both;
-}
-.rt-button__spinner-circle {
-  display: inline-block;
-  width: var(--rt-btn-spinner-size);
-  height: var(--rt-btn-spinner-size);
-  border: var(--rt-btn-spinner-border-width) solid currentcolor;
-  border-radius: var(--rt-radius-full);
-  border-bottom-color: transparent;
-  animation: rt-button-spin var(--rt-btn-spinner-rotation-duration) linear infinite;
-  opacity: 0.85;
-}
-.rt-button--secondary {
-  --rt-btn-bg: var(--rt-color-secondary, #6b7280);
-  --rt-btn-bg-hover: var(--rt-color-secondary-hover, #4b5563);
-  --rt-btn-bg-active: var(--rt-color-secondary-active, #374151);
-}
-.rt-button--success {
-  --rt-btn-bg: var(--rt-color-success, #16a34a);
-  --rt-btn-bg-hover: var(--rt-color-success-hover, #15803d);
-  --rt-btn-bg-active: var(--rt-color-success-active, #166534);
-}
-.rt-button--warning {
-  --rt-btn-bg: var(--rt-color-warning, #f59e0b);
-  --rt-btn-bg-hover: var(--rt-color-warning-hover, #d97706);
-  --rt-btn-bg-active: var(--rt-color-warning-active, #b45309);
-}
-.rt-button--danger {
-  --rt-btn-bg: var(--rt-color-danger, #ef4444);
-  --rt-btn-bg-hover: var(--rt-color-danger-hover, #dc2626);
-  --rt-btn-bg-active: var(--rt-color-danger-active, #b91c1c);
-}
-.rt-button--info {
-  --rt-btn-bg: var(--rt-color-info, #0ea5e9);
-  --rt-btn-bg-hover: var(--rt-color-info-hover, #0284c7);
-  --rt-btn-bg-active: var(--rt-color-info-active, #0369a1);
-}
-.rt-button--outlined {
-  --rt-btn-bg: transparent;
-  --rt-btn-bg-hover: rgb(16 185 129 / 8%);
-  --rt-btn-bg-active: rgb(16 185 129 / 16%);
-  --rt-btn-color: var(--rt-color-primary, #10b981);
-  --rt-btn-border-color: currentcolor;
-  --rt-btn-border-color-hover: currentcolor;
-  --rt-btn-shadow: none;
-}
-.rt-button--outlined.rt-button--secondary {
-  --rt-btn-color: var(--rt-color-secondary, #6b7280);
-}
-.rt-button--outlined.rt-button--success {
-  --rt-btn-color: var(--rt-color-success, #16a34a);
-}
-.rt-button--outlined.rt-button--warning {
-  --rt-btn-color: var(--rt-color-warning, #f59e0b);
-}
-.rt-button--outlined.rt-button--danger {
-  --rt-btn-color: var(--rt-color-danger, #ef4444);
-}
-.rt-button--outlined.rt-button--info {
-  --rt-btn-color: var(--rt-color-info, #0ea5e9);
-}
-.rt-button--text {
-  --rt-btn-bg: transparent;
-  --rt-btn-bg-hover: rgb(16 185 129 / 8%);
-  --rt-btn-bg-active: rgb(16 185 129 / 16%);
-  --rt-btn-color: var(--rt-color-primary, #10b981);
-  --rt-btn-border-color: transparent;
-  --rt-btn-border-color-hover: transparent;
-  --rt-btn-shadow: none;
-}
-.rt-button--text.rt-button--secondary {
-  --rt-btn-color: var(--rt-color-secondary, #6b7280);
-}
-.rt-button--text.rt-button--success {
-  --rt-btn-color: var(--rt-color-success, #16a34a);
-}
-.rt-button--text.rt-button--warning {
-  --rt-btn-color: var(--rt-color-warning, #f59e0b);
-}
-.rt-button--text.rt-button--danger {
-  --rt-btn-color: var(--rt-color-danger, #ef4444);
-}
-.rt-button--text.rt-button--info {
-  --rt-btn-color: var(--rt-color-info, #0ea5e9);
-}
-.rt-button--rounded {
-  --rt-btn-radius: 999px;
-}
-.rt-button--sm {
-  --rt-btn-height: 30px;
-  --rt-btn-padding: 0 0.875rem;
-  --rt-btn-font-size: 0.8125rem;
-  --rt-btn-icon-size: 0.875rem;
-  --rt-btn-spinner-size: 0.875rem;
-}
-.rt-button--lg {
-  --rt-btn-height: 50px;
-  --rt-btn-padding: 0 1.5rem;
-  --rt-btn-font-size: 1.0625rem;
-  --rt-btn-icon-size: 1.125rem;
-  --rt-btn-spinner-size: 1.125rem;
-}
-.rt-button--xl {
-  --rt-btn-height: 60px;
-  --rt-btn-padding: 0 1.75rem;
-  --rt-btn-font-size: 1.125rem;
-  --rt-btn-icon-size: 1.25rem;
-  --rt-btn-spinner-size: 1.25rem;
-}
-.rt-button--2xl {
-  --rt-btn-height: 70px;
-  --rt-btn-padding: 0 2rem;
-  --rt-btn-font-size: 1.1875rem;
-  --rt-btn-icon-size: 1.375rem;
-  --rt-btn-spinner-size: 1.375rem;
-}
-.rt-button--icon-only {
-  width: var(--rt-btn-height);
-  padding: 0;
-  gap: 0;
-}
-.rt-button--icon-only.rt-button--rounded {
-  --rt-btn-radius: 50%;
+@layer rt-kit.base {
+  :root[data-theme=dark] .rt-logo,
+  html.rt-theme-dark .rt-logo {
+    filter: invert(1) brightness(1.5);
+  }
 }
-.rt-button--loading {
-  cursor: wait;
-  pointer-events: none;
+@layer rt-kit.base {
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+  ::-webkit-scrollbar:horizontal {
+    height: 12px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border: var(--rt-border-width-thick) solid transparent;
+    border-radius: var(--rt-radius-md);
+    background: var(--rt-color-border-default);
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    border: var(--rt-border-width-medium) solid transparent;
+    background: var(--rt-color-border-strong);
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-track:hover {
+    border: var(--rt-border-width-thin) solid var(--rt-color-bg-subtle);
+  }
 }
+@layer rt-kit.components {
+  .rt-button {
+    /* Высота приходит общей шкалой контролов, а не своим числом: кнопка, поле и
+       иконочная кнопка одного размера стоят в одной строке и обязаны совпадать. */
+    --rt-btn-height: var(--rt-control-height-md);
+    --rt-btn-padding: 0 1.25rem;
+    --rt-btn-gap: 0.5rem;
+    --rt-btn-radius: var(--rt-radius-lg);
+    --rt-btn-border-width: var(--rt-border-width-thin);
+    --rt-btn-transition-duration: var(--rt-duration-fast);
+    --rt-btn-focus-shadow: var(--rt-shadow-focus-ring);
+    --rt-btn-font-size: 0.95rem;
+    --rt-btn-icon-size: 1rem;
+    --rt-btn-spinner-size: 1rem;
+    --rt-btn-spinner-border-width: var(--rt-border-width-medium);
+    --rt-btn-spinner-radius: var(--rt-radius-full);
+    --rt-btn-bg: var(--rt-color-action-primary);
+    --rt-btn-bg-hover: var(--rt-color-action-primary-hover);
+    --rt-btn-bg-active: var(--rt-color-action-primary-active);
+    --rt-btn-color: var(--rt-color-action-on-primary);
+    --rt-btn-border-color: var(--rt-btn-bg);
+    --rt-btn-border-color-hover: var(--rt-btn-bg-hover);
+    --rt-btn-shadow: none;
+    display: inline-flex;
+    height: var(--rt-btn-height);
+    min-height: var(--rt-btn-height);
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rt-btn-padding);
+    border: var(--rt-btn-border-width) solid var(--rt-btn-border-color);
+    border-radius: var(--rt-btn-radius);
+    margin: 0;
+    background: var(--rt-btn-bg);
+    box-shadow: var(--rt-btn-shadow);
+    color: var(--rt-btn-color);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--rt-btn-font-size);
+    font-weight: var(--rt-font-weight-medium);
+    gap: var(--rt-btn-gap);
+    line-height: var(--rt-leading-none);
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    text-decoration: none;
+    transition: background-color var(--rt-btn-transition-duration), color var(--rt-btn-transition-duration), border-color var(--rt-btn-transition-duration), box-shadow var(--rt-btn-transition-duration);
+    user-select: none;
+    white-space: nowrap;
+  }
+  .rt-button:hover:not(:disabled) {
+    border-color: var(--rt-btn-border-color-hover);
+    background: var(--rt-btn-bg-hover);
+  }
+  .rt-button:active:not(:disabled) {
+    background: var(--rt-btn-bg-active);
+  }
+  .rt-button:focus-visible {
+    box-shadow: var(--rt-btn-focus-shadow);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+  .rt-button {
+    /* `flex-shrink: 0` — иконке заданного размера. Без него в кнопке, которой ширину
+       навязали снаружи (пункт меню `rt-split-button` берёт её от панели), лейбл давит
+       на иконку, и та сжимается до нуля: место занято, а иконки не видно. */
+  }
+  .rt-button__icon {
+    display: inline-flex;
+    width: var(--rt-btn-icon-size);
+    height: var(--rt-btn-icon-size);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--rt-btn-icon-size);
+  }
+  .rt-button__label {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+  .rt-button__spinner {
+    --rt-btn-spinner-fade-duration: 0.3s;
+    --rt-btn-spinner-rotation-duration: 0.7s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    animation: rt-button-fade-in var(--rt-btn-spinner-fade-duration) both;
+  }
+  .rt-button__spinner-circle {
+    display: inline-block;
+    width: var(--rt-btn-spinner-size);
+    height: var(--rt-btn-spinner-size);
+    border: var(--rt-btn-spinner-border-width) solid currentcolor;
+    border-radius: var(--rt-btn-spinner-radius);
+    border-bottom-color: transparent;
+    animation: rt-button-spin var(--rt-btn-spinner-rotation-duration) linear infinite;
+    opacity: 0.85;
+  }
+  .rt-button--secondary {
+    --rt-btn-bg: var(--rt-color-action-secondary);
+    --rt-btn-bg-hover: var(--rt-color-action-secondary-hover);
+    --rt-btn-bg-active: var(--rt-color-action-secondary-active);
+    --rt-btn-color: var(--rt-color-action-on-secondary);
+  }
+  .rt-button--success {
+    --rt-btn-bg: var(--rt-color-action-success);
+    --rt-btn-bg-hover: var(--rt-color-action-success-hover);
+    --rt-btn-bg-active: var(--rt-color-action-success-active);
+    --rt-btn-color: var(--rt-color-action-on-success);
+  }
+  .rt-button--warning {
+    --rt-btn-bg: var(--rt-color-action-warning);
+    --rt-btn-bg-hover: var(--rt-color-action-warning-hover);
+    --rt-btn-bg-active: var(--rt-color-action-warning-active);
+    --rt-btn-color: var(--rt-color-action-on-warning);
+  }
+  .rt-button--danger {
+    --rt-btn-bg: var(--rt-color-action-danger);
+    --rt-btn-bg-hover: var(--rt-color-action-danger-hover);
+    --rt-btn-bg-active: var(--rt-color-action-danger-active);
+    --rt-btn-color: var(--rt-color-action-on-danger);
+  }
+  .rt-button--info {
+    --rt-btn-bg: var(--rt-color-action-info);
+    --rt-btn-bg-hover: var(--rt-color-action-info-hover);
+    --rt-btn-bg-active: var(--rt-color-action-info-active);
+    --rt-btn-color: var(--rt-color-action-on-info);
+  }
+  .rt-button {
+    /* Подложка наведения и нажатия у безфоновых оформлений считается от цвета самой
+       кнопки, а не берётся готовым оттенком: оттенок в слое назначений есть только у
+       марки, и роли danger или success получали бы от него чужой след. Доли вынесены
+       свойствами — на графите слабый оттенок не виден, и тёмная тема их поднимает. */
+  }
+  .rt-button--outlined {
+    --rt-btn-bg: transparent;
+    --rt-btn-bg-hover: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-hover), transparent);
+    --rt-btn-bg-active: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-active), transparent);
+    --rt-btn-color: var(--rt-color-action-primary-on-surface);
+    --rt-btn-border-color: currentcolor;
+    --rt-btn-border-color-hover: currentcolor;
+    --rt-btn-shadow: none;
+  }
+  .rt-button--outlined.rt-button--secondary {
+    --rt-btn-color: var(--rt-color-action-secondary-on-surface);
+  }
+  .rt-button--outlined.rt-button--success {
+    --rt-btn-color: var(--rt-color-action-success-on-surface);
+  }
+  .rt-button--outlined.rt-button--warning {
+    --rt-btn-color: var(--rt-color-action-warning-on-surface);
+  }
+  .rt-button--outlined.rt-button--danger {
+    --rt-btn-color: var(--rt-color-action-danger-on-surface);
+  }
+  .rt-button--outlined.rt-button--info {
+    --rt-btn-color: var(--rt-color-action-info-on-surface);
+  }
+  .rt-button--text {
+    --rt-btn-bg: transparent;
+    --rt-btn-bg-hover: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-hover), transparent);
+    --rt-btn-bg-active: color-mix(in srgb, var(--rt-btn-color) var(--rt-btn-tint-active), transparent);
+    --rt-btn-color: var(--rt-color-action-primary-on-surface);
+    --rt-btn-border-color: transparent;
+    --rt-btn-border-color-hover: transparent;
+    --rt-btn-shadow: none;
+  }
+  .rt-button--text.rt-button--secondary {
+    --rt-btn-color: var(--rt-color-action-secondary-on-surface);
+  }
+  .rt-button--text.rt-button--success {
+    --rt-btn-color: var(--rt-color-action-success-on-surface);
+  }
+  .rt-button--text.rt-button--warning {
+    --rt-btn-color: var(--rt-color-action-warning-on-surface);
+  }
+  .rt-button--text.rt-button--danger {
+    --rt-btn-color: var(--rt-color-action-danger-on-surface);
+  }
+  .rt-button--text.rt-button--info {
+    --rt-btn-color: var(--rt-color-action-info-on-surface);
+  }
+  .rt-button--rounded {
+    --rt-btn-radius: 999px;
+  }
+  .rt-button--sm {
+    --rt-btn-height: var(--rt-control-height-sm);
+    --rt-btn-padding: 0 0.875rem;
+    --rt-btn-font-size: 0.8125rem;
+    --rt-btn-icon-size: 0.875rem;
+    --rt-btn-spinner-size: 0.875rem;
+  }
+  .rt-button--lg {
+    --rt-btn-height: var(--rt-control-height-lg);
+    --rt-btn-padding: 0 1.5rem;
+    --rt-btn-font-size: 1.0625rem;
+    --rt-btn-icon-size: 1.125rem;
+    --rt-btn-spinner-size: 1.125rem;
+  }
+  .rt-button--xl {
+    --rt-btn-height: var(--rt-control-height-xl);
+    --rt-btn-padding: 0 1.75rem;
+    --rt-btn-font-size: 1.125rem;
+    --rt-btn-icon-size: 1.25rem;
+    --rt-btn-spinner-size: 1.25rem;
+  }
+  .rt-button--2xl {
+    --rt-btn-height: var(--rt-control-height-2xl);
+    --rt-btn-padding: 0 2rem;
+    --rt-btn-font-size: 1.1875rem;
+    --rt-btn-icon-size: 1.375rem;
+    --rt-btn-spinner-size: 1.375rem;
+  }
+  .rt-button--icon-only {
+    width: var(--rt-btn-height);
+    padding: 0;
+    gap: 0;
+  }
+  .rt-button--icon-only.rt-button--rounded {
+    --rt-btn-radius: 50%;
+  }
+  .rt-button--loading {
+    cursor: wait;
+    pointer-events: none;
+  }
+  .rt-button {
+    /* Состояние стоит ниже всех вариантов оформления и палитры того же блока.
+       Специфичность у них равная, и правила равной силы разбираются порядком в
+       файле: отсюда, снизу, отключённость отменяет и заливку, и цвет подписи.
+       Стояла она выше — и проигрывала молча: текстовая кнопка получала серую
+       плашку, которой у неё нет ни в одном другом состоянии, а отключённая
+       danger оставалась красной надписью на этой плашке.
 
-@keyframes rt-button-spin {
-  to {
-    transform: rotate(360deg);
+       Поднимать специфичность вместо переноса нельзя: она перебила бы и то, чего
+       перебивать не собирались, — размер, скругление и свои свойства потребителя. */
   }
-}
-@keyframes rt-button-fade-in {
-  from {
-    opacity: 0;
+  .rt-button:disabled {
+    --rt-btn-bg: var(--rt-color-action-disabled);
+    --rt-btn-bg-hover: var(--rt-color-action-disabled);
+    --rt-btn-bg-active: var(--rt-color-action-disabled);
+    --rt-btn-border-color: var(--rt-color-action-disabled);
+    --rt-btn-border-color-hover: var(--rt-color-action-disabled);
+    --rt-btn-color: var(--rt-color-action-on-disabled);
+    cursor: not-allowed;
   }
-  to {
-    opacity: 1;
+  .rt-button {
+    /* Безфоновым оформлениям отключённость фона не даёт: его у них нет ни в одном
+       другом состоянии, и серая плашка читалась бы как подсветка, а не как
+       недоступность. Остаётся приглушённая подпись, а обводочной — спокойная рамка
+       вместо цвета своей роли. */
   }
-}
-@keyframes rt-button-fade-out {
-  from {
-    opacity: 1;
+  .rt-button--outlined:disabled, .rt-button--text:disabled {
+    --rt-btn-bg: transparent;
+    --rt-btn-bg-hover: transparent;
+    --rt-btn-bg-active: transparent;
+  }
+  .rt-button--outlined:disabled {
+    --rt-btn-border-color: var(--rt-color-border-default);
+    --rt-btn-border-color-hover: var(--rt-color-border-default);
+  }
+  .rt-button--text:disabled {
+    --rt-btn-border-color: transparent;
+    --rt-btn-border-color-hover: transparent;
+  }
+  @keyframes rt-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rt-button-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-  to {
-    opacity: 0;
+  @keyframes rt-button-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
   }
 }