adata-ui 2.1.41-beta.0 → 2.1.41-beta.2

package/assets/styles/theme.css

@@ -1,576 +1,583 @@
-@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;
-
-  --radius-*: initial;
-  --radius: 4px;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-10: 10px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 20px;
-
-  --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: #1E2939;
-    --background-color-subtle: #171717;
-    --background-color-muted: #262626;
-    --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];
-  }
-}
+@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];
+  }
+}