@neuravision/construct 2.0.3 → 2.1.1

package/tokens/tokens.css

@@ -1,6 +1,6 @@
-/* Generated by design/scripts/build-tokens.mjs. Do not edit directly. */
+/* Generated by scripts/build-tokens.mjs. Do not edit directly. */
 :root {
-  /* Color primitives */
+  /* Primitive: colors */
   --color-stone-0: #FFFFFF;
   --color-stone-50: #FAFAF8;
   --color-stone-100: #F1F0EB;
@@ -93,7 +93,7 @@
   --color-pink-700: #6A1932;
   --color-pink-800: #461020;
   --color-pink-900: #29080F;
-  /* Typography */
+  /* Primitive: typography */
   --font-family-brand: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-text: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --font-family-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
@@ -102,6 +102,7 @@
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
+  --font-size-2xs: 10px;
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
@@ -112,6 +113,7 @@
   --font-size-4xl: 32px;
   --font-size-5xl: 40px;
   --font-size-6xl: 48px;
+  --line-height-2xs: 14px;
   --line-height-xs: 16px;
   --line-height-sm: 20px;
   --line-height-md: 24px;
@@ -125,7 +127,7 @@
   --letter-spacing-tight: -0.3px;
   --letter-spacing-normal: 0px;
   --letter-spacing-wide: 0.3px;
-  /* Semantic typography */
+  /* Semantic: typography */
   --type-display-font-family: var(--font-family-heading);
   --type-display-font-size: var(--font-size-6xl);
   --type-display-line-height: var(--line-height-6xl);
@@ -171,7 +173,7 @@
   --type-caption-line-height: var(--line-height-xs);
   --type-caption-font-weight: var(--font-weight-regular);
   --type-caption-letter-spacing: var(--letter-spacing-normal);
-  /* Spacing */
+  /* Primitive: spacing */
   --space-0: 0px;
   --space-1: 2px;
   --space-2: 4px;
@@ -186,7 +188,7 @@
   --space-11: 48px;
   --space-12: 64px;
   --space-13: 80px;
-  /* Radius */
+  /* Primitive: radius */
   --radius-xs: 2px;
   --radius-sm: 4px;
   --radius-md: 8px;
@@ -194,15 +196,15 @@
   --radius-xl: 16px;
   --radius-2xl: 24px;
   --radius-round: 999px;
-  /* Border widths */
+  /* Primitive: border widths */
   --border-thin: 1px;
   --border-medium: 2px;
   --border-thick: 3px;
-  /* Opacity */
+  /* Primitive: opacity */
   --opacity-muted: 0.7;
   --opacity-disabled: 0.5;
   --opacity-overlay: 0.6;
-  /* Sizes */
+  /* Primitive: sizes */
   --control-height-xs: 28px;
   --control-height-sm: 32px;
   --control-height-md: 40px;
@@ -212,7 +214,7 @@
   --icon-md: 20px;
   --icon-lg: 24px;
   --icon-xl: 32px;
-  /* Layout */
+  /* Primitive: layout */
   --container-sm: 640px;
   --container-md: 960px;
   --container-lg: 1200px;
@@ -224,13 +226,13 @@
   --grid-gap-md: 24px;
   --grid-gap-lg: 32px;
   --navbar-height: 56px;
-  /* Shadows */
+  /* Primitive: shadows */
   --shadow-xs: 0 1px 2px rgba(28, 20, 10, 0.07);
   --shadow-sm: 0 2px 6px rgba(28, 20, 10, 0.09);
   --shadow-md: 0 8px 20px rgba(28, 20, 10, 0.11);
   --shadow-lg: 0 16px 36px rgba(28, 20, 10, 0.13);
   --shadow-xl: 0 24px 56px rgba(28, 20, 10, 0.17);
-  /* Motion */
+  /* Primitive: motion */
   --duration-fast: 120ms;
   --duration-normal: 200ms;
   --duration-slow: 280ms;
@@ -238,7 +240,7 @@
   --easing-standard: cubic-bezier(0.2, 0, 0, 1);
   --easing-decelerate: cubic-bezier(0, 0, 0, 1);
   --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
-  /* Z-Index */
+  /* Primitive: z-index */
   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1100;
@@ -246,19 +248,140 @@
   --z-modal: 1300;
   --z-toast: 1400;
   --z-tooltip: 1500;
-  /* Breakpoints */
+  /* Primitive: breakpoints */
   --bp-xs: 360px;
   --bp-sm: 600px;
   --bp-md: 900px;
   --bp-lg: 1200px;
   --bp-xl: 1536px;
+  /* Semantic: light */
+  --color-brand-primary: var(--color-stone-950);
+  --color-brand-primary-hover: var(--color-stone-800);
+  --color-brand-primary-active: var(--color-stone-900);
+  --color-brand-accent: var(--color-orange-500);
+  --color-brand-accent-hover: var(--color-orange-400);
+  --color-brand-accent-active: var(--color-orange-300);
+  --color-brand-on-accent: var(--color-stone-950);
+  --color-text-primary: var(--color-stone-950);
+  --color-text-secondary: var(--color-stone-700);
+  --color-text-muted: var(--color-stone-600);
+  --color-text-inverse: var(--color-stone-0);
+  --color-text-on-primary: var(--color-stone-0);
+  --color-bg-canvas: var(--color-stone-50);
+  --color-bg-surface: var(--color-stone-100);
+  --color-bg-elevated: var(--color-stone-0);
+  --color-bg-muted: var(--color-stone-200);
+  --color-bg-subtle: var(--color-bg-surface);
+  --color-border-subtle: var(--color-stone-200);
+  --color-border-default: var(--color-stone-500);
+  --color-border-strong: var(--color-stone-500);
+  --color-border-muted: var(--color-border-subtle);
+  --color-state-info: var(--color-ocean-600);
+  --color-state-success: var(--color-green-700);
+  --color-state-warning: var(--color-amber-700);
+  --color-state-danger: var(--color-red-500);
+  --color-state-on-solid: var(--color-stone-0);
+  --color-state-info-surface: var(--color-ocean-50);
+  --color-state-success-surface: var(--color-green-50);
+  --color-state-warning-surface: var(--color-amber-50);
+  --color-state-danger-surface: var(--color-red-50);
+  --color-state-info-border: var(--color-ocean-200);
+  --color-state-success-border: var(--color-green-200);
+  --color-state-warning-border: var(--color-amber-200);
+  --color-state-danger-border: var(--color-red-200);
+  --color-state-info-text: var(--color-ocean-700);
+  --color-state-success-text: var(--color-green-700);
+  --color-state-warning-text: var(--color-amber-700);
+  --color-state-danger-text: var(--color-red-700);
+  --color-overlay-scrim: rgba(22, 19, 15, 0.58);
+  --color-focus-ring: var(--color-orange-600);
+  --color-avatar-seed-1-bg: var(--color-ocean-100);
+  --color-avatar-seed-1-fg: var(--color-ocean-800);
+  --color-avatar-seed-2-bg: var(--color-teal-100);
+  --color-avatar-seed-2-fg: var(--color-teal-800);
+  --color-avatar-seed-3-bg: var(--color-amber-100);
+  --color-avatar-seed-3-fg: var(--color-amber-800);
+  --color-avatar-seed-4-bg: var(--color-red-100);
+  --color-avatar-seed-4-fg: var(--color-red-800);
+  --color-avatar-seed-5-bg: var(--color-green-100);
+  --color-avatar-seed-5-fg: var(--color-green-800);
+  --color-avatar-seed-6-bg: var(--color-purple-100);
+  --color-avatar-seed-6-fg: var(--color-purple-800);
+  --color-avatar-seed-7-bg: var(--color-pink-100);
+  --color-avatar-seed-7-fg: var(--color-pink-800);
+  --color-avatar-seed-8-bg: var(--color-stone-200);
+  --color-avatar-seed-8-fg: var(--color-stone-800);
+  --color-chart-series-1: var(--color-ocean-600);
+  --color-chart-series-2: var(--color-amber-600);
+  --color-chart-series-3: var(--color-green-600);
+  --color-chart-series-4: var(--color-purple-500);
+  --color-chart-series-5: var(--color-pink-500);
+  --color-chart-series-6: var(--color-teal-600);
+  --color-chart-series-7: var(--color-red-500);
+  --color-chart-series-8: var(--color-stone-600);
+  --theme-color-scheme: light;
+  --font-family-heading: var(--font-family-brand);
+  --font-family-body: var(--font-family-text);
+  --font-family-code: var(--font-family-mono);
+  --radius-control: var(--radius-md);
+  --radius-card: var(--radius-lg);
+  --radius-modal: var(--radius-xl);
+  --radius-pill: var(--radius-round);
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  /* Component: defaults */
+  --component-button-background: var(--color-brand-primary);
+  --component-button-background-hover: var(--color-brand-primary-hover);
+  --component-button-background-active: var(--color-brand-primary-active);
+  --component-button-border: var(--color-brand-primary);
+  --component-button-color: var(--color-text-on-primary);
+  --component-button-height: var(--control-height-md);
+  --component-button-padding-x: var(--space-6);
+  --component-button-font-size: var(--font-size-sm);
+  --component-button-line-height: var(--line-height-sm);
+  --component-button-font-weight: var(--font-weight-semibold);
+  --component-button-radius: var(--radius-control);
+  --component-button-gap: var(--space-3);
+  --component-button-loading-spinner-size: var(--icon-md);
+  --component-control-background: var(--color-bg-elevated);
+  --component-control-background-hover: var(--color-bg-surface);
+  --component-control-background-disabled: var(--color-bg-muted);
+  --component-control-border: var(--color-border-default);
+  --component-control-border-hover: var(--color-border-strong);
+  --component-control-border-focus: var(--color-focus-ring);
+  --component-control-text: var(--color-text-primary);
+  --component-control-placeholder: var(--color-text-muted);
+  --component-control-radius: var(--radius-control);
+  --component-card-background: var(--color-bg-elevated);
+  --component-card-border: var(--color-border-subtle);
+  --component-card-radius: var(--radius-card);
+  --component-card-padding: var(--space-6);
+  --component-card-shadow: var(--shadow-card);
+  --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-status-gap: var(--space-2);
+  --component-status-font-size: var(--font-size-sm);
+  --component-status-icon-size: var(--icon-sm);
+  --component-metric-background: var(--color-bg-elevated);
+  --component-metric-border: var(--color-border-subtle);
+  --component-metric-radius: var(--radius-card);
+  --component-metric-padding: var(--space-6);
+  --component-metric-value-font-size: var(--font-size-2xl);
+  --component-metric-label-font-size: var(--font-size-sm);
+  --component-meter-height: var(--space-3);
+  --component-meter-radius: var(--radius-pill);
+  --component-meter-track: var(--color-bg-muted);
+}
+
+[data-theme="light"] {
+  color-scheme: var(--theme-color-scheme);
   /* Semantic (light) */
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-800);
   --color-brand-primary-active: var(--color-stone-900);
   --color-brand-accent: var(--color-orange-500);
-  --color-brand-accent-hover: var(--color-orange-600);
-  --color-brand-accent-active: var(--color-orange-700);
+  --color-brand-accent-hover: var(--color-orange-400);
+  --color-brand-accent-active: var(--color-orange-300);
   --color-brand-on-accent: var(--color-stone-950);
   --color-text-primary: var(--color-stone-950);
   --color-text-secondary: var(--color-stone-700);
@@ -269,12 +392,14 @@
   --color-bg-surface: var(--color-stone-100);
   --color-bg-elevated: var(--color-stone-0);
   --color-bg-muted: var(--color-stone-200);
+  --color-bg-subtle: var(--color-bg-surface);
   --color-border-subtle: var(--color-stone-200);
-  --color-border-default: var(--color-stone-300);
+  --color-border-default: var(--color-stone-500);
   --color-border-strong: var(--color-stone-500);
+  --color-border-muted: var(--color-border-subtle);
   --color-state-info: var(--color-ocean-600);
-  --color-state-success: var(--color-green-500);
-  --color-state-warning: var(--color-amber-400);
+  --color-state-success: var(--color-green-700);
+  --color-state-warning: var(--color-amber-700);
   --color-state-danger: var(--color-red-500);
   --color-state-on-solid: var(--color-stone-0);
   --color-state-info-surface: var(--color-ocean-50);
@@ -319,6 +444,51 @@
   --font-family-heading: var(--font-family-brand);
   --font-family-body: var(--font-family-text);
   --font-family-code: var(--font-family-mono);
+  --type-display-font-family: var(--font-family-heading);
+  --type-display-font-size: var(--font-size-6xl);
+  --type-display-line-height: var(--line-height-6xl);
+  --type-display-font-weight: var(--font-weight-extrabold);
+  --type-display-letter-spacing: var(--letter-spacing-tight);
+  --type-h1-font-family: var(--font-family-heading);
+  --type-h1-font-size: var(--font-size-5xl);
+  --type-h1-line-height: var(--line-height-5xl);
+  --type-h1-font-weight: var(--font-weight-bold);
+  --type-h1-letter-spacing: var(--letter-spacing-tight);
+  --type-h2-font-family: var(--font-family-heading);
+  --type-h2-font-size: var(--font-size-4xl);
+  --type-h2-line-height: var(--line-height-4xl);
+  --type-h2-font-weight: var(--font-weight-semibold);
+  --type-h2-letter-spacing: var(--letter-spacing-normal);
+  --type-h3-font-family: var(--font-family-heading);
+  --type-h3-font-size: var(--font-size-3xl);
+  --type-h3-line-height: var(--line-height-3xl);
+  --type-h3-font-weight: var(--font-weight-semibold);
+  --type-h3-letter-spacing: var(--letter-spacing-normal);
+  --type-h4-font-family: var(--font-family-heading);
+  --type-h4-font-size: var(--font-size-2xl);
+  --type-h4-line-height: var(--line-height-2xl);
+  --type-h4-font-weight: var(--font-weight-semibold);
+  --type-h4-letter-spacing: var(--letter-spacing-normal);
+  --type-body-font-family: var(--font-family-body);
+  --type-body-font-size: var(--font-size-md);
+  --type-body-line-height: var(--line-height-md);
+  --type-body-font-weight: var(--font-weight-regular);
+  --type-body-letter-spacing: var(--letter-spacing-normal);
+  --type-body-sm-font-family: var(--font-family-body);
+  --type-body-sm-font-size: var(--font-size-sm);
+  --type-body-sm-line-height: var(--line-height-sm);
+  --type-body-sm-font-weight: var(--font-weight-regular);
+  --type-body-sm-letter-spacing: var(--letter-spacing-normal);
+  --type-label-font-family: var(--font-family-body);
+  --type-label-font-size: var(--font-size-sm);
+  --type-label-line-height: var(--line-height-sm);
+  --type-label-font-weight: var(--font-weight-semibold);
+  --type-label-letter-spacing: var(--letter-spacing-wide);
+  --type-caption-font-family: var(--font-family-body);
+  --type-caption-font-size: var(--font-size-xs);
+  --type-caption-line-height: var(--line-height-xs);
+  --type-caption-font-weight: var(--font-weight-regular);
+  --type-caption-letter-spacing: var(--letter-spacing-normal);
   --radius-control: var(--radius-md);
   --radius-card: var(--radius-lg);
   --radius-modal: var(--radius-xl);
@@ -326,9 +496,51 @@
   --shadow-card: var(--shadow-sm);
   --shadow-dropdown: var(--shadow-md);
   --shadow-modal: var(--shadow-lg);
+  /* Component (light) */
+  --component-button-background: var(--color-brand-primary);
+  --component-button-background-hover: var(--color-brand-primary-hover);
+  --component-button-background-active: var(--color-brand-primary-active);
+  --component-button-border: var(--color-brand-primary);
+  --component-button-color: var(--color-text-on-primary);
+  --component-button-height: var(--control-height-md);
+  --component-button-padding-x: var(--space-6);
+  --component-button-font-size: var(--font-size-sm);
+  --component-button-line-height: var(--line-height-sm);
+  --component-button-font-weight: var(--font-weight-semibold);
+  --component-button-radius: var(--radius-control);
+  --component-button-gap: var(--space-3);
+  --component-button-loading-spinner-size: var(--icon-md);
+  --component-control-background: var(--color-bg-elevated);
+  --component-control-background-hover: var(--color-bg-surface);
+  --component-control-background-disabled: var(--color-bg-muted);
+  --component-control-border: var(--color-border-default);
+  --component-control-border-hover: var(--color-border-strong);
+  --component-control-border-focus: var(--color-focus-ring);
+  --component-control-text: var(--color-text-primary);
+  --component-control-placeholder: var(--color-text-muted);
+  --component-control-radius: var(--radius-control);
+  --component-card-background: var(--color-bg-elevated);
+  --component-card-border: var(--color-border-subtle);
+  --component-card-radius: var(--radius-card);
+  --component-card-padding: var(--space-6);
+  --component-card-shadow: var(--shadow-card);
+  --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-status-gap: var(--space-2);
+  --component-status-font-size: var(--font-size-sm);
+  --component-status-icon-size: var(--icon-sm);
+  --component-metric-background: var(--color-bg-elevated);
+  --component-metric-border: var(--color-border-subtle);
+  --component-metric-radius: var(--radius-card);
+  --component-metric-padding: var(--space-6);
+  --component-metric-value-font-size: var(--font-size-2xl);
+  --component-metric-label-font-size: var(--font-size-sm);
+  --component-meter-height: var(--space-3);
+  --component-meter-radius: var(--radius-pill);
+  --component-meter-track: var(--color-bg-muted);
 }
 
 [data-theme="dark"] {
+  color-scheme: var(--theme-color-scheme);
   /* Semantic (dark) */
   --color-brand-primary: var(--color-stone-100);
   --color-brand-primary-hover: var(--color-stone-0);
@@ -339,16 +551,18 @@
   --color-brand-on-accent: var(--color-stone-950);
   --color-text-primary: var(--color-stone-0);
   --color-text-secondary: var(--color-stone-200);
-  --color-text-muted: var(--color-stone-400);
+  --color-text-muted: var(--color-stone-300);
   --color-text-inverse: var(--color-stone-0);
   --color-text-on-primary: var(--color-stone-950);
   --color-bg-canvas: var(--color-stone-950);
   --color-bg-surface: var(--color-stone-800);
   --color-bg-elevated: var(--color-stone-700);
   --color-bg-muted: var(--color-stone-900);
+  --color-bg-subtle: var(--color-bg-surface);
   --color-border-subtle: var(--color-stone-700);
-  --color-border-default: var(--color-stone-600);
+  --color-border-default: var(--color-stone-400);
   --color-border-strong: var(--color-stone-500);
+  --color-border-muted: var(--color-border-subtle);
   --color-state-info: var(--color-ocean-300);
   --color-state-success: var(--color-green-300);
   --color-state-warning: var(--color-amber-300);
@@ -393,16 +607,113 @@
   --color-chart-series-7: var(--color-red-300);
   --color-chart-series-8: var(--color-stone-300);
   --theme-color-scheme: dark;
+  --font-family-heading: var(--font-family-brand);
+  --font-family-body: var(--font-family-text);
+  --font-family-code: var(--font-family-mono);
+  --type-display-font-family: var(--font-family-heading);
+  --type-display-font-size: var(--font-size-6xl);
+  --type-display-line-height: var(--line-height-6xl);
+  --type-display-font-weight: var(--font-weight-extrabold);
+  --type-display-letter-spacing: var(--letter-spacing-tight);
+  --type-h1-font-family: var(--font-family-heading);
+  --type-h1-font-size: var(--font-size-5xl);
+  --type-h1-line-height: var(--line-height-5xl);
+  --type-h1-font-weight: var(--font-weight-bold);
+  --type-h1-letter-spacing: var(--letter-spacing-tight);
+  --type-h2-font-family: var(--font-family-heading);
+  --type-h2-font-size: var(--font-size-4xl);
+  --type-h2-line-height: var(--line-height-4xl);
+  --type-h2-font-weight: var(--font-weight-semibold);
+  --type-h2-letter-spacing: var(--letter-spacing-normal);
+  --type-h3-font-family: var(--font-family-heading);
+  --type-h3-font-size: var(--font-size-3xl);
+  --type-h3-line-height: var(--line-height-3xl);
+  --type-h3-font-weight: var(--font-weight-semibold);
+  --type-h3-letter-spacing: var(--letter-spacing-normal);
+  --type-h4-font-family: var(--font-family-heading);
+  --type-h4-font-size: var(--font-size-2xl);
+  --type-h4-line-height: var(--line-height-2xl);
+  --type-h4-font-weight: var(--font-weight-semibold);
+  --type-h4-letter-spacing: var(--letter-spacing-normal);
+  --type-body-font-family: var(--font-family-body);
+  --type-body-font-size: var(--font-size-md);
+  --type-body-line-height: var(--line-height-md);
+  --type-body-font-weight: var(--font-weight-regular);
+  --type-body-letter-spacing: var(--letter-spacing-normal);
+  --type-body-sm-font-family: var(--font-family-body);
+  --type-body-sm-font-size: var(--font-size-sm);
+  --type-body-sm-line-height: var(--line-height-sm);
+  --type-body-sm-font-weight: var(--font-weight-regular);
+  --type-body-sm-letter-spacing: var(--letter-spacing-normal);
+  --type-label-font-family: var(--font-family-body);
+  --type-label-font-size: var(--font-size-sm);
+  --type-label-line-height: var(--line-height-sm);
+  --type-label-font-weight: var(--font-weight-semibold);
+  --type-label-letter-spacing: var(--letter-spacing-wide);
+  --type-caption-font-family: var(--font-family-body);
+  --type-caption-font-size: var(--font-size-xs);
+  --type-caption-line-height: var(--line-height-xs);
+  --type-caption-font-weight: var(--font-weight-regular);
+  --type-caption-letter-spacing: var(--letter-spacing-normal);
+  --radius-control: var(--radius-md);
+  --radius-card: var(--radius-lg);
+  --radius-modal: var(--radius-xl);
+  --radius-pill: var(--radius-round);
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  /* Component (dark) */
+  --component-button-background: var(--color-brand-primary);
+  --component-button-background-hover: var(--color-brand-primary-hover);
+  --component-button-background-active: var(--color-brand-primary-active);
+  --component-button-border: var(--color-brand-primary);
+  --component-button-color: var(--color-text-on-primary);
+  --component-button-height: var(--control-height-md);
+  --component-button-padding-x: var(--space-6);
+  --component-button-font-size: var(--font-size-sm);
+  --component-button-line-height: var(--line-height-sm);
+  --component-button-font-weight: var(--font-weight-semibold);
+  --component-button-radius: var(--radius-control);
+  --component-button-gap: var(--space-3);
+  --component-button-loading-spinner-size: var(--icon-md);
+  --component-control-background: var(--color-bg-elevated);
+  --component-control-background-hover: var(--color-bg-surface);
+  --component-control-background-disabled: var(--color-bg-muted);
+  --component-control-border: var(--color-border-default);
+  --component-control-border-hover: var(--color-border-strong);
+  --component-control-border-focus: var(--color-focus-ring);
+  --component-control-text: var(--color-text-primary);
+  --component-control-placeholder: var(--color-text-muted);
+  --component-control-radius: var(--radius-control);
+  --component-card-background: var(--color-bg-elevated);
+  --component-card-border: var(--color-border-subtle);
+  --component-card-radius: var(--radius-card);
+  --component-card-padding: var(--space-6);
+  --component-card-shadow: var(--shadow-card);
+  --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-status-gap: var(--space-2);
+  --component-status-font-size: var(--font-size-sm);
+  --component-status-icon-size: var(--icon-sm);
+  --component-metric-background: var(--color-bg-elevated);
+  --component-metric-border: var(--color-border-subtle);
+  --component-metric-radius: var(--radius-card);
+  --component-metric-padding: var(--space-6);
+  --component-metric-value-font-size: var(--font-size-2xl);
+  --component-metric-label-font-size: var(--font-size-sm);
+  --component-meter-height: var(--space-3);
+  --component-meter-radius: var(--radius-pill);
+  --component-meter-track: var(--color-bg-muted);
 }
 
 [data-theme="high-contrast"] {
+  color-scheme: var(--theme-color-scheme);
   /* Semantic (high-contrast) */
   --color-brand-primary: var(--color-stone-950);
   --color-brand-primary-hover: var(--color-stone-900);
   --color-brand-primary-active: var(--color-stone-800);
   --color-brand-accent: var(--color-orange-700);
   --color-brand-accent-hover: var(--color-orange-800);
-  --color-brand-accent-active: var(--color-orange-600);
+  --color-brand-accent-active: var(--color-orange-900);
   --color-brand-on-accent: var(--color-stone-0);
   --color-text-primary: var(--color-stone-950);
   --color-text-secondary: var(--color-stone-800);
@@ -413,9 +724,11 @@
   --color-bg-surface: var(--color-stone-0);
   --color-bg-elevated: var(--color-stone-0);
   --color-bg-muted: var(--color-stone-50);
+  --color-bg-subtle: var(--color-bg-surface);
   --color-border-subtle: var(--color-stone-400);
   --color-border-default: var(--color-stone-700);
   --color-border-strong: var(--color-stone-950);
+  --color-border-muted: var(--color-border-subtle);
   --color-state-info: var(--color-ocean-800);
   --color-state-success: var(--color-green-700);
   --color-state-warning: var(--color-amber-700);
@@ -460,6 +773,102 @@
   --color-chart-series-7: var(--color-red-700);
   --color-chart-series-8: var(--color-stone-800);
   --theme-color-scheme: light;
+  --font-family-heading: var(--font-family-brand);
+  --font-family-body: var(--font-family-text);
+  --font-family-code: var(--font-family-mono);
+  --type-display-font-family: var(--font-family-heading);
+  --type-display-font-size: var(--font-size-6xl);
+  --type-display-line-height: var(--line-height-6xl);
+  --type-display-font-weight: var(--font-weight-extrabold);
+  --type-display-letter-spacing: var(--letter-spacing-tight);
+  --type-h1-font-family: var(--font-family-heading);
+  --type-h1-font-size: var(--font-size-5xl);
+  --type-h1-line-height: var(--line-height-5xl);
+  --type-h1-font-weight: var(--font-weight-bold);
+  --type-h1-letter-spacing: var(--letter-spacing-tight);
+  --type-h2-font-family: var(--font-family-heading);
+  --type-h2-font-size: var(--font-size-4xl);
+  --type-h2-line-height: var(--line-height-4xl);
+  --type-h2-font-weight: var(--font-weight-semibold);
+  --type-h2-letter-spacing: var(--letter-spacing-normal);
+  --type-h3-font-family: var(--font-family-heading);
+  --type-h3-font-size: var(--font-size-3xl);
+  --type-h3-line-height: var(--line-height-3xl);
+  --type-h3-font-weight: var(--font-weight-semibold);
+  --type-h3-letter-spacing: var(--letter-spacing-normal);
+  --type-h4-font-family: var(--font-family-heading);
+  --type-h4-font-size: var(--font-size-2xl);
+  --type-h4-line-height: var(--line-height-2xl);
+  --type-h4-font-weight: var(--font-weight-semibold);
+  --type-h4-letter-spacing: var(--letter-spacing-normal);
+  --type-body-font-family: var(--font-family-body);
+  --type-body-font-size: var(--font-size-md);
+  --type-body-line-height: var(--line-height-md);
+  --type-body-font-weight: var(--font-weight-regular);
+  --type-body-letter-spacing: var(--letter-spacing-normal);
+  --type-body-sm-font-family: var(--font-family-body);
+  --type-body-sm-font-size: var(--font-size-sm);
+  --type-body-sm-line-height: var(--line-height-sm);
+  --type-body-sm-font-weight: var(--font-weight-regular);
+  --type-body-sm-letter-spacing: var(--letter-spacing-normal);
+  --type-label-font-family: var(--font-family-body);
+  --type-label-font-size: var(--font-size-sm);
+  --type-label-line-height: var(--line-height-sm);
+  --type-label-font-weight: var(--font-weight-semibold);
+  --type-label-letter-spacing: var(--letter-spacing-wide);
+  --type-caption-font-family: var(--font-family-body);
+  --type-caption-font-size: var(--font-size-xs);
+  --type-caption-line-height: var(--line-height-xs);
+  --type-caption-font-weight: var(--font-weight-regular);
+  --type-caption-letter-spacing: var(--letter-spacing-normal);
+  --radius-control: var(--radius-md);
+  --radius-card: var(--radius-lg);
+  --radius-modal: var(--radius-xl);
+  --radius-pill: var(--radius-round);
+  --shadow-card: var(--shadow-sm);
+  --shadow-dropdown: var(--shadow-md);
+  --shadow-modal: var(--shadow-lg);
+  /* Component (high-contrast) */
+  --component-button-background: var(--color-brand-primary);
+  --component-button-background-hover: var(--color-brand-primary-hover);
+  --component-button-background-active: var(--color-brand-primary-active);
+  --component-button-border: var(--color-brand-primary);
+  --component-button-color: var(--color-text-on-primary);
+  --component-button-height: var(--control-height-md);
+  --component-button-padding-x: var(--space-6);
+  --component-button-font-size: var(--font-size-sm);
+  --component-button-line-height: var(--line-height-sm);
+  --component-button-font-weight: var(--font-weight-semibold);
+  --component-button-radius: var(--radius-control);
+  --component-button-gap: var(--space-3);
+  --component-button-loading-spinner-size: var(--icon-md);
+  --component-control-background: var(--color-bg-elevated);
+  --component-control-background-hover: var(--color-bg-surface);
+  --component-control-background-disabled: var(--color-bg-muted);
+  --component-control-border: var(--color-border-default);
+  --component-control-border-hover: var(--color-border-strong);
+  --component-control-border-focus: var(--color-focus-ring);
+  --component-control-text: var(--color-text-primary);
+  --component-control-placeholder: var(--color-text-muted);
+  --component-control-radius: var(--radius-control);
+  --component-card-background: var(--color-bg-elevated);
+  --component-card-border: var(--color-border-subtle);
+  --component-card-radius: var(--radius-card);
+  --component-card-padding: var(--space-6);
+  --component-card-shadow: var(--shadow-card);
+  --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-status-gap: var(--space-2);
+  --component-status-font-size: var(--font-size-sm);
+  --component-status-icon-size: var(--icon-sm);
+  --component-metric-background: var(--color-bg-elevated);
+  --component-metric-border: var(--color-border-subtle);
+  --component-metric-radius: var(--radius-card);
+  --component-metric-padding: var(--space-6);
+  --component-metric-value-font-size: var(--font-size-2xl);
+  --component-metric-label-font-size: var(--font-size-sm);
+  --component-meter-height: var(--space-3);
+  --component-meter-radius: var(--radius-pill);
+  --component-meter-track: var(--color-bg-muted);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -471,19 +880,16 @@
     --color-brand-accent: var(--color-orange-400);
     --color-brand-accent-hover: var(--color-orange-300);
     --color-brand-accent-active: var(--color-orange-500);
-    --color-brand-on-accent: var(--color-stone-950);
     --color-text-primary: var(--color-stone-0);
     --color-text-secondary: var(--color-stone-200);
-    --color-text-muted: var(--color-stone-400);
-    --color-text-inverse: var(--color-stone-0);
+    --color-text-muted: var(--color-stone-300);
     --color-text-on-primary: var(--color-stone-950);
     --color-bg-canvas: var(--color-stone-950);
     --color-bg-surface: var(--color-stone-800);
     --color-bg-elevated: var(--color-stone-700);
     --color-bg-muted: var(--color-stone-900);
     --color-border-subtle: var(--color-stone-700);
-    --color-border-default: var(--color-stone-600);
-    --color-border-strong: var(--color-stone-500);
+    --color-border-default: var(--color-stone-400);
     --color-state-info: var(--color-ocean-300);
     --color-state-success: var(--color-green-300);
     --color-state-warning: var(--color-amber-300);
@@ -539,7 +945,7 @@
     --color-brand-primary-active: var(--color-stone-800);
     --color-brand-accent: var(--color-orange-700);
     --color-brand-accent-hover: var(--color-orange-800);
-    --color-brand-accent-active: var(--color-orange-600);
+    --color-brand-accent-active: var(--color-orange-900);
     --color-brand-on-accent: var(--color-stone-0);
     --color-text-primary: var(--color-stone-950);
     --color-text-secondary: var(--color-stone-800);
@@ -550,9 +956,11 @@
     --color-bg-surface: var(--color-stone-0);
     --color-bg-elevated: var(--color-stone-0);
     --color-bg-muted: var(--color-stone-50);
+    --color-bg-subtle: var(--color-bg-surface);
     --color-border-subtle: var(--color-stone-400);
     --color-border-default: var(--color-stone-700);
     --color-border-strong: var(--color-stone-950);
+    --color-border-muted: var(--color-border-subtle);
     --color-state-info: var(--color-ocean-800);
     --color-state-success: var(--color-green-700);
     --color-state-warning: var(--color-amber-700);
@@ -597,5 +1005,101 @@
     --color-chart-series-7: var(--color-red-700);
     --color-chart-series-8: var(--color-stone-800);
     --theme-color-scheme: light;
+    --font-family-heading: var(--font-family-brand);
+    --font-family-body: var(--font-family-text);
+    --font-family-code: var(--font-family-mono);
+    --type-display-font-family: var(--font-family-heading);
+    --type-display-font-size: var(--font-size-6xl);
+    --type-display-line-height: var(--line-height-6xl);
+    --type-display-font-weight: var(--font-weight-extrabold);
+    --type-display-letter-spacing: var(--letter-spacing-tight);
+    --type-h1-font-family: var(--font-family-heading);
+    --type-h1-font-size: var(--font-size-5xl);
+    --type-h1-line-height: var(--line-height-5xl);
+    --type-h1-font-weight: var(--font-weight-bold);
+    --type-h1-letter-spacing: var(--letter-spacing-tight);
+    --type-h2-font-family: var(--font-family-heading);
+    --type-h2-font-size: var(--font-size-4xl);
+    --type-h2-line-height: var(--line-height-4xl);
+    --type-h2-font-weight: var(--font-weight-semibold);
+    --type-h2-letter-spacing: var(--letter-spacing-normal);
+    --type-h3-font-family: var(--font-family-heading);
+    --type-h3-font-size: var(--font-size-3xl);
+    --type-h3-line-height: var(--line-height-3xl);
+    --type-h3-font-weight: var(--font-weight-semibold);
+    --type-h3-letter-spacing: var(--letter-spacing-normal);
+    --type-h4-font-family: var(--font-family-heading);
+    --type-h4-font-size: var(--font-size-2xl);
+    --type-h4-line-height: var(--line-height-2xl);
+    --type-h4-font-weight: var(--font-weight-semibold);
+    --type-h4-letter-spacing: var(--letter-spacing-normal);
+    --type-body-font-family: var(--font-family-body);
+    --type-body-font-size: var(--font-size-md);
+    --type-body-line-height: var(--line-height-md);
+    --type-body-font-weight: var(--font-weight-regular);
+    --type-body-letter-spacing: var(--letter-spacing-normal);
+    --type-body-sm-font-family: var(--font-family-body);
+    --type-body-sm-font-size: var(--font-size-sm);
+    --type-body-sm-line-height: var(--line-height-sm);
+    --type-body-sm-font-weight: var(--font-weight-regular);
+    --type-body-sm-letter-spacing: var(--letter-spacing-normal);
+    --type-label-font-family: var(--font-family-body);
+    --type-label-font-size: var(--font-size-sm);
+    --type-label-line-height: var(--line-height-sm);
+    --type-label-font-weight: var(--font-weight-semibold);
+    --type-label-letter-spacing: var(--letter-spacing-wide);
+    --type-caption-font-family: var(--font-family-body);
+    --type-caption-font-size: var(--font-size-xs);
+    --type-caption-line-height: var(--line-height-xs);
+    --type-caption-font-weight: var(--font-weight-regular);
+    --type-caption-letter-spacing: var(--letter-spacing-normal);
+    --radius-control: var(--radius-md);
+    --radius-card: var(--radius-lg);
+    --radius-modal: var(--radius-xl);
+    --radius-pill: var(--radius-round);
+    --shadow-card: var(--shadow-sm);
+    --shadow-dropdown: var(--shadow-md);
+    --shadow-modal: var(--shadow-lg);
+    /* Component (high-contrast (system)) */
+    --component-button-background: var(--color-brand-primary);
+    --component-button-background-hover: var(--color-brand-primary-hover);
+    --component-button-background-active: var(--color-brand-primary-active);
+    --component-button-border: var(--color-brand-primary);
+    --component-button-color: var(--color-text-on-primary);
+    --component-button-height: var(--control-height-md);
+    --component-button-padding-x: var(--space-6);
+    --component-button-font-size: var(--font-size-sm);
+    --component-button-line-height: var(--line-height-sm);
+    --component-button-font-weight: var(--font-weight-semibold);
+    --component-button-radius: var(--radius-control);
+    --component-button-gap: var(--space-3);
+    --component-button-loading-spinner-size: var(--icon-md);
+    --component-control-background: var(--color-bg-elevated);
+    --component-control-background-hover: var(--color-bg-surface);
+    --component-control-background-disabled: var(--color-bg-muted);
+    --component-control-border: var(--color-border-default);
+    --component-control-border-hover: var(--color-border-strong);
+    --component-control-border-focus: var(--color-focus-ring);
+    --component-control-text: var(--color-text-primary);
+    --component-control-placeholder: var(--color-text-muted);
+    --component-control-radius: var(--radius-control);
+    --component-card-background: var(--color-bg-elevated);
+    --component-card-border: var(--color-border-subtle);
+    --component-card-radius: var(--radius-card);
+    --component-card-padding: var(--space-6);
+    --component-card-shadow: var(--shadow-card);
+    --component-card-shadow-hover: var(--shadow-dropdown);
+    --component-status-gap: var(--space-2);
+    --component-status-font-size: var(--font-size-sm);
+    --component-status-icon-size: var(--icon-sm);
+    --component-metric-background: var(--color-bg-elevated);
+    --component-metric-border: var(--color-border-subtle);
+    --component-metric-radius: var(--radius-card);
+    --component-metric-padding: var(--space-6);
+    --component-metric-value-font-size: var(--font-size-2xl);
+    --component-metric-label-font-size: var(--font-size-sm);
+    --component-meter-height: var(--space-3);
+    --component-meter-radius: var(--radius-pill);
+    --component-meter-track: var(--color-bg-muted);
   }
 }