@rt-tools/ui-kit-v2 0.1.0

package/styles/tokens.css

@@ -0,0 +1,810 @@
+@charset "UTF-8";
+/* Primitive design tokens — single source of truth для шкал. */
+:root {
+  /* Neutral scale — серо-сине-стальная. */
+  --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;
+  /* Charcoal — тёплый графит для тёмной темы. */
+  --rt-charcoal-950: #17181c; /* глубокий фон / приподнятая alt-поверхность, subtle */
+  --rt-charcoal-900: #1b1f22; /* фон страницы */
+  --rt-charcoal-800: #222629; /* основная поверхность / карточка */
+  --rt-charcoal-700: #2a2f33; /* hover / приподнятая поверхность / secondary action */
+  --rt-charcoal-border: #33383d; /* граница по умолчанию */
+  --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 */
+  --rt-success-50: #ecfdf5;
+  --rt-success-100: #eafaf5;
+  --rt-success-500: #059669;
+  --rt-success-600: #047857;
+  --rt-success-700: #088e63;
+  --rt-warning-50: #fffbeb;
+  --rt-warning-500: #d97706;
+  --rt-warning-600: #b45309;
+  --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-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;
+  --rt-space-16: 64px;
+  --rt-space-20: 80px;
+  --rt-space-24: 96px;
+  /* Radius */
+  --rt-radius-none: 0;
+  --rt-radius-xs: 2px;
+  --rt-radius-sm: 4px;
+  --rt-radius-ms: 6px;
+  --rt-radius-md: 8px;
+  --rt-radius-lg: 10px;
+  --rt-radius-xl: 15px;
+  --rt-radius-2xl: 20px;
+  --rt-radius-full: 9999px;
+  /* Typography — font-family */
+  /* Noto-начертания идут после Montserrat запасными: они подхватывают тайский,
+     хангыль и деванагари, которых в основном шрифте нет, и не трогают латиницу
+     с кириллицей — браузер берёт из них только недостающие знаки. */
+  --rt-font-family-sans: 'Montserrat', 'Noto Sans Thai', 'Noto Sans KR', 'Noto Sans Devanagari', system-ui, sans-serif;
+  --rt-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
+  /* Typography — text size scale */
+  /* Ступень ниже 2xs — только для узких экранов: цена в клетке календаря
+     набрана неразрывным пробелом и не переносится, поэтому семь колонок
+     упираются в ширину строки, а не в отступы */
+  --rt-text-3xs: 9px;
+  --rt-text-2xs: 10px;
+  --rt-text-xs: 12px;
+  --rt-text-sm: 14px;
+  --rt-text-md: 16px;
+  --rt-text-lg: 18px;
+  --rt-text-xl: 20px;
+  --rt-text-2xl: 24px;
+  --rt-text-3xl: 32px;
+  --rt-text-4xl: 40px;
+  /* Typography — line-height */
+  --rt-leading-none: 1;
+  --rt-leading-tight: 1.2;
+  --rt-leading-snug: 1.35;
+  --rt-leading-normal: 1.5;
+  --rt-leading-relaxed: 1.65;
+  /* Typography — font-weight */
+  --rt-font-weight-regular: 400;
+  --rt-font-weight-medium: 500;
+  --rt-font-weight-semibold: 600;
+  --rt-font-weight-bold: 700;
+  /* Shadows — shadow-card литерал (НЕ алиас на shadow-md) */
+  --rt-shadow-none: none;
+  --rt-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
+  --rt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 6%);
+  --rt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 6%);
+  --rt-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 12%), 0 8px 10px -6px rgb(0 0 0 / 8%);
+  --rt-shadow-card: 0 4px 16px rgb(0 0 0 / 8%);
+  /* Soft glow shadow для карточек/секций — широкое размытие. */
+  --rt-shadow-card-soft: 0 0 40px rgb(0 0 0 / 10%);
+  /* Тень панели навигации — три слоя от плотного к рассеянному: панель на
+     полтора экрана шириной должна отделяться от страницы без тёмной кромки. */
+  --rt-shadow-nav-panel: 0 8px 24px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 4%), 0 16px 48px rgb(0 0 0 / 2%);
+  /* Тень попапа профиля — один плотный слой: панель узкая, и рассеянные слои
+     панели навигации размазывают её край вместо того, чтобы его очертить. */
+  --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;
+  --rt-control-textarea-min-height-sm: 80px;
+  --rt-control-textarea-min-height-md: 120px;
+  --rt-control-textarea-min-height-lg: 160px;
+  --rt-control-panel-max-height: 256px;
+  --rt-control-max-width: 400px;
+  /* Opacity states */
+  --rt-opacity-disabled: 0.6;
+  /* Motion */
+  --rt-duration-fast: 120ms;
+  --rt-duration-base: 200ms;
+  --rt-duration-slow: 400ms;
+  --rt-duration-slower: 500ms;
+  /* Typography helpers */
+  --rt-letter-spacing-wide: 0.03em;
+  /* Border-width */
+  --rt-border-width-thin: 1px;
+  --rt-border-width-medium: 2px;
+  --rt-border-width-thick: 3px;
+  /* Alpha overlays — для backdrop'ов и focus-ring tint'ов. */
+  --rt-overlay-black-4: rgb(0 0 0 / 4%);
+  --rt-overlay-white-4: rgb(255 255 255 / 4%);
+  --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%);
+  /* Z-index */
+  --rt-z-base: 0;
+  --rt-z-dropdown: 1000;
+  --rt-z-sticky: 1100;
+  --rt-z-fixed: 1200;
+  --rt-z-modal-backdrop: 1300;
+  --rt-z-modal: 1400;
+  --rt-z-popover: 1500;
+  --rt-z-tooltip: 1600;
+  /* Breakpoints — справочные CSS-vars (для JS-чтения `getComputedStyle`);
+     реальные media queries используют SCSS-переменные из `_breakpoints.scss`. */
+  --rt-bp-sm: 480px;
+  --rt-bp-md: 768px;
+  --rt-bp-lg: 1080px;
+  --rt-bp-xl: 1380px;
+}
+
+/* Semantic design tokens — light defaults. */
+:root {
+  /* Background */
+  --rt-color-bg-page: var(--rt-neutral-50);
+  --rt-color-bg-surface: var(--rt-neutral-0);
+  --rt-color-bg-surface-subtle: var(--rt-neutral-100);
+  --rt-color-bg-surface-subtle-2: var(--rt-neutral-200);
+  --rt-color-bg-hover: var(--rt-neutral-100);
+  --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);
+  /* Text */
+  --rt-color-text-primary: var(--rt-neutral-900);
+  --rt-color-text-muted: var(--rt-neutral-500);
+  --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);
+  /* 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);
+  /* 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);
+  /* 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);
+  /* 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-track: var(--rt-gray-350);
+  --rt-color-stepper-progress: var(--rt-color-action-primary);
+  /* Step-indicator ring — halo вокруг активного пункта rt-stepper. */
+  --rt-shadow-step-indicator: 0 0 0 4px var(--rt-color-stepper-current-subtle);
+  /* 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-bg: var(--rt-success-50);
+  --rt-color-state-warning: var(--rt-warning-500);
+  --rt-color-state-warning-bg: var(--rt-warning-50);
+  --rt-color-state-danger: var(--rt-danger-500);
+  --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-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-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);
+  /* 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-xs: var(--rt-space-1); /* 4px */
+  --rt-space-sm: var(--rt-space-2); /* 8px */
+  --rt-space-md: var(--rt-space-4); /* 16px */
+  --rt-space-lg: var(--rt-space-6); /* 24px */
+  --rt-space-xl: var(--rt-space-8); /* 32px */
+  --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;
+  /* Form input — composition tokens. Единый контракт для всего input-семейства
+     (rt-input, rt-input-number, rt-autocomplete, rt-select, rt-multiselect,
+     rt-textarea). Namespace --rt-input-* / --rt-textarea-*. Компоненты
+     потребляют ТОЛЬКО эти токены, не primitives и не литералы. */
+  /* Colors */
+  --rt-input-color-bg: var(--rt-color-bg-surface-subtle);
+  --rt-input-color-bg-disabled: var(--rt-color-bg-surface-subtle);
+  --rt-input-color-bg-hover: var(--rt-overlay-black-4);
+  --rt-input-color-border: var(--rt-color-border-default);
+  --rt-input-color-border-focus: var(--rt-color-action-primary);
+  --rt-input-color-border-error: var(--rt-color-state-danger);
+  --rt-input-color-text: var(--rt-color-text-primary);
+  --rt-input-color-text-placeholder: var(--rt-color-text-muted);
+  /* Sizes (single-line height scale) */
+  --rt-input-height-sm: var(--rt-control-height-sm);
+  --rt-input-height-md: var(--rt-control-height-md);
+  --rt-input-height-lg: var(--rt-control-height-lg);
+  --rt-input-height: var(--rt-input-height-md);
+  /* Кап ширины одиночного контрола (input/select) в тулбарах list-страниц —
+     внутри flex-баров контрол без ограничения растягивается на всю строку. */
+  --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-y: var(--rt-space-0);
+  --rt-input-border-width: var(--rt-border-width-thin);
+  --rt-input-focus-outline-offset: var(--rt-border-width-thin);
+  /* Typography */
+  --rt-input-font-size: var(--rt-text-sm);
+  --rt-input-line-height: var(--rt-leading-none);
+  /* State / motion */
+  --rt-input-disabled-opacity: var(--rt-opacity-disabled);
+  --rt-input-focus-shadow: var(--rt-shadow-focus-ring);
+  --rt-input-focus-shadow-error: var(--rt-shadow-focus-ring-danger);
+  --rt-input-transition: border-color var(--rt-duration-fast) ease, box-shadow var(--rt-duration-fast) ease;
+  /* Textarea overrides (multi-line) */
+  --rt-textarea-min-height-sm: var(--rt-control-textarea-min-height-sm);
+  --rt-textarea-min-height-md: var(--rt-control-textarea-min-height-md);
+  --rt-textarea-min-height-lg: var(--rt-control-textarea-min-height-lg);
+  --rt-textarea-min-height: var(--rt-textarea-min-height-md);
+  --rt-textarea-padding-y: var(--rt-space-sm);
+  --rt-textarea-line-height: var(--rt-leading-snug);
+  /* Dropdown panel (select / multiselect / autocomplete popup). */
+  --rt-input-panel-max-height: var(--rt-control-panel-max-height);
+  /* Icon-button hover-overlay — отдельный namespace (вне input-family),
+     тот же primitive-источник. */
+  --rt-icon-button-color-bg-hover: var(--rt-overlay-black-4);
+  /* Counter (rt-counter) и строка вокруг него (rt-counter-row). Значение
+     набирается табличными цифрами и держит ширину, иначе кнопки прыгают
+     при переходе через десяток. */
+  --rt-counter-gap: var(--rt-space-sm);
+  --rt-counter-value-min-width: 24px;
+  --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);
+  --rt-counter-row-padding-y: var(--rt-space-md);
+  --rt-counter-row-color-border: var(--rt-color-border-subtle);
+  --rt-counter-row-label-font-size: var(--rt-text-md);
+  --rt-counter-row-label-color: var(--rt-color-text-primary);
+  --rt-counter-row-hint-font-size: var(--rt-text-sm);
+  --rt-counter-row-hint-color: var(--rt-color-text-muted);
+  /* Toggle-switch (rt-toggle-switch) — трек, бегунок и иконки состояния. */
+  --rt-toggle-color-track: var(--rt-color-bg-surface-subtle-2);
+  --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-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-item-height: 28px;
+  --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-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-active: var(--rt-color-bg-surface);
+  --rt-nav-item-color-caret: var(--rt-neutral-250);
+  /* Фокус обведён пунктиром: сплошная рамка на плашке пункта неотличима от его
+     же границы. */
+  --rt-nav-color-focus: var(--rt-color-action-primary);
+  /* Недоступный пункт светлее доступного, а не другого оттенка: общий
+     `text-disabled` уходит в сине-стальной и рядом с серой подписью читается
+     как второй цвет, а не как выключенное состояние. */
+  --rt-nav-color-disabled: var(--rt-neutral-350);
+  /* Попап профиля. Подложку берёт у панели навигации, своего здесь — габариты
+     блока пользователя, тень и набор строк: строк четыре, и они читаются как
+     список действий, а не как выпадающее меню. */
+  --rt-profile-menu-min-width: 240px;
+  --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-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-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-theme-icon-padding: var(--rt-space-2);
+  /* Габариты панели второго уровня: ширина считается числом колонок, поэтому
+     колонка, промежуток и внутренний отступ — токены, из которых панель
+     складывает свою ширину. По вертикали отступ крупнее: у первой группы над
+     заголовком нет ничего, и панель иначе начинается впритык. */
+  --rt-nav-panel-column-width: 250px;
+  --rt-nav-panel-column-gap: var(--rt-space-5);
+  --rt-nav-panel-padding: var(--rt-space-3);
+  --rt-nav-panel-padding-y: var(--rt-space-md);
+  --rt-nav-panel-group-gap: var(--rt-space-7);
+  --rt-nav-panel-item-gap: var(--rt-space-0-5);
+  --rt-nav-panel-item-height: 24px;
+  --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-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-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);
+  /* Маркер непросмотренного. Точка стоит в потоке следом за подписью — и в ряду
+     разделов, и в панели, и на узком экране: место ей даёт общий зазор
+     содержимого пункта. */
+  --rt-nav-caret-size: 12px;
+  --rt-nav-marker-size: 4px;
+  --rt-nav-marker-color: var(--rt-color-state-danger);
+  /* Form field (rt-field) — обёртка анатомии поля: label / help / hint / error /
+     required-маркер / read-only значение. Визуал label+hint в стиле Tailwind
+     form (мелкий medium label, muted hint). Компоненты потребляют только эти
+     токены. */
+  --rt-field-gap: var(--rt-space-xs);
+  --rt-field-label-font-size: var(--rt-text-sm);
+  --rt-field-label-font-weight: var(--rt-font-weight-medium);
+  --rt-field-label-color: var(--rt-color-text-muted);
+  --rt-field-label-help-gap: var(--rt-space-xs);
+  --rt-field-hint-font-size: var(--rt-text-xs);
+  --rt-field-hint-color: var(--rt-color-text-muted);
+  --rt-field-error-font-size: var(--rt-text-xs);
+  --rt-field-error-color: var(--rt-color-state-danger);
+  --rt-field-required-color: var(--rt-color-state-danger);
+  --rt-field-value-font-size: var(--rt-text-sm);
+  --rt-field-value-color: var(--rt-color-text-primary);
+  --rt-field-value-empty-color: var(--rt-color-text-muted);
+}
+
+/* На тач-устройствах инпут не меньше 16px: WebKit (весь iOS, включая Chrome)
+   зумит страницу при фокусе на поле с font-size < 16px — отсюда горизонтальный
+   сдвиг вёрстки. Десктоп сохраняет плотный 14px. */
+@media (pointer: coarse) {
+  :root {
+    --rt-input-font-size: var(--rt-text-md);
+  }
+}
+/* Dark theme — переопределение СЕМАНТИЧЕСКИХ токенов (примитивы неизменны).
+
+   Тело токенов вынесено в @mixin, чтобы тот же набор переопределений можно было
+   применить не только на html-уровне (тема приложения), но и к локальному
+   контейнеру (side-by-side light/dark в Storybook) — без дублирования значений.
+
+   База (`rt-theme-dark-tokens`) — тёплый графит для приложений и всех
+   CDK-overlay'ев (асайды/диалоги/меню рендерятся на уровне body, вне
+   host-классов шеллов — поэтому графит держим на :root, иначе overlay'и
+   не наследовали бы палитру). */
+:root[data-theme=dark],
+html.rt-theme-dark {
+  /* Background — тёплый графит */
+  --rt-color-bg-page: var(--rt-charcoal-900);
+  --rt-color-bg-surface: var(--rt-charcoal-800);
+  --rt-color-bg-surface-subtle: var(--rt-charcoal-950);
+  --rt-color-bg-hover: var(--rt-charcoal-700);
+  --rt-color-bg-subtle: var(--rt-charcoal-950);
+  --rt-color-bg-overlay: rgb(0 0 0 / 70%);
+  --rt-color-bg-inverse: var(--rt-neutral-0);
+  /* Text — почти белый на графите */
+  --rt-color-text-primary: var(--rt-neutral-50);
+  --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);
+  /* 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);
+  /* Input border видим в dark (в light — transparent). */
+  --rt-input-color-border: var(--rt-charcoal-border);
+  /* Stepper — в dark рельса уходит от яркого синего к приглушённому серо-синему
+     (текущий шаг остаётся янтарным из light-семантики). */
+  --rt-color-stepper-track: var(--rt-navy-600);
+  --rt-color-stepper-progress: var(--rt-slate-300);
+  /* Навигация — вся шкала серых разворачивается: подложка уходит глубже
+     поверхности, а приглушённые подписи становятся светлее фона, а не темнее.
+     Плашка шапки садится на глубокий графит, активный пункт поднимается на
+     поверхность карточки — то же отношение, что и в светлой теме. */
+  --rt-nav-header-color-bg: var(--rt-charcoal-950);
+  --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-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-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%);
+  /* Focus-ring в dark — ярче для контрастности на тёмных фонах. */
+  --rt-color-action-primary-soft: rgb(21 93 252 / 32%);
+  --rt-color-action-secondary: var(--rt-charcoal-700);
+  --rt-color-action-on-secondary: var(--rt-neutral-50);
+  /* Soft card-shadow в dark — насыщеннее для отделения от фона. */
+  --rt-shadow-card-soft: 0 0 40px rgb(0 0 0 / 25%);
+  /* Hover-overlay инвертирован для dark (light overlay поверх тёмного фона). */
+  --rt-input-color-bg-hover: var(--rt-overlay-white-4);
+  --rt-icon-button-color-bg-hover: var(--rt-overlay-white-4);
+  /* Toggle-switch — трек уходит в подложку, а бегунок остаётся светлым:
+     общий bg-surface на обоих слил бы их в один силуэт. Тень на графите
+     не работает, роль разделителя берёт на себя контраст. */
+  --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%);
+  --rt-color-state-error-text: var(--rt-danger-500);
+  --rt-color-state-info-bg: rgb(37 99 235 / 12%);
+  /* Chat — на графите светлые фоны пузырей нечитаемы: входящее уходит в
+     полупрозрачный синий, своё — в глубокий графит. */
+  --rt-chat-bubble-in-bg: rgb(37 99 235 / 12%);
+  --rt-chat-bubble-in-author: var(--rt-blue-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);
+  /* Special — Auth surface (градиентный фон логина + прозрачная карточка). */
+  --rt-color-bg-page-auth: linear-gradient(156deg, #122341 12.68%, #182142 99.28%);
+  --rt-color-bg-surface-auth-card: transparent;
+}
+
+/* Body-level градиент — подложка экранов авторизации: их вьюпорт прозрачен
+   (`--rt-color-bg-surface-auth-card: transparent`) и просвечивает body.
+   Остальные экраны его не видят — 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%);
+}
+
+/* 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__icon {
+  display: inline-flex;
+  width: var(--rt-btn-icon-size);
+  height: var(--rt-btn-icon-size);
+  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--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;
+}
+
+@keyframes rt-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rt-button-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes rt-button-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}