@mastra/playground-ui 56.0.0-alpha.9 → 56.0.0

package/theme.css

@@ -4,600 +4,82 @@
  * generates DS utilities without redeclaring tokens.
  * Tokens only — no @import 'tailwindcss'/@plugin/@layer/@apply (breaks raw import).
  * Colors stay oklch.
+ *
+ * The layers live in `theme/`, each holding both themes of one subject:
+ *
+ *   colors      raw ramps — background, gray, gray-alpha, accents, brand green
+ *   status      notice and badge tones
+ *   data-viz    chart series and span-type hues
+ *   surfaces    fill ladder, boundary ladder, elevation, scrim
+ *   typography  text roles and font families
+ *   scale       spacing multiplier, named rungs, radii, breakpoints
+ *   motion      durations, easings, resize transition
+ *
+ * What stays here is the semantic layer: the roles a component names
+ * (`bg-card`, `text-muted-foreground`) mapped onto those ramps, plus the roles
+ * still waiting on a ramp of their own.
  */
 
-:root {
-  /* Dark theme (default) */
-  --surface1: oklch(0% 0 0deg);
-  --surface2: oklch(16% 0 0deg);
-  --surface3: oklch(18% 0 0deg);
-  --surface4: oklch(21.78% 0 0deg);
-  --surface5: oklch(24.35% 0 0deg / 90%);
-  --surface6: oklch(30.92% 0 0deg);
-
-  --background-1: oklch(0 0 0);
-  --background-2: oklch(0.1591 0 0);
-  --background-3: oklch(0.1913 0 0);
-  --gray-1: oklch(0.2178 0 0);
-  --gray-2: oklch(0.2435 0 0);
-  --gray-3: oklch(0.2686 0 0);
-  --gray-4: oklch(0.3092 0 0);
-  --gray-5: oklch(0.3715 0 0);
-  --gray-6: oklch(0.4495 0 0);
-  --gray-7: oklch(0.5208 0 0);
-  --gray-8: oklch(0.65 0 0);
-  --gray-9: oklch(0.7699 0 0);
-  --gray-10: oklch(0.9851 0 0);
-  --gray-alpha-1: rgb(255 255 255 / 4%);
-  --gray-alpha-2: rgb(255 255 255 / 7%);
-  --gray-alpha-3: rgb(255 255 255 / 10%);
-  --gray-alpha-4: rgb(255 255 255 / 14%);
-  --gray-alpha-5: rgb(255 255 255 / 18%);
-  --gray-alpha-6: rgb(255 255 255 / 30%);
-  --gray-alpha-7: rgb(255 255 255 / 45%);
-  --gray-alpha-8: rgb(255 255 255 / 60%);
-  --gray-alpha-9: rgb(255 255 255 / 75%);
-  --gray-alpha-10: rgb(255 255 255 / 90%);
-
-  --accent1: oklch(0.723 0.219 149.579);
-  --accent2: oklch(0.637 0.237 25.331);
-  --accent3: oklch(0.623 0.214 259.815);
-  --accent5: oklch(0.707 0.165 254.624);
-  --accent6: oklch(0.769 0.188 70.08);
-
-  --accent1Dark: oklch(0.242 0.051 151);
-  --accent2Dark: oklch(0.216 0.044 22);
-  --accent3Dark: oklch(0.234 0.052 261);
-  --accent5Dark: oklch(0.227 0.03 244);
-  --accent6Dark: oklch(0.229 0.031 71);
-
-  --accent1Darker: oklch(0.181 0.033 147);
-  --accent2Darker: oklch(0.16 0.023 19);
-  --accent3Darker: oklch(0.174 0.031 263);
-  --accent5Darker: oklch(0.17 0.015 240);
-  --accent6Darker: oklch(0.175 0.019 72);
-
-  --neutral1: oklch(0.372 0 0);
-  --neutral2: oklch(0.553 0 0);
-  --neutral3: oklch(0.705 0 0);
-  --neutral4: oklch(0.871 0 0);
-  --neutral5: oklch(0.92 0 0);
-  --neutral6: oklch(0.985 0 0);
+@import './theme/colors.css';
+@import './theme/status.css';
+@import './theme/data-viz.css';
+@import './theme/surfaces.css';
+@import './theme/typography.css';
+@import './theme/scale.css';
+@import './theme/motion.css';
 
+:root {
+  --background: var(--background-2);
+  --sidebar: var(--background-1);
+  --card: var(--background-3);
+  --popover: var(--background-3);
+  --muted: var(--gray-1);
+  --foreground: var(--gray-10);
+  /* Supporting text, measured against Linear's sidebar label: `lch(37.78)` light,
+     `oklch(0.647)` dark. `--gray-8` is 0.4459 / 0.65 — the rung the ramp already
+     had. `--gray-9` sat one rung from the ink (0.309 vs 0.129), so supporting
+     text read as a second ink instead of stepping back. */
+  --muted-foreground: var(--gray-8);
+  --placeholder: var(--gray-7);
+
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0 0 0);
   --error: oklch(0.637 0.237 25.331);
   /* Lightness for hue-only generated accents (e.g. per-filter colors) — legible on each theme. */
   --generated-accent-lightness: 72%;
-  --overlay: oklch(0% 0 0deg / 75%);
-  --border1: oklch(100% 0 0deg / 7%);
-  --border2: oklch(100% 0 0deg / 11%);
-  --surface-overlay-soft: oklch(100% 0 0deg / 4%);
-  --surface-overlay-strong: oklch(100% 0 0deg / 7%);
-  --button-default-bg: var(--surface5);
-  --button-default-bg-hover: var(--surface6);
-  --button-default-bg-active: var(--surface4);
-  --button-default-border: var(--border1);
-  --surface-header: oklch(15% 0 0deg);
-  --surface-header-hover: oklch(19% 0 0deg);
-  --surface-row-featured: oklch(100% 0 0deg / 12%);
-  --shadow-main-frame: 0 14px 48px -36px oklch(0% 0 0deg / 85%);
-  --sidebar-nav-hover: oklch(100% 0 0deg / 7%);
-  --sidebar-nav-active: oklch(100% 0 0deg / 11%);
-  --sidebar-divider: oklch(100% 0 0deg / 11%);
 
-  /* Semantic color aliases */
-  --text1: var(--neutral6);
+  /* Semantic color aliases. Theme-agnostic: the ramps they point at flip. */
   --warning1: var(--accent6);
   --positive1: var(--accent1);
   --negative1: var(--accent2);
-
-  /* Notice admonition colors — bg uses /20 alpha overlay; fg is the on-surface text/icon color */
-  --notice-success: oklch(0.92 0.27 138);
-  --notice-success-fg: oklch(0.96 0.025 145);
-  --notice-destructive: oklch(0.69 0.24 22);
-  --notice-destructive-fg: oklch(0.95 0.014 18);
-  --notice-warning: oklch(0.91 0.16 105);
-  --notice-warning-fg: oklch(0.97 0.025 100);
-  --notice-info: oklch(0.81 0.12 230);
-  --notice-info-fg: oklch(0.97 0.013 224);
-  --notice-note: oklch(0.18 0 0);
-  --notice-note-fg: oklch(0.99 0.001 230);
-
-  --badge-neutral-fg: var(--neutral5);
-  --badge-green: oklch(80% 0.105 160deg);
-  --badge-green-fg: oklch(92% 0.05 160deg);
-  --badge-red: oklch(69% 0.24 22deg);
-  --badge-red-fg: oklch(95% 0.014 18deg);
-  --badge-blue: oklch(81% 0.12 230deg);
-  --badge-blue-fg: oklch(97% 0.013 224deg);
-  --badge-yellow: oklch(91% 0.16 105deg);
-  --badge-yellow-fg: oklch(97% 0.025 100deg);
-  --badge-purple: oklch(82% 0.12 303deg);
-  --badge-purple-fg: oklch(93% 0.045 303deg);
-  --badge-orange: oklch(84% 0.13 62deg);
-  --badge-orange-fg: oklch(93% 0.06 62deg);
-  --badge-cyan: oklch(84% 0.1 210deg);
-  --badge-cyan-fg: oklch(93% 0.05 210deg);
-  --badge-pink: oklch(82% 0.12 345deg);
-  --badge-pink-fg: oklch(93% 0.045 345deg);
-
-  /* Brand green (dark). Remaps Tailwind green-* via @theme below. */
-  --brand-green-50: oklch(99% 0.024 138);
-  --brand-green-100: oklch(97.5% 0.055 138);
-  --brand-green-200: oklch(95.5% 0.105 138);
-  --brand-green-300: oklch(94% 0.18 138);
-  --brand-green-400: oklch(93% 0.235 138);
-  --brand-green-500: var(--notice-success);
-  --brand-green-600: oklch(76% 0.22 140);
-  --brand-green-700: oklch(62% 0.19 140);
-  --brand-green-800: oklch(45% 0.13 142);
-  --brand-green-900: oklch(33% 0.09 144);
-  --brand-green-950: oklch(22% 0.06 145);
-  --brand-green-badge-bg: oklch(32.3% 0.04 140);
-  --brand-green-badge-fg: oklch(83.6% 0.126 140);
-
-  /* Chart palette (recharts). blue-600/amber-500/purple-500/red-500; chart-2 = brand green. */
-  --chart-1: oklch(0.546 0.245 262.881);
-  --chart-2: var(--color-green-500);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.637 0.237 25.331);
-
-  /* Sequential ramp for one measure read at five depths — one hue, lightness carries the
-   * reading. The palette above is categorical: five series, no order between them. */
-  --chart-soft-1: oklch(0.62 0.19 285);
-  --chart-soft-2: oklch(0.7 0.145 285);
-  --chart-soft-3: oklch(0.78 0.1 285);
-  --chart-soft-4: oklch(0.85 0.06 285);
-  --chart-soft-5: oklch(0.9 0.03 285);
 }
 
 html.light {
-  --surface1: oklch(95.6% 0 0deg);
-  --surface2: oklch(98.5% 0 0deg);
-  --surface3: oklch(100% 0 0deg);
-  --surface4: oklch(96.5% 0 0deg);
-  --surface5: oklch(94.4% 0 0deg / 94%);
-  --surface6: oklch(89.5% 0 0deg);
-
-  --background-1: oklch(0.9642 0 0);
-  --background-2: oklch(0.9851 0 0);
-  --background-3: oklch(1 0 0);
-  --gray-1: oklch(0.9431 0 0);
-  --gray-2: oklch(0.9189 0 0);
-  --gray-3: oklch(0.8945 0 0);
-  --gray-4: oklch(0.8452 0 0);
-  --gray-5: oklch(0.7604 0 0);
-  --gray-6: oklch(0.6201 0 0);
-  --gray-7: oklch(0.5486 0 0);
-  --gray-8: oklch(0.4459 0 0);
-  --gray-9: oklch(0.3092 0 0);
-  --gray-10: oklch(0.1286 0 0);
-  --gray-alpha-1: rgb(0 0 0 / 4%);
-  --gray-alpha-2: rgb(0 0 0 / 7%);
-  --gray-alpha-3: rgb(0 0 0 / 10%);
-  --gray-alpha-4: rgb(0 0 0 / 14%);
-  --gray-alpha-5: rgb(0 0 0 / 18%);
-  --gray-alpha-6: rgb(0 0 0 / 30%);
-  --gray-alpha-7: rgb(0 0 0 / 45%);
-  --gray-alpha-8: rgb(0 0 0 / 60%);
-  --gray-alpha-9: rgb(0 0 0 / 75%);
-  --gray-alpha-10: rgb(0 0 0 / 90%);
-
-  --accent1: oklch(0.627 0.194 149.214);
-  --accent2: oklch(0.577 0.245 27.325);
-  --accent3: oklch(0.546 0.245 262.881);
-  --accent5: oklch(0.623 0.214 259.815);
-  --accent6: oklch(0.666 0.179 58.318);
-
-  --accent1Dark: oklch(0.962 0.044 156.743);
-  --accent2Dark: oklch(0.936 0.032 17.717);
-  --accent3Dark: oklch(0.932 0.032 255.585);
-  --accent5Dark: oklch(0.932 0.032 255.585);
-  --accent6Dark: oklch(0.962 0.059 95.617);
-
-  --accent1Darker: oklch(0.925 0.084 155.995);
-  --accent2Darker: oklch(0.885 0.062 18.334);
-  --accent3Darker: oklch(0.882 0.059 254.128);
-  --accent5Darker: oklch(0.882 0.059 254.128);
-  --accent6Darker: oklch(0.924 0.12 95.746);
-
-  --neutral1: oklch(0.554 0 0);
-  --neutral2: oklch(0.446 0 0);
-  --neutral3: oklch(0.372 0 0);
-  --neutral4: oklch(0.279 0 0);
-  --neutral5: oklch(0.208 0 0);
-  --neutral6: oklch(0.13 0 0);
-
+  --destructive: oklch(0.47 0.19 27.325);
+  --destructive-foreground: oklch(1 0 0);
   --error: oklch(0.577 0.245 27.325);
   --generated-accent-lightness: 38%;
-  --overlay: oklch(20.8% 0 0deg / 45%);
-  --border1: oklch(20.8% 0 0deg / 10%);
-  --border2: oklch(20.8% 0 0deg / 16%);
-  --surface-overlay-soft: oklch(20.8% 0 0deg / 4%);
-  --surface-overlay-strong: oklch(20.8% 0 0deg / 7%);
-  --button-default-bg: var(--surface2);
-  --button-default-bg-hover: var(--surface5);
-  --button-default-bg-active: var(--surface5);
-  --button-default-border: var(--border2);
-  --surface-header: oklch(92.6% 0 0deg);
-  --surface-header-hover: oklch(90% 0 0deg);
-  --surface-row-featured: oklch(20.8% 0 0deg / 11%);
-  --shadow-main-frame: 0 1px 2px oklch(24% 0 0deg / 4%), 0 18px 48px -34px oklch(24% 0 0deg / 22%);
-  --sidebar-nav-hover: oklch(20.8% 0 0deg / 5.5%);
-  --sidebar-nav-active: oklch(20.8% 0 0deg / 8.5%);
-  --sidebar-divider: oklch(20.8% 0 0deg / 16%);
-
-  /* Semantic color aliases */
-  --text1: var(--neutral6);
-  --warning1: var(--accent6);
-  --positive1: var(--accent1);
-  --negative1: var(--accent2);
-
-  /* Notice admonition colors — bg keeps saturation, fg flips to deep tint for contrast on light surface */
-  --notice-success: oklch(0.55 0.2 140);
-  --notice-success-fg: oklch(0.32 0.1 145);
-  --notice-destructive: oklch(0.55 0.22 22);
-  --notice-destructive-fg: oklch(0.36 0.18 22);
-  --notice-warning: oklch(0.65 0.16 95);
-  --notice-warning-fg: oklch(0.36 0.1 95);
-  --notice-info: oklch(0.55 0.15 230);
-  --notice-info-fg: oklch(0.36 0.13 225);
-  --notice-note: oklch(0.97 0 0);
-  --notice-note-fg: oklch(0.18 0 0);
-
-  --badge-neutral-fg: var(--neutral3);
-  --badge-green: oklch(40% 0.095 160deg);
-  --badge-green-fg: oklch(35% 0.085 160deg);
-  --badge-red: oklch(55% 0.22 22deg);
-  --badge-red-fg: oklch(36% 0.18 22deg);
-  --badge-blue: oklch(55% 0.15 230deg);
-  --badge-blue-fg: oklch(36% 0.13 225deg);
-  --badge-yellow: oklch(65% 0.16 95deg);
-  --badge-yellow-fg: oklch(36% 0.1 95deg);
-  --badge-purple: oklch(40% 0.18 303deg);
-  --badge-purple-fg: oklch(37% 0.16 303deg);
-  --badge-orange: oklch(42% 0.13 62deg);
-  --badge-orange-fg: oklch(37% 0.12 62deg);
-  --badge-cyan: oklch(40% 0.11 210deg);
-  --badge-cyan-fg: oklch(35% 0.095 210deg);
-  --badge-pink: oklch(42% 0.17 345deg);
-  --badge-pink-fg: oklch(37% 0.15 345deg);
-
-  /* Brand green (light). badge + chart inherit :root. */
-  --brand-green-50: oklch(97.8% 0.025 140);
-  --brand-green-100: oklch(95.5% 0.055 140);
-  --brand-green-200: oklch(91.5% 0.095 140);
-  --brand-green-300: oklch(84.5% 0.145 140);
-  --brand-green-400: oklch(72.5% 0.18 140);
-  --brand-green-500: var(--notice-success);
-  --brand-green-600: oklch(47% 0.17 142);
-  --brand-green-700: oklch(38% 0.13 144);
-  --brand-green-800: oklch(30% 0.1 145);
-  --brand-green-900: oklch(24% 0.075 146);
-  --brand-green-950: oklch(17% 0.05 147);
-
-  /* The ramp inverts per theme: it darkens on white, brightens on near-black. */
-  --chart-soft-1: oklch(0.52 0.2 285);
-  --chart-soft-2: oklch(0.64 0.16 285);
-  --chart-soft-3: oklch(0.75 0.11 285);
-  --chart-soft-4: oklch(0.85 0.065 285);
-  --chart-soft-5: oklch(0.92 0.035 285);
 }
 
 @theme {
-  --spacing-*: initial;
-  --spacing-0: 0rem;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-36: 9rem;
-  --spacing-40: 10rem;
-  --spacing-44: 11rem;
-  --spacing-48: 12rem;
-  --spacing-52: 13rem;
-  --spacing-56: 14rem;
-  --spacing-60: 15rem;
-  --spacing-64: 16rem;
-  --spacing-72: 18rem;
-  --spacing-80: 20rem;
-  --spacing-96: 24rem;
-  --spacing-px: 0.0625rem;
-  --spacing-0_5: 0.125rem;
-  --spacing-1_5: 0.375rem;
-  --spacing-2_5: 0.625rem;
-  --spacing-3_5: 0.875rem;
-
-  --breakpoint-2xl: 1536px;
-  --breakpoint-3xl: 1700px;
-  --breakpoint-4xl: 2000px;
-
-  --text-ui-xs: 0.625rem;
-  --text-ui-sm: 0.75rem;
-  --text-ui-smd: 0.8125rem;
-  --text-ui-md: 0.875rem;
-  --text-ui-lg: 1rem;
-  --text-header-xs: 0.875rem;
-  --text-header-sm: 0.9375rem;
-  --text-header-md: 1rem;
-  --text-header-lg: 1.125rem;
-  --text-header-xl: 1.375rem;
-
-  --leading-ui-xs: 160%;
-  --leading-ui-sm: 150%;
-  --leading-ui-smd: 150%;
-  --leading-ui-md: 143%;
-  --leading-ui-lg: 150%;
-  --leading-header-xs: 143%;
-  --leading-header-sm: 133%;
-  --leading-header-md: 150%;
-  --leading-header-lg: 133%;
-  --leading-header-xl: 127%;
-
-  /* Paired line-heights: `text-ui-md` alone yields the DS line-height. */
-  --text-ui-xs--line-height: var(--leading-ui-xs);
-  --text-ui-sm--line-height: var(--leading-ui-sm);
-  --text-ui-smd--line-height: var(--leading-ui-smd);
-  --text-ui-md--line-height: var(--leading-ui-md);
-  --text-ui-lg--line-height: var(--leading-ui-lg);
-  --text-header-xs--line-height: var(--leading-header-xs);
-  --text-header-sm--line-height: var(--leading-header-sm);
-  --text-header-md--line-height: var(--leading-header-md);
-  --text-header-lg--line-height: var(--leading-header-lg);
-  --text-header-xl--line-height: var(--leading-header-xl);
-
-  /* Tailwind default scale aliased onto DS tokens (safety net; prefer text-ui-* / text-header-*). */
-  --text-xs: var(--text-ui-sm);
-  --text-xs--line-height: var(--leading-ui-sm);
-  --text-sm: var(--text-ui-md);
-  --text-sm--line-height: var(--leading-ui-md);
-  --text-base: var(--text-ui-lg);
-  --text-base--line-height: var(--leading-ui-lg);
-  --text-lg: var(--text-header-sm);
-  --text-lg--line-height: var(--leading-header-sm);
-  --text-xl: var(--text-header-md);
-  --text-xl--line-height: var(--leading-header-md);
-  --text-2xl: var(--text-header-lg);
-  --text-2xl--line-height: var(--leading-header-lg);
-  --text-3xl: var(--text-header-xl);
-  --text-3xl--line-height: var(--leading-header-xl);
-  --text-4xl: var(--text-header-xl);
-  --text-4xl--line-height: var(--leading-header-xl);
-
-  --radius-none: 0px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 10px;
-  --radius-xl: 14px;
-
-  --height-icon-default: 16px;
-  --height-icon-lg: 20px;
-  --height-icon-sm: 12px;
-  --height-icon-smd: 14px;
-  --spacing-form-xs: 1.25rem;
-  --spacing-form-sm: 1.5rem;
-  --spacing-form-md: 1.75rem;
-  --spacing-form-lg: 2rem;
-  --height-header-default: 40px;
-  --height-table-header: 28px;
-  --height-table-row: 40px;
-  --height-table-row-small: 32px;
-  --height-badge-default: 20px;
-  --height-avatar-sm: 24px;
-  --height-avatar-md: 32px;
-  --height-avatar-lg: 40px;
-  --height-dropdown-max-height: 300px;
-
-  --max-height-icon-default: 16px;
-  --max-height-icon-lg: 20px;
-  --max-height-icon-sm: 12px;
-  --max-height-icon-smd: 14px;
-  --max-height-header-default: 40px;
-  --max-height-table-header: 28px;
-  --max-height-table-row: 40px;
-  --max-height-table-row-small: 32px;
-  --max-height-badge-default: 20px;
-  --max-height-avatar-sm: 24px;
-  --max-height-avatar-md: 32px;
-  --max-height-avatar-lg: 40px;
-  --max-height-dropdown-max-height: 300px;
-
-  --min-height-header-default: 40px;
-
-  --width-icon-default: 16px;
-  --width-icon-lg: 20px;
-  --width-icon-sm: 12px;
-  --width-icon-smd: 14px;
-  /* Using --spacing-form-* for both height and width */
-  --width-header-default: 40px;
-  --width-table-header: 28px;
-  --width-table-row: 40px;
-  --width-table-row-small: 32px;
-  --width-badge-default: 20px;
-  --width-avatar-sm: 24px;
-  --width-avatar-md: 32px;
-  --width-avatar-lg: 40px;
-  --width-dropdown-max-height: 300px;
-
-  --container-icon-default: 16px;
-  --container-icon-lg: 20px;
-  --container-icon-sm: 12px;
-  /* Using --spacing-form-* for container sizing */
-  --container-header-default: 40px;
-  --container-table-header: 28px;
-  --container-table-row: 40px;
-  --container-table-row-small: 32px;
-  --container-badge-default: 20px;
-  --container-avatar-sm: 24px;
-  --container-avatar-md: 32px;
-  --container-avatar-lg: 40px;
-  --container-dropdown-max-height: 300px;
-
-  --color-surface1: var(--surface1);
-  --color-surface2: var(--surface2);
-  --color-surface3: var(--surface3);
-  --color-surface4: var(--surface4);
-  --color-surface5: var(--surface5);
-  --color-surface6: var(--surface6);
-  --color-accent1: var(--accent1);
-  --color-accent2: var(--accent2);
-  --color-accent3: var(--accent3);
-  --color-accent5: var(--accent5);
-  --color-accent6: var(--accent6);
-  --color-accent1Dark: var(--accent1Dark);
-  --color-accent2Dark: var(--accent2Dark);
-  --color-accent3Dark: var(--accent3Dark);
-  --color-accent5Dark: var(--accent5Dark);
-  --color-accent6Dark: var(--accent6Dark);
-  --color-accent1Darker: var(--accent1Darker);
-  --color-accent2Darker: var(--accent2Darker);
-  --color-accent3Darker: var(--accent3Darker);
-  --color-accent5Darker: var(--accent5Darker);
-  --color-accent6Darker: var(--accent6Darker);
-  --color-neutral1: var(--neutral1);
-  --color-neutral2: var(--neutral2);
-  --color-neutral3: var(--neutral3);
-  --color-neutral4: var(--neutral4);
-  --color-neutral5: var(--neutral5);
-  --color-neutral6: var(--neutral6);
   --color-error: var(--error);
-  --color-overlay: var(--overlay);
-  --color-border1: var(--border1);
-  --color-border2: var(--border2);
-  --color-surface-overlay-soft: var(--surface-overlay-soft);
-  --color-surface-overlay-strong: var(--surface-overlay-strong);
-  --color-button-default-bg: var(--button-default-bg);
-  --color-button-default-bg-hover: var(--button-default-bg-hover);
-  --color-button-default-bg-active: var(--button-default-bg-active);
-  --color-button-default-border: var(--button-default-border);
-  --color-surface-row-featured: var(--surface-row-featured);
-  --color-sidebar-divider: var(--sidebar-divider);
 
-  /* Semantic color aliases */
-  --color-text1: var(--text1);
   --color-warning1: var(--warning1);
   --color-positive1: var(--positive1);
   --color-negative1: var(--negative1);
-
-  --color-notice-success: var(--notice-success);
-  --color-notice-success-fg: var(--notice-success-fg);
-  --color-notice-destructive: var(--notice-destructive);
-  --color-notice-destructive-fg: var(--notice-destructive-fg);
-  --color-notice-warning: var(--notice-warning);
-  --color-notice-warning-fg: var(--notice-warning-fg);
-  --color-notice-info: var(--notice-info);
-  --color-notice-info-fg: var(--notice-info-fg);
-  --color-notice-note: var(--notice-note);
-  --color-notice-note-fg: var(--notice-note-fg);
-  --color-badge-neutral-fg: var(--badge-neutral-fg);
-  --color-badge-green: var(--badge-green);
-  --color-badge-green-fg: var(--badge-green-fg);
-  --color-badge-red: var(--badge-red);
-  --color-badge-red-fg: var(--badge-red-fg);
-  --color-badge-blue: var(--badge-blue);
-  --color-badge-blue-fg: var(--badge-blue-fg);
-  --color-badge-yellow: var(--badge-yellow);
-  --color-badge-yellow-fg: var(--badge-yellow-fg);
-  --color-badge-purple: var(--badge-purple);
-  --color-badge-purple-fg: var(--badge-purple-fg);
-  --color-badge-orange: var(--badge-orange);
-  --color-badge-orange-fg: var(--badge-orange-fg);
-  --color-badge-cyan: var(--badge-cyan);
-  --color-badge-cyan-fg: var(--badge-cyan-fg);
-  --color-badge-pink: var(--badge-pink);
-  --color-badge-pink-fg: var(--badge-pink-fg);
-
-  /* Replace Tailwind green with brand green. initial clears defaults (native v4), then remap. */
-  --color-green-*: initial;
-  --color-green-50: var(--brand-green-50);
-  --color-green-100: var(--brand-green-100);
-  --color-green-200: var(--brand-green-200);
-  --color-green-300: var(--brand-green-300);
-  --color-green-400: var(--brand-green-400);
-  --color-green-500: var(--brand-green-500);
-  --color-green-600: var(--brand-green-600);
-  --color-green-700: var(--brand-green-700);
-  --color-green-800: var(--brand-green-800);
-  --color-green-900: var(--brand-green-900);
-  --color-green-950: var(--brand-green-950);
-  --color-green-badge-bg: var(--brand-green-badge-bg);
-  --color-green-badge-fg: var(--brand-green-badge-fg);
-
-  /*
-   * Role-based font tokens. Components reference --font-display (headlines,
-   * brand) and --font-body (UI, paragraphs). Defaults are system fonts so
-   * this package has no font-licensing footprint. Consumers override these
-   * tokens in their own CSS to apply product fonts.
-   */
-  --font-display: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
-  --font-body:
-    system-ui, ui-sans-serif, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
-
-  /* Backward-compat aliases — Tailwind utilities `font-sans` / `font-serif` keep working. */
-  --font-sans: var(--font-body);
-  --font-serif: var(--font-display);
-
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-
-  --ease-out-custom: cubic-bezier(0.33, 1, 0.68, 1);
-
-  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-md: 0 4px 6px oklch(0 0 0 / 0.3);
-  --shadow-lg: 0 10px 15px oklch(0 0 0 / 0.4);
-  --shadow-inner: inset 0 2px 4px oklch(0 0 0 / 0.3);
-  --shadow-card: 0 2px 8px oklch(0 0 0 / 0.4);
-  --shadow-elevated: 0 8px 24px oklch(0 0 0 / 0.5);
-  --shadow-dialog: 0 1px 2px -1px oklch(0% 0 0deg / 12%), 0 16px 40px -20px oklch(0% 0 0deg / 22%);
-  --shadow-panel: 0 1px 2px -1px oklch(0% 0 0deg / 8%), 0 10px 26px -18px oklch(0% 0 0deg / 16%);
-  --shadow-glow-accent1: 0 0 20px oklch(0.723 0.219 149.579 / 0.25);
-  --shadow-glow-accent2: 0 0 20px oklch(0.637 0.237 25.331 / 0.25);
-  --shadow-focus-ring: 0 0 0 3px oklch(0.723 0.219 149.579 / 0.12);
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
-:root {
-  --resize-dur: 300ms;
-  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.t-resize {
-  transition:
-    width var(--resize-dur) var(--resize-ease),
-    height var(--resize-dur) var(--resize-ease);
-  will-change: width, height;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-resize {
-    transition: none !important;
-  }
-}
-
-@utility duration-normal {
-  transition-duration: var(--duration-normal);
 }
 
-@utility duration-slow {
-  transition-duration: var(--duration-slow);
+/* Semantic aliases stay inline so utilities resolve var(--token) on the styled
+   element and honor per-element overrides. */
+@theme inline {
+  --color-background: var(--background);
+  --color-sidebar: var(--sidebar);
+  --color-card: var(--card);
+  --color-popover: var(--popover);
+  --color-muted: var(--muted);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-placeholder: var(--placeholder);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
 }