@trinityui/design-system 2.11.0 → 2.13.0

package/dist/trinity.css

@@ -3,7 +3,7 @@
  *
  * AUTO-GENERATED FILE — do not edit.
  * Source: src/tokens.ts  +  scripts/generate-css-from-tokens.ts
- * Generated from tokens.ts on 2026-10-05T02:14:11.216Z
+ * Generated deterministically from tokens.ts.
  *
  * This file is the canonical CSS surface shipped in
  * `@trinityui/design-system-css`. It supersedes the hand-maintained
@@ -13,9 +13,9 @@
  *   npm run build:css:sync
  *
  * Dark mode:
- *   <html data-theme="dark">   →   overrides active
- *   <html data-theme="light">  →   light mode locked
- *   (none)                     →   follows @media (prefers-color-scheme: dark)
+ *   data-theme="dark"   on <html> or any element  →  dark values for that subtree
+ *   data-theme="light"  on <html> or any element  →  light values (a light island)
+ *   (none on <html>)                               →  follows @media (prefers-color-scheme: dark)
  */
 
 :root {
@@ -92,12 +92,12 @@
   --trinity-brand-secondary-dark: #6B12ED;
   --trinity-brand-accent: #FF6150;
   --trinity-brand-tertiary: #3816A0;
-  --trinity-primary: #050742;
-  --trinity-primary-light: #7841C9;
-  --trinity-primary-dark: #3816A0;
-  --trinity-secondary: #7841C9;
-  --trinity-secondary-light: #27AAE1;
-  --trinity-secondary-dark: #6B12ED;
+  --trinity-primary: var(--trinity-brand-primary);
+  --trinity-primary-light: var(--trinity-brand-primary-light);
+  --trinity-primary-dark: var(--trinity-brand-primary-dark);
+  --trinity-secondary: var(--trinity-brand-secondary);
+  --trinity-secondary-light: var(--trinity-brand-secondary-light);
+  --trinity-secondary-dark: var(--trinity-brand-secondary-dark);
 
   /* Semantic colors (flat) */
   --trinity-text-primary: #09090B;
@@ -108,7 +108,7 @@
   --trinity-text-brand: #050742;
   --trinity-text-link: #0E62CA;
   --trinity-text-link-hover: #1D8DD8;
-  --trinity-text-error: #DC2626;
+  --trinity-text-error: #DA1E28;
   --trinity-text-success: #15803D;
   --trinity-text-warning: #B45309;
   --trinity-bg-primary: #FFFFFF;
@@ -121,6 +121,7 @@
   --trinity-bg-accent-subtle: #FFEFEE;
   --trinity-surface-elevated: #FFFFFF;
   --trinity-surface-sunken: #F4F4F5;
+  --trinity-surface-neutral-fill: #E0E0E0;
   --trinity-surface-overlay: rgba(0, 0, 0, 0.5);
   --trinity-surface-success: #F0FDF4;
   --trinity-surface-error: #FEF2F2;
@@ -130,7 +131,7 @@
   --trinity-border-subtle: #E5E7EB;
   --trinity-border-strong: #6B7280;
   --trinity-border-focus: #7841C9;
-  --trinity-border-error: #DC2626;
+  --trinity-border-error: #DA1E28;
   --trinity-border-success: #16A34A;
   --trinity-interactive-default: #050742;
   --trinity-interactive-hover: #FF6150;
@@ -141,7 +142,7 @@
   --trinity-focus-ring-offset: #FFFFFF;
   --trinity-selection-background: #BEE5F7;
   --trinity-selection-text: #09090B;
-  --trinity-status-error-text: #DC2626;
+  --trinity-status-error-text: #DA1E28;
   --trinity-status-error-background: #FEF2F2;
   --trinity-status-error-border: #FECACA;
   --trinity-status-warning-text: #B45309;
@@ -153,14 +154,19 @@
   --trinity-status-info-text: #0E62CA;
   --trinity-status-info-background: #E5F5FC;
   --trinity-status-info-border: #93D4F2;
+  --trinity-on-status-error: #FFFFFF;
+  --trinity-on-status-warning: #FFFFFF;
+  --trinity-on-status-success: #FFFFFF;
+  --trinity-on-status-info: #FFFFFF;
+  --trinity-favorite: var(--trinity-status-warning-text);
   --trinity-indicator-error-fg: #FFFFFF;
-  --trinity-indicator-error-bg: #FF6150;
+  --trinity-indicator-error-bg: #DA1E28;
   --trinity-indicator-critical-fg: #FFFFFF;
   --trinity-indicator-critical-bg: #DA1E28;
   --trinity-indicator-failed-fg: #FFFFFF;
-  --trinity-indicator-failed-bg: #FF6150;
+  --trinity-indicator-failed-bg: #DA1E28;
   --trinity-indicator-rejected-fg: #FFFFFF;
-  --trinity-indicator-rejected-bg: #FF6150;
+  --trinity-indicator-rejected-bg: #DA1E28;
   --trinity-indicator-warning-fg: #000000;
   --trinity-indicator-warning-bg: #F1C21B;
   --trinity-indicator-warning-outline: #8E6A00;
@@ -175,15 +181,15 @@
   --trinity-indicator-running-fg: #FFFFFF;
   --trinity-indicator-running-bg: #050742;
   --trinity-indicator-success-fg: #FFFFFF;
-  --trinity-indicator-success-bg: #24A148;
+  --trinity-indicator-success-bg: #15803D;
   --trinity-indicator-complete-fg: #FFFFFF;
-  --trinity-indicator-complete-bg: #24A148;
+  --trinity-indicator-complete-bg: #15803D;
   --trinity-indicator-approved-fg: #FFFFFF;
-  --trinity-indicator-approved-bg: #24A148;
+  --trinity-indicator-approved-bg: #15803D;
   --trinity-indicator-active-fg: #FFFFFF;
-  --trinity-indicator-active-bg: #24A148;
+  --trinity-indicator-active-bg: #15803D;
   --trinity-indicator-enabled-fg: #FFFFFF;
-  --trinity-indicator-enabled-bg: #24A148;
+  --trinity-indicator-enabled-bg: #15803D;
   --trinity-indicator-info-fg: #FFFFFF;
   --trinity-indicator-info-bg: #0043CE;
   --trinity-indicator-new-fg: #FFFFFF;
@@ -206,7 +212,49 @@
   --trinity-indicator-beta-bg: #8A3FFC;
   --trinity-indicator-experimental-fg: #FFFFFF;
   --trinity-indicator-experimental-bg: #8A3FFC;
+  --trinity-chart-categorical-1: #7841C9;
+  --trinity-chart-categorical-2: #FF5241;
+  --trinity-chart-categorical-3: #008A7E;
+  --trinity-chart-categorical-4: #A66600;
+  --trinity-chart-categorical-5: #0E62CA;
+  --trinity-chart-categorical-6: #C13E7C;
+  --trinity-chart-categorical-7: #2F8E0F;
+  --trinity-chart-categorical-8: #00859C;
+  --trinity-chart-sequential-1: #9574F2;
+  --trinity-chart-sequential-2: #7E57F0;
+  --trinity-chart-sequential-3: #6739ED;
+  --trinity-chart-sequential-4: #5F33EB;
+  --trinity-chart-sequential-5: #4A24E5;
+  --trinity-chart-sequential-6: #3816A0;
+  --trinity-chart-diverging-negative: #FF5241;
+  --trinity-chart-diverging-neutral: #6B7280;
+  --trinity-chart-diverging-positive: #008A7E;
+  --trinity-chart-grid: #E5E7EB;
+  --trinity-chart-axis: #9CA3AF;
+  --trinity-ai-primary: var(--trinity-brand-secondary);
+  --trinity-ai-primary-fill: var(--trinity-brand-secondary);
+  --trinity-ai-on-primary-fill: #FFFFFF;
+  --trinity-ai-accent: var(--trinity-brand-accent);
+  --trinity-ai-surface: rgba(120, 65, 201, 0.05);
+  --trinity-ai-surface-hover: #EDE7FD;
+  --trinity-ai-surface-emphasis: #EDE7FD;
+  --trinity-ai-surface-emphasis-hover: #D2C3FA;
+  --trinity-ai-border: rgba(120, 65, 201, 0.2);
+  --trinity-ai-badge-background: rgba(120, 65, 201, 0.15);
+  --trinity-ai-typing-indicator: var(--trinity-brand-secondary);
+  --trinity-ai-focus-ring: #EDE7FD;
+  --trinity-ai-presence-blue: #27AAE1;
+  --trinity-ai-presence-violet: #6739ED;
+  --trinity-ai-presence-purple: var(--trinity-brand-secondary);
+  --trinity-ai-presence-coral: var(--trinity-brand-accent);
+  --trinity-ai-presence-base: #050742;
+  --trinity-ai-avatar-fill-start: var(--trinity-brand-accent);
+  --trinity-ai-avatar-fill-end: var(--trinity-brand-secondary);
+  --trinity-ai-progress: #008A7E;
+  --trinity-ai-canvas-fill-start: #F3EAFA;
+  --trinity-ai-canvas-fill-end: #FFEFEE;
   --trinity-avatar-backgrounds: #5F33EB,#8D49CE,#FF7167,#239DDD,#30316E,#6739ED,#9950D3,#FF796F;
+  --trinity-avatar-foregrounds: #FFFFFF,#FFFFFF,#09090B,#09090B,#FFFFFF,#FFFFFF,#FFFFFF,#09090B;
   --trinity-avatar-online: #44b700;
   --trinity-avatar-offline: #9CA3AF;
   --trinity-avatar-busy: #FF7167;
@@ -218,19 +266,20 @@
   --trinity-gradients-avatar-warm: linear-gradient(135deg, #FF8D85 0%, #FF7167 100%);
   --trinity-gradients-avatar-cool: linear-gradient(135deg, #47B6E9 0%, #6739ED 100%);
   --trinity-gradients-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
-  --trinity-focus-ring-default: 0 0 0 3px rgba(120, 65, 201, 0.25);
-  --trinity-selection-bg: #BEE5F7;
-  --trinity-status-error-bg: #FEF2F2;
-  --trinity-status-warning-bg: #FFFBEB;
-  --trinity-status-success-bg: #F0FDF4;
-  --trinity-status-info-bg: #E5F5FC;
-  --trinity-gradient-primary: linear-gradient(135deg, #5F33EB 0%, #8D49CE 100%);
-  --trinity-gradient-secondary: linear-gradient(135deg, #FF796F 0%, #FF665C 100%);
-  --trinity-gradient-accent: linear-gradient(135deg, #47B6E9 0%, #239DDD 100%);
-  --trinity-gradient-avatar-primary: linear-gradient(135deg, #6739ED 0%, #8D49CE 100%);
-  --trinity-gradient-avatar-warm: linear-gradient(135deg, #FF8D85 0%, #FF7167 100%);
-  --trinity-gradient-avatar-cool: linear-gradient(135deg, #47B6E9 0%, #6739ED 100%);
-  --trinity-gradient-dark-overlay: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+  --trinity-focus-ring-default: var(--trinity-focus-ring);
+  --trinity-selection-bg: var(--trinity-selection-background);
+  --trinity-status-error-bg: var(--trinity-status-error-background);
+  --trinity-status-warning-bg: var(--trinity-status-warning-background);
+  --trinity-status-success-bg: var(--trinity-status-success-background);
+  --trinity-status-info-bg: var(--trinity-status-info-background);
+  --trinity-ai-badge-bg: var(--trinity-ai-badge-background);
+  --trinity-gradient-primary: var(--trinity-gradients-primary);
+  --trinity-gradient-secondary: var(--trinity-gradients-secondary);
+  --trinity-gradient-accent: var(--trinity-gradients-accent);
+  --trinity-gradient-avatar-primary: var(--trinity-gradients-avatar-primary);
+  --trinity-gradient-avatar-warm: var(--trinity-gradients-avatar-warm);
+  --trinity-gradient-avatar-cool: var(--trinity-gradients-avatar-cool);
+  --trinity-gradient-dark-overlay: var(--trinity-gradients-dark-overlay);
 
   /* Semantic effects */
   --trinity-overlay-scrim: rgba(0, 0, 0, 0.5);
@@ -331,153 +380,153 @@
   --trinity-data-code-font-size: 0.875rem;
   --trinity-data-code-font-weight: 400;
   --trinity-data-code-line-height: 1.625;
-  --trinity-display-large-font: 3rem;
-  --trinity-display-large-size: 3rem;
-  --trinity-display-lg-font-size: 3rem;
-  --trinity-display-large-weight: 700;
-  --trinity-display-lg-font-weight: 700;
-  --trinity-display-large-leading: 1.25;
-  --trinity-display-lg-line-height: 1.25;
-  --trinity-display-large-tracking: -0.025em;
-  --trinity-display-lg-letter-spacing: -0.025em;
-  --trinity-display-medium-font: 2.25rem;
-  --trinity-display-medium-size: 2.25rem;
-  --trinity-display-md-font-size: 2.25rem;
-  --trinity-display-medium-weight: 700;
-  --trinity-display-md-font-weight: 700;
-  --trinity-display-medium-leading: 1.25;
-  --trinity-display-md-line-height: 1.25;
-  --trinity-display-medium-tracking: -0.025em;
-  --trinity-display-md-letter-spacing: -0.025em;
-  --trinity-display-small-font: 1.875rem;
-  --trinity-display-small-size: 1.875rem;
-  --trinity-display-sm-font-size: 1.875rem;
-  --trinity-display-small-weight: 600;
-  --trinity-display-sm-font-weight: 600;
-  --trinity-display-small-leading: 1.375;
-  --trinity-display-sm-line-height: 1.375;
-  --trinity-display-small-tracking: 0em;
-  --trinity-display-sm-letter-spacing: 0em;
-  --trinity-h1-font: 1.875rem;
-  --trinity-h1-size: 1.875rem;
-  --trinity-h1-weight: 700;
-  --trinity-h1-leading: 1.25;
-  --trinity-h2-font: 1.5rem;
-  --trinity-h2-size: 1.5rem;
-  --trinity-h2-weight: 600;
-  --trinity-h2-leading: 1.375;
-  --trinity-h3-font: 1.25rem;
-  --trinity-h3-size: 1.25rem;
-  --trinity-h3-weight: 600;
-  --trinity-h3-leading: 1.375;
-  --trinity-h4-font: 1.125rem;
-  --trinity-h4-size: 1.125rem;
-  --trinity-h4-weight: 600;
-  --trinity-h4-leading: 1.5;
-  --trinity-h5-font: 1rem;
-  --trinity-h5-size: 1rem;
-  --trinity-h5-weight: 600;
-  --trinity-h5-leading: 1.5;
-  --trinity-h6-font: 0.875rem;
-  --trinity-h6-size: 0.875rem;
-  --trinity-h6-weight: 600;
-  --trinity-h6-leading: 1.5;
-  --trinity-body-large-font: 1.125rem;
-  --trinity-body-large-size: 1.125rem;
-  --trinity-body-lg-font-size: 1.125rem;
-  --trinity-body-large-weight: 400;
-  --trinity-body-lg-font-weight: 400;
-  --trinity-body-large-leading: 1.625;
-  --trinity-body-lg-line-height: 1.625;
-  --trinity-body-medium-font: 1rem;
-  --trinity-body-medium-size: 1rem;
-  --trinity-body-md-font-size: 1rem;
-  --trinity-body-medium-weight: 400;
-  --trinity-body-md-font-weight: 400;
-  --trinity-body-medium-leading: 1.5;
-  --trinity-body-md-line-height: 1.5;
-  --trinity-body-small-font: 0.875rem;
-  --trinity-body-small-size: 0.875rem;
-  --trinity-body-sm-font-size: 0.875rem;
-  --trinity-body-small-weight: 400;
-  --trinity-body-sm-font-weight: 400;
-  --trinity-body-small-leading: 1.5;
-  --trinity-body-sm-line-height: 1.5;
-  --trinity-label-large-font: 1rem;
-  --trinity-label-large-size: 1rem;
-  --trinity-label-lg-font-size: 1rem;
-  --trinity-label-large-weight: 500;
-  --trinity-label-lg-font-weight: 500;
-  --trinity-label-large-leading: 1.25;
-  --trinity-label-lg-line-height: 1.25;
-  --trinity-label-medium-font: 0.875rem;
-  --trinity-label-medium-size: 0.875rem;
-  --trinity-label-md-font-size: 0.875rem;
-  --trinity-label-medium-weight: 500;
-  --trinity-label-md-font-weight: 500;
-  --trinity-label-medium-leading: 1.25;
-  --trinity-label-md-line-height: 1.25;
-  --trinity-label-small-font: 0.75rem;
-  --trinity-label-small-size: 0.75rem;
-  --trinity-label-sm-font-size: 0.75rem;
-  --trinity-label-small-weight: 500;
-  --trinity-label-sm-font-weight: 500;
-  --trinity-label-small-leading: 1.25;
-  --trinity-label-sm-line-height: 1.25;
-  --trinity-micro-xs-font: 0.625rem;
-  --trinity-micro-xs-size: 0.625rem;
-  --trinity-micro-xs-weight: 500;
-  --trinity-micro-xs-leading: 1.25;
-  --trinity-micro-xs-tracking: 0.025em;
-  --trinity-micro-sm-font: 0.6875rem;
-  --trinity-micro-sm-size: 0.6875rem;
-  --trinity-micro-sm-weight: 500;
-  --trinity-micro-sm-leading: 1.25;
-  --trinity-micro-sm-tracking: 0em;
-  --trinity-data-numeric-weight: 400;
-  --trinity-data-code-font: 0.875rem;
-  --trinity-data-code-size: 0.875rem;
-  --trinity-data-code-weight: 400;
-  --trinity-data-code-leading: 1.625;
-  --trinity-display-lg-font: 3rem;
-  --trinity-display-lg-size: 3rem;
-  --trinity-display-lg-weight: 700;
-  --trinity-display-lg-leading: 1.25;
-  --trinity-display-lg-tracking: -0.025em;
-  --trinity-display-md-font: 2.25rem;
-  --trinity-display-md-size: 2.25rem;
-  --trinity-display-md-weight: 700;
-  --trinity-display-md-leading: 1.25;
-  --trinity-display-md-tracking: -0.025em;
-  --trinity-display-sm-font: 1.875rem;
-  --trinity-display-sm-size: 1.875rem;
-  --trinity-display-sm-weight: 600;
-  --trinity-display-sm-leading: 1.375;
-  --trinity-display-sm-tracking: 0em;
-  --trinity-body-lg-font: 1.125rem;
-  --trinity-body-lg-size: 1.125rem;
-  --trinity-body-lg-weight: 400;
-  --trinity-body-lg-leading: 1.625;
-  --trinity-body-md-font: 1rem;
-  --trinity-body-md-size: 1rem;
-  --trinity-body-md-weight: 400;
-  --trinity-body-md-leading: 1.5;
-  --trinity-body-sm-font: 0.875rem;
-  --trinity-body-sm-size: 0.875rem;
-  --trinity-body-sm-weight: 400;
-  --trinity-body-sm-leading: 1.5;
-  --trinity-label-lg-font: 1rem;
-  --trinity-label-lg-size: 1rem;
-  --trinity-label-lg-weight: 500;
-  --trinity-label-lg-leading: 1.25;
-  --trinity-label-md-font: 0.875rem;
-  --trinity-label-md-size: 0.875rem;
-  --trinity-label-md-weight: 500;
-  --trinity-label-md-leading: 1.25;
-  --trinity-label-sm-font: 0.75rem;
-  --trinity-label-sm-size: 0.75rem;
-  --trinity-label-sm-weight: 500;
-  --trinity-label-sm-leading: 1.25;
+  --trinity-display-large-font: var(--trinity-display-large-font-size);
+  --trinity-display-large-size: var(--trinity-display-large-font-size);
+  --trinity-display-lg-font-size: var(--trinity-display-large-font-size);
+  --trinity-display-large-weight: var(--trinity-display-large-font-weight);
+  --trinity-display-lg-font-weight: var(--trinity-display-large-font-weight);
+  --trinity-display-large-leading: var(--trinity-display-large-line-height);
+  --trinity-display-lg-line-height: var(--trinity-display-large-line-height);
+  --trinity-display-large-tracking: var(--trinity-display-large-letter-spacing);
+  --trinity-display-lg-letter-spacing: var(--trinity-display-large-letter-spacing);
+  --trinity-display-medium-font: var(--trinity-display-medium-font-size);
+  --trinity-display-medium-size: var(--trinity-display-medium-font-size);
+  --trinity-display-md-font-size: var(--trinity-display-medium-font-size);
+  --trinity-display-medium-weight: var(--trinity-display-medium-font-weight);
+  --trinity-display-md-font-weight: var(--trinity-display-medium-font-weight);
+  --trinity-display-medium-leading: var(--trinity-display-medium-line-height);
+  --trinity-display-md-line-height: var(--trinity-display-medium-line-height);
+  --trinity-display-medium-tracking: var(--trinity-display-medium-letter-spacing);
+  --trinity-display-md-letter-spacing: var(--trinity-display-medium-letter-spacing);
+  --trinity-display-small-font: var(--trinity-display-small-font-size);
+  --trinity-display-small-size: var(--trinity-display-small-font-size);
+  --trinity-display-sm-font-size: var(--trinity-display-small-font-size);
+  --trinity-display-small-weight: var(--trinity-display-small-font-weight);
+  --trinity-display-sm-font-weight: var(--trinity-display-small-font-weight);
+  --trinity-display-small-leading: var(--trinity-display-small-line-height);
+  --trinity-display-sm-line-height: var(--trinity-display-small-line-height);
+  --trinity-display-small-tracking: var(--trinity-display-small-letter-spacing);
+  --trinity-display-sm-letter-spacing: var(--trinity-display-small-letter-spacing);
+  --trinity-h1-font: var(--trinity-h1-font-size);
+  --trinity-h1-size: var(--trinity-h1-font-size);
+  --trinity-h1-weight: var(--trinity-h1-font-weight);
+  --trinity-h1-leading: var(--trinity-h1-line-height);
+  --trinity-h2-font: var(--trinity-h2-font-size);
+  --trinity-h2-size: var(--trinity-h2-font-size);
+  --trinity-h2-weight: var(--trinity-h2-font-weight);
+  --trinity-h2-leading: var(--trinity-h2-line-height);
+  --trinity-h3-font: var(--trinity-h3-font-size);
+  --trinity-h3-size: var(--trinity-h3-font-size);
+  --trinity-h3-weight: var(--trinity-h3-font-weight);
+  --trinity-h3-leading: var(--trinity-h3-line-height);
+  --trinity-h4-font: var(--trinity-h4-font-size);
+  --trinity-h4-size: var(--trinity-h4-font-size);
+  --trinity-h4-weight: var(--trinity-h4-font-weight);
+  --trinity-h4-leading: var(--trinity-h4-line-height);
+  --trinity-h5-font: var(--trinity-h5-font-size);
+  --trinity-h5-size: var(--trinity-h5-font-size);
+  --trinity-h5-weight: var(--trinity-h5-font-weight);
+  --trinity-h5-leading: var(--trinity-h5-line-height);
+  --trinity-h6-font: var(--trinity-h6-font-size);
+  --trinity-h6-size: var(--trinity-h6-font-size);
+  --trinity-h6-weight: var(--trinity-h6-font-weight);
+  --trinity-h6-leading: var(--trinity-h6-line-height);
+  --trinity-body-large-font: var(--trinity-body-large-font-size);
+  --trinity-body-large-size: var(--trinity-body-large-font-size);
+  --trinity-body-lg-font-size: var(--trinity-body-large-font-size);
+  --trinity-body-large-weight: var(--trinity-body-large-font-weight);
+  --trinity-body-lg-font-weight: var(--trinity-body-large-font-weight);
+  --trinity-body-large-leading: var(--trinity-body-large-line-height);
+  --trinity-body-lg-line-height: var(--trinity-body-large-line-height);
+  --trinity-body-medium-font: var(--trinity-body-medium-font-size);
+  --trinity-body-medium-size: var(--trinity-body-medium-font-size);
+  --trinity-body-md-font-size: var(--trinity-body-medium-font-size);
+  --trinity-body-medium-weight: var(--trinity-body-medium-font-weight);
+  --trinity-body-md-font-weight: var(--trinity-body-medium-font-weight);
+  --trinity-body-medium-leading: var(--trinity-body-medium-line-height);
+  --trinity-body-md-line-height: var(--trinity-body-medium-line-height);
+  --trinity-body-small-font: var(--trinity-body-small-font-size);
+  --trinity-body-small-size: var(--trinity-body-small-font-size);
+  --trinity-body-sm-font-size: var(--trinity-body-small-font-size);
+  --trinity-body-small-weight: var(--trinity-body-small-font-weight);
+  --trinity-body-sm-font-weight: var(--trinity-body-small-font-weight);
+  --trinity-body-small-leading: var(--trinity-body-small-line-height);
+  --trinity-body-sm-line-height: var(--trinity-body-small-line-height);
+  --trinity-label-large-font: var(--trinity-label-large-font-size);
+  --trinity-label-large-size: var(--trinity-label-large-font-size);
+  --trinity-label-lg-font-size: var(--trinity-label-large-font-size);
+  --trinity-label-large-weight: var(--trinity-label-large-font-weight);
+  --trinity-label-lg-font-weight: var(--trinity-label-large-font-weight);
+  --trinity-label-large-leading: var(--trinity-label-large-line-height);
+  --trinity-label-lg-line-height: var(--trinity-label-large-line-height);
+  --trinity-label-medium-font: var(--trinity-label-medium-font-size);
+  --trinity-label-medium-size: var(--trinity-label-medium-font-size);
+  --trinity-label-md-font-size: var(--trinity-label-medium-font-size);
+  --trinity-label-medium-weight: var(--trinity-label-medium-font-weight);
+  --trinity-label-md-font-weight: var(--trinity-label-medium-font-weight);
+  --trinity-label-medium-leading: var(--trinity-label-medium-line-height);
+  --trinity-label-md-line-height: var(--trinity-label-medium-line-height);
+  --trinity-label-small-font: var(--trinity-label-small-font-size);
+  --trinity-label-small-size: var(--trinity-label-small-font-size);
+  --trinity-label-sm-font-size: var(--trinity-label-small-font-size);
+  --trinity-label-small-weight: var(--trinity-label-small-font-weight);
+  --trinity-label-sm-font-weight: var(--trinity-label-small-font-weight);
+  --trinity-label-small-leading: var(--trinity-label-small-line-height);
+  --trinity-label-sm-line-height: var(--trinity-label-small-line-height);
+  --trinity-micro-xs-font: var(--trinity-micro-xs-font-size);
+  --trinity-micro-xs-size: var(--trinity-micro-xs-font-size);
+  --trinity-micro-xs-weight: var(--trinity-micro-xs-font-weight);
+  --trinity-micro-xs-leading: var(--trinity-micro-xs-line-height);
+  --trinity-micro-xs-tracking: var(--trinity-micro-xs-letter-spacing);
+  --trinity-micro-sm-font: var(--trinity-micro-sm-font-size);
+  --trinity-micro-sm-size: var(--trinity-micro-sm-font-size);
+  --trinity-micro-sm-weight: var(--trinity-micro-sm-font-weight);
+  --trinity-micro-sm-leading: var(--trinity-micro-sm-line-height);
+  --trinity-micro-sm-tracking: var(--trinity-micro-sm-letter-spacing);
+  --trinity-data-numeric-weight: var(--trinity-data-numeric-font-weight);
+  --trinity-data-code-font: var(--trinity-data-code-font-size);
+  --trinity-data-code-size: var(--trinity-data-code-font-size);
+  --trinity-data-code-weight: var(--trinity-data-code-font-weight);
+  --trinity-data-code-leading: var(--trinity-data-code-line-height);
+  --trinity-display-lg-font: var(--trinity-display-large-font);
+  --trinity-display-lg-size: var(--trinity-display-large-size);
+  --trinity-display-lg-weight: var(--trinity-display-large-weight);
+  --trinity-display-lg-leading: var(--trinity-display-large-leading);
+  --trinity-display-lg-tracking: var(--trinity-display-large-tracking);
+  --trinity-display-md-font: var(--trinity-display-medium-font);
+  --trinity-display-md-size: var(--trinity-display-medium-size);
+  --trinity-display-md-weight: var(--trinity-display-medium-weight);
+  --trinity-display-md-leading: var(--trinity-display-medium-leading);
+  --trinity-display-md-tracking: var(--trinity-display-medium-tracking);
+  --trinity-display-sm-font: var(--trinity-display-small-font);
+  --trinity-display-sm-size: var(--trinity-display-small-size);
+  --trinity-display-sm-weight: var(--trinity-display-small-weight);
+  --trinity-display-sm-leading: var(--trinity-display-small-leading);
+  --trinity-display-sm-tracking: var(--trinity-display-small-tracking);
+  --trinity-body-lg-font: var(--trinity-body-large-font);
+  --trinity-body-lg-size: var(--trinity-body-large-size);
+  --trinity-body-lg-weight: var(--trinity-body-large-weight);
+  --trinity-body-lg-leading: var(--trinity-body-large-leading);
+  --trinity-body-md-font: var(--trinity-body-medium-font);
+  --trinity-body-md-size: var(--trinity-body-medium-size);
+  --trinity-body-md-weight: var(--trinity-body-medium-weight);
+  --trinity-body-md-leading: var(--trinity-body-medium-leading);
+  --trinity-body-sm-font: var(--trinity-body-small-font);
+  --trinity-body-sm-size: var(--trinity-body-small-size);
+  --trinity-body-sm-weight: var(--trinity-body-small-weight);
+  --trinity-body-sm-leading: var(--trinity-body-small-leading);
+  --trinity-label-lg-font: var(--trinity-label-large-font);
+  --trinity-label-lg-size: var(--trinity-label-large-size);
+  --trinity-label-lg-weight: var(--trinity-label-large-weight);
+  --trinity-label-lg-leading: var(--trinity-label-large-leading);
+  --trinity-label-md-font: var(--trinity-label-medium-font);
+  --trinity-label-md-size: var(--trinity-label-medium-size);
+  --trinity-label-md-weight: var(--trinity-label-medium-weight);
+  --trinity-label-md-leading: var(--trinity-label-medium-leading);
+  --trinity-label-sm-font: var(--trinity-label-small-font);
+  --trinity-label-sm-size: var(--trinity-label-small-size);
+  --trinity-label-sm-weight: var(--trinity-label-small-weight);
+  --trinity-label-sm-leading: var(--trinity-label-small-leading);
 
   /* Icon sizes */
   --trinity-icon-inline: 14px;
@@ -486,12 +535,12 @@
   --trinity-icon-prominent: 24px;
   --trinity-icon-hero: 28px;
   --trinity-icon-display: 36px;
-  --trinity-icon-size-inline: 14px;
-  --trinity-icon-size-control: 16px;
-  --trinity-icon-size-navigation: 20px;
-  --trinity-icon-size-prominent: 24px;
-  --trinity-icon-size-hero: 28px;
-  --trinity-icon-size-display: 36px;
+  --trinity-icon-size-inline: var(--trinity-icon-inline);
+  --trinity-icon-size-control: var(--trinity-icon-control);
+  --trinity-icon-size-navigation: var(--trinity-icon-navigation);
+  --trinity-icon-size-prominent: var(--trinity-icon-prominent);
+  --trinity-icon-size-hero: var(--trinity-icon-hero);
+  --trinity-icon-size-display: var(--trinity-icon-display);
 
   /* Semantic spacing */
   --trinity-component-padding-xs: 4px;
@@ -573,7 +622,7 @@
   --trinity-border-width-default: 1px;
   --trinity-border-width-focus: 2px;
   --trinity-border-width-thick: 4px;
-  --trinity-radius-modal-lg: 16px;
+  --trinity-radius-modal-lg: var(--trinity-radius-modal-large);
 
   /* Font families */
   --trinity-font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -597,9 +646,9 @@
   --trinity-space-20: 80px;
   --trinity-space-24: 96px;
   --trinity-space-32: 128px;
-  --trinity-space-0.5: 2px;
-  --trinity-space-1.5: 6px;
-  --trinity-space-2.5: 10px;
+  --trinity-space-0-5: 2px;
+  --trinity-space-1-5: 6px;
+  --trinity-space-2-5: 10px;
 
   /* Font sizes */
   --trinity-font-size-xs: 0.75rem;
@@ -612,36 +661,36 @@
   --trinity-font-size-4xl: 2.25rem;
   --trinity-font-size-5xl: 3rem;
   --trinity-font-size-6xl: 3.75rem;
-  --trinity-font-xs: 0.75rem;
-  --trinity-size-xs: 0.75rem;
-  --trinity-text-xs: 0.75rem;
-  --trinity-font-sm: 0.875rem;
-  --trinity-size-sm: 0.875rem;
-  --trinity-text-sm: 0.875rem;
-  --trinity-font-base: 1rem;
-  --trinity-size-base: 1rem;
-  --trinity-text-base: 1rem;
-  --trinity-font-lg: 1.125rem;
-  --trinity-size-lg: 1.125rem;
-  --trinity-text-lg: 1.125rem;
-  --trinity-font-xl: 1.25rem;
-  --trinity-size-xl: 1.25rem;
-  --trinity-text-xl: 1.25rem;
-  --trinity-font-2xl: 1.5rem;
-  --trinity-size-2xl: 1.5rem;
-  --trinity-text-2xl: 1.5rem;
-  --trinity-font-3xl: 1.875rem;
-  --trinity-size-3xl: 1.875rem;
-  --trinity-text-3xl: 1.875rem;
-  --trinity-font-4xl: 2.25rem;
-  --trinity-size-4xl: 2.25rem;
-  --trinity-text-4xl: 2.25rem;
-  --trinity-font-5xl: 3rem;
-  --trinity-size-5xl: 3rem;
-  --trinity-text-5xl: 3rem;
-  --trinity-font-6xl: 3.75rem;
-  --trinity-size-6xl: 3.75rem;
-  --trinity-text-6xl: 3.75rem;
+  --trinity-font-xs: var(--trinity-font-size-xs);
+  --trinity-size-xs: var(--trinity-font-size-xs);
+  --trinity-text-xs: var(--trinity-font-size-xs);
+  --trinity-font-sm: var(--trinity-font-size-sm);
+  --trinity-size-sm: var(--trinity-font-size-sm);
+  --trinity-text-sm: var(--trinity-font-size-sm);
+  --trinity-font-base: var(--trinity-font-size-base);
+  --trinity-size-base: var(--trinity-font-size-base);
+  --trinity-text-base: var(--trinity-font-size-base);
+  --trinity-font-lg: var(--trinity-font-size-lg);
+  --trinity-size-lg: var(--trinity-font-size-lg);
+  --trinity-text-lg: var(--trinity-font-size-lg);
+  --trinity-font-xl: var(--trinity-font-size-xl);
+  --trinity-size-xl: var(--trinity-font-size-xl);
+  --trinity-text-xl: var(--trinity-font-size-xl);
+  --trinity-font-2xl: var(--trinity-font-size-2xl);
+  --trinity-size-2xl: var(--trinity-font-size-2xl);
+  --trinity-text-2xl: var(--trinity-font-size-2xl);
+  --trinity-font-3xl: var(--trinity-font-size-3xl);
+  --trinity-size-3xl: var(--trinity-font-size-3xl);
+  --trinity-text-3xl: var(--trinity-font-size-3xl);
+  --trinity-font-4xl: var(--trinity-font-size-4xl);
+  --trinity-size-4xl: var(--trinity-font-size-4xl);
+  --trinity-text-4xl: var(--trinity-font-size-4xl);
+  --trinity-font-5xl: var(--trinity-font-size-5xl);
+  --trinity-size-5xl: var(--trinity-font-size-5xl);
+  --trinity-text-5xl: var(--trinity-font-size-5xl);
+  --trinity-font-6xl: var(--trinity-font-size-6xl);
+  --trinity-size-6xl: var(--trinity-font-size-6xl);
+  --trinity-text-6xl: var(--trinity-font-size-6xl);
 
   /* Font weights */
   --trinity-font-weight-light: 300;
@@ -650,29 +699,29 @@
   --trinity-font-weight-semibold: 600;
   --trinity-font-weight-bold: 700;
   --trinity-font-weight-extrabold: 800;
-  --trinity-weight-light: 300;
-  --trinity-font-light: 300;
-  --trinity-weight-regular: 400;
-  --trinity-font-regular: 400;
-  --trinity-weight-medium: 500;
-  --trinity-font-medium: 500;
-  --trinity-font-weight-md: 500;
-  --trinity-weight-semibold: 600;
-  --trinity-font-semibold: 600;
-  --trinity-weight-bold: 700;
-  --trinity-font-bold: 700;
-  --trinity-weight-extrabold: 800;
-  --trinity-font-extrabold: 800;
-  --trinity-weight-md: 500;
-  --trinity-font-md: 500;
+  --trinity-weight-light: var(--trinity-font-weight-light);
+  --trinity-font-light: var(--trinity-font-weight-light);
+  --trinity-weight-regular: var(--trinity-font-weight-regular);
+  --trinity-font-regular: var(--trinity-font-weight-regular);
+  --trinity-weight-medium: var(--trinity-font-weight-medium);
+  --trinity-font-medium: var(--trinity-font-weight-medium);
+  --trinity-font-weight-md: var(--trinity-font-weight-medium);
+  --trinity-weight-semibold: var(--trinity-font-weight-semibold);
+  --trinity-font-semibold: var(--trinity-font-weight-semibold);
+  --trinity-weight-bold: var(--trinity-font-weight-bold);
+  --trinity-font-bold: var(--trinity-font-weight-bold);
+  --trinity-weight-extrabold: var(--trinity-font-weight-extrabold);
+  --trinity-font-extrabold: var(--trinity-font-weight-extrabold);
+  --trinity-weight-md: var(--trinity-weight-medium);
+  --trinity-font-md: var(--trinity-font-medium);
 
   /* Line heights */
-  --trinity-leading-none: 1px;
-  --trinity-leading-tight: 1.25px;
-  --trinity-leading-snug: 1.375px;
-  --trinity-leading-normal: 1.5px;
-  --trinity-leading-relaxed: 1.625px;
-  --trinity-leading-loose: 2px;
+  --trinity-leading-none: 1;
+  --trinity-leading-tight: 1.25;
+  --trinity-leading-snug: 1.375;
+  --trinity-leading-normal: 1.5;
+  --trinity-leading-relaxed: 1.625;
+  --trinity-leading-loose: 2;
 
   /* Letter spacing */
   --trinity-tracking-tighter: -0.05em;
@@ -708,22 +757,25 @@
   --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --trinity-shadow-glow-primary: 0 0 20px #9950D340;
+  --trinity-shadow-glow-accent: 0 0 20px #FF796F40;
+  --trinity-shadow-glow-info: 0 0 20px #27AAE140;
 
   /* Z-index scale */
-  --trinity-z-0: 0px;
-  --trinity-z-10: 10px;
-  --trinity-z-20: 20px;
-  --trinity-z-30: 30px;
-  --trinity-z-40: 40px;
-  --trinity-z-50: 50px;
+  --trinity-z-0: 0;
+  --trinity-z-10: 10;
+  --trinity-z-20: 20;
+  --trinity-z-30: 30;
+  --trinity-z-40: 40;
+  --trinity-z-50: 50;
   --trinity-z-auto: auto;
-  --trinity-z-dropdown: 1000px;
-  --trinity-z-sticky: 1020px;
-  --trinity-z-fixed: 1030px;
-  --trinity-z-modal-backdrop: 1040px;
-  --trinity-z-modal: 1050px;
-  --trinity-z-popover: 1060px;
-  --trinity-z-tooltip: 1070px;
+  --trinity-z-dropdown: 1000;
+  --trinity-z-sticky: 1020;
+  --trinity-z-fixed: 1030;
+  --trinity-z-modal-backdrop: 1040;
+  --trinity-z-modal: 1050;
+  --trinity-z-popover: 1060;
+  --trinity-z-tooltip: 1070;
 
   /* Duration */
   --trinity-duration-fastest: 50ms;
@@ -742,19 +794,30 @@
   --trinity-easing-smooth: cubic-bezier(0.45, 0, 0.55, 1);
   --trinity-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --trinity-easing-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  --trinity-easing-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
 
   /* Semantic motion */
   --trinity-motion-duration-instant: 50ms;
   --trinity-motion-duration-fast: 150ms;
   --trinity-motion-duration-normal: 200ms;
   --trinity-motion-duration-slow: 300ms;
+  --trinity-motion-duration-slower: 400ms;
   --trinity-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
   --trinity-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
   --trinity-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
-  --trinity-motion-instant: 50ms;
-  --trinity-motion-fast: 150ms;
-  --trinity-motion-normal: 200ms;
-  --trinity-motion-slow: 300ms;
+  --trinity-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --trinity-motion-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --trinity-motion-loop-spin: 800ms;
+  --trinity-motion-loop-typing: 1200ms;
+  --trinity-motion-loop-shimmer: 1500ms;
+  --trinity-motion-loop-pulse: 2000ms;
+  --trinity-motion-stagger-tight: 50ms;
+  --trinity-motion-stagger-normal: 100ms;
+  --trinity-motion-instant: var(--trinity-motion-duration-instant);
+  --trinity-motion-fast: var(--trinity-motion-duration-fast);
+  --trinity-motion-normal: var(--trinity-motion-duration-normal);
+  --trinity-motion-slow: var(--trinity-motion-duration-slow);
+  --trinity-motion-slower: var(--trinity-motion-duration-slower);
 
   /* Opacity */
   --trinity-opacity-0: 0;
@@ -789,15 +852,45 @@
   --trinity-button-border-radius: 9999px;
   --trinity-button-primary-background: #050742;
   --trinity-button-primary-background-hover: #FF6150;
+  --trinity-button-primary-background-active: #282964;
   --trinity-button-primary-text: #FFFFFF;
+  --trinity-button-primary-text-hover: #050742;
+  --trinity-button-primary-text-active: #FFFFFF;
   --trinity-button-secondary-background: #3816A0;
   --trinity-button-secondary-background-hover: #FF6150;
+  --trinity-button-secondary-background-active: #542CE8;
   --trinity-button-secondary-text: #FFFFFF;
+  --trinity-button-secondary-text-hover: #050742;
+  --trinity-button-secondary-text-active: #FFFFFF;
   --trinity-button-outlined-background: transparent;
   --trinity-button-outlined-background-hover: #FF6150;
+  --trinity-button-outlined-background-active: #282964;
   --trinity-button-outlined-border: #050742;
   --trinity-button-outlined-text: #050742;
-  --trinity-button-outlined-text-hover: #FFFFFF;
+  --trinity-button-outlined-text-hover: #050742;
+  --trinity-button-outlined-text-active: #FFFFFF;
+  --trinity-button-on-brand-background: #FFFFFF;
+  --trinity-button-on-brand-background-hover: #FF6150;
+  --trinity-button-on-brand-background-active: #C5C6D9;
+  --trinity-button-on-brand-text: #050742;
+  --trinity-button-on-brand-text-hover: #050742;
+  --trinity-button-on-brand-text-active: #050742;
+  --trinity-button-on-brand-background-disabled: rgba(255, 255, 255, 0.12);
+  --trinity-button-on-brand-text-disabled: rgba(255, 255, 255, 0.5);
+  --trinity-button-on-brand-focus-outline: #FFFFFF;
+  --trinity-button-on-brand-outlined-background: transparent;
+  --trinity-button-on-brand-outlined-background-hover: #FF6150;
+  --trinity-button-on-brand-outlined-background-active: #C5C6D9;
+  --trinity-button-on-brand-outlined-border: #FFFFFF;
+  --trinity-button-on-brand-outlined-border-hover: #FF6150;
+  --trinity-button-on-brand-outlined-border-active: #C5C6D9;
+  --trinity-button-on-brand-outlined-text: #FFFFFF;
+  --trinity-button-on-brand-outlined-text-hover: #050742;
+  --trinity-button-on-brand-outlined-text-active: #050742;
+  --trinity-button-on-brand-outlined-background-disabled: transparent;
+  --trinity-button-on-brand-outlined-text-disabled: rgba(255, 255, 255, 0.5);
+  --trinity-button-on-brand-outlined-border-disabled: rgba(255, 255, 255, 0.24);
+  --trinity-button-on-brand-outlined-focus-outline: #FFFFFF;
   --trinity-input-height-small: 36px;
   --trinity-input-height-medium: 44px;
   --trinity-input-height-large: 52px;
@@ -811,19 +904,19 @@
   --trinity-input-font-size-medium: 1rem;
   --trinity-input-font-size-large: 1.125rem;
   --trinity-input-border-radius: 6px;
-  --trinity-input-border-color-default: #D4D4D8;
-  --trinity-input-border-color-hover: #6B7280;
-  --trinity-input-border-color-focus: #7841C9;
-  --trinity-input-border-color-error: #DC2626;
-  --trinity-input-background-default: #FFFFFF;
-  --trinity-input-background-disabled: #F4F4F5;
+  --trinity-input-border-color-default: var(--trinity-border-default);
+  --trinity-input-border-color-hover: var(--trinity-border-strong);
+  --trinity-input-border-color-focus: var(--trinity-border-focus);
+  --trinity-input-border-color-error: var(--trinity-border-error);
+  --trinity-input-background-default: var(--trinity-surface-elevated);
+  --trinity-input-background-disabled: var(--trinity-bg-tertiary);
   --trinity-card-padding-small: 16px;
   --trinity-card-padding-medium: 24px;
   --trinity-card-padding-large: 32px;
   --trinity-card-border-radius: 12px;
   --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --trinity-card-background: #FFFFFF;
-  --trinity-card-border: #E5E7EB;
+  --trinity-card-background: var(--trinity-surface-elevated);
+  --trinity-card-border: var(--trinity-border-subtle);
   --trinity-avatar-size-xs: 24px;
   --trinity-avatar-size-sm: 32px;
   --trinity-avatar-size-md: 40px;
@@ -855,11 +948,12 @@
   --trinity-tooltip-padding-y: 8px;
   --trinity-tooltip-border-radius: 6px;
   --trinity-tooltip-font-size: 0.875rem;
-  --trinity-tooltip-background: #18181B;
-  --trinity-tooltip-text: #FFFFFF;
+  --trinity-tooltip-background: var(--trinity-bg-inverse);
+  --trinity-tooltip-text: var(--trinity-text-inverse);
   --trinity-modal-padding: 24px;
   --trinity-modal-border-radius: 16px;
   --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --trinity-modal-background: var(--trinity-surface-elevated);
   --trinity-modal-backdrop-opacity: 0.5;
   --trinity-modal-width-small: 400px;
   --trinity-modal-width-medium: 560px;
@@ -873,6 +967,7 @@
   --trinity-switch-thumb-medium: 24px;
   --trinity-switch-track-off: #E5E7EB;
   --trinity-switch-track-on: #050742;
+  --trinity-switch-track-border: #D4D4D8;
   --trinity-navigation-header-height: 64px;
   --trinity-navigation-header-background: #050742;
   --trinity-navigation-header-text: #FFFFFF;
@@ -894,132 +989,148 @@
   --trinity-navigation-footer-dark-text: rgba(255, 255, 255, 0.7);
   --trinity-navigation-footer-dark-divider: rgba(255, 255, 255, 0.24);
   --trinity-navigation-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
-  --trinity-button-height-sm: 32px;
-  --trinity-button-height-md: 40px;
-  --trinity-button-height-lg: 48px;
-  --trinity-button-padding-sm-x: 16px;
-  --trinity-button-padding-sm-y: 8px;
-  --trinity-button-padding-md-x: 20px;
-  --trinity-button-padding-md-y: 10px;
-  --trinity-button-padding-lg-x: 24px;
-  --trinity-button-padding-lg-y: 12px;
-  --trinity-button-font-small: 0.875rem;
-  --trinity-button-size-small: 0.875rem;
-  --trinity-button-font-size-sm: 0.875rem;
-  --trinity-button-font-medium: 1rem;
-  --trinity-button-size-medium: 1rem;
-  --trinity-button-font-size-md: 1rem;
-  --trinity-button-font-large: 1.125rem;
-  --trinity-button-size-large: 1.125rem;
-  --trinity-button-font-size-lg: 1.125rem;
-  --trinity-button-primary-bg: #050742;
-  --trinity-button-primary-bg-hover: #FF6150;
-  --trinity-button-secondary-bg: #3816A0;
-  --trinity-button-secondary-bg-hover: #FF6150;
-  --trinity-button-outlined-bg: transparent;
-  --trinity-button-outlined-bg-hover: #FF6150;
-  --trinity-input-height-sm: 36px;
-  --trinity-input-height-md: 44px;
-  --trinity-input-height-lg: 52px;
-  --trinity-input-padding-sm-x: 12px;
-  --trinity-input-padding-sm-y: 8px;
-  --trinity-input-padding-md-x: 14px;
-  --trinity-input-padding-md-y: 10px;
-  --trinity-input-padding-lg-x: 16px;
-  --trinity-input-padding-lg-y: 12px;
-  --trinity-input-font-small: 0.875rem;
-  --trinity-input-size-small: 0.875rem;
-  --trinity-input-font-size-sm: 0.875rem;
-  --trinity-input-font-medium: 1rem;
-  --trinity-input-size-medium: 1rem;
-  --trinity-input-font-size-md: 1rem;
-  --trinity-input-font-large: 1.125rem;
-  --trinity-input-size-large: 1.125rem;
-  --trinity-input-font-size-lg: 1.125rem;
-  --trinity-input-bg-default: #FFFFFF;
-  --trinity-input-bg-disabled: #F4F4F5;
-  --trinity-card-padding-sm: 16px;
-  --trinity-card-padding-md: 24px;
-  --trinity-card-padding-lg: 32px;
-  --trinity-card-bg: #FFFFFF;
-  --trinity-avatar-font-xs: 0.75rem;
-  --trinity-avatar-font-sm: 0.75rem;
-  --trinity-avatar-font-md: 0.875rem;
-  --trinity-avatar-font-lg: 1rem;
-  --trinity-avatar-font-xl: 1.25rem;
-  --trinity-avatar-font-2xl: 1.5rem;
-  --trinity-badge-font: 0.75rem;
-  --trinity-badge-size: 0.75rem;
-  --trinity-badge-weight: 500;
-  --trinity-chip-height-sm: 24px;
-  --trinity-chip-height-md: 32px;
-  --trinity-chip-padding-sm-x: 8px;
-  --trinity-chip-padding-sm-y: 4px;
-  --trinity-chip-padding-md-x: 12px;
-  --trinity-chip-padding-md-y: 6px;
-  --trinity-chip-font-small: 0.75rem;
-  --trinity-chip-size-small: 0.75rem;
-  --trinity-chip-font-size-sm: 0.75rem;
-  --trinity-chip-font-medium: 0.875rem;
-  --trinity-chip-size-medium: 0.875rem;
-  --trinity-chip-font-size-md: 0.875rem;
-  --trinity-tooltip-font: 0.875rem;
-  --trinity-tooltip-size: 0.875rem;
-  --trinity-tooltip-bg: #18181B;
-  --trinity-modal-width-sm: 400px;
-  --trinity-modal-width-md: 560px;
-  --trinity-modal-width-lg: 720px;
-  --trinity-switch-width-sm: 36px;
-  --trinity-switch-width-md: 48px;
-  --trinity-switch-height-sm: 20px;
-  --trinity-switch-height-md: 28px;
-  --trinity-switch-thumb-sm: 16px;
-  --trinity-switch-thumb-md: 24px;
-  --trinity-nav-header-height: 64px;
-  --trinity-navigation-header-bg: #050742;
-  --trinity-nav-header-background: #050742;
-  --trinity-nav-header-text: #FFFFFF;
-  --trinity-nav-sidebar-width: 240px;
-  --trinity-nav-sidebar-collapsed-width: 64px;
-  --trinity-navigation-sidebar-bg: #050742;
-  --trinity-nav-sidebar-background: #050742;
-  --trinity-nav-item-height: 44px;
-  --trinity-nav-item-padding-x: 16px;
-  --trinity-nav-item-padding-y: 12px;
-  --trinity-nav-item-border-radius: 8px;
-  --trinity-nav-footer-height: 40px;
-  --trinity-nav-footer-padding-x: 24px;
-  --trinity-nav-footer-padding-y: 8px;
-  --trinity-navigation-footer-light-bg: #F4F4F5;
-  --trinity-nav-footer-light-background: #F4F4F5;
-  --trinity-nav-footer-light-text: #6B7280;
-  --trinity-nav-footer-light-divider: #D4D4D8;
-  --trinity-nav-footer-light-link-hover: #7841C9;
-  --trinity-navigation-footer-dark-bg: #050742;
-  --trinity-nav-footer-dark-background: #050742;
-  --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
-  --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
-  --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
-  --trinity-button-font-sm: 0.875rem;
-  --trinity-button-size-sm: 0.875rem;
-  --trinity-button-font-md: 1rem;
-  --trinity-button-size-md: 1rem;
-  --trinity-button-font-lg: 1.125rem;
-  --trinity-button-size-lg: 1.125rem;
-  --trinity-input-font-sm: 0.875rem;
-  --trinity-input-size-sm: 0.875rem;
-  --trinity-input-font-md: 1rem;
-  --trinity-input-size-md: 1rem;
-  --trinity-input-font-lg: 1.125rem;
-  --trinity-input-size-lg: 1.125rem;
-  --trinity-chip-font-sm: 0.75rem;
-  --trinity-chip-size-sm: 0.75rem;
-  --trinity-chip-font-md: 0.875rem;
-  --trinity-chip-size-md: 0.875rem;
-  --trinity-nav-header-bg: #050742;
-  --trinity-nav-sidebar-bg: #050742;
-  --trinity-nav-footer-light-bg: #F4F4F5;
-  --trinity-nav-footer-dark-bg: #050742;
+  --trinity-button-height-sm: var(--trinity-button-height-small);
+  --trinity-button-height-md: var(--trinity-button-height-medium);
+  --trinity-button-height-lg: var(--trinity-button-height-large);
+  --trinity-button-padding-sm-x: var(--trinity-button-padding-small-x);
+  --trinity-button-padding-sm-y: var(--trinity-button-padding-small-y);
+  --trinity-button-padding-md-x: var(--trinity-button-padding-medium-x);
+  --trinity-button-padding-md-y: var(--trinity-button-padding-medium-y);
+  --trinity-button-padding-lg-x: var(--trinity-button-padding-large-x);
+  --trinity-button-padding-lg-y: var(--trinity-button-padding-large-y);
+  --trinity-button-font-small: var(--trinity-button-font-size-small);
+  --trinity-button-size-small: var(--trinity-button-font-size-small);
+  --trinity-button-font-size-sm: var(--trinity-button-font-size-small);
+  --trinity-button-font-medium: var(--trinity-button-font-size-medium);
+  --trinity-button-size-medium: var(--trinity-button-font-size-medium);
+  --trinity-button-font-size-md: var(--trinity-button-font-size-medium);
+  --trinity-button-font-large: var(--trinity-button-font-size-large);
+  --trinity-button-size-large: var(--trinity-button-font-size-large);
+  --trinity-button-font-size-lg: var(--trinity-button-font-size-large);
+  --trinity-button-primary-bg: var(--trinity-button-primary-background);
+  --trinity-button-primary-bg-hover: var(--trinity-button-primary-background-hover);
+  --trinity-button-primary-bg-active: var(--trinity-button-primary-background-active);
+  --trinity-button-secondary-bg: var(--trinity-button-secondary-background);
+  --trinity-button-secondary-bg-hover: var(--trinity-button-secondary-background-hover);
+  --trinity-button-secondary-bg-active: var(--trinity-button-secondary-background-active);
+  --trinity-button-outlined-bg: var(--trinity-button-outlined-background);
+  --trinity-button-outlined-bg-hover: var(--trinity-button-outlined-background-hover);
+  --trinity-button-outlined-bg-active: var(--trinity-button-outlined-background-active);
+  --trinity-button-on-brand-bg: var(--trinity-button-on-brand-background);
+  --trinity-button-on-brand-bg-hover: var(--trinity-button-on-brand-background-hover);
+  --trinity-button-on-brand-bg-active: var(--trinity-button-on-brand-background-active);
+  --trinity-button-on-brand-bg-disabled: var(--trinity-button-on-brand-background-disabled);
+  --trinity-button-on-brand-outlined-bg: var(--trinity-button-on-brand-outlined-background);
+  --trinity-button-on-brand-outlined-bg-hover: var(--trinity-button-on-brand-outlined-background-hover);
+  --trinity-button-on-brand-outlined-bg-active: var(--trinity-button-on-brand-outlined-background-active);
+  --trinity-button-on-brand-outlined-bg-disabled: var(--trinity-button-on-brand-outlined-background-disabled);
+  --trinity-input-height-sm: var(--trinity-input-height-small);
+  --trinity-input-height-md: var(--trinity-input-height-medium);
+  --trinity-input-height-lg: var(--trinity-input-height-large);
+  --trinity-input-padding-sm-x: var(--trinity-input-padding-small-x);
+  --trinity-input-padding-sm-y: var(--trinity-input-padding-small-y);
+  --trinity-input-padding-md-x: var(--trinity-input-padding-medium-x);
+  --trinity-input-padding-md-y: var(--trinity-input-padding-medium-y);
+  --trinity-input-padding-lg-x: var(--trinity-input-padding-large-x);
+  --trinity-input-padding-lg-y: var(--trinity-input-padding-large-y);
+  --trinity-input-font-small: var(--trinity-input-font-size-small);
+  --trinity-input-size-small: var(--trinity-input-font-size-small);
+  --trinity-input-font-size-sm: var(--trinity-input-font-size-small);
+  --trinity-input-font-medium: var(--trinity-input-font-size-medium);
+  --trinity-input-size-medium: var(--trinity-input-font-size-medium);
+  --trinity-input-font-size-md: var(--trinity-input-font-size-medium);
+  --trinity-input-font-large: var(--trinity-input-font-size-large);
+  --trinity-input-size-large: var(--trinity-input-font-size-large);
+  --trinity-input-font-size-lg: var(--trinity-input-font-size-large);
+  --trinity-input-border-default: var(--trinity-input-border-color-default);
+  --trinity-input-border-hover: var(--trinity-input-border-color-hover);
+  --trinity-input-border-focus: var(--trinity-input-border-color-focus);
+  --trinity-input-border-error: var(--trinity-input-border-color-error);
+  --trinity-input-bg-default: var(--trinity-input-background-default);
+  --trinity-input-bg-disabled: var(--trinity-input-background-disabled);
+  --trinity-card-padding-sm: var(--trinity-card-padding-small);
+  --trinity-card-padding-md: var(--trinity-card-padding-medium);
+  --trinity-card-padding-lg: var(--trinity-card-padding-large);
+  --trinity-card-bg: var(--trinity-card-background);
+  --trinity-avatar-font-xs: var(--trinity-avatar-font-size-xs);
+  --trinity-avatar-font-sm: var(--trinity-avatar-font-size-sm);
+  --trinity-avatar-font-md: var(--trinity-avatar-font-size-md);
+  --trinity-avatar-font-lg: var(--trinity-avatar-font-size-lg);
+  --trinity-avatar-font-xl: var(--trinity-avatar-font-size-xl);
+  --trinity-avatar-font-2xl: var(--trinity-avatar-font-size-2xl);
+  --trinity-badge-font: var(--trinity-badge-font-size);
+  --trinity-badge-size: var(--trinity-badge-font-size);
+  --trinity-badge-weight: var(--trinity-badge-font-weight);
+  --trinity-chip-height-sm: var(--trinity-chip-height-small);
+  --trinity-chip-height-md: var(--trinity-chip-height-medium);
+  --trinity-chip-padding-sm-x: var(--trinity-chip-padding-small-x);
+  --trinity-chip-padding-sm-y: var(--trinity-chip-padding-small-y);
+  --trinity-chip-padding-md-x: var(--trinity-chip-padding-medium-x);
+  --trinity-chip-padding-md-y: var(--trinity-chip-padding-medium-y);
+  --trinity-chip-font-small: var(--trinity-chip-font-size-small);
+  --trinity-chip-size-small: var(--trinity-chip-font-size-small);
+  --trinity-chip-font-size-sm: var(--trinity-chip-font-size-small);
+  --trinity-chip-font-medium: var(--trinity-chip-font-size-medium);
+  --trinity-chip-size-medium: var(--trinity-chip-font-size-medium);
+  --trinity-chip-font-size-md: var(--trinity-chip-font-size-medium);
+  --trinity-tooltip-font: var(--trinity-tooltip-font-size);
+  --trinity-tooltip-size: var(--trinity-tooltip-font-size);
+  --trinity-tooltip-bg: var(--trinity-tooltip-background);
+  --trinity-modal-bg: var(--trinity-modal-background);
+  --trinity-modal-width-sm: var(--trinity-modal-width-small);
+  --trinity-modal-width-md: var(--trinity-modal-width-medium);
+  --trinity-modal-width-lg: var(--trinity-modal-width-large);
+  --trinity-switch-width-sm: var(--trinity-switch-width-small);
+  --trinity-switch-width-md: var(--trinity-switch-width-medium);
+  --trinity-switch-height-sm: var(--trinity-switch-height-small);
+  --trinity-switch-height-md: var(--trinity-switch-height-medium);
+  --trinity-switch-thumb-sm: var(--trinity-switch-thumb-small);
+  --trinity-switch-thumb-md: var(--trinity-switch-thumb-medium);
+  --trinity-nav-header-height: var(--trinity-navigation-header-height);
+  --trinity-navigation-header-bg: var(--trinity-navigation-header-background);
+  --trinity-nav-header-background: var(--trinity-navigation-header-background);
+  --trinity-nav-header-text: var(--trinity-navigation-header-text);
+  --trinity-nav-sidebar-width: var(--trinity-navigation-sidebar-width);
+  --trinity-nav-sidebar-collapsed-width: var(--trinity-navigation-sidebar-collapsed-width);
+  --trinity-navigation-sidebar-bg: var(--trinity-navigation-sidebar-background);
+  --trinity-nav-sidebar-background: var(--trinity-navigation-sidebar-background);
+  --trinity-nav-item-height: var(--trinity-navigation-item-height);
+  --trinity-nav-item-padding-x: var(--trinity-navigation-item-padding-x);
+  --trinity-nav-item-padding-y: var(--trinity-navigation-item-padding-y);
+  --trinity-nav-item-border-radius: var(--trinity-navigation-item-border-radius);
+  --trinity-nav-footer-height: var(--trinity-navigation-footer-height);
+  --trinity-nav-footer-padding-x: var(--trinity-navigation-footer-padding-x);
+  --trinity-nav-footer-padding-y: var(--trinity-navigation-footer-padding-y);
+  --trinity-navigation-footer-light-bg: var(--trinity-navigation-footer-light-background);
+  --trinity-nav-footer-light-background: var(--trinity-navigation-footer-light-background);
+  --trinity-nav-footer-light-text: var(--trinity-navigation-footer-light-text);
+  --trinity-nav-footer-light-divider: var(--trinity-navigation-footer-light-divider);
+  --trinity-nav-footer-light-link-hover: var(--trinity-navigation-footer-light-link-hover);
+  --trinity-navigation-footer-dark-bg: var(--trinity-navigation-footer-dark-background);
+  --trinity-nav-footer-dark-background: var(--trinity-navigation-footer-dark-background);
+  --trinity-nav-footer-dark-text: var(--trinity-navigation-footer-dark-text);
+  --trinity-nav-footer-dark-divider: var(--trinity-navigation-footer-dark-divider);
+  --trinity-nav-footer-dark-link-hover: var(--trinity-navigation-footer-dark-link-hover);
+  --trinity-button-font-sm: var(--trinity-button-font-small);
+  --trinity-button-size-sm: var(--trinity-button-size-small);
+  --trinity-button-font-md: var(--trinity-button-font-medium);
+  --trinity-button-size-md: var(--trinity-button-size-medium);
+  --trinity-button-font-lg: var(--trinity-button-font-large);
+  --trinity-button-size-lg: var(--trinity-button-size-large);
+  --trinity-input-font-sm: var(--trinity-input-font-small);
+  --trinity-input-size-sm: var(--trinity-input-size-small);
+  --trinity-input-font-md: var(--trinity-input-font-medium);
+  --trinity-input-size-md: var(--trinity-input-size-medium);
+  --trinity-input-font-lg: var(--trinity-input-font-large);
+  --trinity-input-size-lg: var(--trinity-input-size-large);
+  --trinity-chip-font-sm: var(--trinity-chip-font-small);
+  --trinity-chip-size-sm: var(--trinity-chip-size-small);
+  --trinity-chip-font-md: var(--trinity-chip-font-medium);
+  --trinity-chip-size-md: var(--trinity-chip-size-medium);
+  --trinity-nav-header-bg: var(--trinity-navigation-header-bg);
+  --trinity-nav-sidebar-bg: var(--trinity-navigation-sidebar-bg);
+  --trinity-nav-footer-light-bg: var(--trinity-navigation-footer-light-bg);
+  --trinity-nav-footer-dark-bg: var(--trinity-navigation-footer-dark-bg);
 
   /* Breakpoints */
   --trinity-breakpoint-xs: 0px;
@@ -1031,6 +1142,7 @@
   /* Touch targets */
   --trinity-touch-target-minimum: 44px;
   --trinity-touch-target-spacious: 48px;
+  --trinity-touch-target-floor: 24px;
 
   /* Shirt-size icon scale */
   --trinity-icon-xs: 12px;
@@ -1039,23 +1151,15 @@
   --trinity-icon-lg: 20px;
   --trinity-icon-xl: 24px;
   --trinity-icon-2xl: 32px;
-  --trinity-icon-size-xs: 12px;
-  --trinity-icon-size-sm: 14px;
-  --trinity-icon-size-md: 16px;
-  --trinity-icon-size-lg: 20px;
-  --trinity-icon-size-xl: 24px;
+  --trinity-icon-size-xs: var(--trinity-icon-xs);
+  --trinity-icon-size-sm: var(--trinity-icon-sm);
+  --trinity-icon-size-md: var(--trinity-icon-md);
+  --trinity-icon-size-lg: var(--trinity-icon-lg);
+  --trinity-icon-size-xl: var(--trinity-icon-xl);
 
   /* Legacy compatibility tokens */
   --trinity-button-disabled-bg: #E5E7EB;
   --trinity-button-disabled-text: #9CA3AF;
-  --trinity-button-primary-bg-active: #282964;
-  --trinity-button-secondary-bg-active: #542CE8;
-  --trinity-button-outlined-bg-active: #282964;
-  --trinity-input-border-default: #E5E7EB;
-  --trinity-input-border-hover: #9CA3AF;
-  --trinity-input-border-focus: #7841C9;
-  --trinity-input-border-error: #DC2626;
-  --trinity-modal-bg: #1C1C1F;
   --trinity-modal-width-full: 90vw;
   --trinity-data-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
   --trinity-data-numeric-feature: 'tnum' 1;
@@ -1068,10 +1172,6 @@
   --trinity-shadow-input: none;
   --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --trinity-space-0-5: 2px;
-  --trinity-space-1-5: 6px;
-  --trinity-space-2-5: 10px;
-  --trinity-switch-track-border: #D4D4D8;
   --trinity-switch-thumb-checked-sm: 18px;
   --trinity-switch-thumb-checked-md: 24px;
   --trinity-touch-target-comfortable: 48px;
@@ -1127,20 +1227,70 @@
   --trinity-nav-sidebar-bg-light: #FFFFFF;
   --trinity-nav-sidebar-border: #E5E7EB;
   --trinity-nav-sidebar-width-expanded: 200px;
+
+  /* Semantic role references */
+  --trinity-confidence-high-text: var(--trinity-status-success-text);
+  --trinity-confidence-high-background: var(--trinity-status-success-background);
+  --trinity-confidence-high-border: var(--trinity-status-success-border);
+  --trinity-confidence-medium-text: var(--trinity-status-info-text);
+  --trinity-confidence-medium-background: var(--trinity-status-info-background);
+  --trinity-confidence-medium-border: var(--trinity-status-info-border);
+  --trinity-confidence-low-text: var(--trinity-status-warning-text);
+  --trinity-confidence-low-background: var(--trinity-status-warning-background);
+  --trinity-confidence-low-border: var(--trinity-status-warning-border);
+  --trinity-verification-verified-text: var(--trinity-status-success-text);
+  --trinity-verification-verified-background: var(--trinity-status-success-background);
+  --trinity-verification-verified-border: var(--trinity-status-success-border);
+  --trinity-verification-golden-text: var(--trinity-status-success-text);
+  --trinity-verification-golden-background: var(--trinity-status-success-background);
+  --trinity-verification-golden-border: var(--trinity-status-success-border);
+  --trinity-verification-pending-text: var(--trinity-status-info-text);
+  --trinity-verification-pending-background: var(--trinity-status-info-background);
+  --trinity-verification-pending-border: var(--trinity-status-info-border);
+  --trinity-verification-flagged-text: var(--trinity-status-warning-text);
+  --trinity-verification-flagged-background: var(--trinity-status-warning-background);
+  --trinity-verification-flagged-border: var(--trinity-status-warning-border);
+  --trinity-verification-rejected-text: var(--trinity-status-error-text);
+  --trinity-verification-rejected-background: var(--trinity-status-error-background);
+  --trinity-verification-rejected-border: var(--trinity-status-error-border);
+
+  /* AI gradients */
+  --trinity-ai-gradient-primary: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-horizontal: linear-gradient(90deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-diagonal: linear-gradient(135deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-subtle: linear-gradient(180deg, transparent 0%, var(--trinity-ai-surface) 100%);
+  --trinity-ai-gradient-text: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-border: linear-gradient(180deg, var(--trinity-ai-accent), var(--trinity-ai-primary-fill));
+  --trinity-ai-gradient-avatar: linear-gradient(180deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-brand-diagonal: linear-gradient(135deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-canvas: linear-gradient(135deg, transparent 0%, var(--trinity-ai-canvas-fill-start) 60%, var(--trinity-ai-canvas-fill-end) 100%);
 }
 
-/* Dark mode overrides — explicit opt-in via [data-theme="dark"] */
+/* Dark mode overrides — explicit opt-in via [data-theme="dark"] on <html> or any element */
 [data-theme="dark"] {
   --trinity-text-primary: #F9FAFB;
   --trinity-text-secondary: #D1D5DB;
   --trinity-text-tertiary: #9CA3AF;
   --trinity-text-disabled: #6B7280;
+  --trinity-text-inverse: #18181B;
+  --trinity-text-brand: #C5C6D9;
+  --trinity-text-link: #47B6E9;
+  --trinity-text-link-hover: #7ACBF0;
+  --trinity-text-error: #FCA5A5;
+  --trinity-text-success: #86EFAC;
+  --trinity-text-warning: #FDE68A;
   --trinity-bg-primary: #121214;
   --trinity-bg-secondary: #1C1C1F;
   --trinity-bg-tertiary: #262629;
+  --trinity-bg-inverse: #F9FAFB;
+  --trinity-bg-brand-subtle: #1A1B30;
+  --trinity-bg-accent-subtle: #2A1512;
   --trinity-border-default: #3F3F46;
   --trinity-border-subtle: #27272A;
   --trinity-border-strong: #52525B;
+  --trinity-border-focus: #A96ADA;
+  --trinity-border-error: #F87171;
+  --trinity-border-success: #4ADE80;
   --trinity-interactive-default: #A96ADA;
   --trinity-interactive-hover: #FF8D85;
   --trinity-interactive-active: #7E57F0;
@@ -1158,6 +1308,354 @@
   --trinity-status-info-text: #7DD3FC;
   --trinity-status-info-background: #0C1929;
   --trinity-status-info-border: #075985;
+  --trinity-on-status-error: #09090B;
+  --trinity-on-status-warning: #09090B;
+  --trinity-on-status-success: #09090B;
+  --trinity-on-status-info: #09090B;
+  --trinity-favorite: var(--trinity-status-warning-text);
+  --trinity-indicator-in-progress-bg: #7E57F0;
+  --trinity-indicator-running-bg: #7E57F0;
+  --trinity-indicator-info-bg: #0F62FE;
+  --trinity-indicator-new-bg: #0F62FE;
+  --trinity-indicator-updated-bg: #0F62FE;
+  --trinity-chart-grid: #27272A;
+  --trinity-chart-axis: #6B7280;
+  --trinity-ai-primary: #B985E1;
+  --trinity-ai-primary-fill: #8D49CE;
+  --trinity-ai-on-primary-fill: #FFFFFF;
+  --trinity-ai-accent: #FF8D85;
+  --trinity-ai-surface: rgba(120, 65, 201, 0.15);
+  --trinity-ai-surface-hover: rgba(185, 133, 225, 0.16);
+  --trinity-ai-surface-emphasis: rgba(120, 65, 201, 0.25);
+  --trinity-ai-surface-emphasis-hover: rgba(120, 65, 201, 0.35);
+  --trinity-ai-border: rgba(120, 65, 201, 0.3);
+  --trinity-ai-badge-background: rgba(120, 65, 201, 0.25);
+  --trinity-ai-typing-indicator: #FF6150;
+  --trinity-ai-focus-ring: rgba(169, 106, 218, 0.45);
+  --trinity-ai-presence-blue: #47B6E9;
+  --trinity-ai-presence-violet: #9574F2;
+  --trinity-ai-presence-purple: #B985E1;
+  --trinity-ai-presence-coral: #FF8D85;
+  --trinity-ai-presence-base: #09090B;
+  --trinity-ai-avatar-fill-start: #FF6150;
+  --trinity-ai-avatar-fill-end: #7841C9;
+  --trinity-ai-progress: #14B8A6;
+  --trinity-ai-canvas-fill-start: rgba(120, 65, 201, 0.16);
+  --trinity-ai-canvas-fill-end: rgba(255, 97, 80, 0.1);
+  --trinity-surface-elevated: #1C1C1F;
+  --trinity-surface-sunken: #0C0C0E;
+  --trinity-surface-neutral-fill: #374151;
+  --trinity-surface-overlay: rgba(0, 0, 0, 0.7);
+  --trinity-surface-success: #0A1A10;
+  --trinity-surface-error: #1F1315;
+  --trinity-surface-warning: #1A1607;
+  --trinity-surface-info: #0C1929;
+  --trinity-avatar-foregrounds: #FFFFFF,#FFFFFF,#09090B,#09090B,#FFFFFF,#FFFFFF,#FFFFFF,#09090B;
+  --trinity-focus-ring-offset: #121214;
+  --trinity-selection-background: #2A5D8F;
+  --trinity-selection-text: #F9FAFB;
+  --trinity-switch-track-off: #6B7280;
+  --trinity-switch-track-on: #7E57F0;
+  --trinity-switch-track-border: #6B7280;
+  --trinity-button-primary-background: #7E57F0;
+  --trinity-button-secondary-background: #8D49CE;
+  --trinity-button-outlined-border: #A96ADA;
+  --trinity-button-outlined-text: #A96ADA;
+  --trinity-shadow-none: none;
+  --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.07);
+  --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+  --trinity-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-input: none;
+  --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-overlay-scrim: rgba(0, 0, 0, 0.7);
+  --trinity-overlay-hover: rgba(255, 255, 255, 0.08);
+  --trinity-overlay-hover-subtle: rgba(255, 255, 255, 0.04);
+  --trinity-overlay-pressed: rgba(255, 255, 255, 0.12);
+  --trinity-overlay-selected: rgba(255, 255, 255, 0.10);
+  --trinity-overlay-disabled: rgba(0, 0, 0, 0.5);
+  --trinity-shadow-surface: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-raised: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-floating: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-dialog: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+  --trinity-focus-ring: 0 0 0 3px rgba(169, 106, 218, 0.45);
+  --trinity-focus-glow: 0 0 0 3px rgba(169, 106, 218, 0.45);
+  --trinity-state-error-subtle: rgba(248, 113, 113, 0.15);
+  --trinity-state-error-emphasis: rgba(248, 113, 113, 0.4);
+  --trinity-state-warning-subtle: rgba(253, 230, 138, 0.15);
+  --trinity-state-warning-emphasis: rgba(253, 230, 138, 0.4);
+  --trinity-state-success-subtle: rgba(74, 222, 128, 0.15);
+  --trinity-state-success-emphasis: rgba(74, 222, 128, 0.4);
+  --trinity-state-info-subtle: rgba(125, 211, 252, 0.15);
+  --trinity-state-info-emphasis: rgba(125, 211, 252, 0.4);
+  --trinity-focus-ring-default: var(--trinity-focus-ring);
+  --trinity-selection-bg: var(--trinity-selection-background);
+  --trinity-status-error-bg: var(--trinity-status-error-background);
+  --trinity-status-warning-bg: var(--trinity-status-warning-background);
+  --trinity-status-success-bg: var(--trinity-status-success-background);
+  --trinity-status-info-bg: var(--trinity-status-info-background);
+  --trinity-ai-badge-bg: var(--trinity-ai-badge-background);
+  --trinity-input-border-color-default: var(--trinity-border-default);
+  --trinity-input-border-color-hover: var(--trinity-border-strong);
+  --trinity-input-border-color-focus: var(--trinity-border-focus);
+  --trinity-input-border-color-error: var(--trinity-border-error);
+  --trinity-input-background-default: var(--trinity-surface-elevated);
+  --trinity-input-background-disabled: var(--trinity-bg-tertiary);
+  --trinity-card-background: var(--trinity-surface-elevated);
+  --trinity-card-border: var(--trinity-border-subtle);
+  --trinity-tooltip-background: var(--trinity-bg-inverse);
+  --trinity-tooltip-text: var(--trinity-text-inverse);
+  --trinity-modal-background: var(--trinity-surface-elevated);
+  --trinity-button-primary-bg: var(--trinity-button-primary-background);
+  --trinity-button-secondary-bg: var(--trinity-button-secondary-background);
+  --trinity-input-border-default: var(--trinity-input-border-color-default);
+  --trinity-input-border-hover: var(--trinity-input-border-color-hover);
+  --trinity-input-border-focus: var(--trinity-input-border-color-focus);
+  --trinity-input-border-error: var(--trinity-input-border-color-error);
+  --trinity-input-bg-default: var(--trinity-input-background-default);
+  --trinity-input-bg-disabled: var(--trinity-input-background-disabled);
+  --trinity-card-bg: var(--trinity-card-background);
+  --trinity-tooltip-bg: var(--trinity-tooltip-background);
+  --trinity-modal-bg: var(--trinity-modal-background);
+  --trinity-confidence-high-text: var(--trinity-status-success-text);
+  --trinity-confidence-high-background: var(--trinity-status-success-background);
+  --trinity-confidence-high-border: var(--trinity-status-success-border);
+  --trinity-confidence-medium-text: var(--trinity-status-info-text);
+  --trinity-confidence-medium-background: var(--trinity-status-info-background);
+  --trinity-confidence-medium-border: var(--trinity-status-info-border);
+  --trinity-confidence-low-text: var(--trinity-status-warning-text);
+  --trinity-confidence-low-background: var(--trinity-status-warning-background);
+  --trinity-confidence-low-border: var(--trinity-status-warning-border);
+  --trinity-verification-verified-text: var(--trinity-status-success-text);
+  --trinity-verification-verified-background: var(--trinity-status-success-background);
+  --trinity-verification-verified-border: var(--trinity-status-success-border);
+  --trinity-verification-golden-text: var(--trinity-status-success-text);
+  --trinity-verification-golden-background: var(--trinity-status-success-background);
+  --trinity-verification-golden-border: var(--trinity-status-success-border);
+  --trinity-verification-pending-text: var(--trinity-status-info-text);
+  --trinity-verification-pending-background: var(--trinity-status-info-background);
+  --trinity-verification-pending-border: var(--trinity-status-info-border);
+  --trinity-verification-flagged-text: var(--trinity-status-warning-text);
+  --trinity-verification-flagged-background: var(--trinity-status-warning-background);
+  --trinity-verification-flagged-border: var(--trinity-status-warning-border);
+  --trinity-verification-rejected-text: var(--trinity-status-error-text);
+  --trinity-verification-rejected-background: var(--trinity-status-error-background);
+  --trinity-verification-rejected-border: var(--trinity-status-error-border);
+  --trinity-ai-gradient-primary: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-horizontal: linear-gradient(90deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-diagonal: linear-gradient(135deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-subtle: linear-gradient(180deg, transparent 0%, var(--trinity-ai-surface) 100%);
+  --trinity-ai-gradient-text: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-border: linear-gradient(180deg, var(--trinity-ai-accent), var(--trinity-ai-primary-fill));
+  --trinity-ai-gradient-avatar: linear-gradient(180deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-brand-diagonal: linear-gradient(135deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-canvas: linear-gradient(135deg, transparent 0%, var(--trinity-ai-canvas-fill-start) 60%, var(--trinity-ai-canvas-fill-end) 100%);
+}
+
+/* Light island — [data-theme="light"] restores the light values inside a dark page or subtree */
+[data-theme="light"] {
+  --trinity-text-primary: #09090B;
+  --trinity-text-secondary: #6B7280;
+  --trinity-text-tertiary: #9CA3AF;
+  --trinity-text-disabled: #6B7280;
+  --trinity-text-inverse: #FFFFFF;
+  --trinity-text-brand: #050742;
+  --trinity-text-link: #0E62CA;
+  --trinity-text-link-hover: #1D8DD8;
+  --trinity-text-error: #DA1E28;
+  --trinity-text-success: #15803D;
+  --trinity-text-warning: #B45309;
+  --trinity-bg-primary: #FFFFFF;
+  --trinity-bg-secondary: #FAFAFA;
+  --trinity-bg-tertiary: #F4F4F5;
+  --trinity-bg-inverse: #18181B;
+  --trinity-bg-brand-subtle: #E8E8F0;
+  --trinity-bg-accent-subtle: #FFEFEE;
+  --trinity-border-default: #D4D4D8;
+  --trinity-border-subtle: #E5E7EB;
+  --trinity-border-strong: #6B7280;
+  --trinity-border-focus: #7841C9;
+  --trinity-border-error: #DA1E28;
+  --trinity-border-success: #16A34A;
+  --trinity-interactive-default: #050742;
+  --trinity-interactive-hover: #FF6150;
+  --trinity-interactive-active: #3816A0;
+  --trinity-interactive-disabled: #D4D4D8;
+  --trinity-interactive-focus: #7841C9;
+  --trinity-status-error-text: #DA1E28;
+  --trinity-status-error-background: #FEF2F2;
+  --trinity-status-error-border: #FECACA;
+  --trinity-status-warning-text: #B45309;
+  --trinity-status-warning-background: #FFFBEB;
+  --trinity-status-warning-border: #FDE68A;
+  --trinity-status-success-text: #15803D;
+  --trinity-status-success-background: #F0FDF4;
+  --trinity-status-success-border: #BBF7D0;
+  --trinity-status-info-text: #0E62CA;
+  --trinity-status-info-background: #E5F5FC;
+  --trinity-status-info-border: #93D4F2;
+  --trinity-on-status-error: #FFFFFF;
+  --trinity-on-status-warning: #FFFFFF;
+  --trinity-on-status-success: #FFFFFF;
+  --trinity-on-status-info: #FFFFFF;
+  --trinity-favorite: var(--trinity-status-warning-text);
+  --trinity-indicator-in-progress-bg: #050742;
+  --trinity-indicator-running-bg: #050742;
+  --trinity-indicator-info-bg: #0043CE;
+  --trinity-indicator-new-bg: #0043CE;
+  --trinity-indicator-updated-bg: #0043CE;
+  --trinity-chart-grid: #E5E7EB;
+  --trinity-chart-axis: #9CA3AF;
+  --trinity-ai-primary: var(--trinity-brand-secondary);
+  --trinity-ai-primary-fill: var(--trinity-brand-secondary);
+  --trinity-ai-on-primary-fill: #FFFFFF;
+  --trinity-ai-accent: var(--trinity-brand-accent);
+  --trinity-ai-surface: rgba(120, 65, 201, 0.05);
+  --trinity-ai-surface-hover: #EDE7FD;
+  --trinity-ai-surface-emphasis: #EDE7FD;
+  --trinity-ai-surface-emphasis-hover: #D2C3FA;
+  --trinity-ai-border: rgba(120, 65, 201, 0.2);
+  --trinity-ai-badge-background: rgba(120, 65, 201, 0.15);
+  --trinity-ai-typing-indicator: var(--trinity-brand-secondary);
+  --trinity-ai-focus-ring: #EDE7FD;
+  --trinity-ai-presence-blue: #27AAE1;
+  --trinity-ai-presence-violet: #6739ED;
+  --trinity-ai-presence-purple: var(--trinity-brand-secondary);
+  --trinity-ai-presence-coral: var(--trinity-brand-accent);
+  --trinity-ai-presence-base: #050742;
+  --trinity-ai-avatar-fill-start: var(--trinity-brand-accent);
+  --trinity-ai-avatar-fill-end: var(--trinity-brand-secondary);
+  --trinity-ai-progress: #008A7E;
+  --trinity-ai-canvas-fill-start: #F3EAFA;
+  --trinity-ai-canvas-fill-end: #FFEFEE;
+  --trinity-surface-elevated: #FFFFFF;
+  --trinity-surface-sunken: #F4F4F5;
+  --trinity-surface-neutral-fill: #E0E0E0;
+  --trinity-surface-overlay: rgba(0, 0, 0, 0.5);
+  --trinity-surface-success: #F0FDF4;
+  --trinity-surface-error: #FEF2F2;
+  --trinity-surface-warning: #FFFBEB;
+  --trinity-surface-info: #E5F5FC;
+  --trinity-avatar-foregrounds: #FFFFFF,#FFFFFF,#09090B,#09090B,#FFFFFF,#FFFFFF,#FFFFFF,#09090B;
+  --trinity-focus-ring-offset: #FFFFFF;
+  --trinity-selection-background: #BEE5F7;
+  --trinity-selection-text: #09090B;
+  --trinity-switch-track-off: #E5E7EB;
+  --trinity-switch-track-on: #050742;
+  --trinity-switch-track-border: #D4D4D8;
+  --trinity-button-primary-background: #050742;
+  --trinity-button-secondary-background: #3816A0;
+  --trinity-button-outlined-border: #050742;
+  --trinity-button-outlined-text: #050742;
+  --trinity-shadow-none: none;
+  --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --trinity-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --trinity-shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --trinity-shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --trinity-shadow-input: none;
+  --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --trinity-overlay-scrim: rgba(0, 0, 0, 0.5);
+  --trinity-overlay-hover: rgba(0, 0, 0, 0.08);
+  --trinity-overlay-hover-subtle: rgba(0, 0, 0, 0.04);
+  --trinity-overlay-pressed: rgba(0, 0, 0, 0.12);
+  --trinity-overlay-selected: rgba(0, 0, 0, 0.08);
+  --trinity-overlay-disabled: rgba(0, 0, 0, 0.38);
+  --trinity-shadow-surface: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --trinity-shadow-raised: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --trinity-shadow-floating: 0 4px 20px rgba(0, 0, 0, 0.15);
+  --trinity-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --trinity-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --trinity-focus-ring: 0 0 0 3px rgba(120, 65, 201, 0.25);
+  --trinity-focus-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
+  --trinity-state-error-subtle: rgba(218, 30, 40, 0.05);
+  --trinity-state-error-emphasis: rgba(218, 30, 40, 0.3);
+  --trinity-state-warning-subtle: rgba(241, 194, 27, 0.1);
+  --trinity-state-warning-emphasis: rgba(241, 194, 27, 0.4);
+  --trinity-state-success-subtle: rgba(36, 161, 72, 0.05);
+  --trinity-state-success-emphasis: rgba(36, 161, 72, 0.3);
+  --trinity-state-info-subtle: rgba(0, 67, 206, 0.05);
+  --trinity-state-info-emphasis: rgba(0, 67, 206, 0.3);
+  --trinity-focus-ring-default: var(--trinity-focus-ring);
+  --trinity-selection-bg: var(--trinity-selection-background);
+  --trinity-status-error-bg: var(--trinity-status-error-background);
+  --trinity-status-warning-bg: var(--trinity-status-warning-background);
+  --trinity-status-success-bg: var(--trinity-status-success-background);
+  --trinity-status-info-bg: var(--trinity-status-info-background);
+  --trinity-ai-badge-bg: var(--trinity-ai-badge-background);
+  --trinity-input-border-color-default: var(--trinity-border-default);
+  --trinity-input-border-color-hover: var(--trinity-border-strong);
+  --trinity-input-border-color-focus: var(--trinity-border-focus);
+  --trinity-input-border-color-error: var(--trinity-border-error);
+  --trinity-input-background-default: var(--trinity-surface-elevated);
+  --trinity-input-background-disabled: var(--trinity-bg-tertiary);
+  --trinity-card-background: var(--trinity-surface-elevated);
+  --trinity-card-border: var(--trinity-border-subtle);
+  --trinity-tooltip-background: var(--trinity-bg-inverse);
+  --trinity-tooltip-text: var(--trinity-text-inverse);
+  --trinity-modal-background: var(--trinity-surface-elevated);
+  --trinity-button-primary-bg: var(--trinity-button-primary-background);
+  --trinity-button-secondary-bg: var(--trinity-button-secondary-background);
+  --trinity-input-border-default: var(--trinity-input-border-color-default);
+  --trinity-input-border-hover: var(--trinity-input-border-color-hover);
+  --trinity-input-border-focus: var(--trinity-input-border-color-focus);
+  --trinity-input-border-error: var(--trinity-input-border-color-error);
+  --trinity-input-bg-default: var(--trinity-input-background-default);
+  --trinity-input-bg-disabled: var(--trinity-input-background-disabled);
+  --trinity-card-bg: var(--trinity-card-background);
+  --trinity-tooltip-bg: var(--trinity-tooltip-background);
+  --trinity-modal-bg: var(--trinity-modal-background);
+  --trinity-confidence-high-text: var(--trinity-status-success-text);
+  --trinity-confidence-high-background: var(--trinity-status-success-background);
+  --trinity-confidence-high-border: var(--trinity-status-success-border);
+  --trinity-confidence-medium-text: var(--trinity-status-info-text);
+  --trinity-confidence-medium-background: var(--trinity-status-info-background);
+  --trinity-confidence-medium-border: var(--trinity-status-info-border);
+  --trinity-confidence-low-text: var(--trinity-status-warning-text);
+  --trinity-confidence-low-background: var(--trinity-status-warning-background);
+  --trinity-confidence-low-border: var(--trinity-status-warning-border);
+  --trinity-verification-verified-text: var(--trinity-status-success-text);
+  --trinity-verification-verified-background: var(--trinity-status-success-background);
+  --trinity-verification-verified-border: var(--trinity-status-success-border);
+  --trinity-verification-golden-text: var(--trinity-status-success-text);
+  --trinity-verification-golden-background: var(--trinity-status-success-background);
+  --trinity-verification-golden-border: var(--trinity-status-success-border);
+  --trinity-verification-pending-text: var(--trinity-status-info-text);
+  --trinity-verification-pending-background: var(--trinity-status-info-background);
+  --trinity-verification-pending-border: var(--trinity-status-info-border);
+  --trinity-verification-flagged-text: var(--trinity-status-warning-text);
+  --trinity-verification-flagged-background: var(--trinity-status-warning-background);
+  --trinity-verification-flagged-border: var(--trinity-status-warning-border);
+  --trinity-verification-rejected-text: var(--trinity-status-error-text);
+  --trinity-verification-rejected-background: var(--trinity-status-error-background);
+  --trinity-verification-rejected-border: var(--trinity-status-error-border);
+  --trinity-ai-gradient-primary: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-horizontal: linear-gradient(90deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-diagonal: linear-gradient(135deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-subtle: linear-gradient(180deg, transparent 0%, var(--trinity-ai-surface) 100%);
+  --trinity-ai-gradient-text: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-border: linear-gradient(180deg, var(--trinity-ai-accent), var(--trinity-ai-primary-fill));
+  --trinity-ai-gradient-avatar: linear-gradient(180deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-brand-diagonal: linear-gradient(135deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-canvas: linear-gradient(135deg, transparent 0%, var(--trinity-ai-canvas-fill-start) 60%, var(--trinity-ai-canvas-fill-end) 100%);
 }
 
 /* Dark mode — follows OS preference unless explicit [data-theme="light"] is set */
@@ -1167,12 +1665,25 @@
   --trinity-text-secondary: #D1D5DB;
   --trinity-text-tertiary: #9CA3AF;
   --trinity-text-disabled: #6B7280;
+  --trinity-text-inverse: #18181B;
+  --trinity-text-brand: #C5C6D9;
+  --trinity-text-link: #47B6E9;
+  --trinity-text-link-hover: #7ACBF0;
+  --trinity-text-error: #FCA5A5;
+  --trinity-text-success: #86EFAC;
+  --trinity-text-warning: #FDE68A;
   --trinity-bg-primary: #121214;
   --trinity-bg-secondary: #1C1C1F;
   --trinity-bg-tertiary: #262629;
+  --trinity-bg-inverse: #F9FAFB;
+  --trinity-bg-brand-subtle: #1A1B30;
+  --trinity-bg-accent-subtle: #2A1512;
   --trinity-border-default: #3F3F46;
   --trinity-border-subtle: #27272A;
   --trinity-border-strong: #52525B;
+  --trinity-border-focus: #A96ADA;
+  --trinity-border-error: #F87171;
+  --trinity-border-success: #4ADE80;
   --trinity-interactive-default: #A96ADA;
   --trinity-interactive-hover: #FF8D85;
   --trinity-interactive-active: #7E57F0;
@@ -1190,5 +1701,157 @@
   --trinity-status-info-text: #7DD3FC;
   --trinity-status-info-background: #0C1929;
   --trinity-status-info-border: #075985;
+  --trinity-on-status-error: #09090B;
+  --trinity-on-status-warning: #09090B;
+  --trinity-on-status-success: #09090B;
+  --trinity-on-status-info: #09090B;
+  --trinity-favorite: var(--trinity-status-warning-text);
+  --trinity-indicator-in-progress-bg: #7E57F0;
+  --trinity-indicator-running-bg: #7E57F0;
+  --trinity-indicator-info-bg: #0F62FE;
+  --trinity-indicator-new-bg: #0F62FE;
+  --trinity-indicator-updated-bg: #0F62FE;
+  --trinity-chart-grid: #27272A;
+  --trinity-chart-axis: #6B7280;
+  --trinity-ai-primary: #B985E1;
+  --trinity-ai-primary-fill: #8D49CE;
+  --trinity-ai-on-primary-fill: #FFFFFF;
+  --trinity-ai-accent: #FF8D85;
+  --trinity-ai-surface: rgba(120, 65, 201, 0.15);
+  --trinity-ai-surface-hover: rgba(185, 133, 225, 0.16);
+  --trinity-ai-surface-emphasis: rgba(120, 65, 201, 0.25);
+  --trinity-ai-surface-emphasis-hover: rgba(120, 65, 201, 0.35);
+  --trinity-ai-border: rgba(120, 65, 201, 0.3);
+  --trinity-ai-badge-background: rgba(120, 65, 201, 0.25);
+  --trinity-ai-typing-indicator: #FF6150;
+  --trinity-ai-focus-ring: rgba(169, 106, 218, 0.45);
+  --trinity-ai-presence-blue: #47B6E9;
+  --trinity-ai-presence-violet: #9574F2;
+  --trinity-ai-presence-purple: #B985E1;
+  --trinity-ai-presence-coral: #FF8D85;
+  --trinity-ai-presence-base: #09090B;
+  --trinity-ai-avatar-fill-start: #FF6150;
+  --trinity-ai-avatar-fill-end: #7841C9;
+  --trinity-ai-progress: #14B8A6;
+  --trinity-ai-canvas-fill-start: rgba(120, 65, 201, 0.16);
+  --trinity-ai-canvas-fill-end: rgba(255, 97, 80, 0.1);
+  --trinity-surface-elevated: #1C1C1F;
+  --trinity-surface-sunken: #0C0C0E;
+  --trinity-surface-neutral-fill: #374151;
+  --trinity-surface-overlay: rgba(0, 0, 0, 0.7);
+  --trinity-surface-success: #0A1A10;
+  --trinity-surface-error: #1F1315;
+  --trinity-surface-warning: #1A1607;
+  --trinity-surface-info: #0C1929;
+  --trinity-avatar-foregrounds: #FFFFFF,#FFFFFF,#09090B,#09090B,#FFFFFF,#FFFFFF,#FFFFFF,#09090B;
+  --trinity-focus-ring-offset: #121214;
+  --trinity-selection-background: #2A5D8F;
+  --trinity-selection-text: #F9FAFB;
+  --trinity-switch-track-off: #6B7280;
+  --trinity-switch-track-on: #7E57F0;
+  --trinity-switch-track-border: #6B7280;
+  --trinity-button-primary-background: #7E57F0;
+  --trinity-button-secondary-background: #8D49CE;
+  --trinity-button-outlined-border: #A96ADA;
+  --trinity-button-outlined-text: #A96ADA;
+  --trinity-shadow-none: none;
+  --trinity-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.07);
+  --trinity-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+  --trinity-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-dropdown: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-input: none;
+  --trinity-shadow-input-focus: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-overlay-scrim: rgba(0, 0, 0, 0.7);
+  --trinity-overlay-hover: rgba(255, 255, 255, 0.08);
+  --trinity-overlay-hover-subtle: rgba(255, 255, 255, 0.04);
+  --trinity-overlay-pressed: rgba(255, 255, 255, 0.12);
+  --trinity-overlay-selected: rgba(255, 255, 255, 0.10);
+  --trinity-overlay-disabled: rgba(0, 0, 0, 0.5);
+  --trinity-shadow-surface: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-raised: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-floating: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05);
+  --trinity-shadow-dialog: 0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1);
+  --trinity-shadow-inset: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
+  --trinity-focus-ring: 0 0 0 3px rgba(169, 106, 218, 0.45);
+  --trinity-focus-glow: 0 0 0 3px rgba(169, 106, 218, 0.45);
+  --trinity-state-error-subtle: rgba(248, 113, 113, 0.15);
+  --trinity-state-error-emphasis: rgba(248, 113, 113, 0.4);
+  --trinity-state-warning-subtle: rgba(253, 230, 138, 0.15);
+  --trinity-state-warning-emphasis: rgba(253, 230, 138, 0.4);
+  --trinity-state-success-subtle: rgba(74, 222, 128, 0.15);
+  --trinity-state-success-emphasis: rgba(74, 222, 128, 0.4);
+  --trinity-state-info-subtle: rgba(125, 211, 252, 0.15);
+  --trinity-state-info-emphasis: rgba(125, 211, 252, 0.4);
+  --trinity-focus-ring-default: var(--trinity-focus-ring);
+  --trinity-selection-bg: var(--trinity-selection-background);
+  --trinity-status-error-bg: var(--trinity-status-error-background);
+  --trinity-status-warning-bg: var(--trinity-status-warning-background);
+  --trinity-status-success-bg: var(--trinity-status-success-background);
+  --trinity-status-info-bg: var(--trinity-status-info-background);
+  --trinity-ai-badge-bg: var(--trinity-ai-badge-background);
+  --trinity-input-border-color-default: var(--trinity-border-default);
+  --trinity-input-border-color-hover: var(--trinity-border-strong);
+  --trinity-input-border-color-focus: var(--trinity-border-focus);
+  --trinity-input-border-color-error: var(--trinity-border-error);
+  --trinity-input-background-default: var(--trinity-surface-elevated);
+  --trinity-input-background-disabled: var(--trinity-bg-tertiary);
+  --trinity-card-background: var(--trinity-surface-elevated);
+  --trinity-card-border: var(--trinity-border-subtle);
+  --trinity-tooltip-background: var(--trinity-bg-inverse);
+  --trinity-tooltip-text: var(--trinity-text-inverse);
+  --trinity-modal-background: var(--trinity-surface-elevated);
+  --trinity-button-primary-bg: var(--trinity-button-primary-background);
+  --trinity-button-secondary-bg: var(--trinity-button-secondary-background);
+  --trinity-input-border-default: var(--trinity-input-border-color-default);
+  --trinity-input-border-hover: var(--trinity-input-border-color-hover);
+  --trinity-input-border-focus: var(--trinity-input-border-color-focus);
+  --trinity-input-border-error: var(--trinity-input-border-color-error);
+  --trinity-input-bg-default: var(--trinity-input-background-default);
+  --trinity-input-bg-disabled: var(--trinity-input-background-disabled);
+  --trinity-card-bg: var(--trinity-card-background);
+  --trinity-tooltip-bg: var(--trinity-tooltip-background);
+  --trinity-modal-bg: var(--trinity-modal-background);
+  --trinity-confidence-high-text: var(--trinity-status-success-text);
+  --trinity-confidence-high-background: var(--trinity-status-success-background);
+  --trinity-confidence-high-border: var(--trinity-status-success-border);
+  --trinity-confidence-medium-text: var(--trinity-status-info-text);
+  --trinity-confidence-medium-background: var(--trinity-status-info-background);
+  --trinity-confidence-medium-border: var(--trinity-status-info-border);
+  --trinity-confidence-low-text: var(--trinity-status-warning-text);
+  --trinity-confidence-low-background: var(--trinity-status-warning-background);
+  --trinity-confidence-low-border: var(--trinity-status-warning-border);
+  --trinity-verification-verified-text: var(--trinity-status-success-text);
+  --trinity-verification-verified-background: var(--trinity-status-success-background);
+  --trinity-verification-verified-border: var(--trinity-status-success-border);
+  --trinity-verification-golden-text: var(--trinity-status-success-text);
+  --trinity-verification-golden-background: var(--trinity-status-success-background);
+  --trinity-verification-golden-border: var(--trinity-status-success-border);
+  --trinity-verification-pending-text: var(--trinity-status-info-text);
+  --trinity-verification-pending-background: var(--trinity-status-info-background);
+  --trinity-verification-pending-border: var(--trinity-status-info-border);
+  --trinity-verification-flagged-text: var(--trinity-status-warning-text);
+  --trinity-verification-flagged-background: var(--trinity-status-warning-background);
+  --trinity-verification-flagged-border: var(--trinity-status-warning-border);
+  --trinity-verification-rejected-text: var(--trinity-status-error-text);
+  --trinity-verification-rejected-background: var(--trinity-status-error-background);
+  --trinity-verification-rejected-border: var(--trinity-status-error-border);
+  --trinity-ai-gradient-primary: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-horizontal: linear-gradient(90deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-diagonal: linear-gradient(135deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-subtle: linear-gradient(180deg, transparent 0%, var(--trinity-ai-surface) 100%);
+  --trinity-ai-gradient-text: linear-gradient(180deg, var(--trinity-ai-accent) 0%, var(--trinity-ai-primary-fill) 100%);
+  --trinity-ai-gradient-border: linear-gradient(180deg, var(--trinity-ai-accent), var(--trinity-ai-primary-fill));
+  --trinity-ai-gradient-avatar: linear-gradient(180deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-brand-diagonal: linear-gradient(135deg, var(--trinity-ai-avatar-fill-start) 0%, var(--trinity-ai-avatar-fill-end) 100%);
+  --trinity-ai-gradient-canvas: linear-gradient(135deg, transparent 0%, var(--trinity-ai-canvas-fill-start) 60%, var(--trinity-ai-canvas-fill-end) 100%);
   }
 }