@mich8060/unified-design-system 0.1.10

package/src/styles/tokens.css

@@ -0,0 +1,1463 @@
+@charset "UTF-8";
+
+:root {
+    --uds-font-family:
+        "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+        "Helvetica Neue", Arial;
+    --uds-font-weight: 400;
+    --uds-font-weight-medium: 500;
+    --uds-font-weight-semibold: 600;
+    --uds-font-weight-bold: 700;
+    --uds-font-size-12: 12px;
+    --uds-font-size-14: 14px;
+    --uds-font-size-16: 16px;
+    --uds-font-size-18: 18px;
+    --uds-font-size-20: 20px;
+    --uds-font-size-24: 24px;
+    --uds-font-size-28: 28px;
+    --uds-font-size-32: 32px;
+    --uds-font-size-36: 36px;
+    --uds-font-size-48: 48px;
+    --uds-font-size-60: 60px;
+    --uds-font-size-72: 72px;
+    --uds-font-size-96: 96px;
+    --uds-font-size-128: 128px;
+    --uds-line-12: 16px;
+    --uds-line-14: 20px;
+    --uds-line-16: 24px;
+    --uds-line-18: 27px;
+    --uds-line-20: 28px;
+    --uds-line-24: 32px;
+    --uds-line-28: 36px;
+    --uds-line-32: 40px;
+    --uds-line-36: 48px;
+    --uds-line-40: 40px;
+    --uds-line-48: 64px;
+    --uds-line-60: 80px;
+    --uds-line-72: 96px;
+    --uds-line-96: 128px;
+    --uds-line-128: 160px;
+    --uds-lhu-12: 1.333;
+    --uds-lhu-14: 1.429;
+    --uds-lhu-16: 1.5;
+    --uds-lhu-20: 1.4;
+    --uds-lhu-24: 1.333;
+    --uds-lhu-32: 1.25;
+    --uds-label-12-line: var(--uds-line-12);
+    --uds-label-16-line: var(--uds-line-16);
+    --uds-label-20-line: var(--uds-line-20);
+    --uds-label-24-line: var(--uds-line-24);
+    --uds-lhu-label-12: var(--uds-lhu-12);
+    --uds-lhu-label-16: var(--uds-lhu-16);
+    --uds-lhu-label-20: var(--uds-lhu-20);
+    --uds-lhu-label-24: var(--uds-lhu-24);
+    --uds-paragraph-12-size: var(--uds-font-size-12);
+    --uds-paragraph-16-size: var(--uds-font-size-16);
+    --uds-paragraph-20-size: var(--uds-font-size-20);
+    --uds-paragraph-24-size: var(--uds-font-size-24);
+    --uds-paragraph-12-line: 18px;
+    --uds-paragraph-16-line: 26px;
+    --uds-paragraph-20-line: 30px;
+    --uds-paragraph-24-line: 36px;
+    --uds-lhu-body-12: 1.5;
+    --uds-lhu-body-16: 1.625;
+    --uds-lhu-body-20: 1.5;
+    --uds-lhu-body-24: 1.5;
+    --uds-line-heading-20: var(--uds-line-32);
+    --uds-line-heading-24: var(--uds-line-32);
+    --uds-line-heading-32: var(--uds-line-40);
+    --uds-lhu-heading-20: 1.6;
+    --uds-lhu-heading-24: 1.333;
+    --uds-lhu-heading-32: 1.25;
+    --uds-letter-spacing-tight: -0.02em;
+    --uds-letter-spacing-medium: -0.01em;
+    --uds-letter-spacing-normal: 0em;
+    --uds-letter-spacing-loose: 0.01em;
+}
+
+/* Core Styles */
+:root {
+    /* Animation */
+    --uds-animation-duration-100: 100msms;
+    --uds-animation-duration-200: 200msms;
+    --uds-animation-duration-300: 300msms;
+    --uds-animation-duration-500: 500msms;
+    --uds-animation-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    --uds-animation-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+    --uds-animation-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --uds-animation-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    /* Blur */
+    --uds-blur-2xl: 40px;
+    /* Border Width */
+    --uds-border-width-1: 1px;
+    --uds-border-width-2: 2px;
+    --uds-border-width-4: 4px;
+    --uds-border-width-6: 6px;
+    --uds-border-width-none: 0px;
+    /* Focus Ring */
+    --uds-focus-ring-border: #2563ec;
+    --uds-focus-ring-offset: 2px;
+    --uds-focus-ring-width: 2px;
+    /* Cursor */
+    --uds-cursor-disabled: not-allowed;
+    --uds-cursor-drag: grab;
+    --uds-cursor-dragging: grabbing;
+    --uds-cursor-interactive: pointer;
+    /* Elevation */
+    --uds-elevation-base: 0px;
+    --uds-elevation-dropdown: 500px;
+    --uds-elevation-menu: 1000px;
+    --uds-elevation-modal: 1300px;
+    --uds-elevation-overlay: 1100px;
+    --uds-elevation-sticky: 100px;
+    --uds-elevation-toast: 1400px;
+    --uds-elevation-tooltip: 1500px;
+    /* Gap */
+    --uds-gap-0: 0px;
+    --uds-gap-2: 2px;
+    --uds-gap-4: 4px;
+    --uds-gap-8: 8px;
+    --uds-gap-12: 12px;
+    --uds-gap-16: 16px;
+    --uds-gap-24: 24px;
+    --uds-gap-32: 32px;
+    /* Border Radius */
+    --uds-radius-0: 0px;
+    --uds-radius-2: 2px;
+    --uds-radius-4: 4px;
+    --uds-radius-6: 6px;
+    --uds-radius-8: 8px;
+    --uds-radius-12: 12px;
+    --uds-radius-16: 16px;
+    --uds-radius-20: 20px;
+    --uds-radius-24: 24px;
+    --uds-radius-9999: 9999px;
+    /* Sizing */
+    --uds-sizing-12: 12px;
+    --uds-sizing-16: 16px;
+    --uds-sizing-20: 20px;
+    --uds-sizing-24: 24px;
+    --uds-sizing-32: 32px;
+    --uds-sizing-40: 40px;
+    --uds-sizing-48: 48px;
+    /* Spacing */
+    --uds-spacing-0: 0px;
+    --uds-spacing-2: 2px;
+    --uds-spacing-4: 4px;
+    --uds-spacing-6: 6px;
+    --uds-spacing-8: 8px;
+    --uds-spacing-10: 10px;
+    --uds-spacing-12: 12px;
+    --uds-spacing-14: 14px;
+    --uds-spacing-16: 16px;
+    --uds-spacing-18: 18px;
+    --uds-spacing-24: 24px;
+    --uds-spacing-32: 32px;
+    --uds-spacing-48: 48px;
+    --uds-spacing-64: 64px;
+    --uds-spacing-80: 80px;
+    /* Container Sizes */
+    --uds-container-xs: 320px;
+    --uds-container-sm: 640px;
+    --uds-container-md: 768px;
+    --uds-container-lg: 1024px;
+    --uds-container-xl: 1280px;
+    --uds-container-2xl: 1600px;
+    --uds-container-narrow: 512px;
+    --uds-container-prose: 640px;
+    --uds-container-content: 960px;
+    --uds-container-wide: 1440px;
+    /* Aspect Ratio */
+    --uds-aspect-ratio-21-9: 21/9;
+    --uds-aspect-ratio-3-2: 3/2;
+    --uds-aspect-ratio-4-3: 4/3;
+    --uds-aspect-ratio-auto: auto;
+    --uds-aspect-ratio-portrait: 3/4;
+    --uds-aspect-ratio-square: 1/1;
+    --uds-aspect-ratio-video: 16/9;
+}
+
+:root {
+    /* Figma now provides flattened UDS color tokens; brand indirection removed. */
+    /* Brand Colors - Primary */
+    --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: #009add;
+    --uds-color-primary-600: #008dcf;
+    --uds-color-primary-700: #0c6bb0;
+    --uds-color-primary-800: #006aa8;
+    --uds-color-primary-900: #004b88;
+    /* Brand Colors - Secondary */
+    --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: #f2821f;
+    --uds-color-secondary-600: #e36613;
+    --uds-color-secondary-700: #bc4d12;
+    --uds-color-secondary-800: #963e16;
+    --uds-color-secondary-900: #793515;
+    /* Brand Colors - Tertiary */
+    --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: #295d8b;
+    --uds-color-tertiary-600: #215583;
+    --uds-color-tertiary-700: #174b77;
+    --uds-color-tertiary-800: #12416b;
+    --uds-color-tertiary-900: #0f3152;
+    /* Brand Colors - Quaternary */
+    --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: #fbb03a;
+    --uds-color-quaternary-600: #c3841c;
+    --uds-color-quaternary-700: #a26e1b;
+    --uds-color-quaternary-800: #845c1c;
+    --uds-color-quaternary-900: #6d4d1a;
+    /* Accent Colors - Amber */
+    --uds-color-accent-amber-25: #fffbeb;
+    --uds-color-accent-amber-50: #fef3c7;
+    --uds-color-accent-amber-100: #fde68a;
+    --uds-color-accent-amber-200: #fcd34d;
+    --uds-color-accent-amber-300: #fbc02d;
+    --uds-color-accent-amber-400: #fbbf24;
+    --uds-color-accent-amber-500: #f59e0b;
+    --uds-color-accent-amber-600: #d97706;
+    --uds-color-accent-amber-700: #b45309;
+    --uds-color-accent-amber-800: #92400e;
+    --uds-color-accent-amber-900: #78350f;
+    --uds-color-accent-amber-1000: #5f2a09;
+    /* Accent Colors - Aqua */
+    --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: #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-aqua-1000: #0a2e2c;
+    /* Accent Colors - Blue */
+    --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: #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-blue-1000: #182e6f;
+    /* Accent Colors - Cyan */
+    --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: #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-cyan-1000: #113f4f;
+    /* Accent Colors - Emerald */
+    --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: #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-emerald-1000: #043d2f;
+    /* Accent Colors - Fuchsia */
+    --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: #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-fuchsia-1000: #59145d;
+    /* Accent Colors - Green */
+    --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: #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-green-1000: #104224;
+    /* Accent Colors - Indigo */
+    --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: #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-indigo-1000: #272467;
+    /* Accent Colors - Lime */
+    --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: #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-lime-1000: #2b420f;
+    /* Accent Colors - Magenta */
+    --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: #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-magenta-1000: #6b1235;
+    /* Accent Colors - Orange */
+    --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: #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-orange-1000: #641c0c;
+    /* Accent Colors - Purple */
+    --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: #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-purple-1000: #45166b;
+    /* Accent Colors - Red */
+    --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: #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-red-1000: #651718;
+    /* Accent Colors - Rose */
+    --uds-color-accent-rose-25: #fff3f3;
+    --uds-color-accent-rose-50: #fff1f1;
+    --uds-color-accent-rose-100: #fee4e7;
+    --uds-color-accent-rose-200: #fecdd3;
+    --uds-color-accent-rose-300: #fea4b0;
+    --uds-color-accent-rose-400: #fb7286;
+    --uds-color-accent-rose-500: #f43f5e;
+    --uds-color-accent-rose-600: #e21d48;
+    --uds-color-accent-rose-700: #be113c;
+    --uds-color-accent-rose-800: #9f133a;
+    --uds-color-accent-rose-900: #891336;
+    --uds-color-accent-rose-1000: #6d0f2b;
+    /* Accent Colors - Sky */
+    --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: #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-sky-1000: #0c4a6f;
+    /* Accent Colors - Violet */
+    --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: #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-violet-1000: #3d1777;
+    /* Accent Colors - Yellow */
+    --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-accent-yellow-1000: #5b320e;
+    --uds-color-black: #111111;
+    --uds-color-white: #ffffff;
+    --uds-color-transparent: rgba(255, 255, 255, 0.0099999998);
+    --uds-color-neutrals-25: #fafbfc;
+    --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-neutrals-1000: #0d1320;
+    --uds-system-action-primary: var(--uds-color-accent-blue-600);
+    --uds-system-action-secondary: var(--uds-color-accent-blue-400);
+    --uds-system-action-tertiary: var(--uds-color-accent-blue-200);
+    --uds-system-action-quaternary: var(--uds-color-accent-blue-50);
+    --uds-system-constructive-primary: var(--uds-color-accent-green-600);
+    --uds-system-constructive-secondary: var(--uds-color-accent-green-400);
+    --uds-system-constructive-tertiary: var(--uds-color-accent-green-300);
+    --uds-system-constructive-quaternary: var(--uds-color-accent-green-50);
+    --uds-system-destructive-primary: var(--uds-color-accent-red-600);
+    --uds-system-destructive-secondary: var(--uds-color-accent-red-400);
+    --uds-system-destructive-tertiary: var(--uds-color-accent-red-200);
+    --uds-system-destructive-quaternary: var(--uds-color-accent-red-50);
+    --uds-system-warning-primary: var(--uds-color-accent-yellow-600);
+    --uds-system-warning-secondary: var(--uds-color-accent-yellow-400);
+    --uds-system-warning-tertiary: var(--uds-color-accent-yellow-100);
+    --uds-system-warning-quaternary: var(--uds-color-accent-yellow-50);
+    /* Surface Colors */
+    --uds-surface-primary: var(--uds-color-white);
+    --uds-surface-secondary: var(--uds-color-neutrals-50);
+    --uds-surface-tertiary: var(--uds-color-neutrals-100);
+    --uds-surface-quaternary: var(--uds-color-neutrals-200);
+    --uds-surface-disabled: var(--uds-color-neutrals-100);
+    --uds-surface-inverse: var(--uds-color-black);
+    --uds-surface-transparent: var(--uds-color-transparent);
+    --uds-surface-brand-primary: var(--uds-color-primary-50);
+    --uds-surface-brand-secondary: var(--uds-color-primary-400);
+    --uds-surface-brand-tertiary: var(--uds-color-primary-700);
+    --uds-surface-brand-quaternary: var(--uds-color-primary-900);
+    /* Border Colors */
+    --uds-border-primary: var(--uds-color-neutrals-300);
+    --uds-border-secondary: var(--uds-color-neutrals-200);
+    --uds-border-tertiary: var(--uds-color-neutrals-100);
+    --uds-border-quaternary: var(--uds-color-neutrals-300);
+    --uds-border-disabled: var(--uds-color-neutrals-300);
+    --uds-border-transparent: var(--uds-color-transparent);
+    --uds-border-inverse: var(--uds-color-white);
+    --uds-border-brand-primary: var(--uds-color-primary-500);
+    --uds-border-brand-secondary: var(--uds-color-primary-100);
+    --uds-border-brand-tertiary: var(--uds-color-primary-700);
+    --uds-border-brand-quaternary: var(--uds-color-primary-900);
+    /* Button Colors - Surface */
+    --uds-button-surface-primary-default: var(--uds-color-primary-600);
+    --uds-button-surface-primary-hover: var(--uds-color-primary-700);
+    --uds-button-surface-primary-destructive: var(--uds-color-accent-red-600);
+    --uds-button-surface-primary-disabled: var(--uds-color-neutrals-200);
+    --uds-button-surface-secondary-default: var(--uds-color-primary-50);
+    --uds-button-surface-secondary-hover: var(--uds-color-primary-100);
+    /* Button Colors - Border */
+    --uds-button-border-primary-default: var(--uds-color-primary-600);
+    --uds-button-border-primary-hover: var(--uds-color-primary-700);
+    --uds-button-border-primary-destructive: var(--uds-color-accent-red-600);
+    --uds-button-border-primary-disabled: var(--uds-color-neutrals-300);
+    --uds-button-border-secondary-default: var(--uds-color-primary-50);
+    --uds-button-border-secondary-hover: var(--uds-color-primary-100);
+    --uds-button-icons-primary: var(--uds-color-white);
+    --uds-button-icons-secondary: var(--uds-color-black);
+    --uds-button-icons-tertiary: var(--uds-color-primary-600);
+    --uds-button-icons-quaternary: var(--uds-color-primary-700);
+    --uds-button-icons-disabled: var(--uds-color-neutrals-400);
+    --uds-button-text-default: var(--uds-color-white);
+    --uds-button-text-secondary: var(--uds-color-black);
+    --uds-button-text-tertiary: var(--uds-color-primary-600);
+    --uds-button-text-quaternary: var(--uds-color-primary-700);
+    --uds-button-text-disabled: var(--uds-color-neutrals-400);
+    /* Icon Colors */
+    --uds-icon-primary: var(--uds-color-neutrals-800);
+    --uds-icon-secondary: var(--uds-color-neutrals-600);
+    --uds-icon-tertiary: var(--uds-color-neutrals-500);
+    --uds-icon-quaternary: var(--uds-color-neutrals-300);
+    --uds-icon-disabled: var(--uds-color-neutrals-400);
+    --uds-icon-placeholder: var(--uds-color-neutrals-400);
+    --uds-icon-inverse: var(--uds-color-white);
+    --uds-icon-brand-primary: var(--uds-color-primary-500);
+    --uds-icon-brand-secondary: var(--uds-color-primary-50);
+    --uds-icon-brand-tertiary: var(--uds-color-primary-700);
+    --uds-icon-brand-quaternary: var(--uds-color-primary-900);
+    --uds-icon-link-primary-default: var(--uds-color-sky-600);
+    --uds-icon-link-primary-hover: var(--uds-color-sky-800);
+    --uds-icon-link-primary-active: var(--uds-color-sky-800);
+    --uds-icon-link-primary-visited: var(--uds-color-sky-800);
+    --uds-icon-link-secondary-default: var(--uds-color-black);
+    --uds-icon-link-secondary-hover: var(--uds-color-neutrals-700);
+    --uds-icon-link-secondary-active: var(--uds-color-black);
+    --uds-icon-link-secondary-visited: var(--uds-color-neutrals-500);
+    /* Input Colors */
+    --uds-input-surface: var(--uds-color-neutrals-50);
+    --uds-input-border: var(--uds-color-neutrals-100);
+    /* Text Colors */
+    --uds-text-primary: var(--uds-color-neutrals-800);
+    --uds-text-secondary: var(--uds-color-neutrals-600);
+    --uds-text-tertiary: var(--uds-color-neutrals-500);
+    --uds-text-quaternary: var(--uds-color-neutrals-300);
+    --uds-text-disabled: var(--uds-color-neutrals-400);
+    --uds-text-placeholder: var(--uds-color-neutrals-400);
+    --uds-text-inverse: var(--uds-color-white);
+    --uds-text-brand-primary: var(--uds-color-primary-500);
+    --uds-text-brand-secondary: var(--uds-color-primary-50);
+    --uds-text-brand-tertiary: var(--uds-color-primary-700);
+    --uds-text-brand-quaternary: var(--uds-color-primary-900);
+    --uds-text-link-primary-default: var(--uds-color-sky-600);
+    --uds-text-link-primary-hover: var(--uds-color-sky-800);
+    --uds-text-link-primary-active: var(--uds-color-sky-800);
+    --uds-text-link-primary-visited: var(--uds-color-sky-800);
+    --uds-text-link-secondary-default: var(--uds-color-black);
+    --uds-text-link-secondary-hover: var(--uds-color-neutrals-700);
+    --uds-text-link-secondary-active: var(--uds-color-black);
+    --uds-text-link-secondary-visited: var(--uds-color-neutrals-500);
+    --uds-brands-comphealth-orange: #ef681f;
+    --uds-brands-comphealth-purple: #644d7b;
+    --uds-brands-comphealth-white: #ffffff;
+    --uds-brands-connect-dark-blue: #0075c9;
+    --uds-brands-connect-light-blue: #00a7e1;
+    --uds-brands-locumsmart-black: #231f20;
+    --uds-brands-locumsmart-blue: #00a7e0;
+    --uds-brands-locumsmart-orange: #f58220;
+    --uds-brands-modio-black: #202938;
+    --uds-brands-modio-blue: #36a5ce;
+    --uds-brands-ds-black: #111111;
+    --uds-brands-ds-purple: #ffffff;
+    --uds-brands-weatherby-red: #ff4338;
+    --uds-brands-weatherby-teal: #00a385;
+    --uds-brands-weatherby-white: #ffffff;
+    --uds-brands-wireframe-black: #3d3935;
+    --uds-brands-wireframe-blue: #00a7e1;
+    --uds-brands-wireframe-green: #80bc00;
+    --uds-brands-wireframe-orange: #ff8300;
+    --uds-radius-none: 0px;
+    --uds-radius-2: 2px;
+    --uds-radius-4: 4px;
+    --uds-radius-6: 6px;
+    --uds-radius-8: 8px;
+    --uds-radius-12: 12px;
+    --uds-radius-16: 16px;
+    --uds-radius-20: 20px;
+    --uds-radius-24: 24px;
+    --uds-scrim-10: rgba(0, 0, 0, 0.1000000015);
+    --uds-scrim-30: rgba(0, 0, 0, 0.3000000119);
+    --uds-scrim-50: rgba(0, 0, 0, 0.5);
+    --uds-scrim-70: rgba(0, 0, 0, 0.6999999881);
+    --uds-scrim-90: rgba(0, 0, 0, 0.8999999762);
+    --uds-shadow-5: rgba(0, 0, 0, 0.0500000007);
+    --uds-shadow-8: rgba(0, 0, 0, 0.0799999982);
+    --uds-shadow-10: rgba(0, 0, 0, 0.1000000015);
+    --uds-shadow-12: rgba(0, 0, 0, 0.1199999973);
+    --uds-shadow-15: rgba(0, 0, 0, 0.150000006);
+    --uds-shadow-18: rgba(0, 0, 0, 0.1800000072);
+    --uds-shadow-25: rgba(0, 0, 0, 0.25);
+    --uds-user-designer: Michael;
+    --uds-user-first-initial: J;
+    --uds-user-fullname: Jane Doe;
+    --uds-user-initials: JD;
+    --uds-user-mode: Light;
+    --uds-user-name: Design System;
+    --uds-user-url: chghealthcare.com;
+    --uds-user-year: 2026;
+    /* Code Colors */
+    --uds-code-bg: var(--uds-color-neutrals-900);
+    --uds-code-class: var(--uds-color-accent-fuchsia-400);
+    --uds-code-comment: var(--uds-color-neutrals-500);
+    --uds-code-fg: var(--uds-color-neutrals-100);
+    --uds-code-function: var(--uds-color-accent-violet-400);
+    --uds-code-keyword: var(--uds-color-accent-sky-400);
+    --uds-code-number: var(--uds-color-accent-amber-400);
+    --uds-code-operator: var(--uds-color-accent-rose-400);
+    --uds-code-punctuation: var(--uds-color-neutrals-400);
+    --uds-code-string: var(--uds-color-accent-emerald-400);
+}
+
+[data-mode=dark] {
+    --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: #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: #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: #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: #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: #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: #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: #ead55f;
+    --uds-color-quaternary-600: #f1e796;
+    --uds-color-quaternary-700: #f8f3cb;
+    --uds-color-quaternary-800: #fdfbed;
+    --uds-color-quaternary-900: #fefdf6;
+    --uds-color-accent-amber-25: #5f2a09;
+    --uds-color-accent-amber-50: #78350f;
+    --uds-color-accent-amber-100: #92400e;
+    --uds-color-accent-amber-200: #b45309;
+    --uds-color-accent-amber-300: #d97706;
+    --uds-color-accent-amber-400: #f59e0b;
+    --uds-color-accent-amber-500: #fbbf24;
+    --uds-color-accent-amber-600: #fbc02d;
+    --uds-color-accent-amber-700: #fcd34d;
+    --uds-color-accent-amber-800: #fde68a;
+    --uds-color-accent-amber-900: #fef3c7;
+    --uds-color-accent-amber-1000: #fffbeb;
+    --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: #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-aqua-1000: #f0fdfa;
+    --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: #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-blue-1000: #f2f7ff;
+    --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: #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-cyan-1000: #effeff;
+    --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: #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-emerald-1000: #effdf7;
+    --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: #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-fuchsia-1000: #fef6ff;
+    --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: #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-green-1000: #f3fdf6;
+    --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: #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-indigo-1000: #f1f4fe;
+    --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: #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-lime-1000: #f7feeb;
+    --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: #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-magenta-1000: #fff5fb;
+    --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: #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-orange-1000: #fffbf7;
+    --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: #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-purple-1000: #fbf7ff;
+    --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: #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-red-1000: #fef4f4;
+    --uds-color-accent-rose-25: #6d0f2b;
+    --uds-color-accent-rose-50: #891336;
+    --uds-color-accent-rose-100: #9f133a;
+    --uds-color-accent-rose-200: #be113c;
+    --uds-color-accent-rose-300: #e21d48;
+    --uds-color-accent-rose-400: #f43f5e;
+    --uds-color-accent-rose-500: #fb7286;
+    --uds-color-accent-rose-600: #fea4b0;
+    --uds-color-accent-rose-700: #fecdd3;
+    --uds-color-accent-rose-800: #fee4e7;
+    --uds-color-accent-rose-900: #fff1f1;
+    --uds-color-accent-rose-1000: #fff3f3;
+    --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: #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-sky-1000: #f3faff;
+    --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: #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-violet-1000: #f7f5ff;
+    --uds-color-accent-yellow-25: #5b320e;
+    --uds-color-accent-yellow-50: #723f12;
+    --uds-color-accent-yellow-100: #854e0e;
+    --uds-color-accent-yellow-200: #a26208;
+    --uds-color-accent-yellow-300: #ca8a04;
+    --uds-color-accent-yellow-400: #e9b308;
+    --uds-color-accent-yellow-500: #facc15;
+    --uds-color-accent-yellow-600: #fde047;
+    --uds-color-accent-yellow-700: #fef08a;
+    --uds-color-accent-yellow-800: #fef9c3;
+    --uds-color-accent-yellow-900: #fefce8;
+    --uds-color-accent-yellow-1000: #fefcec;
+    --uds-color-black: #111111;
+    --uds-color-white: #ffffff;
+    --uds-color-transparent: rgba(255, 255, 255, 0.0099999998);
+    --uds-color-neutrals-25: #fafbfc;
+    --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-neutrals-1000: #0d1320;
+    --uds-system-action-primary: var(--uds-color-accent-blue-100);
+    --uds-system-action-secondary: var(--uds-color-accent-blue-200);
+    --uds-system-action-tertiary: var(--uds-color-accent-blue-400);
+    --uds-system-action-quaternary: var(--uds-color-accent-blue-600);
+    --uds-system-constructive-primary: var(--uds-color-accent-green-100);
+    --uds-system-constructive-secondary: var(--uds-color-accent-green-200);
+    --uds-system-constructive-tertiary: var(--uds-color-accent-green-400);
+    --uds-system-constructive-quaternary: var(--uds-color-accent-green-500);
+    --uds-system-destructive-primary: var(--uds-color-accent-red-200);
+    --uds-system-destructive-secondary: var(--uds-color-accent-red-300);
+    --uds-system-destructive-tertiary: var(--uds-color-accent-red-400);
+    --uds-system-destructive-quaternary: var(--uds-color-accent-red-600);
+    --uds-system-warning-primary: var(--uds-color-accent-yellow-100);
+    --uds-system-warning-secondary: var(--uds-color-accent-yellow-200);
+    --uds-system-warning-tertiary: var(--uds-color-accent-yellow-400);
+    --uds-system-warning-quaternary: var(--uds-color-accent-yellow-600);
+    --uds-surface-primary: var(--uds-color-black);
+    --uds-surface-secondary: var(--uds-color-neutrals-800);
+    --uds-surface-tertiary: var(--uds-color-neutrals-600);
+    --uds-surface-quaternary: var(--uds-color-neutrals-500);
+    --uds-surface-transparent: var(--uds-color-transparent);
+    --uds-surface-disabled: var(--uds-color-neutrals-500);
+    --uds-surface-inverse: var(--uds-color-white);
+    --uds-surface-brand-primary: var(--uds-color-primary-50);
+    --uds-surface-brand-secondary: var(--uds-color-primary-400);
+    --uds-surface-brand-tertiary: var(--uds-color-primary-700);
+    --uds-surface-brand-quaternary: var(--uds-color-primary-900);
+    --uds-border-primary: var(--uds-color-neutrals-500);
+    --uds-border-secondary: var(--uds-color-neutrals-400);
+    --uds-border-tertiary: var(--uds-color-neutrals-300);
+    --uds-border-quaternary: var(--uds-color-neutrals-200);
+    --uds-border-disabled: var(--uds-color-neutrals-400);
+    --uds-border-transparent: var(--uds-color-transparent);
+    --uds-border-inverse: var(--uds-color-white);
+    --uds-border-brand-primary: var(--uds-color-primary-500);
+    --uds-border-brand-secondary: var(--uds-color-primary-100);
+    --uds-border-brand-tertiary: var(--uds-color-primary-700);
+    --uds-border-brand-quaternary: var(--uds-color-primary-900);
+    --uds-button-surface-primary-default: var(--uds-color-primary-200);
+    --uds-button-surface-primary-hover: var(--uds-color-primary-400);
+    --uds-button-surface-primary-destructive: var(--uds-color-accent-red-300);
+    --uds-button-surface-primary-disabled: var(--uds-color-neutrals-600);
+    --uds-button-surface-secondary-default: var(--uds-color-neutrals-600);
+    --uds-button-surface-secondary-hover: var(--uds-color-neutrals-500);
+    --uds-button-border-primary-default: var(--uds-color-primary-200);
+    --uds-button-border-primary-hover: var(--uds-color-primary-400);
+    --uds-button-border-primary-destructive: var(--uds-color-accent-red-300);
+    --uds-button-border-primary-disabled: var(--uds-color-neutrals-500);
+    --uds-button-border-secondary-default: var(--uds-color-neutrals-600);
+    --uds-button-border-secondary-hover: var(--uds-color-neutrals-500);
+    --uds-button-text-default: var(--uds-color-white);
+    --uds-button-text-secondary: var(--uds-color-white);
+    --uds-button-text-tertiary: var(--uds-color-primary-600);
+    --uds-button-text-quaternary: var(--uds-color-primary-700);
+    --uds-button-text-disabled: var(--uds-color-neutrals-500);
+    --uds-button-icons-primary: var(--uds-color-white);
+    --uds-button-icons-secondary: var(--uds-color-white);
+    --uds-button-icons-tertiary: var(--uds-color-primary-600);
+    --uds-button-icons-quaternary: var(--uds-color-primary-700);
+    --uds-button-icons-disabled: var(--uds-color-neutrals-500);
+    --uds-icon-primary: var(--uds-color-white);
+    --uds-icon-secondary: var(--uds-color-neutrals-50);
+    --uds-icon-tertiary: var(--uds-color-neutrals-100);
+    --uds-icon-quaternary: var(--uds-color-neutrals-200);
+    --uds-icon-placeholder: var(--uds-color-neutrals-400);
+    --uds-icon-disabled: var(--uds-color-neutrals-500);
+    --uds-icon-inverse: var(--uds-color-black);
+    --uds-icon-brand-primary: var(--uds-color-primary-500);
+    --uds-icon-brand-secondary: var(--uds-color-primary-50);
+    --uds-icon-brand-tertiary: var(--uds-color-primary-700);
+    --uds-icon-brand-quaternary: var(--uds-color-primary-900);
+    --uds-icon-link-primary-default: var(--uds-color-primary-600);
+    --uds-icon-link-primary-hover: var(--uds-color-primary-800);
+    --uds-icon-link-primary-active: var(--uds-color-primary-800);
+    --uds-icon-link-primary-visited: var(--uds-color-primary-800);
+    --uds-icon-link-secondary-default: var(--uds-color-white);
+    --uds-icon-link-secondary-hover: var(--uds-color-neutrals-100);
+    --uds-icon-link-secondary-active: var(--uds-color-white);
+    --uds-icon-link-secondary-visited: var(--uds-color-neutrals-300);
+    --uds-input-surface: rgba(0, 0, 0, 0.2);
+    --uds-input-border: var(--uds-color-white);
+    --uds-text-primary: var(--uds-color-white);
+    --uds-text-secondary: var(--uds-color-neutrals-50);
+    --uds-text-tertiary: var(--uds-color-neutrals-100);
+    --uds-text-quaternary: var(--uds-color-neutrals-200);
+    --uds-text-placeholder: var(--uds-color-neutrals-400);
+    --uds-text-disabled: var(--uds-color-neutrals-400);
+    --uds-text-inverse: var(--uds-color-black);
+    --uds-text-brand-primary: var(--uds-color-primary-500);
+    --uds-text-brand-secondary: var(--uds-color-primary-50);
+    --uds-text-brand-tertiary: var(--uds-color-primary-700);
+    --uds-text-brand-quaternary: var(--uds-color-primary-900);
+    --uds-text-link-primary-default: var(--uds-color-primary-600);
+    --uds-text-link-primary-hover: var(--uds-color-primary-800);
+    --uds-text-link-primary-active: var(--uds-color-primary-800);
+    --uds-text-link-primary-visited: var(--uds-color-primary-400);
+    --uds-text-link-secondary-default: var(--uds-color-white);
+    --uds-text-link-secondary-hover: var(--uds-color-neutrals-200);
+    --uds-text-link-secondary-active: var(--uds-color-white);
+    --uds-text-link-secondary-visited: var(--uds-color-white);
+    --uds-scrim-10: rgba(249, 250, 252, 0.1);
+    --uds-scrim-30: rgba(249, 250, 252, 0.3);
+    --uds-scrim-50: rgba(249, 250, 252, 0.5);
+    --uds-scrim-70: rgba(249, 250, 252, 0.7);
+    --uds-scrim-90: rgba(249, 250, 252, 0.9);
+    --uds-shadow-5: rgba(249, 250, 252, 0.05);
+    --uds-shadow-8: rgba(249, 250, 252, 0.08);
+    --uds-shadow-10: rgba(249, 250, 252, 0.1);
+    --uds-shadow-12: rgba(249, 250, 252, 0.12);
+    --uds-shadow-15: rgba(249, 250, 252, 0.15);
+    --uds-shadow-18: rgba(249, 250, 252, 0.18);
+    --uds-shadow-25: rgba(249, 250, 252, 0.25);
+    /* Code Colors */
+    --uds-code-bg: var(--uds-color-neutrals-900);
+    --uds-code-class: var(--uds-color-accent-fuchsia-400);
+    --uds-code-comment: var(--uds-color-neutrals-500);
+    --uds-code-fg: var(--uds-color-neutrals-100);
+    --uds-code-function: var(--uds-color-accent-violet-400);
+    --uds-code-keyword: var(--uds-color-accent-sky-400);
+    --uds-code-number: var(--uds-color-accent-amber-400);
+    --uds-code-operator: var(--uds-color-accent-rose-400);
+    --uds-code-punctuation: var(--uds-color-neutrals-400);
+    --uds-code-string: var(--uds-color-accent-emerald-400);
+    --uds-brands-comphealth-orange: var(--uds-color-white);
+    --uds-brands-comphealth-purple: var(--uds-color-white);
+    --uds-brands-comphealth-white: var(--uds-color-black);
+    --uds-brands-connect-dark-blue: var(--uds-color-white);
+    --uds-brands-connect-light-blue: var(--uds-color-white);
+    --uds-brands-locumsmart-black: var(--uds-color-white);
+    --uds-brands-locumsmart-blue: var(--uds-color-white);
+    --uds-brands-locumsmart-orange: var(--uds-color-white);
+    --uds-brands-modio-black: var(--uds-color-white);
+    --uds-brands-modio-blue: var(--uds-color-white);
+    --uds-brands-ds-black: var(--uds-color-white);
+    --uds-brands-weatherby-red: var(--uds-color-white);
+    --uds-brands-weatherby-teal: var(--uds-color-white);
+    --uds-brands-weatherby-white: var(--uds-color-black);
+    --uds-brands-wireframe-black: var(--uds-color-white);
+    --uds-brands-wireframe-blue: var(--uds-color-white);
+    --uds-brands-wireframe-green: var(--uds-color-white);
+    --uds-brands-wireframe-orange: var(--uds-color-white);
+}
+
+[data-brand=comphealth] {
+    --uds-user-designer: Michael;
+    --uds-user-name: Design System;
+    --uds-user-url: chghealthcare.com;
+}
+
+[data-brand=modio] {
+    --uds-user-designer: Michael;
+    --uds-user-name: Modio;
+    --uds-user-url: modio.com;
+}
+
+[data-brand=locumsmart] {
+    --uds-user-designer: Michael;
+    --uds-user-name: Locumsmart;
+    --uds-user-url: locumsmart.com;
+}
+
+[data-brand=wireframe] {
+    --uds-button-color-primary-default: var(--uds-color-primary-500);
+    --uds-button-color-primary-hover: var(--uds-color-primary-600);
+    --uds-user-designer: Michael;
+    --uds-user-name: Wireframe;
+    --uds-user-url: chghealthcare.com;
+}
+
+[data-brand=connect] {
+    --uds-user-designer: Michael;
+    --uds-user-name: Connect;
+    --uds-user-url: connect.chghealthcare.com;
+}
+
+[data-brand=weatherby] {
+    --uds-button-color-primary-default: var(--uds-color-primary-700);
+    --uds-button-color-primary-hover: var(--uds-color-primary-500);
+    --uds-button-border-primary-default: var(--uds-color-primary-700);
+    --uds-button-border-primary-hover: var(--uds-color-primary-500);
+    --uds-user-designer: Michael;
+    --uds-user-name: Weatherby;
+    --uds-user-url: weatherby.com;
+}
+
+
+.uds-display-128 {
+    font-size: var(--uds-font-size-128);
+    line-height: var(--uds-line-128);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.03em;
+    text-transform: uppercase;
+}
+
+.uds-display-128-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-128-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-128-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-display-96 {
+    font-size: var(--uds-font-size-96);
+    line-height: var(--uds-line-96);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+}
+
+.uds-display-96-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-96-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-96-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-display-72 {
+    font-size: var(--uds-font-size-72);
+    line-height: var(--uds-line-72);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+}
+
+.uds-display-72-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-72-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-72-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-display-60 {
+    font-size: var(--uds-font-size-60);
+    line-height: var(--uds-line-60);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+}
+
+.uds-display-60-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-60-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-60-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-display-48 {
+    font-size: var(--uds-font-size-48);
+    line-height: var(--uds-line-48);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+}
+
+.uds-display-48-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-48-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-48-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-display-36 {
+    font-size: var(--uds-font-size-36);
+    line-height: var(--uds-line-36);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+}
+
+.uds-display-36-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-display-36-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-display-36-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-heading-32 {
+    font-size: var(--uds-font-size-32);
+    line-height: var(--uds-line-32);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0em;
+}
+
+.uds-heading-32-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-heading-32-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-heading-32-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-heading-28 {
+    font-size: var(--uds-font-size-28);
+    line-height: var(--uds-line-28);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0em;
+}
+
+.uds-heading-28-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-heading-28-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-heading-28-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-heading-24 {
+    font-size: var(--uds-font-size-24);
+    line-height: var(--uds-line-24);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0em;
+}
+
+.uds-heading-24-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-heading-24-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-heading-24-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-body-20 {
+    font-size: var(--uds-font-size-20);
+    line-height: var(--uds-line-20);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-body-20-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-body-20-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-body-20-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-body-16 {
+    font-size: var(--uds-font-size-16);
+    line-height: var(--uds-line-16);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-body-16-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-body-16-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-body-16-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-body-14 {
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0em;
+}
+
+.uds-body-14-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-body-14-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-body-14-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-body-12 {
+    font-size: var(--uds-font-size-12);
+    line-height: var(--uds-line-12);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-body-12-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-body-12-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-body-12-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-paragraph-20 {
+    font-size: var(--uds-font-size-20);
+    line-height: var(--uds-line-20);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-paragraph-20-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-20-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-20-bold {
+    font-weight: var(--uds-font-weight-bold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-18 {
+    font-size: var(--uds-font-size-18);
+    line-height: var(--uds-line-18);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-paragraph-18-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-18-semi-bold {
+    font-weight: var(--uds-font-weight-semibold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-18-bold {
+    font-weight: var(--uds-font-weight-bold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-16 {
+    font-size: var(--uds-font-size-16);
+    line-height: var(--uds-line-16);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-paragraph-16-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-16-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-16-bold {
+    font-weight: var(--uds-font-weight-bold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-14 {
+    font-size: var(--uds-font-size-14);
+    line-height: var(--uds-line-14);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-14-medium {
+    font-weight: var(--uds-font-weight-medium);
+}
+
+.uds-paragraph-14-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+}
+
+.uds-paragraph-14-bold {
+    font-weight: var(--uds-font-weight-bold);
+}
+
+.uds-paragraph-12 {
+    font-size: var(--uds-font-size-12);
+    line-height: var(--uds-line-12);
+    font-family: var(--uds-font-family);
+    font-weight: var(--uds-font-weight);
+    letter-spacing: 0px;
+}
+
+.uds-paragraph-12-medium {
+    font-weight: var(--uds-font-weight-medium);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-12-semibold {
+    font-weight: var(--uds-font-weight-semibold);
+    letter-spacing: 0em;
+}
+
+.uds-paragraph-12-bold {
+    font-weight: var(--uds-font-weight-bold);
+    letter-spacing: 0em;
+}