@hirobius/design-system 0.8.1

package/dist/types/src/lib/deprecation.d.ts

@@ -0,0 +1,4 @@
+/** Emit a deprecation warning once per unique `code` (dev only). */
+export declare function warnOnce(code: string, message: string): void;
+/** Test/Storybook helper to reset the once-per-session guard. */
+export declare function __resetDeprecationWarnings(): void;

package/dist/types/src/lib/manifest-entry.d.ts

@@ -0,0 +1,3 @@
+import type { SystemManifest } from '../app/data/manifest-types';
+declare const manifest: SystemManifest;
+export default manifest;

package/dist/types/src/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** @public */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/variables.css

@@ -0,0 +1,461 @@
+/* @hirobius/design-system/variables.css — design tokens as CSS custom
+ * properties ONLY (no reset, no preflight, no utilities). Safe to import
+ * alongside another design system; cannot restyle host elements. */
+/**
+ * Generated by scripts/build-tokens.mjs — do not edit manually.
+ * Source: hirobius.tokens.json (W3C DTCG 2025.10)
+ * Regenerate: node scripts/build-tokens.mjs
+ *
+ * Three-tier architecture: primitive → semantic → component
+ * Dark mode via [data-theme="dark"] selector (Figma SDS convention).
+ * The var() reference chain is preserved so dark-mode overrides cascade
+ * automatically — no JavaScript re-renders needed for theme switching.
+ */
+
+:root {
+
+  /* ── Primitives ────────────────────────────────────────────────────────── */
+  --primitive-color-neutral-50: #fafafa;
+  --primitive-color-neutral-100: #f5f5f5;
+  --primitive-color-neutral-200: #e5e5e5;
+  --primitive-color-neutral-300: #d4d4d4;
+  --primitive-color-neutral-400: #a3a3a3;
+  --primitive-color-neutral-500: #737373;
+  --primitive-color-neutral-600: #525252;
+  --primitive-color-neutral-700: #404040;
+  --primitive-color-neutral-800: #262626;
+  --primitive-color-neutral-850: #1a1a1a;
+  --primitive-color-neutral-900: #111111;
+  --primitive-color-neutral-950: #0a0a0a;
+  --primitive-color-neutral-white: #ffffff;
+  --primitive-color-neutral-black: #000000;
+  --primitive-color-blue-50: oklch(0.96 0.03 266.54);
+  --primitive-color-blue-100: oklch(0.92 0.04 266.54);
+  --primitive-color-blue-200: oklch(0.88 0.07 266.54);
+  --primitive-color-blue-300: oklch(0.70 0.2903 266.54);
+  --primitive-color-blue-400: oklch(0.65 0.2903 266.54);
+  --primitive-color-blue-450: oklch(0.56 0.29 266.60);
+  --primitive-color-blue-500: #1E2EFD;
+  --primitive-color-blue-600: oklch(0.45 0.2903 266.54);
+  --primitive-color-blue-700: oklch(0.44 0.2903 266.54);
+  --primitive-color-blue-800: oklch(0.30 0.07 266.54);
+  --primitive-color-blue-900: oklch(0.22 0.05 266.54);
+  --primitive-color-red-50: #fef2f2;
+  --primitive-color-red-400: #f87171;
+  --primitive-color-red-700: #b91c1c;
+  --primitive-color-red-950: #450a0a;
+  --primitive-color-green-50: #ecfdf5;
+  --primitive-color-green-400: #34d399;
+  --primitive-color-green-700: #047857;
+  --primitive-color-green-950: #022c22;
+  --primitive-color-amber-50: #fffbeb;
+  --primitive-color-amber-400: #fbbf24;
+  --primitive-color-amber-800: #92400e;
+  --primitive-color-amber-950: #451a03;
+  --primitive-color-stone-100: #F5EFE7;
+  --primitive-color-stone-400: #D0B492;
+  --primitive-color-stone-450: #BC9D7E;
+  --primitive-color-stone-500: #A8896A;
+  --primitive-color-stone-600: #8B6F47;
+  --primitive-color-stone-700: #75593A;
+  --primitive-color-stone-800: #5C432A;
+  --primitive-color-stone-950: #3A2E1F;
+  --primitive-color-projectBrand-microsoftGameDev-100: #E5E5FC;
+  --primitive-color-projectBrand-microsoftGameDev-500: #6d31fb;
+  --primitive-color-projectBrand-microsoftGameDev-900: oklch(0.22 0.16 304);
+  --primitive-space-0: 0px;
+  --primitive-space-1: 4px;
+  --primitive-space-2: 8px;
+  --primitive-space-3: 12px;
+  --primitive-space-4: 16px;
+  --primitive-space-5: 20px;
+  --primitive-space-6: 24px;
+  --primitive-space-7: 28px;
+  --primitive-space-8: 32px;
+  --primitive-space-10: 40px;
+  --primitive-space-12: 48px;
+  --primitive-space-16: 64px;
+  --primitive-space-20: 80px;
+  --primitive-space-24: 96px;
+  --primitive-space-32: 128px;
+  --primitive-space-px1: 1px;
+  --primitive-space-px2: 2px;
+  --primitive-space-px6: 6px;
+  --primitive-space-px10: 10px;
+  --primitive-blur-8: 8px;
+  --primitive-blur-16: 16px;
+  --primitive-radius-0: 0px;
+  --primitive-radius-2: 2px;
+  --primitive-radius-4: 4px;
+  --primitive-radius-8: 8px;
+  --primitive-radius-12: 12px;
+  --primitive-radius-full: 9999px;
+  --primitive-typography-family-primary: Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --primitive-typography-family-display: "Clash Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --primitive-typography-family-mono: "Geist Mono", "Courier New", monospace;
+  --primitive-typography-size-2xs: 10px;
+  --primitive-typography-size-xs: 13px;
+  --primitive-typography-size-sm: 15px;
+  --primitive-typography-size-base: 17px;
+  --primitive-typography-size-lg: 20px;
+  --primitive-typography-size-xl: 24px;
+  --primitive-typography-size-2xl: 30px;
+  --primitive-typography-size-3xl: 36px;
+  --primitive-typography-size-4xl: 48px;
+  --primitive-typography-size-5xl: 80px;
+  --primitive-typography-size-7xl: 72px;
+  --primitive-typography-weight-light: 300;
+  --primitive-typography-weight-regular: 400;
+  --primitive-typography-weight-medium: 500;
+  --primitive-typography-weight-semibold: 600;
+  --primitive-typography-weight-bold: 700;
+  --primitive-typography-lineHeight-compact: 0.95;
+  --primitive-typography-lineHeight-none: 1;
+  --primitive-typography-lineHeight-tight: 1.25;
+  --primitive-typography-lineHeight-snug: 1.375;
+  --primitive-typography-lineHeight-normal: 1.5;
+  --primitive-typography-lineHeight-relaxed: 1.625;
+  --primitive-typography-letterSpacing-tighter: -0.02em;
+  --primitive-typography-letterSpacing-tight: -0.01em;
+  --primitive-typography-letterSpacing-normal: 0em;
+  --primitive-typography-letterSpacing-wide: 0.01em;
+  --primitive-typography-letterSpacing-wider: 0.02em;
+  --primitive-typography-letterSpacing-caps: 0.06em;
+  --primitive-duration-instant: 100ms;
+  --primitive-duration-short: 150ms;
+  --primitive-duration-medium: 250ms;
+  --primitive-duration-long: 400ms;
+  --primitive-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
+  --primitive-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --primitive-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --primitive-easing-elastic: spring(300, 20, 1);
+  --primitive-shadow-color: 220 13% 18%;
+  --primitive-breakpoint-xs: 375px;
+  --primitive-breakpoint-sm: 640px;
+  --primitive-breakpoint-md: 768px;
+  --primitive-breakpoint-lg: 1024px;
+  --primitive-breakpoint-xl: 1280px;
+  --primitive-size-8: 8px;
+  --primitive-size-10: 10px;
+  --primitive-size-12: 12px;
+  --primitive-size-16: 16px;
+  --primitive-size-20: 20px;
+  --primitive-size-24: 24px;
+  --primitive-size-32: 32px;
+  --primitive-size-40: 40px;
+  --primitive-size-48: 48px;
+  --primitive-size-64: 64px;
+  --primitive-size-80: 80px;
+  --primitive-size-96: 96px;
+  --primitive-size-interactive-min: 44px;
+  --primitive-size-width-96: 96px;
+  --primitive-size-width-760: 760px;
+  --primitive-size-width-1200: 1200px;
+  --primitive-size-width-50ch: 50ch;
+  --primitive-grid-columns-1: 1;
+  --primitive-grid-columns-2: 2;
+  --primitive-grid-columns-3: 3;
+  --primitive-zIndex-0: 0;
+  --primitive-zIndex-10: 10;
+  --primitive-zIndex-100: 100;
+  --primitive-zIndex-1000: 1000;
+  --primitive-borderWidth-xs: 1px;
+  --primitive-borderWidth-sm: 2px;
+  --primitive-borderWidth-md: 4px;
+
+  /* ── Semantic (light mode defaults) ────────────────────────────────────── */
+  /* semantic.motion.productive */
+  --hds-motion-productive-duration: var(--primitive-duration-short);
+  --hds-motion-productive-easing: var(--primitive-easing-decelerate);
+  /* semantic.motion.expressive */
+  --hds-motion-expressive-duration: var(--primitive-duration-medium);
+  --hds-motion-expressive-easing: var(--primitive-easing-elastic);
+  /* semantic.motion.spatial */
+  --hds-motion-spatial-duration: var(--primitive-duration-long);
+  --hds-motion-spatial-easing: var(--primitive-easing-emphasized);
+  /* semantic.motion.exit */
+  --hds-motion-exit-duration: var(--primitive-duration-instant);
+  --hds-motion-exit-easing: var(--primitive-easing-accelerate);
+  --semantic-color-surface-page: var(--primitive-color-neutral-white);
+  --semantic-color-surface-raised: var(--primitive-color-neutral-50);
+  --semantic-color-surface-overlay: var(--primitive-color-neutral-100);
+  --semantic-color-surface-inverse: var(--primitive-color-neutral-black);
+  --semantic-color-surface-accent: var(--primitive-color-blue-500);
+  --semantic-color-surface-accentSubtle: var(--primitive-color-blue-50);
+  --semantic-color-content-primary: var(--primitive-color-neutral-900);
+  --semantic-color-content-secondary: var(--primitive-color-neutral-600);
+  --semantic-color-content-disabled: var(--primitive-color-neutral-300);
+  --semantic-color-content-inverse: var(--primitive-color-neutral-100);
+  --semantic-color-content-accent: var(--primitive-color-blue-500);
+  --semantic-color-content-onAccent: var(--primitive-color-neutral-white);
+  --semantic-color-border-default: var(--primitive-color-neutral-200);
+  --semantic-color-border-subdued: var(--primitive-color-neutral-200);
+  --semantic-color-border-subtle: var(--primitive-color-neutral-100);
+  --semantic-color-border-strong: var(--primitive-color-neutral-300);
+  --semantic-color-border-accent: var(--primitive-color-blue-500);
+  --semantic-color-feedback-error: var(--primitive-color-red-700);
+  --semantic-color-feedback-success: var(--primitive-color-green-700);
+  --semantic-color-feedback-warning: var(--primitive-color-amber-800);
+  --semantic-color-feedback-info: var(--primitive-color-blue-500);
+  --semantic-color-feedback-bg-error: var(--primitive-color-red-50);
+  --semantic-color-feedback-bg-success: var(--primitive-color-green-50);
+  --semantic-color-feedback-bg-warning: var(--primitive-color-amber-50);
+  --semantic-color-feedback-bg-info: var(--primitive-color-blue-50);
+  --semantic-space-subgrid-hairline: var(--primitive-space-px1);
+  --semantic-space-subgrid-xs: var(--primitive-space-px2);
+  --semantic-space-subgrid-gap: var(--primitive-space-1);
+  --semantic-space-component-gap: var(--primitive-space-2);
+  --semantic-space-component-medium: var(--primitive-space-3);
+  --semantic-space-component-padding: var(--primitive-space-6);
+  --semantic-space-layout-tight: var(--primitive-space-4);
+  --semantic-space-layout-normal: var(--primitive-space-6);
+  --semantic-space-layout-gutter: var(--primitive-space-6);
+  --semantic-space-layout-inset: var(--primitive-space-8);
+  --semantic-space-layout-spacious: var(--primitive-space-12);
+  --semantic-space-section-stack: var(--primitive-space-20);
+  --semantic-space-section-inset: var(--primitive-space-24);
+  --semantic-space-section-heroMax: var(--primitive-space-32);
+  --semantic-space-sidebar-indent: var(--primitive-space-3);
+  --semantic-space-sidebar-gap: var(--primitive-space-4);
+  --semantic-space-sidebar-sectionGap: var(--primitive-space-3);
+  --semantic-space-sidebar-railPadding: var(--primitive-space-5);
+  --semantic-layout-width-content: var(--primitive-size-width-760);
+  --semantic-layout-width-max: var(--primitive-size-width-1200);
+  --semantic-layout-container-maxWidth: var(--primitive-size-width-1200);
+  --semantic-layout-content-maxWidth: var(--primitive-size-width-760);
+  --semantic-layout-prose-maxWidth: var(--primitive-size-width-50ch);
+  --semantic-layout-section-paddingY: var(--primitive-space-20);
+  --semantic-layout-grid-gap: var(--primitive-space-8);
+  --semantic-layout-grid-columns-mobile: var(--primitive-grid-columns-1);
+  --semantic-layout-grid-columns-tablet: var(--primitive-grid-columns-2);
+  --semantic-layout-grid-columns-desktop: var(--primitive-grid-columns-3);
+  /* semantic.typography.display */
+  --semantic-typography-display-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-display-font-size: var(--primitive-typography-size-7xl);
+  --semantic-typography-display-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-display-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-display-line-height: var(--primitive-typography-lineHeight-none);
+  /* semantic.typography.h1 */
+  --semantic-typography-h1-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h1-font-size: var(--primitive-typography-size-4xl);
+  --semantic-typography-h1-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-h1-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-h1-line-height: var(--primitive-typography-lineHeight-tight);
+  /* semantic.typography.h2 */
+  --semantic-typography-h2-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h2-font-size: var(--primitive-typography-size-2xl);
+  --semantic-typography-h2-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-h2-letter-spacing: var(--primitive-typography-letterSpacing-tight);
+  --semantic-typography-h2-line-height: 42px;
+  /* semantic.typography.h3 */
+  --semantic-typography-h3-font-family: var(--primitive-typography-family-display);
+  --semantic-typography-h3-font-size: var(--primitive-typography-size-lg);
+  --semantic-typography-h3-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-h3-letter-spacing: var(--primitive-typography-letterSpacing-normal);
+  --semantic-typography-h3-line-height: 28px;
+  /* semantic.typography.body */
+  --semantic-typography-body-font-family: var(--primitive-typography-family-primary);
+  --semantic-typography-body-font-size: var(--primitive-typography-size-base);
+  --semantic-typography-body-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-body-letter-spacing: var(--primitive-typography-letterSpacing-normal);
+  --semantic-typography-body-line-height: 28px;
+  --semantic-typography-body-max-width: 60ch;
+  /* semantic.typography.ui */
+  --semantic-typography-ui-font-family: var(--primitive-typography-family-primary);
+  --semantic-typography-ui-font-size: var(--primitive-typography-size-sm);
+  --semantic-typography-ui-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-ui-letter-spacing: var(--primitive-typography-letterSpacing-normal);
+  --semantic-typography-ui-line-height: 24px;
+  --semantic-typography-ui-max-width: 60ch;
+  /* semantic.typography.eyebrow */
+  --semantic-typography-eyebrow-font-family: var(--primitive-typography-family-primary);
+  --semantic-typography-eyebrow-font-size: var(--primitive-typography-size-xs);
+  --semantic-typography-eyebrow-font-weight: var(--primitive-typography-weight-medium);
+  --semantic-typography-eyebrow-letter-spacing: var(--primitive-typography-letterSpacing-caps);
+  --semantic-typography-eyebrow-line-height: 20px;
+  --semantic-typography-eyebrow-text-transform: uppercase;
+  /* semantic.typography.mono */
+  --semantic-typography-mono-font-family: var(--primitive-typography-family-mono);
+  --semantic-typography-mono-font-size: var(--primitive-typography-size-xs);
+  --semantic-typography-mono-font-weight: var(--primitive-typography-weight-regular);
+  --semantic-typography-mono-letter-spacing: var(--primitive-typography-letterSpacing-normal);
+  --semantic-typography-mono-line-height: 20px;
+  --semantic-typography-mono-max-width: 60ch;
+  --semantic-typography-lineHeight-none: var(--primitive-typography-lineHeight-none);
+  --semantic-docs-space-section: var(--primitive-space-12);
+  --semantic-docs-space-paragraph: var(--primitive-space-6);
+  --semantic-docs-space-inline: var(--primitive-space-2);
+  --semantic-accent-rest: var(--primitive-color-blue-500);
+  --semantic-accent-hover: var(--primitive-color-blue-600);
+  --semantic-accent-pressed: var(--primitive-color-blue-700);
+  --semantic-accent-inactive: var(--primitive-color-blue-200);
+  --semantic-accent-disabled: var(--primitive-color-blue-100);
+  --semantic-accent-content: var(--primitive-color-blue-500);
+  --semantic-accent-contentHover: var(--primitive-color-blue-600);
+  --semantic-accent-subtle: var(--primitive-color-blue-50);
+  --semantic-radius-action: var(--primitive-radius-12);
+  --semantic-borderWidth-default: var(--primitive-borderWidth-xs);
+  --semantic-borderWidth-emphasis: var(--primitive-borderWidth-sm);
+  --semantic-shadow-subtle: 0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06);
+  --semantic-shadow-floating: 0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08);
+  --semantic-shadow-overlay: 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12);
+  /* semantic.elevation.flat */
+  --semantic-elevation-flat-surface: var(--semantic-color-surface-page);
+  --semantic-elevation-flat-shadow: none;
+  --semantic-elevation-flat-border: var(--semantic-color-border-subtle);
+  /* semantic.elevation.raised */
+  --semantic-elevation-raised-surface: var(--semantic-color-surface-raised);
+  --semantic-elevation-raised-shadow: var(--semantic-shadow-subtle);
+  --semantic-elevation-raised-border: transparent;
+  /* semantic.elevation.floating */
+  --semantic-elevation-floating-surface: var(--semantic-color-surface-raised);
+  --semantic-elevation-floating-shadow: var(--semantic-shadow-floating);
+  --semantic-elevation-floating-border: transparent;
+  /* semantic.elevation.overlay */
+  --semantic-elevation-overlay-surface: var(--semantic-color-surface-overlay);
+  --semantic-elevation-overlay-shadow: var(--semantic-shadow-overlay);
+  --semantic-elevation-overlay-border: transparent;
+
+  /* ── Component ─────────────────────────────────────────────────────────── */
+  --component-nav-bg: var(--semantic-color-surface-page);
+  --component-nav-bgActive: var(--semantic-accent-subtle);
+  --component-nav-borderActive: var(--semantic-color-surface-accent);
+  --component-nav-text: var(--semantic-color-content-secondary);
+  --component-nav-textActive: var(--semantic-color-content-primary);
+  --component-nav-height: var(--primitive-space-16);
+  --component-nav-paddingX: var(--primitive-space-6);
+  --component-nav-paddingY: var(--primitive-space-2);
+  --component-tag-background: var(--semantic-accent-subtle);
+  --component-tag-text: var(--semantic-color-content-primary);
+  --component-tag-border: var(--semantic-color-border-default);
+  --component-tag-radius: var(--primitive-radius-full);
+  --component-tag-fontSize: var(--primitive-typography-size-xs);
+  --component-tag-fontWeight: var(--primitive-typography-weight-medium);
+  --component-tag-lineHeight: var(--primitive-typography-lineHeight-normal);
+  --component-tag-minWidth: var(--primitive-size-48);
+  --component-tag-minHeight: var(--primitive-space-6);
+  --component-tag-paddingX: var(--primitive-space-3);
+  --component-tag-paddingY: var(--primitive-space-2);
+  --component-tag-activeText: var(--semantic-color-content-onAccent);
+  --component-tag-activeBackground: var(--semantic-accent-rest);
+  --component-tag-activeBorder: var(--semantic-accent-rest);
+  --component-tag-activeHover: var(--semantic-accent-hover);
+  --component-badge-fontSize: var(--primitive-typography-size-xs);
+  --component-badge-fontWeight: var(--primitive-typography-weight-medium);
+  --component-badge-text: var(--semantic-color-content-primary);
+  --component-badge-bg: var(--semantic-color-feedback-bg-info);
+  --component-badge-radius: var(--primitive-radius-4);
+  --component-badge-height: var(--primitive-size-20);
+  --component-badge-minWidth: var(--primitive-size-20);
+  --component-badge-paddingY: var(--primitive-space-px2);
+  --component-badge-paddingX: var(--primitive-space-px6);
+  --component-button-bg: var(--semantic-color-surface-accent);
+  --component-button-bgHover: var(--semantic-accent-hover);
+  --component-button-text: var(--semantic-color-content-onAccent);
+  --component-button-radius: var(--semantic-radius-action);
+  --component-button-paddingX: var(--primitive-space-4);
+  --component-button-paddingY: var(--primitive-space-3);
+  --component-button-size-sm-paddingX: var(--primitive-space-2);
+  --component-button-size-sm-paddingY: var(--primitive-space-1);
+  --component-button-size-sm-fontSize: var(--primitive-typography-size-xs);
+  --component-button-size-sm-iconSize: var(--primitive-size-12);
+  --component-button-size-sm-height: var(--primitive-space-7);
+  --component-button-size-sm-itemSpacing: var(--primitive-space-1);
+  --component-button-size-md-paddingX: var(--primitive-space-4);
+  --component-button-size-md-paddingY: var(--primitive-space-3);
+  --component-button-size-md-fontSize: var(--primitive-typography-size-sm);
+  --component-button-size-md-iconSize: var(--primitive-size-16);
+  --component-button-size-md-height: var(--primitive-size-40);
+  --component-button-size-md-itemSpacing: var(--primitive-space-2);
+  --component-button-size-lg-paddingX: var(--primitive-space-6);
+  --component-button-size-lg-paddingY: var(--primitive-space-4);
+  --component-button-size-lg-fontSize: var(--primitive-typography-size-base);
+  --component-button-size-lg-iconSize: var(--primitive-size-20);
+  --component-button-size-lg-height: var(--primitive-size-48);
+  --component-button-size-lg-itemSpacing: var(--primitive-space-2);
+  --component-button-primary-textDisabled: var(--semantic-color-content-onAccent);
+  --component-button-primary-bgDisabled: var(--semantic-color-surface-accentSubtle);
+  --component-button-secondary-bg-rest: var(--semantic-color-surface-page);
+  --component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
+  --component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
+  --component-button-secondary-border-rest: var(--semantic-color-border-default);
+  --component-button-secondary-border-hover: var(--semantic-color-border-default);
+  --component-button-secondary-border-pressed: var(--semantic-color-border-default);
+  --component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
+  --component-button-secondary-text: var(--semantic-color-content-primary);
+  --component-input-bg: var(--semantic-color-surface-raised);
+  --component-input-text: var(--semantic-color-content-primary);
+  --component-input-border: var(--semantic-color-border-default);
+  --component-input-borderError: var(--semantic-color-feedback-error);
+  --component-input-radius: var(--semantic-radius-action);
+  --component-input-paddingX: var(--primitive-space-4);
+  --component-input-paddingY: var(--primitive-space-3);
+  --component-card-bg: var(--semantic-color-surface-raised);
+  --component-card-border: var(--semantic-color-border-default);
+  --component-card-radius: var(--primitive-radius-8);
+  --component-card-padding: var(--primitive-space-6);
+  --component-card-gap: var(--primitive-space-2);
+  --component-lightbox-backdrop-blur: var(--primitive-blur-16);
+
+  /* ── Role aliases (shadcn vocabulary) ──────────────────────────────────── */
+  --role-background: var(--semantic-color-surface-page);
+  --role-foreground: var(--semantic-color-content-primary);
+  --role-card: var(--semantic-color-surface-raised);
+  --role-card-foreground: var(--semantic-color-content-primary);
+  --role-popover: var(--semantic-color-surface-overlay);
+  --role-popover-foreground: var(--semantic-color-content-primary);
+  --role-primary: var(--semantic-color-surface-accent);
+  --role-primary-foreground: var(--semantic-color-content-onAccent);
+  --role-secondary: var(--semantic-color-surface-raised);
+  --role-secondary-foreground: var(--semantic-color-content-primary);
+  --role-muted: var(--semantic-color-surface-overlay);
+  --role-muted-foreground: var(--semantic-color-content-secondary);
+  --role-accent: var(--semantic-color-surface-accentSubtle);
+  --role-accent-foreground: var(--semantic-color-content-accent);
+  --role-destructive: var(--semantic-color-feedback-error);
+  --role-destructive-foreground: var(--semantic-color-content-inverse);
+  --role-border: var(--semantic-color-border-default);
+  --role-input: var(--semantic-color-border-default);
+  --role-ring: var(--semantic-color-border-accent);
+  --role-radius: var(--semantic-radius-action);
+}
+
+/* ── Dark mode overrides ────────────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --primitive-shadow-color: 0 0% 0%;
+  --semantic-color-surface-page: var(--primitive-color-neutral-black);
+  --semantic-color-surface-raised: var(--primitive-color-neutral-950);
+  --semantic-color-surface-overlay: var(--primitive-color-neutral-850);
+  --semantic-color-surface-inverse: var(--primitive-color-neutral-white);
+  --semantic-color-surface-accent: var(--primitive-color-blue-500);
+  --semantic-color-surface-accentSubtle: var(--primitive-color-blue-900);
+  --semantic-color-content-primary: var(--primitive-color-neutral-100);
+  --semantic-color-content-secondary: var(--primitive-color-neutral-400);
+  --semantic-color-content-disabled: var(--primitive-color-neutral-600);
+  --semantic-color-content-inverse: var(--primitive-color-neutral-900);
+  --semantic-color-content-accent: var(--primitive-color-blue-300);
+  --semantic-color-content-onAccent: var(--primitive-color-neutral-white);
+  --semantic-color-border-default: var(--primitive-color-neutral-700);
+  --semantic-color-border-subdued: var(--primitive-color-neutral-800);
+  --semantic-color-border-subtle: var(--primitive-color-neutral-850);
+  --semantic-color-border-strong: var(--primitive-color-neutral-600);
+  --semantic-color-border-accent: var(--primitive-color-blue-500);
+  --semantic-color-feedback-error: var(--primitive-color-red-400);
+  --semantic-color-feedback-success: var(--primitive-color-green-400);
+  --semantic-color-feedback-warning: var(--primitive-color-amber-400);
+  --semantic-color-feedback-info: var(--primitive-color-blue-300);
+  --semantic-color-feedback-bg-error: var(--primitive-color-red-950);
+  --semantic-color-feedback-bg-success: var(--primitive-color-green-950);
+  --semantic-color-feedback-bg-warning: var(--primitive-color-amber-950);
+  --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
+  --semantic-accent-rest: var(--primitive-color-blue-500);
+  --semantic-accent-hover: var(--primitive-color-blue-450);
+  --semantic-accent-pressed: var(--primitive-color-blue-400);
+  --semantic-accent-inactive: var(--primitive-color-blue-200);
+  --semantic-accent-disabled: var(--primitive-color-blue-100);
+  --semantic-accent-content: var(--primitive-color-blue-300);
+  --semantic-accent-contentHover: var(--primitive-color-blue-200);
+  --semantic-accent-subtle: var(--primitive-color-blue-900);
+  --component-badge-bg: var(--semantic-color-feedback-bg-info);
+  --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
+}