@mich8060/chg-design-system 0.1.0

package/public/styles/tokens.css

@@ -0,0 +1,1994 @@
+/* ===========================================================================
+   Core Tokens
+=========================================================================== */
+
+ 
+ /* ---- Foundational Tokens ---- */
+:root {
+     /* System Core */
+     --system-black: #111828;
+     --system-white: #FFFFFF;
+     --system-transparent: rgba(255, 255, 255, 0);
+   
+     /* Neutrals (50–900) */
+     --system-neutrals-50:  #F9FAFC;
+     --system-neutrals-100: #F3F4F6;
+     --system-neutrals-200: #E6E7EB;
+     --system-neutrals-300: #D2D5DC;
+     --system-neutrals-400: #9CA2AE;
+     --system-neutrals-500: #6B7380;
+     --system-neutrals-600: #4C5564;
+     --system-neutrals-700: #384152;
+     --system-neutrals-800: #202938;
+     --system-neutrals-900: #111828;
+     /* Primary */
+     --primary-25:  var(--brand-primary-25);
+     --primary-50:  var(--brand-primary-50);
+     --primary-100: var(--brand-primary-100);
+     --primary-200: var(--brand-primary-200);
+     --primary-300: var(--brand-primary-300);
+     --primary-400: var(--brand-primary-400);
+     --primary-500: var(--brand-primary-500);
+     --primary-600: var(--brand-primary-600);
+     --primary-700: var(--brand-primary-700);
+     --primary-800: var(--brand-primary-800);
+     --primary-900: var(--brand-primary-900);
+   
+     /* Secondary */
+     --secondary-25:  var(--brand-secondary-25);
+     --secondary-50:  var(--brand-secondary-50);
+     --secondary-100: var(--brand-secondary-100);
+     --secondary-200: var(--brand-secondary-200);
+     --secondary-300: var(--brand-secondary-300);
+     --secondary-400: var(--brand-secondary-400);
+     --secondary-500: var(--brand-secondary-500);
+     --secondary-600: var(--brand-secondary-600);
+     --secondary-700: var(--brand-secondary-700);
+     --secondary-800: var(--brand-secondary-800);
+     --secondary-900: var(--brand-secondary-900);
+   
+     /* Tertiary */
+     --tertiary-25:  var(--brand-tertiary-25);
+     --tertiary-50:  var(--brand-tertiary-50);
+     --tertiary-100: var(--brand-tertiary-100);
+     --tertiary-200: var(--brand-tertiary-200);
+     --tertiary-300: var(--brand-tertiary-300);
+     --tertiary-400: var(--brand-tertiary-400);
+     --tertiary-500: var(--brand-tertiary-500);
+     --tertiary-600: var(--brand-tertiary-600);
+     --tertiary-700: var(--brand-tertiary-700);
+     --tertiary-800: var(--brand-tertiary-800);
+     --tertiary-900: var(--brand-tertiary-900);
+   
+     /* Quaternary */
+     --quaternary-25:  var(--brand-quaternary-25);
+     --quaternary-50:  var(--brand-quaternary-50);
+     --quaternary-100: var(--brand-quaternary-100);
+     --quaternary-200: var(--brand-quaternary-200);
+     --quaternary-300: var(--brand-quaternary-300);
+     --quaternary-400: var(--brand-quaternary-400);
+     --quaternary-500: var(--brand-quaternary-500);
+     --quaternary-600: var(--brand-quaternary-600);
+     --quaternary-700: var(--brand-quaternary-700);
+     --quaternary-800: var(--brand-quaternary-800);
+     --quaternary-900: var(--brand-quaternary-900);
+   
+     /* Accent Amber */
+     --system-accent-amber-25:   #FFFBEB;
+     --system-accent-amber-50:   #FEF3C7;
+     --system-accent-amber-100:  #FDE68A;
+     --system-accent-amber-200:  #FCD34D;
+     --system-accent-amber-300:  #FBC02D;
+     --system-accent-amber-400:  #FBBF24;
+     --system-accent-amber-500:  #F59E0B;
+     --system-accent-amber-600:  #D97706;
+     --system-accent-amber-700:  #B45309;
+     --system-accent-amber-800:  #92400E;
+     --system-accent-amber-900:  #78350F;
+     --system-accent-amber-1000: #5F2A09;
+   
+     /* Accent Aqua */
+     --system-accent-aqua-25:   #F0FDFA;
+     --system-accent-aqua-50:   #CCFBF1;
+     --system-accent-aqua-100:  #99F6E4;
+     --system-accent-aqua-200:  #5EEAD4;
+     --system-accent-aqua-300:  #2DD4BF;
+     --system-accent-aqua-400:  #14B8A6;
+     --system-accent-aqua-500:  #0D9488;
+     --system-accent-aqua-600:  #0F766E;
+     --system-accent-aqua-700:  #115E59;
+     --system-accent-aqua-800:  #134E4A;
+     --system-accent-aqua-900:  #0F3A37;
+     --system-accent-aqua-1000: #0A2E2C;
+   
+     /* Accent Blue */
+     --system-accent-blue-25:   #F2F7FF;
+     --system-accent-blue-50:   #EFF6FF;
+     --system-accent-blue-100:  #DBEAFF;
+     --system-accent-blue-200:  #BFDCFE;
+     --system-accent-blue-300:  #93C4FC;
+     --system-accent-blue-400:  #61A5FA;
+     --system-accent-blue-500:  #3B82F6;
+     --system-accent-blue-600:  #2563EC;
+     --system-accent-blue-700:  #1D4ED7;
+     --system-accent-blue-800:  #1F41AF;
+     --system-accent-blue-900:  #1F3A8B;
+     --system-accent-blue-1000: #182E6F;
+   
+     /* Accent Cyan */
+     --system-accent-cyan-50:   #ECFEFF;
+     --system-accent-cyan-100:  #CFFBFE;
+     --system-accent-cyan-200:  #A5F3FD;
+     --system-accent-cyan-300:  #66E8F8;
+     --system-accent-cyan-400:  #21D3ED;
+     --system-accent-cyan-600:  #0891B3;
+     --system-accent-cyan-700:  #0F7490;
+     --system-accent-cyan-800:  #165E76;
+     --system-accent-cyan-900:  #164F63;
+     --system-accent-cyan-1000: #113F4F;
+   
+     /* Accent Emerald */
+     --system-accent-emerald-25:   #EFFDF7;
+     --system-accent-emerald-50:   #ECFDF5;
+     --system-accent-emerald-100:  #D0FAE4;
+     --system-accent-emerald-200:  #A7F3CF;
+     --system-accent-emerald-300:  #6DE7B6;
+     --system-accent-emerald-400:  #34D399;
+     --system-accent-emerald-500:  #10B982;
+     --system-accent-emerald-600:  #05976A;
+     --system-accent-emerald-700:  #057857;
+     --system-accent-emerald-800:  #075F47;
+     --system-accent-emerald-900:  #064D3B;
+     --system-accent-emerald-1000: #043D2F;
+   
+     /* Accent Fuchsia */
+     --system-accent-fuchsia-25:   #FEF6FF;
+     --system-accent-fuchsia-50:   #FEF4FF;
+     --system-accent-fuchsia-100:  #FAE8FE;
+     --system-accent-fuchsia-200:  #F5CFFE;
+     --system-accent-fuchsia-300:  #F0ABFC;
+     --system-accent-fuchsia-400:  #E879F9;
+     --system-accent-fuchsia-500:  #D946EF;
+     --system-accent-fuchsia-600:  #C026D4;
+     --system-accent-fuchsia-700:  #A21CAF;
+     --system-accent-fuchsia-800:  #861990;
+     --system-accent-fuchsia-900:  #701A75;
+     --system-accent-fuchsia-1000: #59145D;
+   
+     /* Accent Green */
+     --system-accent-green-25:   #F3FDF6;
+     --system-accent-green-50:   #F0FDF4;
+     --system-accent-green-100:  #DCFCE7;
+     --system-accent-green-200:  #BBF7D1;
+     --system-accent-green-300:  #86EFAC;
+     --system-accent-green-400:  #4ADE80;
+     --system-accent-green-500:  #23C55E;
+     --system-accent-green-600:  #17A34A;
+     --system-accent-green-700:  #157F3D;
+     --system-accent-green-800:  #176535;
+     --system-accent-green-900:  #15532E;
+     --system-accent-green-1000: #104224;
+   
+     /* Accent Indigo */
+     --system-accent-indigo-25:   #F1F4FE;
+     --system-accent-indigo-50:   #EEF2FE;
+     --system-accent-indigo-100:  #E1E7FF;
+     --system-accent-indigo-200:  #C7D2FF;
+     --system-accent-indigo-300:  #A6B4FD;
+     --system-accent-indigo-400:  #818CF8;
+     --system-accent-indigo-500:  #6366F1;
+     --system-accent-indigo-600:  #5046E5;
+     --system-accent-indigo-700:  #4438CA;
+     --system-accent-indigo-800:  #3730A2;
+     --system-accent-indigo-900:  #312D81;
+     --system-accent-indigo-1000: #272467;
+   
+     /* Accent Lime */
+     --system-accent-lime-25:   #F7FEEB;
+     --system-accent-lime-50:   #F6FEE7;
+     --system-accent-lime-100:  #ECFCCB;
+     --system-accent-lime-200:  #DAF99C;
+     --system-accent-lime-300:  #BEF164;
+     --system-accent-lime-400:  #A3E636;
+     --system-accent-lime-500:  #83CC16;
+     --system-accent-lime-600:  #64A30E;
+     --system-accent-lime-700:  #5A8720;
+     --system-accent-lime-800:  #3F6212;
+     --system-accent-lime-900:  #365313;
+     --system-accent-lime-1000: #2B420F;
+   
+     /* Accent Magenta */
+     --system-accent-magenta-25:   #FFF5FB;
+     --system-accent-magenta-50:   #FDF2F8;
+     --system-accent-magenta-100:  #FCE7F3;
+     --system-accent-magenta-200:  #FBCFE8;
+     --system-accent-magenta-300:  #F9A8D4;
+     --system-accent-magenta-400:  #F472B6;
+     --system-accent-magenta-500:  #EC4899;
+     --system-accent-magenta-600:  #DB2777;
+     --system-accent-magenta-700:  #BE185D;
+     --system-accent-magenta-800:  #9D174D;
+     --system-accent-magenta-900:  #831843;
+     --system-accent-magenta-1000: #6B1235;
+   
+     /* Accent Orange */
+     --system-accent-orange-25:   #FFFBF7;
+     --system-accent-orange-50:   #FFFAF5;
+     --system-accent-orange-100:  #FFF6ED;
+     --system-accent-orange-200:  #FFEAD5;
+     --system-accent-orange-300:  #FDDCAB;
+     --system-accent-orange-400:  #FEB273;
+     --system-accent-orange-500:  #FD853A;
+     --system-accent-orange-600:  #FB6514;
+     --system-accent-orange-700:  #EC4A0A;
+     --system-accent-orange-800:  #9C2A10;
+     --system-accent-orange-900:  #7E2410;
+     --system-accent-orange-1000: #641C0C;
+   
+     /* Accent Purple */
+     --system-accent-purple-25:   #FBF7FF;
+     --system-accent-purple-50:   #FBF5FF;
+     --system-accent-purple-100:  #F4E8FE;
+     --system-accent-purple-200:  #EAD5FE;
+     --system-accent-purple-300:  #D8B4FE;
+     --system-accent-purple-400:  #C085FD;
+     --system-accent-purple-500:  #A755F7;
+     --system-accent-purple-600:  #9334EA;
+     --system-accent-purple-700:  #7E22CF;
+     --system-accent-purple-800:  #6B22A8;
+     --system-accent-purple-900:  #571C86;
+     --system-accent-purple-1000: #45166B;
+   
+     /* Accent Red */
+     --system-accent-red-25:   #FEF4F4;
+     --system-accent-red-50:   #FEF2F2;
+     --system-accent-red-100:  #FEE2E1;
+     --system-accent-red-200:  #FECBCA;
+     --system-accent-red-300:  #FDA5A4;
+     --system-accent-red-400:  #F87070;
+     --system-accent-red-500:  #F04444;
+     --system-accent-red-600:  #DC2625;
+     --system-accent-red-700:  #BA1C1D;
+     --system-accent-red-800:  #991B1C;
+     --system-accent-red-900:  #7F1D1E;
+     --system-accent-red-1000: #651718;
+   
+     /* Accent Rose */
+     --system-accent-rose-25:   #FFF3F3;
+     --system-accent-rose-50:   #FFF1F1;
+     --system-accent-rose-100:  #FEE4E7;
+     --system-accent-rose-200:  #FECDD3;
+     --system-accent-rose-300:  #FEA4B0;
+     --system-accent-rose-400:  #FB7286;
+     --system-accent-rose-500:  #F43F5E;
+     --system-accent-rose-600:  #E21D48;
+     --system-accent-rose-700:  #BE113C;
+     --system-accent-rose-800:  #9F133A;
+     --system-accent-rose-900:  #891336;
+     --system-accent-rose-1000: #6D0F2B;
+   
+     /* Accent Sky */
+     --system-accent-sky-25:   #F3FAFF;
+     --system-accent-sky-50:   #F0F9FF;
+     --system-accent-sky-100:  #E0F2FE;
+     --system-accent-sky-200:  #BAE7FE;
+     --system-accent-sky-300:  #7ED3FC;
+     --system-accent-sky-400:  #38BDF8;
+     --system-accent-sky-500:  #0EA5EA;
+     --system-accent-sky-600:  #0384C6;
+     --system-accent-sky-700:  #0469A1;
+     --system-accent-sky-800:  #075A86;
+     --system-accent-sky-900:  #0C4A6F;
+     --system-accent-sky-1000: #0C4A6F; /* same as 900 per source */
+   
+     /* Accent Violet */
+     --system-accent-violet-25:   #F7F5FF;
+     --system-accent-violet-50:   #FAF1FD;
+     --system-accent-violet-100:  #F6E3FC;
+     --system-accent-violet-200:  #EDC8F9;
+     --system-accent-violet-300:  #E0A3F5;
+     --system-accent-violet-400:  #D175F0;
+     --system-accent-violet-500:  #C247EB;
+     --system-accent-violet-600:  #B21AE5;
+     --system-accent-violet-700:  #9615C1;
+     --system-accent-violet-800:  #79119C;
+     --system-accent-violet-900:  #5D0D77;
+     --system-accent-violet-1000: #400953;
+   
+     /* Global border width default (used by uds-border-width-1) */
+     --system-border-width-1: 1px;
+ 
+     /* Centralized Borders (light) */
+     --system-border-light-primary:    var(--system-neutrals-300);
+     --system-border-light-secondary:  var(--system-neutrals-100);
+     --system-border-light-tertiary:   var(--system-neutrals-300);
+     --system-border-light-quaternary: var(--system-neutrals-200);
+     --system-border-light-disabled:   var(--system-neutrals-300);
+  
+     /* Centralized Borders (dark) */
+     --system-border-dark-primary:    var(--system-neutrals-500);
+     --system-border-dark-secondary:  var(--system-neutrals-300);
+     --system-border-dark-tertiary:   var(--system-neutrals-200);
+     --system-border-dark-quaternary: var(--system-neutrals-400);
+     --system-border-dark-disabled:   var(--system-neutrals-400);
+ 
+    /* UDS Shadows (light mode - black shadows) */
+    --uds-shadow-light-2xs: 0 1px rgb(0 0 0 / 0.05);
+    --uds-shadow-light-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --uds-shadow-light-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --uds-shadow-light-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --uds-shadow-light-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --uds-shadow-light-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --uds-shadow-light-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --uds-shadow-light-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+ 
+
+    --uds-shadow-dark-2xs: 0 1px rgb(249 250 252 / 0.05);
+    --uds-shadow-dark-xs:  0 1px 2px 0 rgb(249 250 252 / 0.08);
+    --uds-shadow-dark-sm:  0 1px 3px 0 rgb(249 250 252 / 0.1), 0 1px 2px -1px rgb(249 250 252 / 0.1);
+    --uds-shadow-dark-md:  0 4px 6px -1px rgb(249 250 252 / 0.12), 0 2px 4px -2px rgb(249 250 252 / 0.12);
+    --uds-shadow-dark-lg:  0 10px 15px -3px rgb(249 250 252 / 0.15), 0 4px 6px -4px rgb(249 250 252 / 0.15);
+    --uds-shadow-dark-xl:  0 20px 25px -5px rgb(249 250 252 / 0.18), 0 8px 10px -6px rgb(249 250 252 / 0.18);
+    --uds-shadow-dark-2xl: 0 25px 50px -12px rgb(249 250 252 / 0.2);
+    --uds-shadow-dark-inner: inset 0 2px 4px rgb(249 250 252 / 0.08);
+ 
+    /* UDS Scrim Overlays (light mode - black overlays for dimming content) */
+    --uds-scrim-light-subtle: rgba(0, 0, 0, 0.1);
+    --uds-scrim-light-medium: rgba(0, 0, 0, 0.3);
+    --uds-scrim-light-strong: rgba(0, 0, 0, 0.5);
+    --uds-scrim-light-heavy: rgba(0, 0, 0, 0.7);
+    --uds-scrim-light-maximum: rgba(0, 0, 0, 0.9);
+ 
+    /* UDS Scrim Overlays (dark mode - light neutral overlays for dimming content) */
+    --uds-scrim-dark-subtle: rgba(249, 250, 252, 0.05);
+    --uds-scrim-dark-medium: rgba(249, 250, 252, 0.15);
+    --uds-scrim-dark-strong: rgba(249, 250, 252, 0.25);
+    --uds-scrim-dark-heavy: rgba(249, 250, 252, 0.4);
+    --uds-scrim-dark-maximum: rgba(249, 250, 252, 0.6);
+ 
+    /* Spacing (deduped) */
+     --uds-space-0:  0;
+     --uds-space-2:  2px;
+     --uds-space-4:  4px;
+     --uds-space-6:  6px;
+     --uds-space-8:  8px;
+     --uds-space-10: 10px;
+     --uds-space-12: 12px;
+     --uds-space-14: 14px;
+     --uds-space-16: 16px;
+     --uds-space-24: 24px;
+     --uds-space-32: 32px;
+     --uds-space-48: 48px;
+     --uds-space-64: 64px;
+     --uds-space-80: 80px;
+   
+     /* Radii */
+     --uds-radius-2: var(--system-radius-2);
+     --uds-radius-4: var(--system-radius-4);
+     --uds-radius-6: var(--system-radius-6);
+     --uds-radius-8: var(--system-radius-8);
+     --uds-radius-12: var(--system-radius-12);
+     --uds-radius-16: var(--system-radius-16);
+     --uds-radius-20: var(--system-radius-20);
+     --uds-radius-24: var(--system-radius-24);
+   
+     /* Border widths */
+     --uds-border-width-0: 0;
+     --uds-border-width-1: var(--system-border-width-1);
+     --uds-border-width-2: 2px;
+     --uds-border-width-3: 3px;
+     --uds-border-width:   var(--uds-border-width-1);
+ 
+     /* Radii */
+     --system-radius-2:  2px;
+     --system-radius-4:  4px;
+     --system-radius-6:  6px;
+     --system-radius-8:  8px;
+     --system-radius-12: 12px;
+     --system-radius-16: 16px;
+     --system-radius-20: 20px;
+     --system-radius-24: 24px;
+  
+     /* Border widths */
+     --system-border-width-0: 0;
+     --system-border-width-1: 1px;
+     --system-border-width-2: 2px;
+     --system-border-width-3: 3px;
+     --system-border-width-4: 4px;
+     --system-border-width:   var(--system-border-width-1);
+
+     /* Padding scale - individual sides */
+     --uds-padding-0: 0;
+     --uds-padding-2: var(--uds-space-2);
+     --uds-padding-4: var(--uds-space-4);
+     --uds-padding-6: var(--uds-space-6);
+     --uds-padding-8: var(--uds-space-8);
+     --uds-padding-10: var(--uds-space-10);
+     --uds-padding-12: var(--uds-space-12);
+     --uds-padding-14: var(--uds-space-14);
+     --uds-padding-16: var(--uds-space-16);
+     --uds-padding-24: var(--uds-space-24);
+     --uds-padding-32: var(--uds-space-32);
+     --uds-padding-48: var(--uds-space-48);
+
+     /* Padding - vertical (top/bottom) */
+     --uds-padding-y-0: 0;
+     --uds-padding-y-2: var(--uds-space-2);
+     --uds-padding-y-4: var(--uds-space-4);
+     --uds-padding-y-6: var(--uds-space-6);
+     --uds-padding-y-8: var(--uds-space-8);
+     --uds-padding-y-12: var(--uds-space-12);
+     --uds-padding-y-16: var(--uds-space-16);
+     --uds-padding-y-24: var(--uds-space-24);
+     --uds-padding-y-32: var(--uds-space-32);
+     --uds-padding-y-48: var(--uds-space-48);
+     --uds-padding-y-64: var(--uds-space-64);
+
+     /* Padding - horizontal (left/right) */
+     --uds-padding-x-0: 0;
+     --uds-padding-x-2: var(--uds-space-2);
+     --uds-padding-x-4: var(--uds-space-4);
+     --uds-padding-x-6: var(--uds-space-6);
+     --uds-padding-x-8: var(--uds-space-8);
+     --uds-padding-x-12: var(--uds-space-12);
+     --uds-padding-x-16: var(--uds-space-16);
+     --uds-padding-x-24: var(--uds-space-24);
+     --uds-padding-x-32: var(--uds-space-32);
+     --uds-padding-x-48: var(--uds-space-48);
+     --uds-padding-x-64: var(--uds-space-64);
+
+     /* Padding - semantic layout sizes */
+     --uds-padding-compact: var(--uds-space-8);
+     --uds-padding-comfortable: var(--uds-space-16);
+     --uds-padding-spacious: var(--uds-space-24);
+     --uds-padding-container: var(--uds-space-24);
+     --uds-padding-content: var(--uds-space-16);
+     --uds-padding-section: var(--uds-space-48);
+ 
+     /* Durations */
+     --uds-duration-100: 100ms;
+     --uds-duration-150: 150ms;
+     --uds-duration-200: 200ms;
+     --uds-duration-300: 300ms;
+     --uds-duration-500: 500ms;
+   
+     /* Eases */
+     --uds-ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
+     --uds-ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
+     --uds-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+     --uds-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+ 
+     /* Focus ring */
+     --uds-focus-ring-dark-color:  var(--primary-500);
+     --uds-focus-ring-light-color: var(--primary-500);
+     --uds-focus-ring-width:  2px;
+     --uds-focus-ring-offset: 2px;
+ 
+     /* Cursor */
+     --uds-cursor-interactive: pointer;
+     --uds-cursor-disabled:    not-allowed;
+     --uds-cursor-drag:        grab;
+     --uds-cursor-dragging:    grabbing;
+ 
+     /* Icon sizes */
+     --uds-size-12: 12px;
+     --uds-size-16: 16px;
+     --uds-size-20: 20px;
+     --uds-size-24: 24px;
+     --uds-size-32: 32px;
+     --uds-size-40: 40px;
+     --uds-size-48: 48px;
+ 
+     /* Blur / Backdrop filter */
+     --uds-blur-none: 0;
+     --uds-blur-sm: 4px;
+     --uds-blur-md: 8px;
+     --uds-blur-lg: 16px;
+     --uds-blur-xl: 24px;
+     --uds-blur-2xl: 40px;
+     --uds-blur-3xl: 64px;
+ 
+     /* Transition properties */
+     --uds-transition-property-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
+ 
+     /* Aspect ratios */
+     --uds-aspect-ratio-square: 1 / 1;
+     --uds-aspect-ratio-video: 16 / 9;
+     --uds-aspect-ratio-4-3: 4 / 3;
+     --uds-aspect-ratio-3-2: 3 / 2;
+     --uds-aspect-ratio-21-9: 21 / 9;
+     --uds-aspect-ratio-portrait: 3 / 4;
+     --uds-aspect-ratio-auto: auto;
+ 
+     /* Gap system tokens */
+     --uds-gap-0: 0;
+     --uds-gap-2: var(--uds-space-2);
+     --uds-gap-4: var(--uds-space-4);
+     --uds-gap-8: var(--uds-space-8);
+     --uds-gap-16: var(--uds-space-16);
+     --uds-gap-24: var(--uds-space-24);
+     --uds-gap-32: var(--uds-space-32);
+ 
+    /* Elevation / Surface tokens */
+    --uds-elevation-base:     0;
+    --uds-elevation-sticky:   100;
+    --uds-elevation-dropdown: 1000;
+    --uds-elevation-overlay:  1100;
+    --uds-elevation-modal:    1300;
+    --uds-elevation-toast:    1400;
+    --uds-elevation-tooltip:  1500;
+ 
+     /* Min/Max constraints */
+     --uds-min-width-full: 100%;
+     --uds-min-width-min: min-content;
+     --uds-min-width-max: max-content;
+     --uds-min-width-fit: fit-content;
+
+     /* Breakpoints */
+     --uds-breakpoint-sm: 640px;
+     --uds-breakpoint-md: 768px;
+     --uds-breakpoint-lg: 1024px;
+     --uds-breakpoint-xl: 1280px;
+     --uds-breakpoint-2xl: 1440px;
+     --uds-breakpoint-3xl: 11600px;
+ 
+}
+ 
+/* ===========================================================================
+   Brand Tokens
+=========================================================================== */
+ 
+ /* CompHealth */
+[data-brand="comphealth"] {
+    --brand-primary-25: #F0ECF3; 
+    --brand-primary-50: #EAE4EE; 
+    --brand-primary-100: #CCC4D7; 
+    --brand-primary-200: #AEA3BC; 
+    --brand-primary-300: #8F7FA1; 
+    --brand-primary-400: #79658D; 
+    --brand-primary-500: #644D7B; 
+    --brand-primary-600: #5E4775; 
+    --brand-primary-700: #553F6C; 
+    --brand-primary-800: #4B3A62; 
+    --brand-primary-900: #3C304C; 
+
+    --brand-secondary-25: #FFFBFA; 
+    --brand-secondary-50: #FEF3F2; 
+    --brand-secondary-100: #FDE5E3; 
+    --brand-secondary-200: #FCD0CC; 
+    --brand-secondary-300: #F9AFA8; 
+    --brand-secondary-400: #F48075; 
+    --brand-secondary-500: #EA5C4F; 
+    --brand-secondary-600: #D63A2C; 
+    --brand-secondary-700: #B42D21; 
+    --brand-secondary-800: #95291F; 
+    --brand-secondary-900: #7C2820; 
+
+    --brand-tertiary-25: #FEF9F5; 
+    --brand-tertiary-50: #FEF4EC; 
+    --brand-tertiary-100: #FDE9D8; 
+    --brand-tertiary-200: #FBCEAC; 
+    --brand-tertiary-300: #F69E60; 
+    --brand-tertiary-400: #F38744; 
+    --brand-tertiary-500: #EF681F; 
+    --brand-tertiary-600: #E05215; 
+    --brand-tertiary-700: #BA3F12; 
+    --brand-tertiary-800: #953718; 
+    --brand-tertiary-900: #793016; 
+
+    --brand-quaternary-25: #FBFDFE; 
+    --brand-quaternary-50: #F1F8FD; 
+    --brand-quaternary-100: #DFF0FA; 
+    --brand-quaternary-200: #C6E5F7; 
+    --brand-quaternary-300: #9FD5F1; 
+    --brand-quaternary-400: #72BCE8; 
+    --brand-quaternary-500: #50A1E1; 
+    --brand-quaternary-600: #3E88D5; 
+    --brand-quaternary-700: #3272C3; 
+    --brand-quaternary-800: #2F5D9E; 
+    --brand-quaternary-900: #2A4F7E;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+  
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+  
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+  
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+  
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+  
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+  
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+  
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* Connect */
+[data-brand="connect"] {
+    --brand-primary-25: #FAFDFF; 
+    --brand-primary-50: #EFFAFF; 
+    --brand-primary-100: #DEF4FF; 
+    --brand-primary-200: #B6EBFF; 
+    --brand-primary-300: #75DDFF; 
+    --brand-primary-400: #2CCDFF; 
+    --brand-primary-500: #00A8E2; 
+    --brand-primary-600: #0093D4; 
+    --brand-primary-700: #0075AB; 
+    --brand-primary-800: #00638D; 
+    --brand-primary-900: #065274; 
+    --brand-secondary-25: #FFF9F5; 
+    --brand-secondary-50: #FEF4ED; 
+    --brand-secondary-100: #FDE6D5; 
+    --brand-secondary-200: #FBCDA9; 
+    --brand-secondary-300: #F8AD74; 
+    --brand-secondary-400: #F68C3B; 
+    --brand-secondary-500: #F47615; 
+    --brand-secondary-600: #F5822A; 
+    --brand-secondary-700: #C55B09; 
+    --brand-secondary-800: #A44C08; 
+    --brand-secondary-900: #883E06; 
+    --brand-tertiary-25: #FCFFF0; 
+    --brand-tertiary-50: #FAFFE5; 
+    --brand-tertiary-100: #F2FFC7; 
+    --brand-tertiary-200: #E5FF95; 
+    --brand-tertiary-300: #D1FE58; 
+    --brand-tertiary-400: #BAF526; 
+    --brand-tertiary-500: #9BDC06; 
+    --brand-tertiary-600: #80BC00; 
+    --brand-tertiary-700: #5A8506; 
+    --brand-tertiary-800: #49690B; 
+    --brand-tertiary-900: #3D580F; 
+    --brand-quaternary-25: #F8F7F7; 
+    --brand-quaternary-50: #F4F3F2; 
+    --brand-quaternary-100: #E4E1DD; 
+    --brand-quaternary-200: #CAC5BE; 
+    --brand-quaternary-300: #ACA398; 
+    --brand-quaternary-400: #94887B; 
+    --brand-quaternary-500: #85786D; 
+    --brand-quaternary-600: #6F625A; 
+    --brand-quaternary-700: #5C514C; 
+    --brand-quaternary-800: #504643; 
+    --brand-quaternary-900: #473E3C;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* GMS */
+[data-brand="gms"] {
+    --brand-primary-25: #F4F8FB; 
+    --brand-primary-50: #E9F0F5; 
+    --brand-primary-100: #CEDFE9; 
+    --brand-primary-200: #A2C5D7; 
+    --brand-primary-300: #70A5C0; 
+    --brand-primary-400: #4E8BA9; 
+    --brand-primary-500: #396B88; 
+    --brand-primary-600: #315A73; 
+    --brand-primary-700: #2C4D60; 
+    --brand-primary-800: #294151; 
+    --brand-primary-900: #1B2A36; 
+    --brand-secondary-25: #F8F7ED; 
+    --brand-secondary-50: #EFEED8; 
+    --brand-secondary-100: #E1E1B5; 
+    --brand-secondary-200: #CBCD89; 
+    --brand-secondary-300: #B5B863; 
+    --brand-secondary-400: #989D45; 
+    --brand-secondary-500: #727732; 
+    --brand-secondary-600: #5B602B; 
+    --brand-secondary-700: #494D27; 
+    --brand-secondary-800: #404324; 
+    --brand-secondary-900: #202310; 
+    --brand-tertiary-25: #FDFAF7; 
+    --brand-tertiary-50: #FBF6EF; 
+    --brand-tertiary-100: #F3E8D2; 
+    --brand-tertiary-200: #E5CFA2; 
+    --brand-tertiary-300: #D7B272; 
+    --brand-tertiary-400: #CE9A51; 
+    --brand-tertiary-500: #C47F3C; 
+    --brand-tertiary-600: #B06533; 
+    --brand-tertiary-700: #904B2D; 
+    --brand-tertiary-800: #763D2A; 
+    --brand-tertiary-900: #623325; 
+    --brand-quaternary-25: #FDFDF6; 
+    --brand-quaternary-50: #FAFBEB; 
+    --brand-quaternary-100: #F6F7CA; 
+    --brand-quaternary-200: #F0F098; 
+    --brand-quaternary-300: #E7E15D; 
+    --brand-quaternary-400: #DFD030; 
+    --brand-quaternary-500: #CFB923; 
+    --brand-quaternary-600: #C2A01E; 
+    --brand-quaternary-700: #8F6D19; 
+    --brand-quaternary-800: #77571C; 
+    --brand-quaternary-900: #3B260D;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* LocumSmart */
+[data-brand="locumsmart"] {
+    --brand-primary-25: #F2FAFD; 
+    --brand-primary-50: #E3F5FA; 
+    --brand-primary-100: #AEE0F4; 
+    --brand-primary-200: #78CBEC; 
+    --brand-primary-300: #41B7E5; 
+    --brand-primary-400: #00A7E1; 
+    --brand-primary-500: #009ADD; 
+    --brand-primary-600: #008DCF; 
+    --brand-primary-700: #0C6BB0; 
+    --brand-primary-800: #006AA8; 
+    --brand-primary-900: #004B88; 
+    --brand-secondary-25: #FEFBF5; 
+    --brand-secondary-50: #FEF8EE; 
+    --brand-secondary-100: #FEEFD6; 
+    --brand-secondary-200: #FBDCAD; 
+    --brand-secondary-300: #F9C278; 
+    --brand-secondary-400: #F59E42; 
+    --brand-secondary-500: #F2821F; 
+    --brand-secondary-600: #E36613; 
+    --brand-secondary-700: #BC4D12; 
+    --brand-secondary-800: #963E16; 
+    --brand-secondary-900: #793515; 
+    --brand-tertiary-25: #EFF2F5; 
+    --brand-tertiary-50: #E6EBF0; 
+    --brand-tertiary-100: #BFCDDB; 
+    --brand-tertiary-200: #97ADC3; 
+    --brand-tertiary-300: #708CAA; 
+    --brand-tertiary-400: #4F7499; 
+    --brand-tertiary-500: #295D8B; 
+    --brand-tertiary-600: #215583; 
+    --brand-tertiary-700: #174B77; 
+    --brand-tertiary-800: #12416B; 
+    --brand-tertiary-900: #0F3152; 
+    --brand-quaternary-25: #FEFDF6; 
+    --brand-quaternary-50: #FDFBED; 
+    --brand-quaternary-100: #F8F3CB; 
+    --brand-quaternary-200: #F1E796; 
+    --brand-quaternary-300: #EAD55F; 
+    --brand-quaternary-400: #F8CA10; 
+    --brand-quaternary-500: #FBB03A; 
+    --brand-quaternary-600: #C3841C; 
+    --brand-quaternary-700: #A26E1B; 
+    --brand-quaternary-800: #845C1C; 
+    --brand-quaternary-900: #6D4D1A;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* Modio */
+[data-brand="modio"] {
+    --brand-primary-25: #F1FBFD; 
+    --brand-primary-50: #E5F7FC; 
+    --brand-primary-100: #C8ECF8; 
+    --brand-primary-200: #A6DFF1; 
+    --brand-primary-300: #84D3EB; 
+    --brand-primary-400: #5EC3E0; 
+    --brand-primary-500: #3BA9D2; 
+    --brand-primary-600: #2C91B6; 
+    --brand-primary-700: #1E799B; 
+    --brand-primary-800: #065D86; 
+    --brand-primary-900: #04425F; 
+    --brand-secondary-25: #F3FBF9; 
+    --brand-secondary-50: #ECF9F6; 
+    --brand-secondary-100: #D8F3EC; 
+    --brand-secondary-200: #B1E7D9; 
+    --brand-secondary-300: #8BDAC6; 
+    --brand-secondary-400: #64CEB4; 
+    --brand-secondary-500: #3ABA9B; 
+    --brand-secondary-600: #319B81; 
+    --brand-secondary-700: #277C67; 
+    --brand-secondary-800: #1D5D4D; 
+    --brand-secondary-900: #16463A; 
+    --brand-tertiary-25: #FEFBF5; 
+    --brand-tertiary-50: #FEF6E7; 
+    --brand-tertiary-100: #FCEDCF; 
+    --brand-tertiary-200: #F9DB9F; 
+    --brand-tertiary-300: #F7C96E; 
+    --brand-tertiary-400: #F4B73E; 
+    --brand-tertiary-500: #F4BA42; 
+    --brand-tertiary-600: #C1840B; 
+    --brand-tertiary-700: #A9740A; 
+    --brand-tertiary-800: #744F07; 
+    --brand-tertiary-900: #573C05; 
+    --brand-quaternary-25: #F8FBF4; 
+    --brand-quaternary-50: #F3F8EC; 
+    --brand-quaternary-100: #E6F1DA; 
+    --brand-quaternary-200: #CEE4B4; 
+    --brand-quaternary-300: #B5D68F; 
+    --brand-quaternary-400: #9CC969; 
+    --brand-quaternary-500: #8CC04F; 
+    --brand-quaternary-600: #699636; 
+    --brand-quaternary-700: #54782B; 
+    --brand-quaternary-800: #476524; 
+    --brand-quaternary-900: #2F4318;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* Weatherby */
+[data-brand="weatherby"] {
+    --brand-primary-25: #FCF2F5; 
+    --brand-primary-50: #F9E5EC; 
+    --brand-primary-100: #E7BECC; 
+    --brand-primary-200: #DB8AA6; 
+    --brand-primary-300: #C24D76; 
+    --brand-primary-400: #B02958; 
+    --brand-primary-500: #8F0A39; 
+    --brand-primary-600: #7D0931; 
+    --brand-primary-700: #6B082A; 
+    --brand-primary-800: #590724; 
+    --brand-primary-900: #40051A; 
+
+    --brand-secondary-25: #EEF8F7; 
+    --brand-secondary-50: #DDF2EE; 
+    --brand-secondary-100: #ACDFD6; 
+    --brand-secondary-200: #74C9B9; 
+    --brand-secondary-300: #38B49E; 
+    --brand-secondary-400: #00A385; 
+    --brand-secondary-500: #009277; 
+    --brand-secondary-600: #02846C; 
+    --brand-secondary-700: #01745F; 
+    --brand-secondary-800: #006552; 
+    --brand-secondary-900: #01483B; 
+
+    --brand-tertiary-25: #FEFBFD; 
+    --brand-tertiary-50: #FBF4F8; 
+    --brand-tertiary-100: #F9EAF2; 
+    --brand-tertiary-200: #F4D6E5; 
+    --brand-tertiary-300: #EDB4D0; 
+    --brand-tertiary-400: #E086B0; 
+    --brand-tertiary-500: #D36192; 
+    --brand-tertiary-600: #BF4373; 
+    --brand-tertiary-700: #A03058; 
+    --brand-tertiary-800: #892B4B; 
+    --brand-tertiary-900: #732842; 
+
+    --brand-quaternary-25: #FFFAFA; 
+    --brand-quaternary-50: #FFF2F1; 
+    --brand-quaternary-100: #FFE1DF; 
+    --brand-quaternary-200: #FFC8C5; 
+    --brand-quaternary-300: #FFA29D; 
+    --brand-quaternary-400: #FF6D64; 
+    --brand-quaternary-500: #FF4338; 
+    --brand-quaternary-600: #ED2115; 
+    --brand-quaternary-700: #C8170D; 
+    --brand-quaternary-800: #A5170F; 
+    --brand-quaternary-900: #881A14;
+
+    /* Brand Interactive */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+}
+
+/* Wireframe (overrides for quick wire visuals) */
+[data-brand="wireframe"] {
+    --system-border-light-primary:    var(--system-black);
+    --system-border-light-secondary:  var(--system-black);
+    --system-border-light-tertiary:   var(--system-black);
+    --system-border-light-quaternary: var(--system-black);
+    --system-border-light-disabled:   var(--system-neutrals-500);
+  
+    --system-border-dark-primary:    var(--system-white);
+    --system-border-dark-secondary:  var(--system-white);
+    --system-border-dark-tertiary:   var(--system-white);
+    --system-border-dark-quaternary: var(--system-white);
+    --system-border-dark-disabled:   var(--system-neutrals-400);
+  
+    --system-border-width-1: 2px;
+  
+    /* Brand Interactive (kept consistent with others) */
+    --brand-interactive-light-surface-primary-default:   var(--brand-primary-600);
+    --brand-interactive-light-surface-primary-hover:     var(--brand-primary-700);
+    --brand-interactive-light-surface-secondary-default: var(--brand-primary-50);
+    --brand-interactive-light-surface-secondary-hover:   var(--brand-primary-100);
+  
+    --brand-interactive-dark-surface-primary-default:    var(--brand-primary-600);
+    --brand-interactive-dark-surface-primary-hover:      var(--brand-primary-400);
+    --brand-interactive-dark-surface-secondary-default:  var(--system-neutrals-600);
+    --brand-interactive-dark-surface-secondary-hover:    var(--system-neutrals-500);
+  
+    --brand-interactive-light-border-primary-default:    var(--brand-primary-600);
+    --brand-interactive-light-border-primary-hover:      var(--brand-primary-700);
+    --brand-interactive-light-border-secondary-default:  var(--brand-primary-50);
+    --brand-interactive-light-border-secondary-hover:    var(--brand-primary-100);
+  
+    --brand-interactive-dark-border-primary-default:     var(--brand-primary-600);
+    --brand-interactive-dark-border-primary-hover:       var(--brand-primary-400);
+    --brand-interactive-dark-border-secondary-default:   var(--system-neutrals-600);
+    --brand-interactive-dark-border-secondary-hover:     var(--system-neutrals-500);
+  
+    --brand-interactive-light-text-default:      var(--system-white);
+    --brand-interactive-light-text-secondary:    var(--system-black);
+    --brand-interactive-light-text-tertiary:     var(--brand-primary-600);
+    --brand-interactive-light-text-quaternary:   var(--brand-primary-700);
+  
+    --brand-interactive-dark-text-default:       var(--system-white);
+    --brand-interactive-dark-text-secondary:     var(--system-white);
+    --brand-interactive-dark-text-tertiary:      var(--brand-primary-200);
+    --brand-interactive-dark-text-quaternary:    var(--brand-primary-100);
+  
+    --brand-interactive-light-icons-primary:     var(--system-white);
+    --brand-interactive-light-icons-secondary:   var(--system-black);
+    --brand-interactive-light-icons-tertiary:    var(--brand-primary-600);
+    --brand-interactive-light-icons-quaternary:  var(--brand-primary-700);
+  
+    --brand-interactive-dark-icons-primary:      var(--system-white);
+    --brand-interactive-dark-icons-secondary:    var(--system-white);
+    --brand-interactive-dark-icons-tertiary:     var(--brand-primary-200);
+    --brand-interactive-dark-icons-quaternary:   var(--brand-primary-100);
+
+    /* System Overrides */
+    /* Radii */
+    --system-radius-2:  0;
+    --system-radius-4:  0;
+    --system-radius-6:  0;
+    --system-radius-8:  0;
+    --system-radius-12: 0;
+    --system-radius-16: 0;
+    --system-radius-20: 0;
+    --system-radius-24: 0;
+
+    /* Border widths */
+    --system-border-width-0: 2px;
+    --system-border-width-1: 2px;
+    --system-border-width-2: 2px;
+    --system-border-width-3: 2px;
+    --system-border-width-4: 2px;
+    --system-border-width:   var(--system-border-width-1);
+}
+
+/* ===========================================================================
+   UI Tokens Modes
+=========================================================================== */
+
+[data-mode="light"] {
+
+    /* UDS Surfaces */
+    --uds-surface-primary:     #ffffff;
+    --uds-surface-secondary:   #f9fafc;
+    --uds-surface-tertiary:    #f3f4f6;
+    --uds-surface-quaternary:  #e6e7eb;
+    --uds-surface-disabled:    #f3f4f6;
+    --uds-surface-transparent: rgba(255, 255, 255, 0.009999999776482582);
+    --uds-surface-inverse:     #ffffff;
+    --uds-surface-brand-primary:    #e3f5fa;
+    --uds-surface-brand-secondary:  #00a7e1;
+    --uds-surface-brand-tertiary:   #aee0f4;
+    --uds-surface-brand-quaternary: #f2fafd;
+
+    /* UDS Borders */
+    --uds-border-primary:    #d2d5dc;
+    --uds-border-secondary:  #e6e7eb;
+    --uds-border-tertiary:   #f3f4f6;
+    --uds-border-quaternary: #e6e7eb;
+    --uds-border-disabled:   #d2d5dc;
+    --uds-border-transparent: rgba(255, 255, 255, 0.009999999776482582);
+    --uds-border-inverse: #ffffff;
+    --uds-border-brand-primary: #41b7e5;
+    --uds-border-brand-secondary: #aee0f4;
+    --uds-border-brand-tertiary: #aee0f4;
+    --uds-border-brand-quaternary: #f2fafd;
+
+    /* UDS Text */   
+    --uds-text-primary:   #ffffff;
+    --uds-text-secondary: #f9fafc;
+    --uds-text-tertiary:  #f3f4f6;
+    --uds-text-quaternary: #e6e7eb;
+    --uds-text-inverse:   #ffffff;
+    --uds-text-disabled:  #9ca2ae;
+    --uds-text-placeholder: #9ca2ae;
+    --uds-text-brand-primary: #41b7e5;
+    --uds-text-brand-secondary: #e3f5fa;
+    --uds-text-brand-tertiary: #aee0f4;
+    --uds-text-brand-quaternary: #f2fafd;
+    --uds-text-link-primary-default:      #7ed3fc;
+    --uds-text-link-primary-hover: #e0f2fe;
+    --uds-text-link-primary-active: #e0f2fe;
+    --uds-text-link-primary-visited: #0ea5ea;
+    --uds-text-link-secondary-default: #ffffff;
+    --uds-text-link-secondary-hover: #e6e7eb;
+    --uds-text-link-secondary-active: #ffffff;
+    --uds-text-link-secondary-visited: #ffffff;
+  
+    /* UDS Icons */
+    --uds-icon-primary:   #ffffff;
+    --uds-icon-secondary: #f9fafc;
+    --uds-icon-tertiary: #f3f4f6;
+    --uds-icon-quaternary: #e6e7eb;
+    --uds-icon-inverse:   #ffffff;
+    --uds-icon-disabled:  #9ca2ae;
+    --uds-icon-placeholder: #9ca2ae;
+    --uds-icon-brand-primary: #41b7e5;
+    --uds-icon-brand-secondary: #e3f5fa;
+    --uds-icon-brand-tertiary: #aee0f4;
+    --uds-icon-brand-quaternary: #f2fafd;
+    --uds-icon-link-primary-default: #7ed3fc;
+    --uds-icon-link-primary-hover: #e0f2fe;
+    --uds-icon-link-primary-active: #e0f2fe;
+    --uds-icon-link-primary-visited: #e0f2fe;
+    --uds-icon-link-secondary-default: #ffffff;
+    --uds-icon-link-secondary-hover: #f3f4f6;
+    --uds-icon-link-secondary-active: #ffffff;
+    --uds-icon-link-secondary-visited: #d2d5dc;
+
+    /* System Destructive */
+    --uds-system-destructive-primary: #fecbca;
+    --uds-system-destructive-secondary: #fda5a4;
+    --uds-system-destructive-tertiary: #fecbca;
+    --uds-system-destructive-quaternary: #fef2f2;
+
+    /* System Action */
+    --uds-system-action-primary: #dbeaff;
+    --uds-system-action-secondary: #bfdcfe;
+    --uds-system-action-tertiary: #bfdcfe;
+    --uds-system-action-quaternary: #eff6ff;
+
+    /* System Constructive */
+    --uds-system-constructive-primary: #dcfce7;
+    --uds-system-constructive-secondary: #bbf7d1;
+    --uds-system-constructive-tertiary: #86efac;
+    --uds-system-constructive-quaternary: #f0fdf4;
+
+    /* System Warning */
+    --uds-system-warning-primary: #fef9c3;
+    --uds-system-warning-secondary: #fef08a;
+    --uds-system-warning-tertiary: #fef9c3;
+    --uds-system-warning-quaternary: #fefce8;
+
+
+    /* UDS Colors */
+    --uds-color-black: #111111;
+    --uds-color-white: #ffffff;
+    --uds-color-transparent: rgba(255, 255, 255, 0.009999999776482582);
+
+    --uds-color-neutrals-50: #f9fafc;
+    --uds-color-neutrals-100: #f3f4f6;
+    --uds-color-neutrals-200: #e6e7eb;
+    --uds-color-neutrals-300: #d2d5dc;
+    --uds-color-neutrals-400: #9ca2ae;
+    --uds-color-neutrals-500: #6b7380;
+    --uds-color-neutrals-600: #4c5564;
+    --uds-color-neutrals-700: #384152;
+    --uds-color-neutrals-800: #202938;
+    --uds-color-neutrals-900: #111828;
+
+    --uds-color-accent-amber-25: #fffbeb;
+    --usd-color-accent-amber-50: var(--system-accent-amber-50);
+    --usd-color-accent-amber-100: var(--system-accent-amber-100);
+    --usd-color-accent-amber-200: var(--system-accent-amber-200);
+    --usd-color-accent-amber-300: var(--system-accent-amber-300);
+    --usd-color-accent-amber-400: var(--system-accent-amber-400);
+    --usd-color-accent-amber-500: var(--system-accent-amber-500);
+    --usd-color-accent-amber-600: var(--system-accent-amber-600);
+    --usd-color-accent-amber-700: var(--system-accent-amber-700);
+    --usd-color-accent-amber-800: var(--system-accent-amber-800);
+    --usd-color-accent-amber-900: var(--system-accent-amber-900);
+
+    --uds-color-accent-aqua-25: #f0fdfa;
+    --uds-color-accent-aqua-50: #ccfbf1;
+    --uds-color-accent-aqua-100: #99f6e4;
+    --uds-color-accent-aqua-200: #5eead4;
+    --uds-color-accent-aqua-300: #2dd4bf;
+    --uds-color-accent-aqua-400: #14b8a6;
+    --uds-color-accent-aqua-500: #14b8a6;
+    --uds-color-accent-aqua-600: #2dd4bf;
+    --uds-color-accent-aqua-700: #5eead4;
+    --uds-color-accent-aqua-800: #99f6e4;
+    --uds-color-accent-aqua-900: #ccfbf1;
+
+    --uds-color-accent-blue-25: #f2f7ff;
+    --uds-color-accent-blue-50: #eff6ff;
+    --uds-color-accent-blue-100: #dbeaff;
+    --uds-color-accent-blue-200: #bfdcfe;
+    --uds-color-accent-blue-300: #93c4fc;
+    --uds-color-accent-blue-400: #61a5fa;
+    --uds-color-accent-blue-500: #61a5fa;
+    --uds-color-accent-blue-600: #93c4fc;
+    --uds-color-accent-blue-700: #bfdcfe;
+    --uds-color-accent-blue-800: #dbeaff;
+    --uds-color-accent-blue-900: #eff6ff;
+
+    --uds-color-accent-cyan-25: #effeff;
+    --uds-color-accent-cyan-50: #ecfeff;
+    --uds-color-accent-cyan-100: #cffbfe;
+    --uds-color-accent-cyan-200: #a5f3fd;
+    --uds-color-accent-cyan-300: #66e8f8;
+    --uds-color-accent-cyan-400: #21d3ed;
+    --uds-color-accent-cyan-500: #21d3ed;
+    --uds-color-accent-cyan-600: #66e8f8;
+    --uds-color-accent-cyan-700: #a5f3fd;
+    --uds-color-accent-cyan-800: #cffbfe;
+    --uds-color-accent-cyan-900: #ecfeff;
+
+    --uds-color-accent-emerald-25: #effdf7;
+    --uds-color-accent-emerald-50: #ecfdf5;
+    --uds-color-accent-emerald-100: #d0fae4;
+    --uds-color-accent-emerald-200: #a7f3cf;
+    --uds-color-accent-emerald-300: #6de7b6;
+    --uds-color-accent-emerald-400: #34d399;
+    --uds-color-accent-emerald-500: #34d399;
+    --uds-color-accent-emerald-600: #6de7b6;
+    --uds-color-accent-emerald-700: #a7f3cf;
+    --uds-color-accent-emerald-800: #d0fae4;
+    --uds-color-accent-emerald-900: #ecfdf5;
+
+    --uds-color-accent-fuchsia-25: #fef6ff;
+    --uds-color-accent-fuchsia-50: #fef4ff;
+    --uds-color-accent-fuchsia-100: #fae8fe;
+    --uds-color-accent-fuchsia-200: #f5cffe;
+    --uds-color-accent-fuchsia-300: #f0abfc;
+    --uds-color-accent-fuchsia-400: #e879f9;
+    --uds-color-accent-fuchsia-500: #e879f9;
+    --uds-color-accent-fuchsia-600: #f0abfc;
+    --uds-color-accent-fuchsia-700: #f5cffe;
+    --uds-color-accent-fuchsia-800: #fae8fe;
+    --uds-color-accent-fuchsia-900: #fef4ff;
+
+    --uds-color-accent-green-25: #f3fdf6;
+    --uds-color-accent-green-50: #f0fdf4;
+    --uds-color-accent-green-100: #dcfce7;
+    --uds-color-accent-green-200: #bbf7d1;
+    --uds-color-accent-green-300: #86efac;
+    --uds-color-accent-green-400: #4ade80;
+    --uds-color-accent-green-500: #4ade80;
+    --uds-color-accent-green-600: #86efac;
+    --uds-color-accent-green-700: #bbf7d1;
+    --uds-color-accent-green-800: #dcfce7;
+    --uds-color-accent-green-900: #f0fdf4;
+
+    --uds-color-accent-indigo-25: #f1f4fe;
+    --uds-color-accent-indigo-50: #eef2fe;
+    --uds-color-accent-indigo-100: #e1e7ff;
+    --uds-color-accent-indigo-200: #c7d2ff;
+    --uds-color-accent-indigo-300: #a6b4fd;
+    --uds-color-accent-indigo-400: #818cf8;
+    --uds-color-accent-indigo-500: #818cf8;
+    --uds-color-accent-indigo-600: #a6b4fd;
+    --uds-color-accent-indigo-700: #c7d2ff;
+    --uds-color-accent-indigo-800: #e1e7ff;
+    --uds-color-accent-indigo-900: #eef2fe;
+
+    --uds-color-accent-lime-25: #f7feeb;
+    --uds-color-accent-lime-50: #f6fee7;
+    --uds-color-accent-lime-100: #ecfccb;
+    --uds-color-accent-lime-200: #daf99c;
+    --uds-color-accent-lime-300: #bef164;
+    --uds-color-accent-lime-400: #a3e636;
+    --uds-color-accent-lime-500: #a3e636;
+    --uds-color-accent-lime-600: #bef164;
+    --uds-color-accent-lime-700: #daf99c;
+    --uds-color-accent-lime-800: #ecfccb;
+    --uds-color-accent-lime-900: #f6fee7;
+
+    --uds-color-accent-magenta-25: #fff5fb;
+    --uds-color-accent-magenta-50: #fdf2f8;
+    --uds-color-accent-magenta-100: #fce7f3;
+    --uds-color-accent-magenta-200: #fbcfe8;
+    --uds-color-accent-magenta-300: #f9a8d4;
+    --uds-color-accent-magenta-400: #f472b6;
+    --uds-color-accent-magenta-500: #f472b6;
+    --uds-color-accent-magenta-600: #f9a8d4;
+    --uds-color-accent-magenta-700: #fbcfe8;
+    --uds-color-accent-magenta-800: #fce7f3;
+    --uds-color-accent-magenta-900: #fdf2f8;
+
+    --uds-color-accent-orange-25: #fffbf7;
+    --uds-color-accent-orange-50: #fffaf5;
+    --uds-color-accent-orange-100: #fff6ed;
+    --uds-color-accent-orange-200: #ffead5;
+    --uds-color-accent-orange-300: #fddcab;
+    --uds-color-accent-orange-400: #feb273;
+    --uds-color-accent-orange-500: #feb273;
+    --uds-color-accent-orange-600: #fddcab;
+    --uds-color-accent-orange-700: #ffead5;
+    --uds-color-accent-orange-800: #fff6ed;
+    --uds-color-accent-orange-900: #fffaf5;
+
+    --uds-color-accent-purple-25: #fbf7ff;
+    --uds-color-accent-purple-50: #fbf5ff;
+    --uds-color-accent-purple-100: #f4e8fe;
+    --uds-color-accent-purple-200: #ead5fe;
+    --uds-color-accent-purple-300: #d8b4fe;
+    --uds-color-accent-purple-400: #c085fd;
+    --uds-color-accent-purple-500: #c085fd;
+    --uds-color-accent-purple-600: #d8b4fe;
+    --uds-color-accent-purple-700: #ead5fe;
+    --uds-color-accent-purple-800: #f4e8fe;
+    --uds-color-accent-purple-900: #fbf5ff;
+
+    --uds-color-accent-red-25: #fef4f4;
+    --uds-color-accent-red-50: #fef2f2;
+    --uds-color-accent-red-100: #fee2e1;
+    --uds-color-accent-red-200: #fecbca;
+    --uds-color-accent-red-300: #fda5a4;
+    --uds-color-accent-red-400: #f87070;
+    --uds-color-accent-red-500: #f87070;
+    --uds-color-accent-red-600: #fda5a4;
+    --uds-color-accent-red-700: #fecbca;
+    --uds-color-accent-red-800: #fee2e1;
+    --uds-color-accent-red-900: #fef2f2;
+
+    --uds-color-accent-ruby-25: var(--system-accent-ruby-25);
+    --uds-color-accent-ruby-50: var(--system-accent-ruby-50);
+    --uds-color-accent-ruby-100: var(--system-accent-ruby-100);
+    --uds-color-accent-ruby-200: var(--system-accent-ruby-200);
+    --uds-color-accent-ruby-300: var(--system-accent-ruby-300);
+    --uds-color-accent-ruby-400: var(--system-accent-ruby-400);
+    --uds-color-accent-ruby-500: var(--system-accent-ruby-500);
+    --uds-color-accent-ruby-600: var(--system-accent-ruby-600);
+    --uds-color-accent-ruby-700: var(--system-accent-ruby-700);
+    --uds-color-accent-ruby-800: var(--system-accent-ruby-800);
+    --uds-color-accent-ruby-900: var(--system-accent-ruby-900);
+
+    --uds-color-accent-sky-25: #f3faff;
+    --uds-color-accent-sky-50: #f0f9ff;
+    --uds-color-accent-sky-100: #e0f2fe;
+    --uds-color-accent-sky-200: #bae7fe;
+    --uds-color-accent-sky-300: #7ed3fc;
+    --uds-color-accent-sky-400: #38bdf8;
+    --uds-color-accent-sky-500: #38bdf8;
+    --uds-color-accent-sky-600: #7ed3fc;
+    --uds-color-accent-sky-700: #bae7fe;
+    --uds-color-accent-sky-800: #e0f2fe;
+    --uds-color-accent-sky-900: #f0f9ff;
+
+    --uds-color-accent-violet-25: #f7f5ff;
+    --uds-color-accent-violet-50: #f5f3ff;
+    --uds-color-accent-violet-100: #edeaff;
+    --uds-color-accent-violet-200: #ddd6ff;
+    --uds-color-accent-violet-300: #c5b5fe;
+    --uds-color-accent-violet-400: #a78bfa;
+    --uds-color-accent-violet-500: #a78bfa;
+    --uds-color-accent-violet-600: #c5b5fe;
+    --uds-color-accent-violet-700: #ddd6ff;
+    --uds-color-accent-violet-800: #edeaff;
+    --uds-color-accent-violet-900: #f5f3ff;
+
+    --uds-color-accent-yellow-25: #fefcec;
+    --uds-color-accent-yellow-50: #fefce8;
+    --uds-color-accent-yellow-100: #fef9c3;
+    --uds-color-accent-yellow-200: #fef08a;
+    --uds-color-accent-yellow-300: #fde047;
+    --uds-color-accent-yellow-400: #facc15;
+    --uds-color-accent-yellow-500: #e9b308;
+    --uds-color-accent-yellow-600: #ca8a04;
+    --uds-color-accent-yellow-700: #a26208;
+    --uds-color-accent-yellow-800: #854e0e;
+    --uds-color-accent-yellow-900: #723f12;
+
+    --uds-color-primary-25: #f2fafd;
+    --uds-color-primary-50: #e3f5fa;
+    --uds-color-primary-100: #aee0f4;
+    --uds-color-primary-200: #78cbec;
+    --uds-color-primary-300: #41b7e5;
+    --uds-color-primary-400: #00a7e1;
+    --uds-color-primary-500: #41b7e5;
+    --uds-color-primary-600: #78cbec;
+    --uds-color-primary-700: #aee0f4;
+    --uds-color-primary-800: #e3f5fa;
+    --uds-color-primary-900: #f2fafd;
+
+    --uds-color-secondary-25: #fefbf5;
+    --uds-color-secondary-50: #fef8ee;
+    --uds-color-secondary-100: #feefd6;
+    --uds-color-secondary-200: #fbdcad;
+    --uds-color-secondary-300: #f9c278;
+    --uds-color-secondary-400: #f59e42;
+    --uds-color-secondary-500: #f9c278;
+    --uds-color-secondary-600: #fbdcad;
+    --uds-color-secondary-700: #feefd6;
+    --uds-color-secondary-800: #fef8ee;
+    --uds-color-secondary-900: #fefbf5;
+
+    --uds-color-tertiary-25: #eff2f5;
+    --uds-color-tertiary-50: #e6ebf0;
+    --uds-color-tertiary-100: #bfcddb;
+    --uds-color-tertiary-200: #97adc3;
+    --uds-color-tertiary-300: #708caa;
+    --uds-color-tertiary-400: #4f7499;
+    --uds-color-tertiary-500: #708caa;
+    --uds-color-tertiary-600: #97adc3;
+    --uds-color-tertiary-700: #bfcddb;
+    --uds-color-tertiary-800: #e6ebf0;
+    --uds-color-tertiary-900: #eff2f5;
+
+    --uds-color-quaternary-25: #fefdf6;
+    --uds-color-quaternary-50: #fdfbed;
+    --uds-color-quaternary-100: #f8f3cb;
+    --uds-color-quaternary-200: #f1e796;
+    --uds-color-quaternary-300: #ead55f;
+    --uds-color-quaternary-400: #f8ca10;
+    --uds-color-quaternary-500: #ead55f;
+    --uds-color-quaternary-600: #f1e796;
+    --uds-color-quaternary-700: #f8f3cb;
+    --uds-color-quaternary-800: #fdfbed;
+    --uds-color-quaternary-900: #fefdf6;
+
+    /* Focus ring */
+    --uds-focus-ring-color: var(--uds-focus-ring-light-color);
+
+    /* UDS Shadows */
+    --uds-shadow-2xs: var(--uds-shadow-light-2xs);
+    --uds-shadow-xs:  var(--uds-shadow-light-xs);
+    --uds-shadow-sm:  var(--uds-shadow-light-sm);
+    --uds-shadow-md:  var(--uds-shadow-light-md);
+    --uds-shadow-lg:  var(--uds-shadow-light-lg);
+    --uds-shadow-xl:  var(--uds-shadow-light-xl);
+    --uds-shadow-2xl: var(--uds-shadow-light-2xl);
+    --uds-shadow-inner: var(--uds-shadow-light-inner);
+    --uds-shadow-none: none;
+
+    --uds-scrim-subtle: var(--uds-scrim-light-subtle);
+    --uds-scrim-medium: var(--uds-scrim-light-medium);
+    --uds-scrim-strong: var(--uds-scrim-light-strong);
+    --uds-scrim-heavy: var(--uds-scrim-light-heavy);
+    --uds-scrim-maximum: var(--uds-scrim-light-maximum);
+    --uds-scrim-none: transparent;
+
+
+    --uds-interactive-surface-primary-default: var(--brand-interactive-light-border-primary-default);
+    --uds-interactive-surface-primary-hover: var(--brand-interactive-light-border-primary-hover);
+    --uds-interactive-surface-disabled: var(--system-neutrals-200);
+    --uds-interactive-surface-destructive: var(--uds-system-destructive-primary);
+
+    --uds-interactive-surface-secondary-default: var(--brand-interactive-light-border-primary-hover);
+    --uds-interactive-surface-secondary-hover: var(--brand-interactive-light-border-primary-active);
+
+    --uds-interactive-border-primary: var(--brand-interactive-light-border-primary-default);
+    --uds-interactive-border-secondary: var(--brand-interactive-light-border-primary-hover);
+    --uds-interactive-border-disabled: var(--system-neutrals-200);
+    --uds-interactive-border-destructive: var(--uds-system-destructive-primary);
+
+    --uds-interactive-border-secondary-default: var(--brand-interactive-light-border-primary-hover);
+    --uds-interactive-border-secondary-hover: var(--brand-interactive-light-border-primary-active);
+
+    --uds-interactive-text-primary: var(--brand-interactive-light-text-primary);
+    --uds-interactive-text-secondary: var(--brand-interactive-light-text-secondary);
+    --uds-interactive-text-tertiary: var(--brand-interactive-light-text-tertiary);
+    --uds-interactive-text-quaternary: var(--brand-interactive-light-text-quaternary);
+    --uds-interactive-text-disabled: var(--system-neutrals-400);
+    --uds-interactive-text-destructive: var(--system-white);
+
+    --uds-interactive-icon-primary: var(--brand-interactive-light-text-primary);
+    --uds-interactive-icon-secondary: var(--brand-interactive-light-text-secondary);
+    --uds-interactive-icon-tertiary: var(--brand-interactive-light-text-tertiary);
+    --uds-interactive-icon-quaternary: var(--brand-interactive-light-text-quaternary);
+    --uds-interactive-icon-disabled: var(--system-neutrals-400);
+    --uds-interactive-icon-destructive: var(--system-white);
+
+    
+}
+  
+[data-mode="dark"] {
+    /* UDS Surfaces */
+    --uds-surface-primary:     #111111;
+    --uds-surface-secondary:   #384152;
+    --uds-surface-tertiary:    #4c5564;
+    --uds-surface-quaternary:  #6b7380;
+    --uds-surface-disabled:    #6b7380;
+    --uds-surface-transparent: rgba(255, 255, 255, 0.009999999776482582);
+    --uds-surface-inverse:     #111111;
+    --uds-surface-brand-primary:    #006aa8;
+    --uds-surface-brand-secondary:  #00a7e1;
+    --uds-surface-brand-tertiary:   #0c6bb0;
+    --uds-surface-brand-quaternary: #004b88;
+    --uds-surface-dark-placeholder: var(--system-neutrals-400);
+
+    /* UDS Borders */
+    --uds-border-primary:    #6b7380;
+    --uds-border-secondary:  #9ca2ae;
+    --uds-border-tertiary:   #d2d5dc;
+    --uds-border-quaternary: #d2d5dc;
+    --uds-border-disabled:   #9ca2ae;
+    --uds-border-transparent: rgba(255, 255, 255, 0.009999999776482582);
+    --uds-border-inverse: #d2d5dc;
+    --uds-border-brand-primary: #009add;
+    --uds-border-brand-secondary: #0c6bb0;
+    --uds-border-brand-tertiary: #0c6bb0;
+    --uds-border-brand-quaternary: #004b88;
+
+    /* UDS Text */
+    --uds-text-primary:   #202938;
+    --uds-text-secondary: #4c5564;
+    --uds-text-tertiary:  #6b7380;
+    --uds-text-quaternary: #d2d5dc;
+    --uds-text-inverse:   #111111;
+    --uds-text-disabled:  #9ca2ae;
+    --uds-text-placeholder: #9ca2ae;
+    --uds-text-brand-primary: #009add;
+    --uds-text-brand-secondary: #006aa8;
+    --uds-text-brand-tertiary: #0c6bb0;
+    --uds-text-brand-quaternary: #004b88;
+    --uds-text-link-primary: var(--system-accent-sky-400);
+    --uds-text-link-primary-hover: #075a86;
+    --uds-text-link-primary-active: #075a86;
+    --uds-text-link-primary-visited: #075a86;
+    --uds-text-link-secondary: var(--system-white);
+    --uds-text-link-secondary-hover: #384152;
+    --uds-text-link-secondary-active: #111111;
+    --uds-text-link-secondary-visited: #6b7380;
+  
+    /* UDS Icons */
+    --uds-icon-primary:   #202938;
+    --uds-icon-secondary: #4c5564;
+    --uds-icon-tertiary: #6b7380;
+    --uds-icon-quaternary: #d2d5dc;
+    --uds-icon-inverse:   #111111;
+    --uds-icon-disabled:  #9ca2ae;
+    --uds-icon-placeholder: #9ca2ae;
+    --uds-icon-brand-primary: #009add;
+    --uds-icon-brand-secondary: #006aa8;
+    --uds-icon-brand-tertiary: #0c6bb0;
+    --uds-icon-brand-quaternary: #004b88;
+    --uds-icon-link-primary-default: #0384c6;
+    --uds-icon-link-primary-hover: #075a86;
+    --uds-icon-link-primary-active: #075a86;
+    --uds-icon-link-primary-visited: #075a86;
+    --uds-icon-link-secondary-default: #111111;
+    --uds-icon-link-secondary-hover: #384152;
+    --uds-icon-link-secondary-active: #111111;
+    --uds-icon-link-secondary-visited: #6b7380;
+
+     /* System Destructive */
+     --uds-system-destructive-primary: #dc2625;
+     --uds-system-destructive-secondary: #f87070;
+     --uds-system-destructive-tertiary: #f87070;
+     --uds-system-destructive-quaternary: #dc2625;
+ 
+     /* System Action */
+     --uds-system-action-primary: #2563ec;
+     --uds-system-action-secondary: #61a5fa;
+     --uds-system-action-tertiary: #61a5fa;
+     --uds-system-action-quaternary: #2563ec;
+ 
+     /* System Constructive */
+     --uds-system-constructive-primary: #17a34a;
+     --uds-system-constructive-secondary: #4ade80;
+     --uds-system-constructive-tertiary: #4ade80;
+     --uds-system-constructive-quaternary: #23c55e;
+ 
+     /* System Warning */
+     --uds-system-warning-primary: #ca8a04;
+     --uds-system-warning-secondary: #facc15;
+     --uds-system-warning-tertiary: #facc15;
+     --uds-system-warning-quaternary: #ca8a04;
+
+
+     /* UDS Colors */
+     --uds-color-black: #111111;
+     --uds-color-white: #ffffff;
+     --uds-color-transparent: rgba(255, 255, 255, 0.009999999776482582);
+ 
+     --uds-color-neutrals-50: #f9fafc;
+     --uds-color-neutrals-100: #f3f4f6;
+     --uds-color-neutrals-200: #e6e7eb;
+     --uds-color-neutrals-300: #d2d5dc;
+     --uds-color-neutrals-400: #9ca2ae;
+     --uds-color-neutrals-500: #6b7380;
+     --uds-color-neutrals-600: #4c5564;
+     --uds-color-neutrals-700: #384152;
+     --uds-color-neutrals-800: #202938;
+     --uds-color-neutrals-900: #111828;
+ 
+     --uds-color-accent-amber-25: #5f2a09;
+     --usd-color-accent-amber-50: var(--system-accent-amber-800);
+     --usd-color-accent-amber-100: var(--system-accent-amber-700);
+     --usd-color-accent-amber-200: var(--system-accent-amber-600);
+     --usd-color-accent-amber-300: var(--system-accent-amber-500);
+     --usd-color-accent-amber-400: var(--system-accent-amber-400);
+     --usd-color-accent-amber-500: var(--system-accent-amber-300);
+     --usd-color-accent-amber-600: var(--system-accent-amber-200);
+     --usd-color-accent-amber-700: var(--system-accent-amber-100);
+     --usd-color-accent-amber-800: var(--system-accent-amber-50);
+     --usd-color-accent-amber-900: var(--system-accent-amber-25);
+ 
+     --uds-color-accent-aqua-25: #0a2e2c;
+     --uds-color-accent-aqua-50: #0f3a37;
+     --uds-color-accent-aqua-100: #134e4a;
+     --uds-color-accent-aqua-200: #115e59;
+     --uds-color-accent-aqua-300: #0f766e;
+     --uds-color-accent-aqua-400: #0d9488;
+     --uds-color-accent-aqua-500: #0d9488;
+     --uds-color-accent-aqua-600: #0f766e;
+     --uds-color-accent-aqua-700: #115e59;
+     --uds-color-accent-aqua-800: #134e4a;
+     --uds-color-accent-aqua-900: #0f3a37;
+ 
+     --uds-color-accent-blue-25: #182e6f;
+     --uds-color-accent-blue-50: #1f3a8b;
+     --uds-color-accent-blue-100: #1f41af;
+     --uds-color-accent-blue-200: #1d4ed7;
+     --uds-color-accent-blue-300: #2563ec;
+     --uds-color-accent-blue-400: #3b82f6;
+     --uds-color-accent-blue-500: #3b82f6;
+     --uds-color-accent-blue-600: #2563ec;
+     --uds-color-accent-blue-700: #1d4ed7;
+     --uds-color-accent-blue-800: #1f41af;
+     --uds-color-accent-blue-900: #1f3a8b;
+ 
+     --uds-color-accent-cyan-25: #113f4f;
+     --uds-color-accent-cyan-50: #164f63;
+     --uds-color-accent-cyan-100: #165e76;
+     --uds-color-accent-cyan-200: #0f7490;
+     --uds-color-accent-cyan-300: #0891b3;
+     --uds-color-accent-cyan-400: #07b6d5;
+     --uds-color-accent-cyan-500: #07b6d5;
+     --uds-color-accent-cyan-600: #0891b3;
+     --uds-color-accent-cyan-700: #0f7490;
+     --uds-color-accent-cyan-800: #165e76;
+     --uds-color-accent-cyan-900: #164f63;
+ 
+     --uds-color-accent-emerald-25: #043d2f;
+     --uds-color-accent-emerald-50: #064d3b;
+     --uds-color-accent-emerald-100: #075f47;
+     --uds-color-accent-emerald-200: #057857;
+     --uds-color-accent-emerald-300: #05976a;
+     --uds-color-accent-emerald-400: #10b982;
+     --uds-color-accent-emerald-500: #10b982;
+     --uds-color-accent-emerald-600: #05976a;
+     --uds-color-accent-emerald-700: #057857;
+     --uds-color-accent-emerald-800: #075f47;
+     --uds-color-accent-emerald-900: #064d3b;
+ 
+     --uds-color-accent-fuchsia-25: #59145d;
+     --uds-color-accent-fuchsia-50: #701a75;
+     --uds-color-accent-fuchsia-100: #861990;
+     --uds-color-accent-fuchsia-200: #a21caf;
+     --uds-color-accent-fuchsia-300: #c026d4;
+     --uds-color-accent-fuchsia-400: #d946ef;
+     --uds-color-accent-fuchsia-500: #d946ef;
+     --uds-color-accent-fuchsia-600: #c026d4;
+     --uds-color-accent-fuchsia-700: #a21caf;
+     --uds-color-accent-fuchsia-800: #861990;
+     --uds-color-accent-fuchsia-900: #701a75;
+ 
+     --uds-color-accent-green-25: #104224;
+     --uds-color-accent-green-50: #15532e;
+     --uds-color-accent-green-100: #176535;
+     --uds-color-accent-green-200: #157f3d;
+     --uds-color-accent-green-300: #17a34a;
+     --uds-color-accent-green-400: #23c55e;
+     --uds-color-accent-green-500: #23c55e;
+     --uds-color-accent-green-600: #17a34a;
+     --uds-color-accent-green-700: #157f3d;
+     --uds-color-accent-green-800: #176535;
+     --uds-color-accent-green-900: #15532e;
+ 
+     --uds-color-accent-indigo-25: #272467;
+     --uds-color-accent-indigo-50: #312d81;
+     --uds-color-accent-indigo-100: #3730a2;
+     --uds-color-accent-indigo-200: #4438ca;
+     --uds-color-accent-indigo-300: #5046e5;
+     --uds-color-accent-indigo-400: #6366f1;
+     --uds-color-accent-indigo-500: #6366f1;
+     --uds-color-accent-indigo-600: #5046e5;
+     --uds-color-accent-indigo-700: #4438ca;
+     --uds-color-accent-indigo-800: #3730a2;
+     --uds-color-accent-indigo-900: #312d81;
+ 
+     --uds-color-accent-lime-25: #2b420f;
+     --uds-color-accent-lime-50: #365313;
+     --uds-color-accent-lime-100: #3f6212;
+     --uds-color-accent-lime-200: #5a8720;
+     --uds-color-accent-lime-300: #64a30e;
+     --uds-color-accent-lime-400: #83cc16;
+     --uds-color-accent-lime-500: #83cc16;
+     --uds-color-accent-lime-600: #64a30e;
+     --uds-color-accent-lime-700: #5a8720;
+     --uds-color-accent-lime-800: #3f6212;
+     --uds-color-accent-lime-900: #365313;
+ 
+     --uds-color-accent-magenta-25: #6b1235;
+     --uds-color-accent-magenta-50: #831843;
+     --uds-color-accent-magenta-100: #9d174d;
+     --uds-color-accent-magenta-200: #be185d;
+     --uds-color-accent-magenta-300: #db2777;
+     --uds-color-accent-magenta-400: #ec4899;
+     --uds-color-accent-magenta-500: #ec4899;
+     --uds-color-accent-magenta-600: #db2777;
+     --uds-color-accent-magenta-700: #be185d;
+     --uds-color-accent-magenta-800: #9d174d;
+     --uds-color-accent-magenta-900: #831843;
+ 
+     --uds-color-accent-orange-25: #641c0c;
+     --uds-color-accent-orange-50: #7e2410;
+     --uds-color-accent-orange-100: #9c2a10;
+     --uds-color-accent-orange-200: #ec4a0a;
+     --uds-color-accent-orange-300: #fb6514;
+     --uds-color-accent-orange-400: #fd853a;
+     --uds-color-accent-orange-500: #fd853a;
+     --uds-color-accent-orange-600: #fb6514;
+     --uds-color-accent-orange-700: #ec4a0a;
+     --uds-color-accent-orange-800: #9c2a10;
+     --uds-color-accent-orange-900: #7e2410;
+ 
+     --uds-color-accent-purple-25: #45166b;
+     --uds-color-accent-purple-50: #571c86;
+     --uds-color-accent-purple-100: #6b22a8;
+     --uds-color-accent-purple-200: #7e22cf;
+     --uds-color-accent-purple-300: #9334ea;
+     --uds-color-accent-purple-400: #a755f7;
+     --uds-color-accent-purple-500: #a755f7;
+     --uds-color-accent-purple-600: #9334ea;
+     --uds-color-accent-purple-700: #7e22cf;
+     --uds-color-accent-purple-800: #6b22a8;
+     --uds-color-accent-purple-900: #571c86;
+ 
+     --uds-color-accent-red-25: #651718;
+     --uds-color-accent-red-50: #7f1d1e;
+     --uds-color-accent-red-100: #991b1c;
+     --uds-color-accent-red-200: #ba1c1d;
+     --uds-color-accent-red-300: #dc2625;
+     --uds-color-accent-red-400: #f04444;
+     --uds-color-accent-red-500: #f04444;
+     --uds-color-accent-red-600: #dc2625;
+     --uds-color-accent-red-700: #ba1c1d;
+     --uds-color-accent-red-800: #991b1c;
+     --uds-color-accent-red-900: #7f1d1e;
+ 
+     --uds-color-accent-ruby-25: var(--system-accent-ruby-900);
+     --uds-color-accent-ruby-50: var(--system-accent-ruby-800);
+     --uds-color-accent-ruby-100: var(--system-accent-ruby-700);
+     --uds-color-accent-ruby-200: var(--system-accent-ruby-600);
+     --uds-color-accent-ruby-300: var(--system-accent-ruby-500);
+     --uds-color-accent-ruby-400: var(--system-accent-ruby-400);
+     --uds-color-accent-ruby-500: var(--system-accent-ruby-300);
+     --uds-color-accent-ruby-600: var(--system-accent-ruby-200);
+     --uds-color-accent-ruby-700: var(--system-accent-ruby-100);
+     --uds-color-accent-ruby-800: var(--system-accent-ruby-50);
+     --uds-color-accent-ruby-900: var(--system-accent-ruby-25);
+ 
+     --uds-color-accent-sky-25: #0c4a6f;
+     --uds-color-accent-sky-50: #0c4a6f;
+     --uds-color-accent-sky-100: #075a86;
+     --uds-color-accent-sky-200: #0469a1;
+     --uds-color-accent-sky-300: #0384c6;
+     --uds-color-accent-sky-400: #0ea5ea;
+     --uds-color-accent-sky-500: #0ea5ea;
+     --uds-color-accent-sky-600: #0384c6;
+     --uds-color-accent-sky-700: #0469a1;
+     --uds-color-accent-sky-800: #075a86;
+     --uds-color-accent-sky-900: #0c4a6f;
+ 
+     --uds-color-accent-violet-25: #3d1777;
+     --uds-color-accent-violet-50: #4d1d95;
+     --uds-color-accent-violet-100: #5b20b6;
+     --uds-color-accent-violet-200: #6d28d9;
+     --uds-color-accent-violet-300: #7d3aec;
+     --uds-color-accent-violet-400: #8b5cf6;
+     --uds-color-accent-violet-500: #8b5cf6;
+     --uds-color-accent-violet-600: #7d3aec;
+     --uds-color-accent-violet-700: #6d28d9;
+     --uds-color-accent-violet-800: #5b20b6;
+     --uds-color-accent-violet-900: #4d1d95;
+ 
+     --uds-color-accent-yellow-25: #fefcec;
+     --uds-color-accent-yellow-50: #fefce8;
+     --uds-color-accent-yellow-100: #fef9c3;
+     --uds-color-accent-yellow-200: #fef08a;
+     --uds-color-accent-yellow-300: #fde047;
+     --uds-color-accent-yellow-400: #facc15;
+     --uds-color-accent-yellow-500: #e9b308;
+     --uds-color-accent-yellow-600: #ca8a04;
+     --uds-color-accent-yellow-700: #a26208;
+     --uds-color-accent-yellow-800: #854e0e;
+     --uds-color-accent-yellow-900: #723f12;
+ 
+     --uds-color-primary-25: #004b88;
+     --uds-color-primary-50: #006aa8;
+     --uds-color-primary-100: #0c6bb0;
+     --uds-color-primary-200: #008dcf;
+     --uds-color-primary-300: #009add;
+     --uds-color-primary-400: #00a7e1;
+     --uds-color-primary-500: #009add;
+     --uds-color-primary-600: #008dcf;
+     --uds-color-primary-700: #0c6bb0;
+     --uds-color-primary-800: #006aa8;
+     --uds-color-primary-900: #004b88;
+ 
+     --uds-color-secondary-25: #793515;
+     --uds-color-secondary-50: #963e16;
+     --uds-color-secondary-100: #bc4d12;
+     --uds-color-secondary-200: #e36613;
+     --uds-color-secondary-300: #f2821f;
+     --uds-color-secondary-400: #f59e42;
+     --uds-color-secondary-500: #f2821f;
+     --uds-color-secondary-600: #e36613;
+     --uds-color-secondary-700: #bc4d12;
+     --uds-color-secondary-800: #963e16;
+     --uds-color-secondary-900: #793515;
+ 
+     --uds-color-tertiary-25: #0f3152;
+     --uds-color-tertiary-50: #12416b;
+     --uds-color-tertiary-100: #174b77;
+     --uds-color-tertiary-200: #215583;
+     --uds-color-tertiary-300: #295d8b;
+     --uds-color-tertiary-400: #4f7499;
+     --uds-color-tertiary-500: #295d8b;
+     --uds-color-tertiary-600: #215583;
+     --uds-color-tertiary-700: #174b77;
+     --uds-color-tertiary-800: #12416b;
+     --uds-color-tertiary-900: #0f3152;
+ 
+     --uds-color-quaternary-25: #6d4d1a;
+     --uds-color-quaternary-50: #845c1c;
+     --uds-color-quaternary-100: #a26e1b;
+     --uds-color-quaternary-200: #c3841c;
+     --uds-color-quaternary-300: #fbb03a;
+     --uds-color-quaternary-400: #f8ca10;
+     --uds-color-quaternary-500: #fbb03a;
+     --uds-color-quaternary-600: #c3841c;
+     --uds-color-quaternary-700: #a26e1b;
+     --uds-color-quaternary-800: #845c1c;
+     --uds-color-quaternary-900: #6d4d1a;
+
+    /* Focus ring */
+    --uds-focus-ring-color: var(--uds-focus-ring-dark-color);
+
+    /* UDS Shadows */
+    --uds-shadow-2xs: var(--uds-shadow-dark-2xs);
+    --uds-shadow-xs:  var(--uds-shadow-dark-xs);
+    --uds-shadow-sm:  var(--uds-shadow-dark-sm);
+    --uds-shadow-md:  var(--uds-shadow-dark-md);
+    --uds-shadow-lg:  var(--uds-shadow-dark-lg);
+    --uds-shadow-xl:  var(--uds-shadow-dark-xl);
+    --uds-shadow-2xl: var(--uds-shadow-dark-2xl);
+    --uds-shadow-inner: var(--uds-shadow-dark-inner);
+    --uds-shadow-none: none;
+
+    --uds-scrim-subtle: var(--uds-scrim-dark-subtle);
+    --uds-scrim-medium: var(--uds-scrim-dark-medium);
+    --uds-scrim-strong: var(--uds-scrim-dark-strong);
+    --uds-scrim-heavy: var(--uds-scrim-dark-heavy);
+    --uds-scrim-maximum: var(--uds-scrim-dark-maximum);
+    --uds-scrim-none: transparent;
+
+
+    --uds-interactive-surface-primary-default: var(--brand-interactive-dark-border-primary-default);
+    --uds-interactive-surface-primary-hover: var(--brand-interactive-dark-border-primary-hover);
+    --uds-interactive-surface-disabled: var(--system-neutrals-200);
+    --uds-interactive-surface-destructive: var(--uds-system-destructive-primary);
+
+    --uds-interactive-surface-secondary-default: var(--brand-interactive-dark-border-primary-hover);
+    --uds-interactive-surface-secondary-hover: var(--brand-interactive-dark-border-primary-active);
+
+    --uds-interactive-border-primary: var(--brand-interactive-light-border-primary-default);
+    --uds-interactive-border-secondary: var(--brand-interactive-dark-border-primary-hover);
+    --uds-interactive-border-disabled: var(--system-neutrals-200);
+    --uds-interactive-border-destructive: var(--uds-system-destructive-primary);
+
+    --uds-interactive-border-secondary-default: var(--brand-interactive-dark-border-primary-hover);
+    --uds-interactive-border-secondary-hover: var(--brand-interactive-dark-border-primary-active);
+
+    --uds-interactive-text-primary: var(--brand-interactive-dark-text-primary);
+    --uds-interactive-text-secondary: var(--brand-interactive-dark-text-secondary);
+    --uds-interactive-text-tertiary: var(--brand-interactive-dark-text-tertiary);
+    --uds-interactive-text-quaternary: var(--brand-interactive-dark-text-quaternary);
+    --uds-interactive-text-disabled: var(--system-neutrals-400);
+    --uds-interactive-text-destructive: var(--system-white);
+
+    --uds-interactive-icon-primary: var(--brand-interactive-dark-text-primary);
+    --uds-interactive-icon-secondary: var(--brand-interactive-dark-text-secondary);
+    --uds-interactive-icon-tertiary: var(--brand-interactive-dark-text-tertiary);
+    --uds-interactive-icon-quaternary: var(--brand-interactive-dark-text-quaternary);
+    --uds-interactive-icon-disabled: var(--system-neutrals-400);
+    --uds-interactive-icon-destructive: var(--system-white);
+}