npm - @trinityui/design-system - Versions diffs - 2.1.4 → 2.2.1 - Mend

@trinityui/design-system 2.1.4 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/dist/trinity.css CHANGED Viewed

@@ -1,35 +1,25 @@
 /**
- * Trinity Design System - Comprehensive CSS Theme
- *
- * Complete CSS custom properties including:
- * - Brand Colors (with full shade scales)
- * - Semantic Colors (text, background, border, interactive, status)
- * - Semantic Effects (overlays, onDark, shadows, focus, states)
- * - Full Typography (display, heading, body, label, micro, data)
- * - Spacing (base scale, inline, stack, density)
- * - Border Radius (base scale + semantic assignments)
- * - Icon Sizes
- * - Component Tokens (button, input, card, avatar, badge, chip, tooltip, modal, switch, navigation)
- * - Shadows and Elevation
- * - Motion (duration, easing)
- * - Z-Index Scale
- * - Dark Mode Support
- *
- * Usage:
- *   <link rel="stylesheet" href="path/to/trinity.css">
- *   OR
- *   @import "@trinityui/design-system/css";
- *
- * Dark mode: Add data-theme="dark" to <html> or <body>
+ * Trinity Design System — Generated CSS Variables
+ *
+ * AUTO-GENERATED FILE — do not edit.
+ * Source: src/tokens.ts  +  scripts/generate-css-from-tokens.ts
+ * Generated from tokens.ts on 2026-04-27T18:32:15.403Z
+ *
+ * This file is the canonical CSS surface shipped in
+ * `@trinityui/design-system-css`. It supersedes the hand-maintained
+ * `trinity.css` which is retired.
+ *
+ * Regenerate:
+ *   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)
  */
 :root {
-  /* ============================================
-     BRAND COLOR SCALES
-     Full shade scales for each brand color
-     ============================================ */
-  /* Navy Scale */
+  /* Base color scales */
   --trinity-navy-50: #E8E8F0;
   --trinity-navy-100: #C5C6D9;
   --trinity-navy-200: #9FA1C0;
@@ -40,8 +30,6 @@
   --trinity-navy-700: #30316E;
   --trinity-navy-800: #282964;
   --trinity-navy-900: #050742;
-  /* Purple Scale */
   --trinity-purple-50: #F3EAFA;
   --trinity-purple-100: #E1CBF2;
   --trinity-purple-200: #CDA8EA;
@@ -52,8 +40,6 @@
   --trinity-purple-700: #7841C9;
   --trinity-purple-800: #6939B5;
   --trinity-purple-900: #4E2A97;
-  /* Indigo Scale */
   --trinity-indigo-50: #EDE7FD;
   --trinity-indigo-100: #D2C3FA;
   --trinity-indigo-200: #B49CF6;
@@ -65,8 +51,6 @@
   --trinity-indigo-800: #4A24E5;
   --trinity-indigo-900: #3816A0;
   --trinity-indigo-electric: #6B12ED;
-  /* Coral Scale */
   --trinity-coral-50: #FFEFEE;
   --trinity-coral-100: #FFD7D4;
   --trinity-coral-200: #FFBCB7;
@@ -77,8 +61,6 @@
   --trinity-coral-700: #FF665C;
   --trinity-coral-800: #FF6150;
   --trinity-coral-900: #FF5241;
-  /* Azure Scale */
   --trinity-azure-50: #E5F5FC;
   --trinity-azure-100: #BEE5F7;
   --trinity-azure-200: #93D4F2;
@@ -89,8 +71,6 @@
   --trinity-azure-700: #1D8DD8;
   --trinity-azure-800: #177ED3;
   --trinity-azure-900: #0E62CA;
-  /* Gray/Neutral Scale */
   --trinity-gray-0: #FFFFFF;
   --trinity-gray-50: #FAFAFA;
   --trinity-gray-100: #F4F4F5;
@@ -103,40 +83,34 @@
   --trinity-gray-800: #18181B;
   --trinity-gray-900: #09090B;
-  /* ============================================
-     SEMANTIC BRAND COLORS
-     ============================================ */
+  /* Brand color aliases */
   --trinity-brand-primary: #050742;
+  --trinity-brand-primary-light: #7841C9;
+  --trinity-brand-primary-dark: #3816A0;
   --trinity-brand-secondary: #7841C9;
-  --trinity-brand-tertiary: #3816A0;
+  --trinity-brand-secondary-light: #27AAE1;
+  --trinity-brand-secondary-dark: #6B12ED;
   --trinity-brand-accent: #FF6150;
-  /* Shorthand Aliases */
+  --trinity-brand-tertiary: #3816A0;
   --trinity-primary: #050742;
   --trinity-primary-light: #7841C9;
   --trinity-primary-dark: #3816A0;
-  --trinity-secondary: #FF6150;
+  --trinity-secondary: #7841C9;
   --trinity-secondary-light: #27AAE1;
   --trinity-secondary-dark: #6B12ED;
-  /* ============================================
-     SEMANTIC TEXT COLORS
-     ============================================ */
-  --trinity-text-primary: #18181B;
+  /* Semantic colors (flat) */
+  --trinity-text-primary: #09090B;
   --trinity-text-secondary: #6B7280;
   --trinity-text-tertiary: #9CA3AF;
-  --trinity-text-disabled: #D4D4D8;
+  --trinity-text-disabled: #6B7280;
   --trinity-text-inverse: #FFFFFF;
   --trinity-text-brand: #050742;
-  --trinity-text-link: #27AAE1;
+  --trinity-text-link: #0E62CA;
   --trinity-text-link-hover: #1D8DD8;
   --trinity-text-error: #DC2626;
-  --trinity-text-success: #16A34A;
-  --trinity-text-warning: #D97706;
-  /* ============================================
-     SEMANTIC BACKGROUND COLORS
-     ============================================ */
+  --trinity-text-success: #15803D;
+  --trinity-text-warning: #B45309;
   --trinity-bg-primary: #FFFFFF;
   --trinity-bg-secondary: #FAFAFA;
   --trinity-bg-tertiary: #F4F4F5;
@@ -145,8 +119,6 @@
   --trinity-bg-brand-subtle: #E8E8F0;
   --trinity-bg-accent: #FF6150;
   --trinity-bg-accent-subtle: #FFEFEE;
-  /* Surface Colors (elevated/sunken elements) */
   --trinity-surface-elevated: #FFFFFF;
   --trinity-surface-sunken: #F4F4F5;
   --trinity-surface-overlay: rgba(0, 0, 0, 0.5);
@@ -154,70 +126,119 @@
   --trinity-surface-error: #FEF2F2;
   --trinity-surface-warning: #FFFBEB;
   --trinity-surface-info: #E5F5FC;
-  /* ============================================
-     SEMANTIC BORDER COLORS
-     ============================================ */
-  --trinity-border-default: #E5E7EB;
-  --trinity-border-subtle: #F4F4F5;
-  --trinity-border-strong: #9CA3AF;
+  --trinity-border-default: #D4D4D8;
+  --trinity-border-subtle: #E5E7EB;
+  --trinity-border-strong: #6B7280;
   --trinity-border-focus: #7841C9;
   --trinity-border-error: #DC2626;
   --trinity-border-success: #16A34A;
-  /* ============================================
-     INTERACTIVE COLORS
-     ============================================ */
   --trinity-interactive-default: #050742;
   --trinity-interactive-hover: #FF6150;
   --trinity-interactive-active: #3816A0;
   --trinity-interactive-disabled: #D4D4D8;
   --trinity-interactive-focus: #7841C9;
-  /* Focus Ring */
-  --trinity-focus-ring: #050742;
+  --trinity-focus-ring: 0 0 0 3px rgba(120, 65, 201, 0.25);
   --trinity-focus-ring-offset: #FFFFFF;
-  /* Selection */
-  --trinity-selection-bg: #BEE5F7;
-  --trinity-selection-text: #18181B;
-  /* ============================================
-     STATUS COLORS
-     ============================================ */
-  /* Error */
+  --trinity-selection-background: #BEE5F7;
+  --trinity-selection-text: #09090B;
   --trinity-status-error-text: #DC2626;
-  --trinity-status-error-bg: #FEF2F2;
+  --trinity-status-error-background: #FEF2F2;
   --trinity-status-error-border: #FECACA;
-  /* Warning */
-  --trinity-status-warning-text: #D97706;
-  --trinity-status-warning-bg: #FFFBEB;
+  --trinity-status-warning-text: #B45309;
+  --trinity-status-warning-background: #FFFBEB;
   --trinity-status-warning-border: #FDE68A;
-  /* Success */
-  --trinity-status-success-text: #16A34A;
-  --trinity-status-success-bg: #F0FDF4;
+  --trinity-status-success-text: #15803D;
+  --trinity-status-success-background: #F0FDF4;
   --trinity-status-success-border: #BBF7D0;
-  /* Info */
-  --trinity-status-info-text: #27AAE1;
-  --trinity-status-info-bg: #E5F5FC;
+  --trinity-status-info-text: #0E62CA;
+  --trinity-status-info-background: #E5F5FC;
   --trinity-status-info-border: #93D4F2;
+  --trinity-indicator-error-fg: #FFFFFF;
+  --trinity-indicator-error-bg: #FF6150;
+  --trinity-indicator-critical-fg: #FFFFFF;
+  --trinity-indicator-critical-bg: #DA1E28;
+  --trinity-indicator-failed-fg: #FFFFFF;
+  --trinity-indicator-failed-bg: #FF6150;
+  --trinity-indicator-rejected-fg: #FFFFFF;
+  --trinity-indicator-rejected-bg: #FF6150;
+  --trinity-indicator-warning-fg: #000000;
+  --trinity-indicator-warning-bg: #F1C21B;
+  --trinity-indicator-warning-outline: #8E6A00;
+  --trinity-indicator-caution-fg: #000000;
+  --trinity-indicator-caution-bg: #FF832B;
+  --trinity-indicator-caution-outline: #BA4E00;
+  --trinity-indicator-pending-fg: #000000;
+  --trinity-indicator-pending-bg: #F1C21B;
+  --trinity-indicator-pending-outline: #8E6A00;
+  --trinity-indicator-in-progress-fg: #FFFFFF;
+  --trinity-indicator-in-progress-bg: #050742;
+  --trinity-indicator-running-fg: #FFFFFF;
+  --trinity-indicator-running-bg: #050742;
+  --trinity-indicator-success-fg: #FFFFFF;
+  --trinity-indicator-success-bg: #24A148;
+  --trinity-indicator-complete-fg: #FFFFFF;
+  --trinity-indicator-complete-bg: #24A148;
+  --trinity-indicator-approved-fg: #FFFFFF;
+  --trinity-indicator-approved-bg: #24A148;
+  --trinity-indicator-active-fg: #FFFFFF;
+  --trinity-indicator-active-bg: #24A148;
+  --trinity-indicator-enabled-fg: #FFFFFF;
+  --trinity-indicator-enabled-bg: #24A148;
+  --trinity-indicator-info-fg: #FFFFFF;
+  --trinity-indicator-info-bg: #0043CE;
+  --trinity-indicator-new-fg: #FFFFFF;
+  --trinity-indicator-new-bg: #0043CE;
+  --trinity-indicator-updated-fg: #FFFFFF;
+  --trinity-indicator-updated-bg: #0043CE;
+  --trinity-indicator-neutral-fg: #FFFFFF;
+  --trinity-indicator-neutral-bg: #6F6F6F;
+  --trinity-indicator-draft-fg: #FFFFFF;
+  --trinity-indicator-draft-bg: #6F6F6F;
+  --trinity-indicator-inactive-fg: #FFFFFF;
+  --trinity-indicator-inactive-bg: #6F6F6F;
+  --trinity-indicator-disabled-fg: #FFFFFF;
+  --trinity-indicator-disabled-bg: #6F6F6F;
+  --trinity-indicator-cancelled-fg: #FFFFFF;
+  --trinity-indicator-cancelled-bg: #6F6F6F;
+  --trinity-indicator-unknown-fg: #FFFFFF;
+  --trinity-indicator-unknown-bg: #6F6F6F;
+  --trinity-indicator-beta-fg: #FFFFFF;
+  --trinity-indicator-beta-bg: #8A3FFC;
+  --trinity-indicator-experimental-fg: #FFFFFF;
+  --trinity-indicator-experimental-bg: #8A3FFC;
+  --trinity-avatar-backgrounds: #5F33EB,#8D49CE,#FF7167,#239DDD,#30316E,#6739ED,#9950D3,#FF796F;
+  --trinity-avatar-online: #44b700;
+  --trinity-avatar-offline: #9CA3AF;
+  --trinity-avatar-busy: #FF7167;
+  --trinity-avatar-away: #FFA726;
+  --trinity-gradients-primary: linear-gradient(135deg, #5F33EB 0%, #8D49CE 100%);
+  --trinity-gradients-secondary: linear-gradient(135deg, #FF796F 0%, #FF665C 100%);
+  --trinity-gradients-accent: linear-gradient(135deg, #47B6E9 0%, #239DDD 100%);
+  --trinity-gradients-avatar-primary: linear-gradient(135deg, #6739ED 0%, #8D49CE 100%);
+  --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%);
-  /* ============================================
-     SEMANTIC EFFECTS - OVERLAYS
-     ============================================ */
+  /* Semantic effects */
   --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);
-  /* ============================================
-     SEMANTIC EFFECTS - ON DARK (white opacities)
-     ============================================ */
   --trinity-on-dark-primary: rgba(255, 255, 255, 0.87);
   --trinity-on-dark-secondary: rgba(255, 255, 255, 0.7);
   --trinity-on-dark-tertiary: rgba(255, 255, 255, 0.5);
@@ -226,36 +247,15 @@
   --trinity-on-dark-divider: rgba(255, 255, 255, 0.24);
   --trinity-on-dark-emphasis: rgba(255, 255, 255, 0.8);
   --trinity-on-dark-contrast: rgba(255, 255, 255, 0.95);
-  /* ============================================
-     SEMANTIC EFFECTS - SHADOWS
-     ============================================ */
+  --trinity-on-dark-hover: rgba(255, 255, 255, 0.15);
+  --trinity-on-dark-strong-emphasis: rgba(255, 255, 255, 0.9);
   --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);
-  /* Base Shadow Scale */
-  --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);
-  /* ============================================
-     SEMANTIC EFFECTS - FOCUS RINGS
-     ============================================ */
-  --trinity-focus-ring-default: 0 0 0 3px rgba(120, 65, 201, 0.25);
   --trinity-focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.3);
-  --trinity-focus-ring-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
-  /* ============================================
-     SEMANTIC EFFECTS - STATE INDICATORS
-     ============================================ */
+  --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);
@@ -265,101 +265,287 @@
   --trinity-state-info-subtle: rgba(0, 67, 206, 0.05);
   --trinity-state-info-emphasis: rgba(0, 67, 206, 0.3);
-  /* ============================================
-     SPACING SCALE (Base)
-     ============================================ */
-  --trinity-space-0: 0;
-  --trinity-space-0-5: 2px;
-  --trinity-space-1: 4px;
-  --trinity-space-1-5: 6px;
-  --trinity-space-2: 8px;
-  --trinity-space-2-5: 10px;
-  --trinity-space-3: 12px;
-  --trinity-space-4: 16px;
-  --trinity-space-5: 20px;
-  --trinity-space-6: 24px;
-  --trinity-space-7: 28px;
-  --trinity-space-8: 32px;
-  --trinity-space-9: 36px;
-  --trinity-space-10: 40px;
-  --trinity-space-12: 48px;
-  --trinity-space-14: 56px;
-  --trinity-space-16: 64px;
-  --trinity-space-20: 80px;
-  --trinity-space-24: 96px;
-  --trinity-space-32: 128px;
+  /* Semantic typography */
+  --trinity-display-large-font-size: 3rem;
+  --trinity-display-large-font-weight: 700;
+  --trinity-display-large-line-height: 1.25;
+  --trinity-display-large-letter-spacing: -0.025em;
+  --trinity-display-medium-font-size: 2.25rem;
+  --trinity-display-medium-font-weight: 700;
+  --trinity-display-medium-line-height: 1.25;
+  --trinity-display-medium-letter-spacing: -0.025em;
+  --trinity-display-small-font-size: 1.875rem;
+  --trinity-display-small-font-weight: 600;
+  --trinity-display-small-line-height: 1.375;
+  --trinity-display-small-letter-spacing: 0em;
+  --trinity-h1-font-size: 1.875rem;
+  --trinity-h1-font-weight: 700;
+  --trinity-h1-line-height: 1.25;
+  --trinity-h2-font-size: 1.5rem;
+  --trinity-h2-font-weight: 600;
+  --trinity-h2-line-height: 1.375;
+  --trinity-h3-font-size: 1.25rem;
+  --trinity-h3-font-weight: 600;
+  --trinity-h3-line-height: 1.375;
+  --trinity-h4-font-size: 1.125rem;
+  --trinity-h4-font-weight: 600;
+  --trinity-h4-line-height: 1.5;
+  --trinity-h5-font-size: 1rem;
+  --trinity-h5-font-weight: 600;
+  --trinity-h5-line-height: 1.5;
+  --trinity-h6-font-size: 0.875rem;
+  --trinity-h6-font-weight: 600;
+  --trinity-h6-line-height: 1.5;
+  --trinity-body-large-font-size: 1.125rem;
+  --trinity-body-large-font-weight: 400;
+  --trinity-body-large-line-height: 1.625;
+  --trinity-body-medium-font-size: 1rem;
+  --trinity-body-medium-font-weight: 400;
+  --trinity-body-medium-line-height: 1.5;
+  --trinity-body-small-font-size: 0.875rem;
+  --trinity-body-small-font-weight: 400;
+  --trinity-body-small-line-height: 1.5;
+  --trinity-label-large-font-size: 1rem;
+  --trinity-label-large-font-weight: 500;
+  --trinity-label-large-line-height: 1.25;
+  --trinity-label-medium-font-size: 0.875rem;
+  --trinity-label-medium-font-weight: 500;
+  --trinity-label-medium-line-height: 1.25;
+  --trinity-label-small-font-size: 0.75rem;
+  --trinity-label-small-font-weight: 500;
+  --trinity-label-small-line-height: 1.25;
+  --trinity-micro-xs-font-size: 0.625rem;
+  --trinity-micro-xs-font-weight: 500;
+  --trinity-micro-xs-line-height: 1.25;
+  --trinity-micro-xs-letter-spacing: 0.025em;
+  --trinity-micro-sm-font-size: 0.6875rem;
+  --trinity-micro-sm-font-weight: 500;
+  --trinity-micro-sm-line-height: 1.25;
+  --trinity-micro-sm-letter-spacing: 0em;
+  --trinity-dense-badge: 0.625rem;
+  --trinity-dense-text: 0.75rem;
+  --trinity-data-numeric-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  --trinity-data-numeric-font-weight: 400;
+  --trinity-data-numeric-font-feature-settings: "tnum" 1;
+  --trinity-data-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  --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;
+  /* Icon sizes */
+  --trinity-icon-inline: 14px;
+  --trinity-icon-control: 16px;
+  --trinity-icon-navigation: 20px;
+  --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;
+  /* Semantic spacing */
+  --trinity-component-padding-xs: 4px;
+  --trinity-component-padding-sm: 8px;
+  --trinity-component-padding-md: 16px;
+  --trinity-component-padding-lg: 24px;
+  --trinity-component-padding-xl: 32px;
+  --trinity-component-gap-xs: 4px;
+  --trinity-component-gap-sm: 8px;
+  --trinity-component-gap-md: 16px;
+  --trinity-component-gap-lg: 24px;
+  --trinity-layout-page-padding: 24px;
+  --trinity-layout-section-gap: 48px;
+  --trinity-layout-container-max-width: 1280px;
+  --trinity-layout-header-height: 64px;
+  --trinity-layout-sidebar-width-expanded: 200px;
+  --trinity-layout-sidebar-width-collapsed: 56px;
+  --trinity-layout-ai-panel-width: 420px;
+  --trinity-layout-gutter: 24px;
+  --trinity-layout-content-padding: 64px;
-  /* ============================================
-     INTENT-BASED INLINE SPACING (Horizontal)
-     ============================================ */
+  /* Semantic inline / stack / density */
   --trinity-inline-tight: 4px;
   --trinity-inline-compact: 8px;
   --trinity-inline-snug: 12px;
   --trinity-inline-comfortable: 16px;
   --trinity-inline-relaxed: 20px;
   --trinity-inline-spacious: 24px;
-  /* ============================================
-     INTENT-BASED STACK SPACING (Vertical)
-     ============================================ */
   --trinity-stack-tight: 4px;
   --trinity-stack-compact: 8px;
   --trinity-stack-snug: 12px;
   --trinity-stack-comfortable: 16px;
   --trinity-stack-relaxed: 20px;
   --trinity-stack-spacious: 24px;
-  /* ============================================
-     DENSITY CONTEXTS
-     ============================================ */
-  /* Compact Density */
+  --trinity-stack-related: 4px;
+  --trinity-stack-grouped: 8px;
+  --trinity-stack-separated: 16px;
+  --trinity-stack-distinct: 32px;
   --trinity-density-compact-row-height: 36px;
   --trinity-density-compact-cell-padding: 6px;
   --trinity-density-compact-gap: 4px;
-  /* Standard Density */
   --trinity-density-standard-row-height: 48px;
   --trinity-density-standard-cell-padding: 12px;
   --trinity-density-standard-gap: 8px;
-  /* Comfortable Density */
   --trinity-density-comfortable-row-height: 64px;
   --trinity-density-comfortable-cell-padding: 16px;
   --trinity-density-comfortable-gap: 12px;
-  /* ============================================
-     LAYOUT SPACING
-     ============================================ */
-  --trinity-layout-page-padding: 24px;
-  --trinity-layout-section-gap: 48px;
-  --trinity-layout-container-max-width: 1280px;
-  --trinity-layout-header-height: 64px;
-  --trinity-layout-sidebar-width-expanded: 200px;
-  --trinity-layout-sidebar-width-collapsed: 56px;
-  --trinity-layout-ai-panel-width: 420px;
-  --trinity-layout-gutter: 24px;
-  --trinity-layout-content-padding: 64px;
-  /* ============================================
-     BORDER RADIUS (Base Scale)
-     ============================================ */
-  --trinity-radius-none: 0;
-  --trinity-radius-xs: 4px;
-  --trinity-radius-sm: 6px;
-  --trinity-radius-md: 8px;
-  --trinity-radius-lg: 12px;
-  --trinity-radius-xl: 16px;
-  --trinity-radius-2xl: 20px;
-  --trinity-radius-3xl: 24px;
-  --trinity-radius-full: 9999px;
-  /* ============================================
-     SEMANTIC BORDER RADIUS (Component-Specific)
-     ============================================ */
+  /* Semantic borders */
   --trinity-radius-button: 9999px;
   --trinity-radius-input: 6px;
   --trinity-radius-card: 12px;
-  --trinity-radius-modal: 16px;
+  --trinity-radius-modal: 12px;
+  --trinity-radius-modal-large: 16px;
   --trinity-radius-badge: 6px;
   --trinity-radius-avatar: 9999px;
   --trinity-radius-chip: 6px;
@@ -367,95 +553,128 @@
   --trinity-radius-menu: 12px;
   --trinity-radius-tooltip: 8px;
   --trinity-radius-icon-container: 4px;
-  --trinity-radius-skeleton: 4px;
-  --trinity-radius-table-cell: 0;
-  /* Intent-Based Radius */
+  --trinity-radius-none: 0px;
   --trinity-radius-subtle: 4px;
   --trinity-radius-soft: 6px;
   --trinity-radius-rounded: 8px;
   --trinity-radius-pill: 9999px;
   --trinity-radius-circle: 50%;
-  /* ============================================
-     BORDER WIDTH
-     ============================================ */
-  --trinity-border-width-0: 0;
-  --trinity-border-width-1: 1px;
-  --trinity-border-width-2: 2px;
-  --trinity-border-width-4: 4px;
-  --trinity-border-width-8: 8px;
-  /* Semantic Border Width */
+  --trinity-radius-skeleton: 4px;
+  --trinity-radius-table-cell: 0px;
+  --trinity-radius-px-none: 0px;
+  --trinity-radius-px-xs: 4px;
+  --trinity-radius-px-sm: 6px;
+  --trinity-radius-px-md: 8px;
+  --trinity-radius-px-lg: 12px;
+  --trinity-radius-px-xl: 16px;
+  --trinity-radius-px-2xl: 20px;
+  --trinity-radius-px-3xl: 24px;
+  --trinity-radius-px-full: 9999px;
   --trinity-border-width-default: 1px;
   --trinity-border-width-focus: 2px;
   --trinity-border-width-thick: 4px;
+  --trinity-radius-modal-lg: 16px;
-  /* ============================================
-     ICON SIZES
-     ============================================ */
-  --trinity-icon-inline: 14px;
-  --trinity-icon-control: 16px;
-  --trinity-icon-navigation: 20px;
-  --trinity-icon-prominent: 24px;
-  --trinity-icon-hero: 28px;
-  --trinity-icon-display: 36px;
-  /* Legacy Icon Scale */
-  --trinity-icon-xs: 12px;
-  --trinity-icon-sm: 16px;
-  --trinity-icon-md: 20px;
-  --trinity-icon-lg: 24px;
-  --trinity-icon-xl: 32px;
-  --trinity-icon-2xl: 40px;
-  /* ============================================
-     TYPOGRAPHY - FONT FAMILY
-     ============================================ */
-  --trinity-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --trinity-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  /* Font families */
+  --trinity-font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --trinity-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
-  /* ============================================
-     TYPOGRAPHY - FONT SIZES
-     ============================================ */
+  /* Base spacing */
+  --trinity-space-0: 0px;
+  --trinity-space-1: 4px;
+  --trinity-space-2: 8px;
+  --trinity-space-3: 12px;
+  --trinity-space-4: 16px;
+  --trinity-space-5: 20px;
+  --trinity-space-6: 24px;
+  --trinity-space-7: 28px;
+  --trinity-space-8: 32px;
+  --trinity-space-9: 36px;
+  --trinity-space-10: 40px;
+  --trinity-space-12: 48px;
+  --trinity-space-14: 56px;
+  --trinity-space-16: 64px;
+  --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;
+  /* Font sizes */
+  --trinity-font-size-xs: 0.75rem;
+  --trinity-font-size-sm: 0.875rem;
+  --trinity-font-size-base: 1rem;
+  --trinity-font-size-lg: 1.125rem;
+  --trinity-font-size-xl: 1.25rem;
+  --trinity-font-size-2xl: 1.5rem;
+  --trinity-font-size-3xl: 1.875rem;
+  --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;
-  /* Micro Typography (for dense UI) */
-  --trinity-text-micro-xs: 0.625rem;
-  --trinity-text-micro-sm: 0.6875rem;
-  /* ============================================
-     TYPOGRAPHY - FONT WEIGHTS
-     ============================================ */
+  /* Font weights */
+  --trinity-font-weight-light: 300;
+  --trinity-font-weight-regular: 400;
+  --trinity-font-weight-medium: 500;
+  --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;
-  /* ============================================
-     TYPOGRAPHY - LINE HEIGHTS
-     ============================================ */
-  --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;
-  /* ============================================
-     TYPOGRAPHY - LETTER SPACING
-     ============================================ */
+  --trinity-weight-md: 500;
+  --trinity-font-md: 500;
+  /* 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;
+  /* Letter spacing */
   --trinity-tracking-tighter: -0.05em;
   --trinity-tracking-tight: -0.025em;
   --trinity-tracking-normal: 0em;
@@ -463,167 +682,81 @@
   --trinity-tracking-wider: 0.05em;
   --trinity-tracking-widest: 0.1em;
-  /* ============================================
-     TYPOGRAPHY - DISPLAY STYLES
-     ============================================ */
-  --trinity-display-large-size: 3rem;
-  --trinity-display-large-weight: 700;
-  --trinity-display-large-line-height: 1.1;
-  --trinity-display-large-tracking: -0.02em;
+  /* Border radius scale */
+  --trinity-radius-xs: 4px;
+  --trinity-radius-sm: 6px;
+  --trinity-radius-md: 8px;
+  --trinity-radius-lg: 12px;
+  --trinity-radius-xl: 16px;
+  --trinity-radius-2xl: 20px;
+  --trinity-radius-3xl: 24px;
+  --trinity-radius-full: 9999px;
-  --trinity-display-medium-size: 2.25rem;
-  --trinity-display-medium-weight: 700;
-  --trinity-display-medium-line-height: 1.15;
-  --trinity-display-medium-tracking: -0.01em;
+  /* Border widths */
+  --trinity-border-width-0: 0px;
+  --trinity-border-width-1: 1px;
+  --trinity-border-width-2: 2px;
+  --trinity-border-width-4: 4px;
+  --trinity-border-width-8: 8px;
-  --trinity-display-small-size: 1.875rem;
-  --trinity-display-small-weight: 600;
-  --trinity-display-small-line-height: 1.2;
-  --trinity-display-small-tracking: 0;
+  /* Shadow scale */
+  --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);
-  /* ============================================
-     TYPOGRAPHY - HEADING STYLES
-     ============================================ */
-  --trinity-h1-size: 1.875rem;
-  --trinity-h1-weight: 700;
-  --trinity-h1-line-height: 1.25;
+  /* 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-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;
+  /* Duration */
+  --trinity-duration-fastest: 50ms;
+  --trinity-duration-faster: 100ms;
+  --trinity-duration-fast: 150ms;
+  --trinity-duration-normal: 200ms;
+  --trinity-duration-slow: 300ms;
+  --trinity-duration-slower: 400ms;
+  --trinity-duration-slowest: 500ms;
-  --trinity-h2-size: 1.5rem;
-  --trinity-h2-weight: 600;
-  --trinity-h2-line-height: 1.3;
+  /* Easing */
+  --trinity-easing-linear: linear;
+  --trinity-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --trinity-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --trinity-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --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-h3-size: 1.25rem;
-  --trinity-h3-weight: 600;
-  --trinity-h3-line-height: 1.35;
+  /* Semantic motion */
+  --trinity-motion-duration-instant: 50ms;
+  --trinity-motion-duration-fast: 150ms;
+  --trinity-motion-duration-normal: 200ms;
+  --trinity-motion-duration-slow: 300ms;
+  --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-h4-size: 1.125rem;
-  --trinity-h4-weight: 600;
-  --trinity-h4-line-height: 1.4;
-  --trinity-h5-size: 1rem;
-  --trinity-h5-weight: 600;
-  --trinity-h5-line-height: 1.45;
-  --trinity-h6-size: 0.875rem;
-  --trinity-h6-weight: 600;
-  --trinity-h6-line-height: 1.5;
-  /* ============================================
-     TYPOGRAPHY - BODY STYLES
-     ============================================ */
-  --trinity-body-large-size: 1.125rem;
-  --trinity-body-large-weight: 400;
-  --trinity-body-large-line-height: 1.6;
-  --trinity-body-medium-size: 1rem;
-  --trinity-body-medium-weight: 400;
-  --trinity-body-medium-line-height: 1.5;
-  --trinity-body-small-size: 0.875rem;
-  --trinity-body-small-weight: 400;
-  --trinity-body-small-line-height: 1.5;
-  /* ============================================
-     TYPOGRAPHY - LABEL STYLES
-     ============================================ */
-  --trinity-label-large-size: 1rem;
-  --trinity-label-large-weight: 500;
-  --trinity-label-large-line-height: 1.25;
-  --trinity-label-medium-size: 0.875rem;
-  --trinity-label-medium-weight: 500;
-  --trinity-label-medium-line-height: 1.25;
-  --trinity-label-small-size: 0.75rem;
-  --trinity-label-small-weight: 500;
-  --trinity-label-small-line-height: 1.25;
-  /* ============================================
-     TYPOGRAPHY - MICRO STYLES (Dense UI)
-     ============================================ */
-  --trinity-micro-xs-size: 0.625rem;
-  --trinity-micro-xs-weight: 500;
-  --trinity-micro-xs-line-height: 1.25;
-  --trinity-micro-xs-tracking: 0.025em;
-  --trinity-micro-sm-size: 0.6875rem;
-  --trinity-micro-sm-weight: 500;
-  --trinity-micro-sm-line-height: 1.25;
-  --trinity-micro-sm-tracking: 0;
-  /* Dense Typography */
-  --trinity-dense-badge: 0.625rem;
-  --trinity-dense-text: 0.75rem;
-  /* ============================================
-     ICON SIZES - SEMANTIC (Intent-Based)
-     ============================================ */
-  --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;
-  /* ============================================
-     TYPOGRAPHY - DATA STYLES
-     ============================================ */
-  --trinity-data-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  --trinity-data-numeric-feature: 'tnum' 1;
-  /* ============================================
-     TRANSITIONS - DURATION
-     ============================================ */
-  --trinity-duration-fastest: 50ms;
-  --trinity-duration-faster: 100ms;
-  --trinity-duration-fast: 150ms;
-  --trinity-duration-normal: 200ms;
-  --trinity-duration-slow: 300ms;
-  --trinity-duration-slower: 400ms;
-  --trinity-duration-slowest: 500ms;
-  /* Semantic Duration */
-  --trinity-motion-instant: 50ms;
-  --trinity-motion-fast: 150ms;
-  --trinity-motion-normal: 200ms;
-  --trinity-motion-slow: 300ms;
-  /* ============================================
-     TRANSITIONS - EASING
-     ============================================ */
-  --trinity-easing-linear: linear;
-  --trinity-easing-in: cubic-bezier(0.4, 0, 1, 1);
-  --trinity-easing-out: cubic-bezier(0, 0, 0.2, 1);
-  --trinity-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --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);
-  /* Semantic Easing */
-  --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);
-  /* ============================================
-     Z-INDEX SCALE
-     ============================================ */
-  --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-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;
-  /* ============================================
-     OPACITY SCALE
-     ============================================ */
+  /* Opacity */
   --trinity-opacity-0: 0;
   --trinity-opacity-5: 0.05;
   --trinity-opacity-10: 0.1;
@@ -640,222 +773,318 @@
   --trinity-opacity-95: 0.95;
   --trinity-opacity-100: 1;
-  /* ============================================
-     BREAKPOINTS
-     ============================================ */
-  --trinity-breakpoint-xs: 0px;
-  --trinity-breakpoint-sm: 600px;
-  --trinity-breakpoint-md: 900px;
-  --trinity-breakpoint-lg: 1200px;
-  --trinity-breakpoint-xl: 1536px;
-  /* ============================================
-     COMPONENT TOKENS - BUTTON
-     ============================================ */
-  /* Button Heights */
+  /* Component tokens */
+  --trinity-button-height-small: 32px;
+  --trinity-button-height-medium: 40px;
+  --trinity-button-height-large: 48px;
+  --trinity-button-padding-small-x: 16px;
+  --trinity-button-padding-small-y: 8px;
+  --trinity-button-padding-medium-x: 20px;
+  --trinity-button-padding-medium-y: 10px;
+  --trinity-button-padding-large-x: 24px;
+  --trinity-button-padding-large-y: 12px;
+  --trinity-button-font-size-small: 0.875rem;
+  --trinity-button-font-size-medium: 1rem;
+  --trinity-button-font-size-large: 1.125rem;
+  --trinity-button-border-radius: 9999px;
+  --trinity-button-primary-background: #050742;
+  --trinity-button-primary-background-hover: #FF6150;
+  --trinity-button-primary-text: #FFFFFF;
+  --trinity-button-secondary-background: #3816A0;
+  --trinity-button-secondary-background-hover: #FF6150;
+  --trinity-button-secondary-text: #FFFFFF;
+  --trinity-button-outlined-background: transparent;
+  --trinity-button-outlined-background-hover: #FF6150;
+  --trinity-button-outlined-border: #050742;
+  --trinity-button-outlined-text: #050742;
+  --trinity-button-outlined-text-hover: #FFFFFF;
+  --trinity-input-height-small: 36px;
+  --trinity-input-height-medium: 44px;
+  --trinity-input-height-large: 52px;
+  --trinity-input-padding-small-x: 12px;
+  --trinity-input-padding-small-y: 8px;
+  --trinity-input-padding-medium-x: 14px;
+  --trinity-input-padding-medium-y: 10px;
+  --trinity-input-padding-large-x: 16px;
+  --trinity-input-padding-large-y: 12px;
+  --trinity-input-font-size-small: 0.875rem;
+  --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-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-avatar-size-xs: 24px;
+  --trinity-avatar-size-sm: 32px;
+  --trinity-avatar-size-md: 40px;
+  --trinity-avatar-size-lg: 48px;
+  --trinity-avatar-size-xl: 64px;
+  --trinity-avatar-size-2xl: 96px;
+  --trinity-avatar-border-radius: 9999px;
+  --trinity-avatar-font-size-xs: 0.75rem;
+  --trinity-avatar-font-size-sm: 0.75rem;
+  --trinity-avatar-font-size-md: 0.875rem;
+  --trinity-avatar-font-size-lg: 1rem;
+  --trinity-avatar-font-size-xl: 1.25rem;
+  --trinity-avatar-font-size-2xl: 1.5rem;
+  --trinity-badge-padding-x: 8px;
+  --trinity-badge-padding-y: 2px;
+  --trinity-badge-border-radius: 9999px;
+  --trinity-badge-font-size: 0.75rem;
+  --trinity-badge-font-weight: 500;
+  --trinity-chip-height-small: 24px;
+  --trinity-chip-height-medium: 32px;
+  --trinity-chip-padding-small-x: 8px;
+  --trinity-chip-padding-small-y: 4px;
+  --trinity-chip-padding-medium-x: 12px;
+  --trinity-chip-padding-medium-y: 6px;
+  --trinity-chip-border-radius: 6px;
+  --trinity-chip-font-size-small: 0.75rem;
+  --trinity-chip-font-size-medium: 0.875rem;
+  --trinity-tooltip-padding-x: 12px;
+  --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-modal-padding: 24px;
+  --trinity-modal-border-radius: 16px;
+  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --trinity-modal-backdrop-opacity: 0.5;
+  --trinity-modal-width-small: 400px;
+  --trinity-modal-width-medium: 560px;
+  --trinity-modal-width-large: 720px;
+  --trinity-modal-width-full-width: 90vw;
+  --trinity-switch-width-small: 36px;
+  --trinity-switch-width-medium: 48px;
+  --trinity-switch-height-small: 20px;
+  --trinity-switch-height-medium: 28px;
+  --trinity-switch-thumb-small: 16px;
+  --trinity-switch-thumb-medium: 24px;
+  --trinity-switch-track-off: #E5E7EB;
+  --trinity-switch-track-on: #050742;
+  --trinity-navigation-header-height: 64px;
+  --trinity-navigation-header-background: #050742;
+  --trinity-navigation-header-text: #FFFFFF;
+  --trinity-navigation-sidebar-width: 240px;
+  --trinity-navigation-sidebar-collapsed-width: 64px;
+  --trinity-navigation-sidebar-background: #050742;
+  --trinity-navigation-item-height: 44px;
+  --trinity-navigation-item-padding-x: 16px;
+  --trinity-navigation-item-padding-y: 12px;
+  --trinity-navigation-item-border-radius: 8px;
+  --trinity-navigation-footer-height: 40px;
+  --trinity-navigation-footer-padding-x: 24px;
+  --trinity-navigation-footer-padding-y: 8px;
+  --trinity-navigation-footer-light-background: #F4F4F5;
+  --trinity-navigation-footer-light-text: #6B7280;
+  --trinity-navigation-footer-light-divider: #D4D4D8;
+  --trinity-navigation-footer-light-link-hover: #7841C9;
+  --trinity-navigation-footer-dark-background: #050742;
+  --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;
-  /* Button Padding */
   --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;
-  /* Button Font Sizes */
-  --trinity-button-font-sm: 0.875rem;
-  --trinity-button-font-md: 1rem;
-  --trinity-button-font-lg: 1.125rem;
-  /* Button Colors - Primary */
+  --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-primary-bg-active: #282964;
-  --trinity-button-primary-text: #FFFFFF;
-  /* Button Colors - Secondary */
   --trinity-button-secondary-bg: #3816A0;
-  --trinity-button-secondary-bg-hover: #4A24E5;
-  --trinity-button-secondary-bg-active: #542CE8;
-  --trinity-button-secondary-text: #FFFFFF;
-  /* Button Colors - Outlined */
+  --trinity-button-secondary-bg-hover: #FF6150;
   --trinity-button-outlined-bg: transparent;
   --trinity-button-outlined-bg-hover: #FF6150;
-  --trinity-button-outlined-bg-active: #282964;
-  --trinity-button-outlined-border: #050742;
-  --trinity-button-outlined-text: #050742;
-  --trinity-button-outlined-text-hover: #FFFFFF;
-  /* Button Colors - Disabled */
-  --trinity-button-disabled-bg: #E5E7EB;
-  --trinity-button-disabled-text: #9CA3AF;
-  /* ============================================
-     COMPONENT TOKENS - INPUT
-     ============================================ */
-  /* Input Heights */
   --trinity-input-height-sm: 36px;
   --trinity-input-height-md: 44px;
   --trinity-input-height-lg: 52px;
-  /* Input Padding */
   --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;
-  /* Input Font Sizes */
-  --trinity-input-font-sm: 0.875rem;
-  --trinity-input-font-md: 1rem;
-  --trinity-input-font-lg: 1.125rem;
-  /* Input Border Colors */
-  --trinity-input-border-default: #E5E7EB;
-  --trinity-input-border-hover: #9CA3AF;
-  --trinity-input-border-focus: #7841C9;
-  --trinity-input-border-error: #DC2626;
-  /* Input Background */
+  --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;
-  /* ============================================
-     COMPONENT TOKENS - CARD
-     ============================================ */
   --trinity-card-padding-sm: 16px;
   --trinity-card-padding-md: 24px;
   --trinity-card-padding-lg: 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-bg: #FFFFFF;
-  --trinity-card-border: #E5E7EB;
-  /* ============================================
-     COMPONENT TOKENS - AVATAR
-     ============================================ */
-  --trinity-avatar-size-xs: 24px;
-  --trinity-avatar-size-sm: 32px;
-  --trinity-avatar-size-md: 40px;
-  --trinity-avatar-size-lg: 48px;
-  --trinity-avatar-size-xl: 64px;
-  --trinity-avatar-size-2xl: 96px;
   --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;
-  /* ============================================
-     COMPONENT TOKENS - BADGE
-     ============================================ */
-  --trinity-badge-padding-x: 8px;
-  --trinity-badge-padding-y: 2px;
-  --trinity-badge-border-radius: 9999px;
-  --trinity-badge-font-size: 0.75rem;
-  --trinity-badge-font-weight: 500;
-  /* ============================================
-     COMPONENT TOKENS - CHIP
-     ============================================ */
+  --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-border-radius: 6px;
-  --trinity-chip-font-sm: 0.75rem;
-  --trinity-chip-font-md: 0.875rem;
-  /* ============================================
-     COMPONENT TOKENS - TOOLTIP
-     ============================================ */
-  --trinity-tooltip-padding-x: 12px;
-  --trinity-tooltip-padding-y: 8px;
-  --trinity-tooltip-border-radius: 6px;
-  --trinity-tooltip-font-size: 0.875rem;
+  --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-tooltip-text: #FFFFFF;
-  /* ============================================
-     COMPONENT TOKENS - MODAL
-     ============================================ */
-  --trinity-modal-padding: 24px;
-  --trinity-modal-border-radius: 16px;
-  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --trinity-modal-backdrop-opacity: 0.5;
   --trinity-modal-width-sm: 400px;
   --trinity-modal-width-md: 560px;
   --trinity-modal-width-lg: 720px;
-  --trinity-modal-width-full: 90vw;
-  /* ============================================
-     COMPONENT TOKENS - SWITCH
-     ============================================ */
-  --trinity-switch-width-sm: 40px;
-  --trinity-switch-width-md: 52px;
-  --trinity-switch-height-sm: 24px;
-  --trinity-switch-height-md: 32px;
-  --trinity-switch-thumb-sm: 12px;
-  --trinity-switch-thumb-md: 16px;
-  --trinity-switch-thumb-checked-sm: 18px;
-  --trinity-switch-thumb-checked-md: 24px;
-  --trinity-switch-track-off: #E5E7EB;
-  --trinity-switch-track-on: #050742;
-  --trinity-switch-track-border: #D4D4D8;
-  /* ============================================
-     COMPONENT TOKENS - NAVIGATION
-     ============================================ */
-  /* Header */
+  --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-nav-appbar-height: 56px;
-  --trinity-nav-header-bg: #050742;
+  --trinity-navigation-header-bg: #050742;
+  --trinity-nav-header-background: #050742;
   --trinity-nav-header-text: #FFFFFF;
-  /* Sidebar */
   --trinity-nav-sidebar-width: 240px;
-  --trinity-nav-sidebar-width-expanded: 200px;
-  --trinity-nav-sidebar-collapsed-width: 56px;
-  --trinity-nav-sidebar-bg: #050742;
-  --trinity-nav-sidebar-bg-light: #FFFFFF;
-  --trinity-nav-sidebar-border: #E5E7EB;
-  /* Nav Items */
+  --trinity-nav-sidebar-collapsed-width: 64px;
+  --trinity-navigation-sidebar-bg: #050742;
+  --trinity-nav-sidebar-background: #050742;
   --trinity-nav-item-height: 44px;
-  --trinity-nav-item-min-height: 40px;
   --trinity-nav-item-padding-x: 16px;
   --trinity-nav-item-padding-y: 12px;
-  --trinity-nav-item-padding-collapsed: 8px;
   --trinity-nav-item-border-radius: 8px;
-  --trinity-nav-item-gap: 12px;
-  /* Nav Item States */
-  --trinity-nav-item-bg-default: transparent;
-  --trinity-nav-item-bg-hover: rgba(0, 0, 0, 0.04);
-  --trinity-nav-item-bg-active: #050742;
-  --trinity-nav-item-bg-selected: #050742;
-  --trinity-nav-item-text-default: #18181B;
-  --trinity-nav-item-text-hover: #18181B;
-  --trinity-nav-item-text-active: #FFFFFF;
-  --trinity-nav-item-text-selected: #FFFFFF;
-  --trinity-nav-item-icon-default: #7841C9;
-  --trinity-nav-item-icon-selected: #FFFFFF;
-  /* Nav Special Item (Gradient) */
-  --trinity-nav-item-special-gradient: linear-gradient(135deg, #FF6150 0%, #7841C9 100%);
-  --trinity-nav-item-special-text: #FFFFFF;
-  --trinity-nav-item-special-icon: #FF6150;
-  /* Search Component (on dark header) */
+  --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;
+  /* Breakpoints */
+  --trinity-breakpoint-xs: 0px;
+  --trinity-breakpoint-sm: 600px;
+  --trinity-breakpoint-md: 900px;
+  --trinity-breakpoint-lg: 1200px;
+  --trinity-breakpoint-xl: 1536px;
+  /* Touch targets */
+  --trinity-touch-target-minimum: 44px;
+  --trinity-touch-target-spacious: 48px;
+  /* Shirt-size icon scale */
+  --trinity-icon-xs: 12px;
+  --trinity-icon-sm: 14px;
+  --trinity-icon-md: 16px;
+  --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;
+  /* 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;
+  --trinity-text-micro-xs: 0.625rem;
+  --trinity-text-micro-sm: 0.6875rem;
+  --trinity-focus-ring-glow: 0 0 0 3px rgba(120, 65, 201, 0.4);
+  --trinity-shadow-button: 0 1px 2px 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-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;
+  --trinity-nav-appbar-height: 56px;
+  --trinity-nav-divider-on-dark: rgba(255, 255, 255, 0.3);
+  --trinity-nav-divider-light: #E5E7EB;
+  --trinity-nav-client-bg: rgba(255, 255, 255, 0.12);
+  --trinity-nav-client-bg-hover: rgba(255, 255, 255, 0.15);
+  --trinity-nav-client-text: #FFFFFF;
+  --trinity-nav-client-radius: 12px;
+  --trinity-nav-client-padding-x: 12px;
+  --trinity-nav-client-padding-y: 6px;
+  --trinity-nav-client-min-width: 180px;
   --trinity-nav-search-bg: rgba(255, 255, 255, 0.12);
   --trinity-nav-search-bg-hover: rgba(255, 255, 255, 0.15);
   --trinity-nav-search-bg-focus: #FFFFFF;
@@ -868,488 +1097,98 @@
   --trinity-nav-search-radius: 12px;
   --trinity-nav-search-min-width: 300px;
   --trinity-nav-search-max-width: 400px;
-  /* Client Selector (on dark header) */
-  --trinity-nav-client-bg: rgba(255, 255, 255, 0.12);
-  --trinity-nav-client-bg-hover: rgba(255, 255, 255, 0.15);
-  --trinity-nav-client-text: #FFFFFF;
-  --trinity-nav-client-radius: 12px;
-  --trinity-nav-client-min-width: 180px;
-  --trinity-nav-client-padding-x: 12px;
-  --trinity-nav-client-padding-y: 6px;
-  /* Dividers on dark backgrounds */
-  --trinity-nav-divider-on-dark: rgba(255, 255, 255, 0.3);
-  --trinity-nav-divider-light: #E5E7EB;
-  /* Header Icons */
+  --trinity-nav-item-bg-default: transparent;
+  --trinity-nav-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --trinity-nav-item-bg-selected: #050742;
+  --trinity-nav-item-bg-active: #050742;
+  --trinity-nav-item-text-default: #18181B;
+  --trinity-nav-item-text-hover: #18181B;
+  --trinity-nav-item-text-selected: #FFFFFF;
+  --trinity-nav-item-text-active: #FFFFFF;
+  --trinity-nav-item-icon-default: #7841C9;
+  --trinity-nav-item-icon-selected: #FFFFFF;
+  --trinity-nav-item-min-height: 40px;
+  --trinity-nav-item-gap: 12px;
+  --trinity-nav-item-padding-collapsed: 8px;
+  --trinity-nav-item-special-gradient: linear-gradient(135deg, #FF6150 0%, #7841C9 100%);
+  --trinity-nav-item-special-text: #FFFFFF;
+  --trinity-nav-item-special-icon: #FF6150;
+  --trinity-nav-footer-bg: #F3F4F6;
+  --trinity-nav-footer-text: #6B7280;
+  --trinity-nav-footer-link-hover: #050742;
+  --trinity-nav-footer-divider: #E5E7EB;
   --trinity-nav-icon-color: rgba(255, 255, 255, 0.7);
   --trinity-nav-icon-hover: #FFFFFF;
   --trinity-nav-icon-hover-bg: rgba(255, 255, 255, 0.12);
-  /* Menu Dropdown */
   --trinity-nav-menu-radius: 12px;
-  --trinity-nav-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   --trinity-nav-menu-min-width: 240px;
+  --trinity-nav-menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   --trinity-nav-menu-item-padding-y: 12px;
-  /* Footer */
-  --trinity-nav-footer-height: 40px;
-  --trinity-nav-footer-padding-x: 24px;
-  --trinity-nav-footer-padding-y: 8px;
-  --trinity-nav-footer-bg: #F3F4F6;
-  --trinity-nav-footer-text: #6B7280;
-  --trinity-nav-footer-divider: #E5E7EB;
-  --trinity-nav-footer-link-hover: #050742;
-  /* Footer dark variant (navy bg) */
-  --trinity-nav-footer-dark-bg: #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);
-  /* ============================================
-     SEMANTIC SHADOWS (Component-Specific)
-     ============================================ */
-  --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);
-  /* ============================================
-     GRADIENTS
-     ============================================ */
-  --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%);
-  /* ============================================
-     TOUCH TARGETS (Accessibility)
-     ============================================ */
-  --trinity-touch-target-minimum: 44px;
-  --trinity-touch-target-comfortable: 48px;
-  --trinity-touch-target-spacious: 56px;
+  --trinity-nav-sidebar-bg-light: #FFFFFF;
+  --trinity-nav-sidebar-border: #E5E7EB;
+  --trinity-nav-sidebar-width-expanded: 200px;
 }
-/* ============================================
-   DARK MODE
-   ============================================ */
-[data-theme="dark"],
-.dark-mode,
-:root.dark {
-  /* Text Colors */
+/* Dark mode overrides — explicit opt-in via [data-theme="dark"] */
+[data-theme="dark"] {
   --trinity-text-primary: #F9FAFB;
   --trinity-text-secondary: #D1D5DB;
   --trinity-text-tertiary: #9CA3AF;
   --trinity-text-disabled: #6B7280;
-  --trinity-text-inverse: #18181B;
-  /* Background Colors */
   --trinity-bg-primary: #121214;
   --trinity-bg-secondary: #1C1C1F;
   --trinity-bg-tertiary: #262629;
-  --trinity-bg-inverse: #FAFAFA;
-  /* Surface Colors */
-  --trinity-surface-elevated: #1C1C1F;
-  --trinity-surface-sunken: #0A0A0B;
-  --trinity-surface-success: #0A1A10;
-  --trinity-surface-error: #1F1315;
-  --trinity-surface-warning: #1A1607;
-  --trinity-surface-info: #0C1929;
-  /* Border Colors */
   --trinity-border-default: #3F3F46;
   --trinity-border-subtle: #27272A;
   --trinity-border-strong: #52525B;
-  /* Interactive Colors */
   --trinity-interactive-default: #A96ADA;
   --trinity-interactive-hover: #FF8D85;
   --trinity-interactive-active: #7E57F0;
   --trinity-interactive-disabled: #374151;
   --trinity-interactive-focus: #A96ADA;
-  /* Status Colors */
   --trinity-status-error-text: #FCA5A5;
-  --trinity-status-error-bg: #1F1315;
+  --trinity-status-error-background: #1F1315;
   --trinity-status-error-border: #991B1B;
   --trinity-status-warning-text: #FDE68A;
-  --trinity-status-warning-bg: #1A1607;
+  --trinity-status-warning-background: #1A1607;
   --trinity-status-warning-border: #92400E;
   --trinity-status-success-text: #86EFAC;
-  --trinity-status-success-bg: #0A1A10;
+  --trinity-status-success-background: #0A1A10;
   --trinity-status-success-border: #166534;
   --trinity-status-info-text: #7DD3FC;
-  --trinity-status-info-bg: #0C1929;
+  --trinity-status-info-background: #0C1929;
   --trinity-status-info-border: #075985;
-  /* Overlay Effects */
-  --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.08);
-  /* Shadows (enhanced for dark mode) */
-  --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);
-  /* Component-Specific Overrides */
-  --trinity-card-bg: #1C1C1F;
-  --trinity-card-border: #3F3F46;
-  --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-input-bg-default: #1C1C1F;
-  --trinity-input-bg-disabled: #262629;
-  --trinity-input-border-default: #3F3F46;
-  --trinity-input-border-hover: #52525B;
-  --trinity-tooltip-bg: #FAFAFA;
-  --trinity-tooltip-text: #18181B;
-  --trinity-switch-track-off: #374151;
-  --trinity-switch-track-on: #FF8D85;
-  --trinity-switch-track-border: #6B7280;
-  --trinity-modal-bg: #1C1C1F;
-  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.07);
-  /* Button Dark Mode Overrides */
-  --trinity-button-primary-bg: #FF7167;
-  --trinity-button-primary-bg-hover: #FF796F;
-  --trinity-button-primary-bg-active: #FF665C;
-  --trinity-button-primary-text: #FFFFFF;
-  --trinity-button-secondary-bg: #9950D3;
-  --trinity-button-secondary-bg-hover: #A96ADA;
-  --trinity-button-secondary-bg-active: #8D49CE;
-  --trinity-button-secondary-text: #FFFFFF;
-  --trinity-button-outlined-bg: transparent;
-  --trinity-button-outlined-bg-hover: #FF7167;
-  --trinity-button-outlined-bg-active: #FF665C;
-  --trinity-button-outlined-border: #FF8D85;
-  --trinity-button-outlined-text: #FF8D85;
-  --trinity-button-outlined-text-hover: #FFFFFF;
-  --trinity-button-disabled-bg: #374151;
-  --trinity-button-disabled-text: #6B7280;
-  /* Navigation Dark Mode Overrides */
-  --trinity-nav-sidebar-bg-light: #1C1C1F;
-  --trinity-nav-sidebar-border: #3F3F46;
-  --trinity-nav-item-bg-hover: rgba(255, 255, 255, 0.08);
-  --trinity-nav-item-bg-active: #A96ADA;
-  --trinity-nav-item-bg-selected: #A96ADA;
-  --trinity-nav-item-text-default: #F9FAFB;
-  --trinity-nav-item-text-hover: #F9FAFB;
-  --trinity-nav-item-icon-default: #A96ADA;
-  --trinity-nav-divider-light: #3F3F46;
-  /* Footer Dark Mode Overrides */
-  --trinity-nav-footer-bg: #262629;
-  --trinity-nav-footer-text: #D1D5DB;
-  --trinity-nav-footer-divider: #3F3F46;
-  --trinity-nav-footer-link-hover: #F9FAFB;
-  --trinity-nav-footer-dark-bg: #121214;
-  --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);
 }
-/* System preference detection */
+/* Dark mode — follows OS preference unless explicit [data-theme="light"] is set */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --trinity-text-primary: #F9FAFB;
-    --trinity-text-secondary: #D1D5DB;
-    --trinity-text-tertiary: #9CA3AF;
-    --trinity-bg-primary: #121214;
-    --trinity-bg-secondary: #1C1C1F;
-    --trinity-bg-tertiary: #262629;
-    --trinity-surface-elevated: #1C1C1F;
-    --trinity-border-default: #3F3F46;
-    --trinity-border-subtle: #27272A;
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+  --trinity-text-primary: #F9FAFB;
+  --trinity-text-secondary: #D1D5DB;
+  --trinity-text-tertiary: #9CA3AF;
+  --trinity-text-disabled: #6B7280;
+  --trinity-bg-primary: #121214;
+  --trinity-bg-secondary: #1C1C1F;
+  --trinity-bg-tertiary: #262629;
+  --trinity-border-default: #3F3F46;
+  --trinity-border-subtle: #27272A;
+  --trinity-border-strong: #52525B;
+  --trinity-interactive-default: #A96ADA;
+  --trinity-interactive-hover: #FF8D85;
+  --trinity-interactive-active: #7E57F0;
+  --trinity-interactive-disabled: #374151;
+  --trinity-interactive-focus: #A96ADA;
+  --trinity-status-error-text: #FCA5A5;
+  --trinity-status-error-background: #1F1315;
+  --trinity-status-error-border: #991B1B;
+  --trinity-status-warning-text: #FDE68A;
+  --trinity-status-warning-background: #1A1607;
+  --trinity-status-warning-border: #92400E;
+  --trinity-status-success-text: #86EFAC;
+  --trinity-status-success-background: #0A1A10;
+  --trinity-status-success-border: #166534;
+  --trinity-status-info-text: #7DD3FC;
+  --trinity-status-info-background: #0C1929;
+  --trinity-status-info-border: #075985;
   }
 }
-/* ============================================
-   UTILITY CLASSES
-   ============================================ */
-/* Text Colors */
-.trinity-text-primary { color: var(--trinity-text-primary); }
-.trinity-text-secondary { color: var(--trinity-text-secondary); }
-.trinity-text-tertiary { color: var(--trinity-text-tertiary); }
-.trinity-text-brand { color: var(--trinity-brand-primary); }
-.trinity-text-link { color: var(--trinity-text-link); }
-.trinity-text-success { color: var(--trinity-status-success-text); }
-.trinity-text-error { color: var(--trinity-status-error-text); }
-.trinity-text-warning { color: var(--trinity-status-warning-text); }
-/* Background Colors */
-.trinity-bg-primary { background-color: var(--trinity-bg-primary); }
-.trinity-bg-secondary { background-color: var(--trinity-bg-secondary); }
-.trinity-bg-tertiary { background-color: var(--trinity-bg-tertiary); }
-.trinity-bg-brand { background-color: var(--trinity-brand-primary); }
-.trinity-bg-surface { background-color: var(--trinity-surface-elevated); }
-.trinity-bg-accent { background-color: var(--trinity-brand-accent); }
-/* Borders */
-.trinity-border { border: 1px solid var(--trinity-border-default); }
-.trinity-border-subtle { border: 1px solid var(--trinity-border-subtle); }
-.trinity-border-strong { border: 1px solid var(--trinity-border-strong); }
-/* Border Radius */
-.trinity-rounded-none { border-radius: var(--trinity-radius-none); }
-.trinity-rounded-sm { border-radius: var(--trinity-radius-sm); }
-.trinity-rounded { border-radius: var(--trinity-radius-md); }
-.trinity-rounded-lg { border-radius: var(--trinity-radius-lg); }
-.trinity-rounded-xl { border-radius: var(--trinity-radius-xl); }
-.trinity-rounded-full { border-radius: var(--trinity-radius-full); }
-/* Shadows */
-.trinity-shadow-none { box-shadow: var(--trinity-shadow-none); }
-.trinity-shadow-sm { box-shadow: var(--trinity-shadow-sm); }
-.trinity-shadow { box-shadow: var(--trinity-shadow-md); }
-.trinity-shadow-lg { box-shadow: var(--trinity-shadow-lg); }
-.trinity-shadow-xl { box-shadow: var(--trinity-shadow-xl); }
-/* Typography */
-.trinity-font-sans { font-family: var(--trinity-font-family); }
-.trinity-font-mono { font-family: var(--trinity-font-family-mono); }
-.trinity-text-xs { font-size: var(--trinity-text-xs); }
-.trinity-text-sm { font-size: var(--trinity-text-sm); }
-.trinity-text-base { font-size: var(--trinity-text-base); }
-.trinity-text-lg { font-size: var(--trinity-text-lg); }
-.trinity-text-xl { font-size: var(--trinity-text-xl); }
-.trinity-text-2xl { font-size: var(--trinity-text-2xl); }
-.trinity-text-3xl { font-size: var(--trinity-text-3xl); }
-.trinity-font-light { font-weight: var(--trinity-font-light); }
-.trinity-font-regular { font-weight: var(--trinity-font-regular); }
-.trinity-font-medium { font-weight: var(--trinity-font-medium); }
-.trinity-font-semibold { font-weight: var(--trinity-font-semibold); }
-.trinity-font-bold { font-weight: var(--trinity-font-bold); }
-/* Transitions */
-.trinity-transition-fast { transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out); }
-.trinity-transition { transition: all var(--trinity-duration-normal) var(--trinity-easing-in-out); }
-.trinity-transition-slow { transition: all var(--trinity-duration-slow) var(--trinity-easing-in-out); }
-/* Opacity */
-.trinity-opacity-50 { opacity: var(--trinity-opacity-50); }
-.trinity-opacity-75 { opacity: var(--trinity-opacity-75); }
-.trinity-opacity-disabled { opacity: var(--trinity-opacity-50); cursor: not-allowed; }
-/* Focus Ring */
-.trinity-focus-ring:focus-visible {
-  outline: 2px solid var(--trinity-focus-ring);
-  outline-offset: 2px;
-}
-/* Data Typography */
-.trinity-tabular-nums {
-  font-family: var(--trinity-data-font-family);
-  font-feature-settings: var(--trinity-data-numeric-feature);
-}
-/* ============================================
-   NAVIGATION UTILITY CLASSES
-   ============================================ */
-/* Top Nav Header */
-.trinity-nav-header {
-  height: var(--trinity-nav-header-height);
-  background-color: var(--trinity-nav-header-bg);
-  color: var(--trinity-nav-header-text);
-}
-.trinity-nav-appbar {
-  height: var(--trinity-nav-appbar-height);
-  background-color: var(--trinity-nav-header-bg);
-  color: var(--trinity-nav-header-text);
-}
-/* Sidebar */
-.trinity-nav-sidebar {
-  width: var(--trinity-nav-sidebar-width);
-  background-color: var(--trinity-nav-sidebar-bg-light);
-  border-right: 1px solid var(--trinity-nav-sidebar-border);
-  transition: width var(--trinity-duration-normal) var(--trinity-easing-in-out);
-}
-.trinity-nav-sidebar--collapsed {
-  width: var(--trinity-nav-sidebar-collapsed-width);
-}
-.trinity-nav-sidebar--dark {
-  background-color: var(--trinity-nav-sidebar-bg);
-  border-right-color: var(--trinity-nav-divider-on-dark);
-}
-/* Nav Items */
-.trinity-nav-item {
-  display: flex;
-  align-items: center;
-  height: var(--trinity-nav-item-height);
-  padding: var(--trinity-nav-item-padding-y) var(--trinity-nav-item-padding-x);
-  border-radius: var(--trinity-nav-item-border-radius);
-  background-color: var(--trinity-nav-item-bg-default);
-  color: var(--trinity-nav-item-text-default);
-  transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out);
-  cursor: pointer;
-  gap: var(--trinity-nav-item-gap);
-  text-decoration: none;
-}
-.trinity-nav-item:hover {
-  background-color: var(--trinity-nav-item-bg-hover);
-  color: var(--trinity-nav-item-text-hover);
-}
-.trinity-nav-item--active,
-.trinity-nav-item--selected {
-  background-color: var(--trinity-nav-item-bg-selected);
-  color: var(--trinity-nav-item-text-selected);
-}
-.trinity-nav-item--active:hover,
-.trinity-nav-item--selected:hover {
-  background-color: var(--trinity-nav-item-bg-selected);
-}
-.trinity-nav-item--special {
-  background: var(--trinity-nav-item-special-gradient);
-  color: var(--trinity-nav-item-special-text);
-}
-.trinity-nav-item__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--trinity-icon-navigation);
-  height: var(--trinity-icon-navigation);
-  color: var(--trinity-nav-item-icon-default);
-}
-.trinity-nav-item--active .trinity-nav-item__icon,
-.trinity-nav-item--selected .trinity-nav-item__icon {
-  color: var(--trinity-nav-item-icon-selected);
-}
-/* Search on dark header */
-.trinity-nav-search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  min-width: var(--trinity-nav-search-min-width);
-  max-width: var(--trinity-nav-search-max-width);
-  background-color: var(--trinity-nav-search-bg);
-  border-radius: var(--trinity-nav-search-radius);
-  transition: background-color var(--trinity-duration-fast) var(--trinity-easing-in-out);
-}
-.trinity-nav-search:hover {
-  background-color: var(--trinity-nav-search-bg-hover);
-}
-.trinity-nav-search--focused {
-  background-color: var(--trinity-nav-search-bg-focus);
-}
-.trinity-nav-search__input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 8px 16px 8px 40px;
-  color: var(--trinity-nav-search-text);
-  font-size: var(--trinity-body-small-size);
-}
-.trinity-nav-search__input::placeholder {
-  color: var(--trinity-nav-search-placeholder);
-}
-.trinity-nav-search--focused .trinity-nav-search__input {
-  color: var(--trinity-nav-search-text-focus);
-}
-.trinity-nav-search--focused .trinity-nav-search__input::placeholder {
-  color: var(--trinity-nav-search-placeholder-focus);
-}
-.trinity-nav-search__icon {
-  position: absolute;
-  left: 12px;
-  color: var(--trinity-nav-search-icon);
-}
-.trinity-nav-search--focused .trinity-nav-search__icon {
-  color: var(--trinity-nav-search-icon-focus);
-}
-/* Client Selector */
-.trinity-nav-client {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: var(--trinity-nav-client-min-width);
-  padding: var(--trinity-nav-client-padding-y) var(--trinity-nav-client-padding-x);
-  background-color: var(--trinity-nav-client-bg);
-  color: var(--trinity-nav-client-text);
-  border: none;
-  border-radius: var(--trinity-nav-client-radius);
-  cursor: pointer;
-  font-size: var(--trinity-body-small-size);
-  transition: background-color var(--trinity-duration-fast) var(--trinity-easing-in-out);
-}
-.trinity-nav-client:hover {
-  background-color: var(--trinity-nav-client-bg-hover);
-}
-/* Header Icon Buttons */
-.trinity-nav-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: var(--trinity-radius-full);
-  background-color: transparent;
-  color: var(--trinity-nav-icon-color);
-  border: none;
-  cursor: pointer;
-  transition: all var(--trinity-duration-fast) var(--trinity-easing-in-out);
-}
-.trinity-nav-icon-btn:hover {
-  background-color: var(--trinity-nav-icon-hover-bg);
-  color: var(--trinity-nav-icon-hover);
-}
-/* Menu Dropdown */
-.trinity-nav-menu {
-  min-width: var(--trinity-nav-menu-min-width);
-  border-radius: var(--trinity-nav-menu-radius);
-  box-shadow: var(--trinity-nav-menu-shadow);
-  background-color: var(--trinity-surface-elevated);
-}
-.trinity-nav-menu__item {
-  padding: var(--trinity-nav-menu-item-padding-y) var(--trinity-nav-item-padding-x);
-}