adata-ui 2.1.41-beta.1 → 2.1.41

package/vitest.config.ts

@@ -1,14 +1,14 @@
-import { defineVitestConfig } from '@nuxt/test-utils/config'
-
-export default defineVitestConfig({
-  test: {
-    globals: true,
-    environment: 'nuxt',
-    coverage: {
-      enabled: true,
-      provider: 'v8',
-      reportsDirectory: './tests/coverage',
-      reporter: ['html']
-    }
-  }
-})
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+  test: {
+    globals: true,
+    environment: 'nuxt',
+    coverage: {
+      enabled: true,
+      provider: 'v8',
+      reportsDirectory: './tests/coverage',
+      reporter: ['html']
+    }
+  }
+})

package/CLAUDE.md

@@ -1,63 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Что это
-
-adata-ui — UI-кит проектов adata.kz, оформленный как **Nuxt 3 layer** (`main` = `nuxt.config.ts`, публикуется npm-пакетом `adata-ui`). Консьюмеры (pk-frontend) подключают его через `extends` и автоматически получают компоненты, Tailwind и стили. Разработка и просмотр компонентов — в `.playground` (extends `'..'`).
-
-Ветка `tailwind-v4` (2026-07) — миграция на Tailwind v4 + новая палитра + тёмная тема на семантических токенах; `predesign` ещё на v3. pk-frontend мигрирован на v4/семантику (ветка ADTC-8931, extends `'../adata-ui'`); `deepblue` удалён из theme.css после его миграции (2026-07-28). Каталог `docs/` удалён из дерева; реестр миграции — в git-истории: `git show 69039ec:docs/color-migration.md`.
-
-## Команды
-
-- `pnpm dev` — dev-сервер playground; `pnpm build` — сборка playground.
-- Тесты: сейчас тестовых файлов в репо нет (vitest-инфраструктура осталась). Если появятся: `npx vitest run --coverage.enabled=false`. НЕ `pnpm test` (открывает UI). Флаг обязателен: coverage сломан (в devDeps `@vitest/coverage-v8` 1.6.x при vitest 3.x). Один файл: `npx vitest run <путь-к-файлу> --coverage.enabled=false`.
-- `pnpm lint` / `pnpm type-check` — в репо большой предсуществующий долг (тысячи style-ошибок, десятки type-ошибок в нетронутых файлах). Проверяй точечно только изменённые файлы: `npx eslint <files>`.
-- Скомпилированный Tailwind после `pnpm build` искать в `.playground/.output/server/chunks/build/entry-styles.*.mjs` — Nuxt инлайнит глобальный CSS в SSR-бандл; клиентский `entry.css` содержит только библиотечные стили (это норма, не баг).
-
-## Архитектура слоя
-
-- Компоненты авто-регистрируются с префиксами: `components/` → `<a-*>`, `icons/` → `<a-icon-*>`, `illustrations/` → `<a-ill-*>` (имя из имени файла, `pathPrefix: false`; в шаблонах только kebab-case — eslint-правило).
-- Алиас `#adata-ui` → корень репо.
-- Tailwind v4 подключён на уровне слоя: vite-плагин в `vite.plugins` конфига слоя, CSS-вход `assets/styles/main.css` через `css:` слоя. Консьюмерам и playground настраивать нечего. **Никогда не добавляй второй `@import "tailwindcss"`** — второй tailwind-корень = дубли утилит.
-- `utils/twMerge.ts` — расширенный tailwind-merge (знает кастомный `rounded-10` и `text-*`-токены ДС) — использовать его, а не голый `twMerge` из пакета.
-
-## Дизайн-система (Tailwind v4, CSS-first)
-
-Вся конфигурация — в `assets/styles/theme.css` (`tailwind.config` не существует). Реестр миграции, маппингов и осознанных исключений — в git-истории (docs/ удалён): `git show 69039ec:docs/color-migration.md`.
-
-### Палитра
-
-- Стоковая палитра Tailwind v4 + фирменные: `brand` (500 = #068DFF), `secondary` (500 = #2C3E50), `chart-{amber,blue,green,red}`, `surface-dark`/`surface-dark-2`, `base-bg-light`/`base-bg-dark`. Deprecated-группы (`ink-*`, `deepblue-*`) удалены — использовать семантику.
-- Сырые hex запрещены: классы палитры/семантики в разметке, `var(--…-*)` в `<style>`. Никаких `style="color: #…"`. Исключения (логотипы `icons/company/`, `.bg-gradient-blue`, тени `#1B64B3`, error-тултип ATooltip) перечислены в реестре: `git show 69039ec:docs/color-migration.md`.
-
-### Тёмная тема — семантические токены
-
-- **Примитивные шкалы (`gray-*`, `red-*`, `brand-*`, `secondary-*`, `white`/`black`) константны в обеих темах.** Под `.dark` переключаются только семантические токены (блоки `@generated-semantic-colors[-dark]` в theme.css, источник — Figma-артефакт «Семантические цвета»).
-- В новом коде цвета задавать семантикой: `text-primary/secondary/quaternary/disabled/brand/link/success/warning/danger`, `bg-main/subtle/muted/overlay/badge/brand[-subtle]/{success,warning,danger,red…rose}[-subtle]`, `border-default/strong/focus/brand/…`, `bg-action-{primary,secondary,danger}[-hover|-active]` + `text-action-*-fg`, `text/fill/stroke-icon-*`, `fill-main`/`stroke-main` (флип белых заливок иллюстраций). Реестр и маппинг — `git show 69039ec:docs/color-migration.md`.
-- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим); «утопленная» зона (инпуты, плитки, «экраны» иллюстраций) — `bg-canvas` (dark #0F0F10 — глубже `bg-main`; прежний сине-серый #1E2939 заменён аудитом семантических цветов 2026-08).
-- **Пара иконка+плитка**: цвет `text-icon-{цвет}` всегда идёт с плиткой `bg-{цвет}-subtle` того же оттенка — колор-кодирование блоков (лендинги, карточки модулей) строится только так.
-- Примитив в разметке легален, когда цвет должен быть одинаков в темах: инвертированные поверхности (`bg-secondary-500` футера/тултипов), белый декор на цветном (`bg-white` точки/бегунки), `chart-*`, `surface-dark*`. Цветовые `dark:`-классы разрешены для краевых случаев без токена (`dark:bg-white/5`-тинты и т.п.).
-- Для ring/outline border-токены доступны var-синтаксисом: `ring-(--border-color-default)`, `outline-(--border-color-danger)/60`.
-- В `<style>`-блоках: `var(--text-color-*)`, `var(--background-color-*)`, `var(--border-color-*)`, `var(--color-action-*|icon-*)`; полупрозрачность — `color-mix(in srgb, var(--…) N%, transparent)`. `theme('colors…')` в v4 не работает. **Не вешать `/N` на полупрозрачные токены** (`bg-subtle`, `bg-overlay`, dark `brand-subtle`/`danger-subtle`) — альфа перемножается.
-- Цветные тени: форма и цвет раздельно — `shadow-[0_-2px_8px_0] shadow-gray-400/25`; разная плотность по темам — `shadow-surface-dark/10 dark:shadow-surface-dark/30`.
-
-### Типографика и радиусы
-
-- Токены `text-h1…text-h5`, `text-display-{hero,lg,sm}`, `text-body-{lg,md,sm}[-medium|-strong]`, `text-overline[-medium]` — размер + межстрочный + вес одним классом.
-- Легаси-классы `.heading-*`, `.body-400`, `.link-*` и пр. живут в theme.css `@layer components` — для старого дизайна; в новом коде использовать `text-*`-токены.
-- Шкала скруглений кастомная (не v4-дефолт): `rounded` = 4px, xs = 4, sm = 6, md = 8, `rounded-10` = 10px, lg = 12, xl = 16, 2xl = 20.
-
-### Динамические классы
-
-Сканер не видит собранные в рантайме классы (`bg-${color}-…`) — такие семьи/оттенки/утилиты должны быть в safelist `@source inline(…)` в theme.css. Расширяй его при добавлении новой динамики.
-
-### Изменение палитры из Figma
-
-Светлый блок примитивов между маркерами `@generated-colors:*` сгенерирован из Figma-экспортов (DTCG). Генератор и токен-JSONы удалены из дерева — восстановить: `git show 8862721:scripts/generate-theme-colors.mjs` (там же `scripts/design-tokens/*.tokens.json`); исходники продублированы в `git show 69039ec:docs/update-plan.md` (docs/ удалён из дерева). Семантические блоки `@generated-semantic-colors[-dark]:*` этим генератором НЕ покрываются — их источник — Figma-артефакт «Семантические цвета»; актуальные значения живут в самих блоках theme.css, регенерация = дамп таблицы артефакта между маркерами.
-
-## Грабли окружения
-
-- `rg` на машине разработчика — shell-функция: в скриптах/подпроцессах использовать `grep`.
-- В репо есть путь с кириллической буквой (`components/features/сhange-version/`) — `git ls-files` только с `-z`.
-- Каталог `docs/` удалён из дерева (доступен через git show, см. выше), поэтому строки `@source not "../../docs";` в main.css больше нет. Если docs/ с именами старых классов вернётся — вернуть и исключение, иначе сканер Tailwind сгенерирует по ним мёртвый CSS.

package/assets/styles/main.css

@@ -1,12 +0,0 @@
-/* CSS-вход adata-ui. Подключать его обязан КОНСЬЮМЕР (css: в своём nuxt.config),
-   а не слой: у слоя из node_modules Nuxt дописывает авто-импорты в сам CSS и
-   ломает dev-SSR. Свой @import "tailwindcss" в приложении не заводить —
-   будет второй tailwind-корень и дубли утилит. */
-@import "tailwindcss";
-@import "./theme.css";
-@import "./ui.css";
-
-/* Слой всегда в скане: сам он лежит в node_modules консьюмера и дефолтной
-   базой (корень приложения) не покрывается. Путь от этого файла. */
-@source "../..";
-

package/assets/styles/theme.css

@@ -1,583 +0,0 @@
-@custom-variant dark (&:where(.dark, .dark *));
-
-@source inline("{,hover:}bg-{brand,blue,green,yellow,red,orange,purple}-{400,500,600,700,900}/{10,20}");
-/* Класс инжектится в рантайме composables/highlight.ts — сканеру не виден. */
-@source inline("bg-yellow-subtle");
-
-@theme static {
-  --font-sans: "Open Sans", sans-serif;
-
-  /* Точка, с которой лендинги ДС-2026 расширяют контейнер (макет: min-[1920px]) */
-  --breakpoint-3xl: 1920px;
-  /* Дефолтная шкала v4 кончается на --container-7xl = 80rem = 1280px */
-  --container-8xl: 96rem;
-
-  --radius-*: initial;
-  --radius: 4px;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-10: 10px;
-  --radius-14: 14px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
-
-  --text-display-hero: 60px;
-  --text-display-hero--line-height: 72px;
-  --text-display-hero--letter-spacing: -0.025em;
-  --text-display-hero--font-weight: 700;
-
-  --text-display-lg: 40px;
-  --text-display-lg--line-height: 48px;
-  --text-display-lg--letter-spacing: -0.02em;
-  --text-display-lg--font-weight: 700;
-
-  --text-display-sm: 32px;
-  --text-display-sm--line-height: 40px;
-  --text-display-sm--letter-spacing: -0.015em;
-  --text-display-sm--font-weight: 700;
-
-  --text-h1: 28px;
-  --text-h1--line-height: 36px;
-  --text-h1--letter-spacing: -0.02em;
-  --text-h1--font-weight: 700;
-
-  --text-h2: 24px;
-  --text-h2--line-height: 32px;
-  --text-h2--letter-spacing: -0.015em;
-  --text-h2--font-weight: 700;
-
-  --text-h3: 20px;
-  --text-h3--line-height: 28px;
-  --text-h3--letter-spacing: -0.01em;
-  --text-h3--font-weight: 600;
-
-  --text-h4: 18px;
-  --text-h4--line-height: 28px;
-  --text-h4--letter-spacing: -0.005em;
-  --text-h4--font-weight: 600;
-
-  --text-h5: 16px;
-  --text-h5--line-height: 24px;
-  --text-h5--font-weight: 600;
-
-  --text-body-lg: 16px;
-  --text-body-lg--line-height: 24px;
-  --text-body-lg--font-weight: 400;
-
-  --text-body-lg-medium: 16px;
-  --text-body-lg-medium--line-height: 24px;
-  --text-body-lg-medium--font-weight: 500;
-
-  --text-body-lg-strong: 16px;
-  --text-body-lg-strong--line-height: 24px;
-  --text-body-lg-strong--font-weight: 600;
-
-  --text-body-md: 14px;
-  --text-body-md--line-height: 20px;
-  --text-body-md--font-weight: 400;
-
-  --text-body-md-medium: 14px;
-  --text-body-md-medium--line-height: 20px;
-  --text-body-md-medium--font-weight: 500;
-
-  --text-body-md-strong: 14px;
-  --text-body-md-strong--line-height: 20px;
-  --text-body-md-strong--font-weight: 600;
-
-  --text-body-sm: 12px;
-  --text-body-sm--line-height: 16px;
-  --text-body-sm--font-weight: 400;
-
-  --text-body-sm-medium: 12px;
-  --text-body-sm-medium--line-height: 16px;
-  --text-body-sm-medium--font-weight: 500;
-
-  --text-overline: 12px;
-  --text-overline--line-height: 16px;
-  --text-overline--letter-spacing: 0.02em;
-  --text-overline--font-weight: 600;
-
-  --text-overline-medium: 12px;
-  --text-overline-medium--line-height: 16px;
-  --text-overline-medium--letter-spacing: 0.02em;
-  --text-overline-medium--font-weight: 500;
-
-  /* @generated-colors:start (сгенерировано из Figma-токенов, генератор в update-plan.md / git show 8862721) */
-  /* brand */
-  --color-brand-50: #F0F8FF;
-  --color-brand-100: #DBEFFF;
-  --color-brand-200: #B3DCFF;
-  --color-brand-300: #75C0FF;
-  --color-brand-400: #3DA6FF;
-  --color-brand-500: #068DFF;
-  --color-brand-600: #007AE0;
-  --color-brand-700: #0066BD;
-  --color-brand-800: #005399;
-  --color-brand-900: #00427A;
-  /* base */
-  --color-base-bg-dark: #161617;
-  --color-base-bg-light: #FFFFFF;
-  --color-black: #000000;
-  --color-white: #FFFFFF;
-  /* surface */
-  --color-surface-dark: #161617;
-  --color-surface-dark-2: #393D40;
-  /* chart */
-  --color-chart-amber: #F5A623;
-  --color-chart-blue: #0070EB;
-  --color-chart-green: #6BBD6E;
-  --color-chart-red: #FB2C36;
-  /* secondary */
-  --color-secondary-50: #F2F5F8;
-  --color-secondary-100: #DEE6ED;
-  --color-secondary-200: #C0CFDD;
-  --color-secondary-300: #92ABC4;
-  --color-secondary-400: #527598;
-  --color-secondary-500: #2C3E50;
-  --color-secondary-600: #253646;
-  --color-secondary-700: #1E2B38;
-  --color-secondary-800: #17212B;
-  --color-secondary-900: #10171E;
-  /* @generated-colors:end */
-
-  /* @generated-semantic-colors:start (светлые значения; тёмные — в @layer base .dark ниже)
-     Источник: Figma-артефакт «Семантические цвета» (таблица токенов — в git-истории: git show 69039ec:docs/color-migration.md).
-     Старый генератор (git show 8862721) к этому блоку неприменим: регенерация = дамп таблицы артефакта.
-     Именование: text/* → --text-color-*, bg/* → --background-color-*, border/* → --border-color-*,
-     action/* → --color-action-*, icon/* → --color-icon-* (последние два доступны из любых цветовых утилит). */
-  /* text */
-  --text-color-primary: #2C3E50;
-  --text-color-secondary: #99A1AF;
-  --text-color-tertiary: #FFFFFF;
-  --text-color-quaternary: #6A7282;
-  --text-color-disabled: #A1A1A1;
-  --text-color-inverted: #FFFFFF;
-  --text-color-brand: #068DFF;
-  --text-color-link: #068DFF;
-  --text-color-link-hover: #007AE0;
-  --text-color-success: #00A63E;
-  --text-color-warning: #FE9A00;
-  --text-color-danger: #FB2C36;
-  /* bg */
-  --background-color-main: #FFFFFF;
-  --background-color-canvas: #F3F4F6;
-  --background-color-subtle: #F9FAFB33;
-  --background-color-muted: #F3F4F6;
-  --background-color-overlay: #10182880;
-  --background-color-brand: #068DFF;
-  --background-color-brand-subtle: #F0F8FF;
-  --background-color-success: #00A63E;
-  --background-color-success-subtle: #DCFCE7;
-  --background-color-warning: #FE9A00;
-  --background-color-warning-subtle: #FEF3C6;
-  --background-color-danger: #FB2C36;
-  --background-color-danger-subtle: #FEF2F2;
-  --background-color-badge: #E5E7EB;
-  --background-color-red-subtle: #FEF2F2;
-  --background-color-orange-subtle: #FFEDD4;
-  --background-color-amber-subtle: #FEF3C6;
-  --background-color-yellow-subtle: #FEF9C2;
-  --background-color-lime-subtle: #ECFCCA;
-  --background-color-green-subtle: #DCFCE7;
-  --background-color-emerald-subtle: #D0FAE5;
-  --background-color-teal-subtle: #CBFBF1;
-  --background-color-cyan-subtle: #CEFAFE;
-  --background-color-sky-subtle: #DFF2FE;
-  --background-color-blue-subtle: #DBEFFF;
-  --background-color-indigo-subtle: #E0E7FF;
-  --background-color-violet-subtle: #EDE9FE;
-  --background-color-purple-subtle: #F3E8FF;
-  --background-color-fuchsia-subtle: #FAE8FF;
-  --background-color-pink-subtle: #FCE7F3;
-  --background-color-rose-subtle: #FFE4E6;
-  /* border */
-  --border-color-default: #E5E7EB;
-  --border-color-strong: #D1D5DC;
-  --border-color-focus: #068DFF;
-  --border-color-brand: #068DFF;
-  --border-color-info: #2B7FFF;
-  --border-color-success: #00A63E;
-  --border-color-warning: #E17100;
-  --border-color-danger: #FB2C36;
-  --border-color-red: #FFA2A2;
-  --border-color-orange: #FF6900;
-  --border-color-amber: #FE9A00;
-  --border-color-yellow: #F0B100;
-  --border-color-lime: #7CCF00;
-  --border-color-green: #00C950;
-  --border-color-emerald: #00BC7D;
-  --border-color-teal: #00BBA7;
-  --border-color-cyan: #00B8DB;
-  --border-color-sky: #00A6F4;
-  --border-color-indigo: #615FFF;
-  --border-color-violet: #8E51FF;
-  --border-color-purple: #AD46FF;
-  --border-color-fuchsia: #E12AFB;
-  --border-color-pink: #F6339A;
-  --border-color-rose: #FF2056;
-  /* action */
-  --color-action-primary: #068DFF;
-  --color-action-primary-hover: #007AE0;
-  --color-action-primary-active: #0066BD;
-  --color-action-primary-fg: #FFFFFF;
-  --color-action-secondary: #FFFFFF;
-  --color-action-secondary-hover: #F9FAFB;
-  --color-action-secondary-fg: #2C3E50;
-  --color-action-danger: #E7000B;
-  --color-action-danger-hover: #C10007;
-  --color-action-danger-fg: #FFFFFF;
-  --color-action-disabled: #E5E7EB;
-  --color-action-disabled-fg: #99A1AF;
-  /* icon */
-  --color-icon-default: #6A7282;
-  --color-icon-strong: #2C3E50;
-  --color-icon-secondary: #99A1AF;
-  --color-icon-disabled: #D1D5DC;
-  --color-icon-inverted: #FFFFFF;
-  --color-icon-brand: #068DFF;
-  --color-icon-on-brand: #FFFFFF;
-  --color-icon-white: #FFFFFF;
-  --color-icon-success: #00A63E;
-  --color-icon-warning: #FFB900;
-  --color-icon-danger: #E7000B;
-  --color-icon-red: #E7000B;
-  --color-icon-orange: #FF6900;
-  --color-icon-amber: #FE9A00;
-  --color-icon-yellow: #F0B100;
-  --color-icon-lime: #7CCF00;
-  --color-icon-green: #00A63E;
-  --color-icon-emerald: #00BC7D;
-  --color-icon-teal: #00BBA7;
-  --color-icon-cyan: #00B8DB;
-  --color-icon-sky: #00A6F4;
-  --color-icon-blue: #2B7FFF;
-  --color-icon-indigo: #615FFF;
-  --color-icon-violet: #8E51FF;
-  --color-icon-purple: #AD46FF;
-  --color-icon-fuchsia: #C800DE;
-  --color-icon-pink: #E60076;
-  --color-icon-rose: #FF2056;
-  /* хелперы вне артефакта (= bg/Main): замена бывшего флипа fill-white/stroke-white в иллюстрациях */
-  --fill-main: #FFFFFF;
-  --stroke-main: #FFFFFF;
-  /* @generated-semantic-colors:end */
-}
-
-/* Тёмная тема: переопределяются только СЕМАНТИЧЕСКИЕ токены (text-primary, bg-main,
-   border-default, action/icon-*); примитивные шкалы (gray-*, red-*, brand-* и т.д.)
-   константны в обеих темах. Утилиты компилируются в var(--…-*), поэтому семантические
-   классы переключаются сами; цветовые dark:-классы легальны для краевых случаев.
-   @layer base идёт после @layer theme → побеждает :root. */
-@layer base {
-  :root {
-    color-scheme: light;
-  }
-
-  .dark {
-    color-scheme: dark;
-    /* @generated-semantic-colors-dark:start (тёмные значения семантических токенов, 1:1 с артефактом —
-       включая тема-константные, чтобы регенерация из Figma была тупым дампом таблицы) */
-    /* text */
-    --text-color-primary: #FAFAFA;
-    --text-color-secondary: #99A1AF;
-    --text-color-tertiary: #FFFFFF;
-    --text-color-quaternary: #99A1AF;
-    --text-color-disabled: #D4D4D4;
-    --text-color-inverted: #161617;
-    --text-color-brand: #3DA6FF;
-    --text-color-link: #3DA6FF;
-    --text-color-link-hover: #B3DCFF;
-    --text-color-success: #00C950;
-    --text-color-warning: #FFB900;
-    --text-color-danger: #FF6467;
-    /* bg */
-    --background-color-main: #161617;
-    --background-color-canvas: #0F0F10;
-    --background-color-subtle: #171717;
-    --background-color-muted: #1F1F21;
-    --background-color-overlay: #00000099;
-    --background-color-brand: #068DFF;
-    --background-color-brand-subtle: #068DFF1A;
-    --background-color-success: #008236;
-    --background-color-success-subtle: #032E15;
-    --background-color-warning: #E17100;
-    --background-color-warning-subtle: #461901;
-    --background-color-danger: #FF6467;
-    --background-color-danger-subtle: #4608094D;
-    --background-color-badge: #4A5565;
-    --background-color-red-subtle: #82181A;
-    --background-color-orange-subtle: #7E2A0C;
-    --background-color-amber-subtle: #461901;
-    --background-color-yellow-subtle: #432004;
-    --background-color-lime-subtle: #192E03;
-    --background-color-green-subtle: #032E15;
-    --background-color-emerald-subtle: #002C22;
-    --background-color-teal-subtle: #022F2E;
-    --background-color-cyan-subtle: #053345;
-    --background-color-sky-subtle: #052F4A;
-    --background-color-blue-subtle: #00427A;
-    --background-color-indigo-subtle: #1E1A4D;
-    --background-color-violet-subtle: #2F0D68;
-    --background-color-purple-subtle: #3C0366;
-    --background-color-fuchsia-subtle: #4B004F;
-    --background-color-pink-subtle: #510424;
-    --background-color-rose-subtle: #4D0218;
-    /* border */
-    --border-color-default: #404040;
-    --border-color-strong: #6A7282;
-    --border-color-focus: #3DA6FF;
-    --border-color-brand: #3DA6FF;
-    --border-color-info: #51A2FF;
-    --border-color-success: #05DF72;
-    --border-color-warning: #FFB900;
-    --border-color-danger: #FF6467;
-    --border-color-red: #FF6467;
-    --border-color-orange: #FF8904;
-    --border-color-amber: #FFB900;
-    --border-color-yellow: #FDC700;
-    --border-color-lime: #9AE600;
-    --border-color-green: #05DF72;
-    --border-color-emerald: #00D492;
-    --border-color-teal: #00D5BE;
-    --border-color-cyan: #00D3F2;
-    --border-color-sky: #00BCFF;
-    --border-color-indigo: #7C86FF;
-    --border-color-violet: #A684FF;
-    --border-color-purple: #C27AFF;
-    --border-color-fuchsia: #ED6AFF;
-    --border-color-pink: #FB64B6;
-    --border-color-rose: #FF637E;
-    /* action */
-    --color-action-primary: #068DFF;
-    --color-action-primary-hover: #007AE0;
-    --color-action-primary-active: #0066BD;
-    --color-action-primary-fg: #FFFFFF;
-    --color-action-secondary: #262626;
-    --color-action-secondary-hover: #404040;
-    --color-action-secondary-fg: #FFFFFF;
-    --color-action-danger: #FF6467;
-    --color-action-danger-hover: #82181A;
-    --color-action-danger-fg: #FFFFFF;
-    --color-action-disabled: #404040;
-    --color-action-disabled-fg: #6A7282;
-    /* icon */
-    --color-icon-default: #D1D5DC;
-    --color-icon-strong: #F9FAFB;
-    --color-icon-secondary: #99A1AF;
-    --color-icon-disabled: #4A5565;
-    --color-icon-inverted: #2C3E50;
-    --color-icon-brand: #3DA6FF;
-    --color-icon-on-brand: #FFFFFF;
-    --color-icon-white: #000000;
-    --color-icon-success: #00C950;
-    --color-icon-warning: #FFB900;
-    --color-icon-danger: #FF6467;
-    --color-icon-red: #FF6467;
-    --color-icon-orange: #FF8904;
-    --color-icon-amber: #FFB900;
-    --color-icon-yellow: #FDC700;
-    --color-icon-lime: #9AE600;
-    --color-icon-green: #00C950;
-    --color-icon-emerald: #00D492;
-    --color-icon-teal: #00D5BE;
-    --color-icon-cyan: #00D3F2;
-    --color-icon-sky: #00BCFF;
-    --color-icon-blue: #51A2FF;
-    --color-icon-indigo: #7C86FF;
-    --color-icon-violet: #A684FF;
-    --color-icon-purple: #C27AFF;
-    --color-icon-fuchsia: #ED6AFF;
-    --color-icon-pink: #FB64B6;
-    --color-icon-rose: #FF637E;
-    /* хелперы (= bg/Main) */
-    --fill-main: #161617;
-    --stroke-main: #161617;
-    /* @generated-semantic-colors-dark:end */
-  }
-}
-
-/* Компат-слой поведения v3 (официальный upgrade guide) */
-@layer base {
-  /* В v4 дефолтный border-color стал currentColor; возвращаем прежний вид (= gray-200 в лайте) */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--border-color-default, currentColor);
-  }
-
-  /* Плейсхолдеры: токена placeholder в ДС нет, ближайший — text/disabled
-     (осознанная светлая дельта #D1D5DC → #A1A1A1, см. git show 69039ec:docs/color-migration.md) */
-  input::placeholder,
-  textarea::placeholder {
-    color: var(--text-color-disabled);
-  }
-
-  /* В v4 у кнопок cursor: default */
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}
-
-/* Легаси-типографика (Figma DESIGN-SYSTEM-NEW, до ДС-2026) */
-@layer components {
-  .a-container {
-    @apply container mx-auto px-4 2xl:px-16;
-  }
-
-  /* Headings */
-  .heading-01 {
-    @apply font-bold text-[2rem] leading-10;
-  }
-
-  .heading-02 {
-    @apply font-bold text-2xl leading-8;
-  }
-
-  .heading-03 {
-    @apply font-semibold text-xl leading-6;
-  }
-
-  .heading-04 {
-    @apply font-semibold text-base leading-5;
-  }
-
-  .heading-05 {
-    @apply font-semibold text-sm leading-5;
-  }
-
-  /* Body */
-  .body-400 {
-    @apply font-normal text-sm leading-5;
-  }
-
-  .body-500 {
-    @apply font-medium text-sm leading-5;
-  }
-
-  .body-600 {
-    @apply font-semibold text-sm leading-5;
-  }
-
-  .body-s-400 {
-    @apply font-normal text-sm leading-4;
-  }
-
-  .body-s-500 {
-    @apply font-medium text-sm leading-4;
-  }
-
-  /* Caption */
-  .caption-400 {
-    @apply font-normal text-[0.625rem] leading-4;
-  }
-
-  .caption-500 {
-    @apply font-medium text-[0.625rem] leading-4;
-  }
-
-  .caption-700 {
-    @apply font-bold text-[0.625rem] leading-4;
-  }
-
-  /* Form */
-  .label-400 {
-    @apply font-normal text-sm leading-5;
-  }
-
-  .label-600 {
-    @apply font-semibold text-sm leading-5;
-  }
-
-  .label-s-400 {
-    @apply font-normal text-xs leading-4;
-  }
-
-  .label-s-700 {
-    @apply font-bold text-xs leading-4;
-  }
-
-  .optional-i-700 {
-    @apply font-bold italic text-sm leading-5;
-  }
-
-  .placeholder-300 {
-    @apply font-light text-sm leading-5;
-  }
-
-  .description-400 {
-    @apply font-normal text-xs leading-5;
-  }
-
-  /* Link */
-  .link-400 {
-    @apply font-normal text-sm leading-5;
-    color: var(--text-color-link);
-  }
-
-  .link-stroke-400 {
-    @apply font-normal text-sm leading-5;
-    color: var(--text-color-link);
-  }
-
-  .link-s-400 {
-    @apply font-normal text-sm leading-4;
-    color: var(--text-color-link);
-  }
-
-  .link-s-stroke-400 {
-    @apply font-normal text-sm leading-4;
-    color: var(--text-color-link);
-  }
-
-  .link-small-800 {
-    @apply font-bold text-sm leading-4;
-    color: var(--text-color-link);
-  }
-
-  /* Special Styles */
-  .display-80-700 {
-    @apply font-bold text-[5rem] leading-[6.5rem];
-  }
-
-  .display-80-400 {
-    @apply font-normal text-[5rem] leading-[6.5rem];
-  }
-
-  .display-60-700 {
-    @apply font-bold text-[3.75rem] leading-[4.750rem];
-  }
-
-  .display-60-400 {
-    @apply font-normal text-[3.75rem] leading-[4.750rem];
-  }
-
-  .display-48-700 {
-    @apply font-bold text-[3rem] leading-[4rem];
-  }
-
-  .display-48-400 {
-    @apply font-normal text-[3rem] leading-[4rem];
-  }
-
-  .numbers-60-700 {
-    @apply font-bold text-[3.75rem] leading-[3.5rem];
-  }
-
-  .numbers-60-400 {
-    @apply font-normal text-[3.75rem] leading-[3.5rem];
-  }
-
-  .numbers-40-700 {
-    @apply font-bold text-[2.5rem] leading-[3.375rem];
-  }
-
-  .numbers-40-400 {
-    @apply font-normal text-[2.5rem] leading-[3.375rem];
-  }
-}