@vegastack/design-tokens 0.1.0

package/dist/base.css

@@ -0,0 +1,78 @@
+/* @vegastack/design-tokens/base.css — opt-in base reset (kept separate so consumers aren't forced into it). */
+@layer base {
+  * {
+    @apply border-border outline-ring/(--alpha-outline-soft);
+  }
+  body {
+    /* `isolate` creates a root stacking context so Base UI portaled popups (Dialog, Popover,
+       Tooltip, Select, menus, Sheet) reliably stack above page content — required by Base UI's
+       Quick Start ("Set up portals"). Consumers importing base.css get this for free; if you don't
+       import base.css, add `isolation: isolate` to your app root yourself. */
+    @apply bg-background text-foreground isolate;
+  }
+  /* a11y: real focus ring (fixes the platform's outline:none defect — requirements §7.5).
+     2px solid neutral outline, offset 1 (hugs the control — reads as a crisp border, not a halo).
+     Single source of truth: components carry NO focus ring of their own; this re-skins from `ring`. */
+  :focus-visible {
+    @apply outline-2 outline-offset-1 outline-ring;
+  }
+  /* Pointer cursor on every interactive control. Tailwind v4 Preflight no longer sets it and the
+     native <button> cursor is an arrow, so without this every button / icon-button / menu item /
+     select option / tab / toggle would miss the hand cursor. This is the SINGLE global source of
+     truth — components must NOT re-declare `cursor-pointer` locally; only genuinely non-standard
+     clickables (a clickable table row, a label tied to a control) or non-pointer cursors
+     (`cursor-text`, the select scroll-arrows) set a cursor of their own. */
+  button,
+  [role='button'],
+  [role='tab'],
+  [role='switch'],
+  [role='checkbox'],
+  [role='radio'],
+  [role='menuitem'],
+  [role='menuitemcheckbox'],
+  [role='menuitemradio'],
+  [role='option'],
+  summary {
+    cursor: pointer;
+  }
+  /* Disabled controls opt out (those that don't already set `pointer-events-none` /
+     `cursor-not-allowed`). Higher specificity than the element/role selectors above, so it wins;
+     a component's own `disabled:cursor-not-allowed` lives in the later utilities layer and still wins. */
+  :disabled,
+  [aria-disabled='true'],
+  [data-disabled] {
+    cursor: default;
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────────────────────────────────
+ * THE ONE SANCTIONED `!important` EXCEPTION (WCAG 2.1 — reduced-motion accessibility override).
+ * Users who set `prefers-reduced-motion: reduce` MUST have animations/transitions neutralized even
+ * over component-authored durations; `!important` is the standard, intentional mechanism for this
+ * reset (it has to win against any animated rule, including ones defined later or with higher
+ * specificity). This is the SOLE place `!important` is permitted in shipped VegaStack CSS — the
+ * design-audit contract bans `!important` everywhere else, and `design-lint` (token-css mode)
+ * FAILS on any `!important` that is NOT inside this `prefers-reduced-motion: reduce` block. Do not
+ * add `!important` to win a specificity fight elsewhere; restructure the selector or token instead.
+ * (requirements §7.5 / skills/design-audit.)
+ * ──────────────────────────────────────────────────────────────────────────────────────────────*/
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* View Transitions (Phase S): the universal selector above never reaches the
+   * ::view-transition-* pseudo-element tree (it lives on the root's snapshot layer,
+   * outside normal element matching), so route-change cross-fades/morphs need their
+   * own reduced-motion kill switch. */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/dist/theme.css

@@ -0,0 +1,388 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --background: oklch(0.994 0.002 75);
+  --foreground: oklch(0.145 0.003 75);
+  --card: oklch(0.985 0.003 75);
+  --card-foreground: oklch(0.145 0.003 75);
+  --popover: oklch(0.994 0.002 75);
+  --popover-foreground: oklch(0.145 0.003 75);
+  --primary: oklch(0.353 0.003 75);
+  --primary-foreground: oklch(0.985 0.003 75);
+  --primary-hover: oklch(0.269 0.003 75);
+  --primary-active: oklch(0.236 0.003 75);
+  --track: oklch(0.87 0.003 75);
+  --secondary: oklch(0.97 0.003 75);
+  --secondary-foreground: oklch(0.205 0.003 75);
+  --muted: oklch(0.97 0.003 75);
+  --muted-foreground: oklch(0.439 0.003 75);
+  --muted-foreground-faint: oklch(0.63 0.003 75);
+  --accent: oklch(0.97 0.003 75);
+  --accent-foreground: oklch(0.205 0.003 75);
+  --destructive: oklch(0.505 0.213 27.52);
+  --destructive-foreground: oklch(0.985 0.003 75);
+  --destructive-subtle: oklch(0.949 0.022 24);
+  --destructive-text: oklch(0.521 0.2 25);
+  --success: oklch(0.5 0.16 150);
+  --success-foreground: oklch(0.985 0.003 75);
+  --success-subtle: oklch(0.951 0.051 150);
+  --success-text: oklch(0.5 0.13 150);
+  --warning: oklch(0.52 0.145 52);
+  --warning-foreground: oklch(0.985 0.003 75);
+  --warning-subtle: oklch(0.96 0.019 42);
+  --warning-text: oklch(0.52 0.139 42);
+  --info: oklch(0.531 0.182 256);
+  --info-foreground: oklch(0.985 0.003 75);
+  --info-subtle: oklch(0.961 0.018 253);
+  --info-text: oklch(0.52 0.171 256);
+  --overlay: oklch(0.13 0.002 75 / 0.28); /** Modal scrim — the ONE sanctioned alpha-composite literal (a translucent wash has no primitive step; alpha is intrinsic to the role). */
+  --border: oklch(0.922 0.003 75);
+  --input: oklch(0.922 0.003 75);
+  --ring: oklch(0.353 0.003 75);
+  --chart-1: oklch(0.546 0.245 262.88);
+  --chart-2: oklch(0.6 0.118 184.7);
+  --chart-3: oklch(0.398 0.07 227.39);
+  --chart-4: oklch(0.646 0.222 41.12);
+  --chart-5: oklch(0.645 0.246 16.44);
+  --chart-6: oklch(0.505 0.213 27.52);
+  --chart-7: oklch(0.6 0.127 104.2); /** Olive (hue 104) — reassigned from green.600, which collided with the brand phosphor hue (CX-9). */
+  --chart-8: oklch(0.531 0.182 256);
+  --brand: oklch(0.6 0.17 148); /** The phosphor-green brand accent, LIGHT half (theme-split per CX-9): marker roles ONLY (live/AI-state dot, sparkline endpoint, eyebrow highlight, terminal prompt glyph). 3.5:1 on card/background — meaningful glyphs pass WCAG 1.4.11. Never fills, borders-at-rest, headlines, or buttons. */
+  --sidebar: oklch(0.985 0.003 75);
+  --sidebar-foreground: oklch(0.269 0.003 75);
+  --sidebar-primary: oklch(0.145 0.003 75);
+  --sidebar-primary-foreground: oklch(0.985 0.003 75);
+  --sidebar-accent: oklch(0.955 0.003 75);
+  --sidebar-accent-foreground: oklch(0.145 0.003 75);
+  --sidebar-border: oklch(0.922 0.003 75);
+  --sidebar-ring: oklch(0.353 0.003 75);
+  --radius: 0.75rem;
+  --radius-xs: 0.125rem; /** Micro radius — caret/arrow triangles and other sub-control geometry (was a silent Tailwind fallback, register P1-10). */
+  --radius-sharp: 2px; /** The rationed marketing 'sharp' gesture (audit 17/D18): CTAs, chips, figure frames on marketing surfaces. 2px, not 0 — sharp at a glance, kin to the product scale. */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --size-xs: 1.5rem; /** 24px — the compact control tier (Button xs, icon-only affordances like the password eye). */
+  --size-sm: 1.75rem;
+  --size-md: 2rem;
+  --size-lg: 2.5rem;
+  --icon-compact: 0.75rem; /** 12px icon — inside xs controls only (below design.md's named scale; exists for the kept Button xs tier). */
+  --icon-inline: 0.875rem; /** 14px icon — inline with body text and sm controls (design.md §Iconography 'inline'). */
+  --icon-default: 1rem; /** 16px icon — the default control icon (design.md 'default'). */
+  --icon-action: 1.25rem; /** 20px icon — standalone action icons (design.md 'action'). */
+  --icon-feature: 1.5rem; /** 24px icon — feature/empty-state glyphs (design.md 'feature'). */
+  --sidebar-width: 15rem; /** Expanded sidebar rail width (was a JS constant invisible to design-lint, register P2-13). */
+  --sidebar-width-icon: 3rem; /** Collapsed icon-only rail width. */
+  --shadow-overlay: 0 4px 14px -4px oklch(0.13 0.002 75 / 0.1), 0 2px 4px -2px oklch(0.13 0.002 75 / 0.06);
+  --z-raised: 10; /** Local raise WITHIN a component's own stacking context (focused OTP slot / segmented item, floating label, bubble reactions, select scroll arrows). Never for portaled surfaces. */
+  --z-overlay: 50; /** The single portal band: every portaled floating surface (dialog, sheet, popover, menu, select, tooltip, hover-card). Nesting resolves by DOM order — Base UI appends portals to <body>, so a Select inside a Dialog mounts later and stacks above within the same band. Toasts (sonner) are the documented exemption ABOVE this band (library-managed z; a toast must outrank a modal regardless of mount order). */
+  --opacity-dim: 50%; /** Element opacity for disabled controls and dimmed affordances (outside-month days, decorative chevrons). */
+  --opacity-hint-soft: 60%; /** Element opacity for hover-revealed hints (e.g. sort affordance on row hover). */
+  --opacity-hint: 70%; /** Element opacity for resting secondary controls that reach 100% on hover (e.g. alert close). */
+  --opacity-track: 25%; /** Element opacity of the circular progress track ring. */
+  --alpha-tint-border: 70%; /** Border tint for focus (ring) and error (destructive) borders — design.md's ring/70 pattern. */
+  --alpha-outline-border: 50%; /** Resting border of the outline button family (border-<family>). */
+  --alpha-border-subtle: 20%; /** Alert variant border tint (border-<family>). */
+  --alpha-border-soft: 30%; /** Toast (sonner) status border tint (border-<family>). */
+  --alpha-surface-faint: 5%; /** Resting wash of the outline button family (bg-<family>). */
+  --alpha-surface-subtle: 10%; /** Hover wash of the outline button family (bg-<family>). */
+  --alpha-ink-tint: 10%; /** Neutral pressed/hover ink tint (bg-foreground) — toggle pressed, chip remove hover. */
+  --alpha-ink-tint-strong: 15%; /** Hovered pressed-state ink tint (bg-foreground). */
+  --alpha-soft-hover: 20%; /** Hover wash of soft (subtle-filled) status surfaces. Theme-split: 30% in dark. */
+  --alpha-soft-surface: 10%; /** Resting wash of soft status surfaces (chat destructive bubble). Theme-split: 20% in dark. */
+  --alpha-input: 30%; /** Dark-theme input fill tint (bg-input) — see the dark-tint scoping note. */
+  --alpha-input-hover: 50%; /** Dark-theme input fill tint on hover (bg-input). */
+  --alpha-fill-hover: 80%; /** Hover dim of an interactive solid fill (bg-primary/secondary/muted/accent on chat bubbles, secondary button). */
+  --alpha-wash-faint: 40%; /** Faint neutral wash (bg-muted) — rich-text toolbar. */
+  --alpha-wash: 50%; /** Neutral wash (bg-muted) — card/table footers, ghost dark hover. */
+  --alpha-wash-strong: 60%; /** Stronger neutral wash (bg-muted) — line-tab hover. */
+  --alpha-backdrop-soft: 60%; /** Translucent surface backdrop (bg-background) — pill tab list. */
+  --alpha-glass: 90%; /** Glass button surface (bg-background + backdrop-blur). */
+  --alpha-glass-hover: 95%; /** Glass button surface on hover. */
+  --alpha-link-hover: 80%; /** Hovered link text dim (text-info-text) in rendered rich text. */
+  --alpha-outline-soft: 50%; /** Soft neutral outline/ring (base outline default, date-picker today ring). */
+  --font-family-sans: Geist, sans-serif;
+  --font-family-mono: 'Geist Mono', monospace;
+  --font-family-serif: Newsreader, serif; /** Serif ACCENT (D17): display emphasis words + pull-quotes only, never running text. Newsreader (opsz axis) until Geist Serif ships. */
+  --font-family-display: Geist, sans-serif; /** Display tier face — same family as sans today, split as a token so marketing can retune independently. */
+  --font-family-pixel: 'Geist Pixel Square', monospace; /** THE single sanctioned Geist Pixel flourish cut (D17: one deliberate hero use per surface, no more). */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-spring: linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1); /** CSS linear() spring with a very small overshoot — the success-bounce/appear curve for state-feedback micro-interactions (Phase M). Subtle by design: dense dev-tool aesthetic, not playful. */
+  --motion-blur: 2px; /** Motion-blur amount for blur-fade entrances (Phase M text/element reveals). */
+  --destructive-hover: oklch(0.455 0.213 27.52); /** DERIVED: destructive fill at L-0.05 (hover step). */
+  --destructive-active: oklch(0.415 0.213 27.52); /** DERIVED: destructive fill at L-0.09 (active step). */
+  --destructive-subtle-hover: oklch(0.91 0.036 20.4); /** DERIVED: destructive fill @7.000000000000001% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --success-hover: oklch(0.45 0.16 150); /** DERIVED: success fill at L-0.05 (hover step). */
+  --success-active: oklch(0.41 0.16 150); /** DERIVED: success fill at L-0.09 (active step). */
+  --success-subtle-hover: oklch(0.919 0.059 151.1); /** DERIVED: success fill @7.000000000000001% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --warning-hover: oklch(0.47 0.145 52); /** DERIVED: warning fill at L-0.05 (hover step). */
+  --warning-active: oklch(0.43 0.145 52); /** DERIVED: warning fill at L-0.09 (active step). */
+  --warning-subtle-hover: oklch(0.929 0.027 48.8); /** DERIVED: warning fill @7.000000000000001% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --info-hover: oklch(0.481 0.182 256); /** DERIVED: info fill at L-0.05 (hover step). */
+  --info-active: oklch(0.441 0.182 256); /** DERIVED: info fill at L-0.09 (active step). */
+  --info-subtle-hover: oklch(0.929 0.03 251.1); /** DERIVED: info fill @7.000000000000001% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.dark {
+  --background: oklch(0.175 0.003 75);
+  --foreground: oklch(0.922 0.003 75);
+  --card: oklch(0.205 0.003 75);
+  --card-foreground: oklch(0.922 0.003 75);
+  --popover: oklch(0.205 0.003 75);
+  --popover-foreground: oklch(0.922 0.003 75);
+  --primary: oklch(0.922 0.003 75);
+  --primary-foreground: oklch(0.145 0.003 75);
+  --primary-hover: oklch(0.97 0.003 75);
+  --primary-active: oklch(0.994 0.002 75);
+  --track: oklch(0.439 0.003 75);
+  --secondary: oklch(0.269 0.003 75);
+  --secondary-foreground: oklch(0.922 0.003 75);
+  --muted: oklch(0.269 0.003 75);
+  --muted-foreground: oklch(0.66 0.003 75);
+  --muted-foreground-faint: oklch(0.559 0.003 75);
+  --accent: oklch(0.269 0.003 75);
+  --accent-foreground: oklch(0.967 0.003 75);
+  --destructive-subtle: oklch(0.275 0.07 25);
+  --destructive-text: oklch(0.72 0.16 25);
+  --success-subtle: oklch(0.276 0.061 150);
+  --success-text: oklch(0.72 0.17 150);
+  --warning-subtle: oklch(0.28 0.069 42);
+  --warning-text: oklch(0.769 0.188 70.08);
+  --info-subtle: oklch(0.275 0.059 255);
+  --info-text: oklch(0.72 0.13 256);
+  --overlay: oklch(0 0 0 / 0.55);
+  --border: oklch(0.269 0.003 75);
+  --input: oklch(0.269 0.003 75);
+  --ring: oklch(0.922 0.003 75);
+  --chart-1: oklch(0.623 0.214 259.81);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.75 0.183 55.93);
+  --chart-5: oklch(0.645 0.246 16.44);
+  --chart-6: oklch(0.69 0.21 25);
+  --chart-7: oklch(0.72 0.15 103.9);
+  --chart-8: oklch(0.72 0.13 256);
+  --sidebar: oklch(0.145 0.003 75);
+  --sidebar-foreground: oklch(0.87 0.003 75);
+  --sidebar-primary: oklch(0.922 0.003 75);
+  --sidebar-primary-foreground: oklch(0.145 0.003 75);
+  --sidebar-accent: oklch(0.205 0.003 75);
+  --sidebar-accent-foreground: oklch(0.922 0.003 75);
+  --sidebar-border: oklch(0.269 0.003 75);
+  --sidebar-ring: oklch(0.922 0.003 75);
+  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles only. */
+  --alpha-soft-hover: 30%; /** Dark half of the theme-split soft-surface hover wash. */
+  --alpha-soft-surface: 20%; /** Dark half of the theme-split soft-surface resting wash. */
+  --destructive-subtle-hover: oklch(0.34 0.123 26.3); /** DERIVED: destructive fill @30% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --success-subtle-hover: oklch(0.348 0.092 148.9); /** DERIVED: success fill @30% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --warning-subtle-hover: oklch(0.356 0.093 46.6); /** DERIVED: warning fill @30% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --info-subtle-hover: oklch(0.354 0.101 254.3); /** DERIVED: info fill @30% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+}
+
+/* Two-layer type scale (T1): both ladders + the active binding (product by default). */
+:root {
+  --type-product-xs: 0.6875rem;
+  --type-product-xs--line-height: calc(16 / 11);
+  --type-product-sm: 0.75rem;
+  --type-product-sm--line-height: calc(16 / 12);
+  --type-product-base: 0.875rem;
+  --type-product-base--line-height: calc(21 / 14);
+  --type-product-lg: 1rem;
+  --type-product-lg--line-height: calc(24 / 16);
+  --type-product-xl: 1.125rem;
+  --type-product-xl--line-height: calc(26 / 18);
+  --type-product-2xl: 1.25rem;
+  --type-product-2xl--line-height: calc(28 / 20);
+  --type-product-3xl: 1.5rem;
+  --type-product-3xl--line-height: calc(32 / 24);
+  --type-doc-xs: 0.75rem;
+  --type-doc-xs--line-height: calc(1 / 0.75);
+  --type-doc-sm: 0.875rem;
+  --type-doc-sm--line-height: calc(1.25 / 0.875);
+  --type-doc-base: 1rem;
+  --type-doc-base--line-height: calc(1.5 / 1);
+  --type-doc-lg: 1.125rem;
+  --type-doc-lg--line-height: calc(1.75 / 1.125);
+  --type-doc-xl: 1.25rem;
+  --type-doc-xl--line-height: calc(1.75 / 1.25);
+  --type-doc-2xl: 1.5rem;
+  --type-doc-2xl--line-height: calc(2 / 1.5);
+  --type-doc-3xl: 1.875rem;
+  --type-doc-3xl--line-height: calc(2.25 / 1.875);
+  --type-xs: var(--type-product-xs);
+  --type-xs--line-height: var(--type-product-xs--line-height);
+  --type-sm: var(--type-product-sm);
+  --type-sm--line-height: var(--type-product-sm--line-height);
+  --type-base: var(--type-product-base);
+  --type-base--line-height: var(--type-product-base--line-height);
+  --type-lg: var(--type-product-lg);
+  --type-lg--line-height: var(--type-product-lg--line-height);
+  --type-xl: var(--type-product-xl);
+  --type-xl--line-height: var(--type-product-xl--line-height);
+  --type-2xl: var(--type-product-2xl);
+  --type-2xl--line-height: var(--type-product-2xl--line-height);
+  --type-3xl: var(--type-product-3xl);
+  --type-3xl--line-height: var(--type-product-3xl--line-height);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-active: var(--primary-active);
+  --color-track: var(--track);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted-foreground-faint: var(--muted-foreground-faint);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-subtle: var(--destructive-subtle);
+  --color-destructive-text: var(--destructive-text);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-subtle: var(--success-subtle);
+  --color-success-text: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-warning-text: var(--warning-text);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-subtle: var(--info-subtle);
+  --color-info-text: var(--info-text);
+  --color-overlay: var(--overlay);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-brand: var(--brand);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-destructive-active: var(--destructive-active);
+  --color-destructive-subtle-hover: var(--destructive-subtle-hover);
+  --color-success-hover: var(--success-hover);
+  --color-success-active: var(--success-active);
+  --color-success-subtle-hover: var(--success-subtle-hover);
+  --color-warning-hover: var(--warning-hover);
+  --color-warning-active: var(--warning-active);
+  --color-warning-subtle-hover: var(--warning-subtle-hover);
+  --color-info-hover: var(--info-hover);
+  --color-info-active: var(--info-active);
+  --color-info-subtle-hover: var(--info-subtle-hover);
+  /* text-* remap — utilities resolve through the scoped --type-* binding (CX-6) */
+  --text-xs: var(--type-xs);
+  --text-xs--line-height: var(--type-xs--line-height);
+  --text-sm: var(--type-sm);
+  --text-sm--line-height: var(--type-sm--line-height);
+  --text-base: var(--type-base);
+  --text-base--line-height: var(--type-base--line-height);
+  --text-lg: var(--type-lg);
+  --text-lg--line-height: var(--type-lg--line-height);
+  --text-xl: var(--type-xl);
+  --text-xl--line-height: var(--type-xl--line-height);
+  --text-2xl: var(--type-2xl);
+  --text-2xl--line-height: var(--type-2xl--line-height);
+  --text-3xl: var(--type-3xl);
+  --text-3xl--line-height: var(--type-3xl--line-height);
+  --radius-xs: var(--radius-xs);
+  --radius-sharp: var(--radius-sharp);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --shadow-overlay: var(--shadow-overlay);
+  --text-display-sm: 2rem;
+  --text-display-sm--line-height: 2.25rem;
+  --text-display-sm--font-weight: 400;
+  --text-display-sm--letter-spacing: -0.04em;
+  --text-display-md: 2.5rem;
+  --text-display-md--line-height: 2.75rem;
+  --text-display-md--font-weight: 400;
+  --text-display-md--letter-spacing: -0.045em;
+  --text-display-lg: 3.5rem;
+  --text-display-lg--line-height: 3.75rem;
+  --text-display-lg--font-weight: 400;
+  --text-display-lg--letter-spacing: -0.05em;
+  --text-display-xl: 4.5rem;
+  --text-display-xl--line-height: 4.75rem;
+  --text-display-xl--font-weight: 400;
+  --text-display-xl--letter-spacing: -0.06em;
+  --text-h1: 1.5rem;
+  --text-h1--line-height: 2rem;
+  --text-h1--font-weight: 400;
+  --text-h1--letter-spacing: -0.02em;
+  --text-h2: 1.25rem;
+  --text-h2--line-height: 1.75rem;
+  --text-h2--font-weight: 400;
+  --text-h2--letter-spacing: -0.015em;
+  --text-h3: 1.125rem;
+  --text-h3--line-height: 1.5rem;
+  --text-h3--font-weight: 400;
+  --text-h3--letter-spacing: -0.01em;
+  --text-h4: 1rem;
+  --text-h4--line-height: 1.375rem;
+  --text-h4--font-weight: 500;
+  --text-label: 0.875rem;
+  --text-label--line-height: 1.25rem;
+  --text-label--font-weight: 500;
+  --text-label-sm: 0.75rem;
+  --text-label-sm--line-height: 1rem;
+  --text-label-sm--font-weight: 500;
+  --text-code: 0.8125rem;
+  --text-code--line-height: 1.25rem;
+  --text-code--font-weight: 400;
+  --text-code-sm: 0.75rem;
+  --text-code-sm--line-height: 1rem;
+  --text-code-sm--font-weight: 400;
+  --text-mono-label: 0.75rem;
+  --text-mono-label--line-height: 1rem;
+  --text-mono-label--font-weight: 400;
+  --text-mono-label--letter-spacing: 0.05em;
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+  --font-serif: var(--font-family-serif);
+  --ease-standard: var(--motion-ease-standard);
+  --ease-emphasized: var(--motion-ease-emphasized);
+  --ease-exit: var(--motion-ease-exit);
+  --ease-spring: var(--motion-ease-spring);
+  --blur-motion: var(--motion-blur);
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-base: var(--duration-base);
+  --transition-duration-slow: var(--duration-slow);
+}