@innovaccer/design-system 4.23.0 → 4.25.0

package/css/dist/index.css

@@ -23,42 +23,42 @@
   --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
 
   /* Red */
-  --color-red-100: #fff2f0;
-  --color-red-200: #ffddd6;
-  --color-red-300: #ffccc2;
-  --color-red-400: #ffb7a8;
-  --color-red-500: #fe9e8b;
-  --color-red-600: #fb866f;
-  --color-red-700: #f86b4f;
-  --color-red-800: #f54f2e;
-  --color-red-900: #f5310a;
-  --color-red-1000: #d62400;
-  --color-red-1100: #ad1d00;
-  --color-red-1200: #851600;
-  --color-red-1300: #611000;
-  --color-red-1400: #470c00;
-  --color-red-1000-4a: rgba(214, 36, 0, 0.04);
-  --color-red-1000-16a: rgba(214, 36, 0, 0.16);
-  --color-red-1200-16a: rgba(133, 22, 0, 0.16);
+  --color-red-100: #fff7f5;
+  --color-red-200: #ffe1db;
+  --color-red-300: #ffd4cc;
+  --color-red-400: #fec0b4;
+  --color-red-500: #fcac9c;
+  --color-red-600: #f49480;
+  --color-red-700: #ed765e;
+  --color-red-800: #e45b3f;
+  --color-red-900: #df3011;
+  --color-red-1000: #bd1c00;
+  --color-red-1100: #9e200a;
+  --color-red-1200: #791a06;
+  --color-red-1300: #5c1305;
+  --color-red-1400: #3f0e03;
+  --color-red-1000-4a: rgba(189, 28, 0, 0.04);
+  --color-red-1000-16a: rgba(189, 28, 0, 0.16);
+  --color-red-1200-16a: rgba(121, 26, 6, 0.16);
 
   /* Green */
-  --color-green-100: #deffdb;
-  --color-green-200: #c4fcc0;
-  --color-green-300: #a0f69d;
-  --color-green-400: #88ee87;
-  --color-green-500: #6be16d;
-  --color-green-600: #4fcf55;
-  --color-green-700: #27b933;
-  --color-green-800: #07a61a;
-  --color-green-900: #008f11;
-  --color-green-1000: #007a0e;
-  --color-green-1100: #00660c;
-  --color-green-1200: #00520a;
-  --color-green-1300: #004208;
-  --color-green-1400: #002e05;
-  --color-green-1000-4a: rgba(0, 122, 14, 0.04);
-  --color-green-1000-16a: rgba(0, 122, 14, 0.16);
-  --color-green-1200-16a: rgba(0, 82, 10, 0.16);
+  --color-green-100: #f1f9f0;
+  --color-green-200: #dcf0db;
+  --color-green-300: #cbe8c9;
+  --color-green-400: #b6dfb3;
+  --color-green-500: #9dd49b;
+  --color-green-600: #7ec57d;
+  --color-green-700: #5eb55e;
+  --color-green-800: #3aa63c;
+  --color-green-900: #009900;
+  --color-green-1000: #008000;
+  --color-green-1100: #006b00;
+  --color-green-1200: #005200;
+  --color-green-1300: #003d04;
+  --color-green-1400: #002904;
+  --color-green-1000-4a: rgba(0, 128, 0, 0.04);
+  --color-green-1000-16a: rgba(0, 128, 0, 0.16);
+  --color-green-1200-16a: rgba(0, 82, 0, 0.16);
 
   /* Yellow */
   --color-yellow-100: #fff9e5;
@@ -81,138 +81,138 @@
   --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
 
   /* Orange */
-  --color-orange-100: #fff2db;
-  --color-orange-200: #ffeccc;
-  --color-orange-300: #ffe0ad;
-  --color-orange-400: #ffce85;
-  --color-orange-500: #ffba61;
-  --color-orange-600: #ffaf4d;
-  --color-orange-700: #ffa238;
-  --color-orange-800: #ff931f;
-  --color-orange-900: #ff8000;
-  --color-orange-1000: #e56f00;
-  --color-orange-1100: #cc5f00;
-  --color-orange-1200: #b24d00;
-  --color-orange-1300: #7a2f00;
-  --color-orange-1400: #5c2200;
-  --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
-  --color-orange-1000-16a: rgba(229, 111, 0, 0.16);
+  --color-orange-100: #ffeed1;
+  --color-orange-200: #ffe8c2;
+  --color-orange-300: #ffdca3;
+  --color-orange-400: #ffca7a;
+  --color-orange-500: #ffb657;
+  --color-orange-600: #ffa333;
+  --color-orange-700: #ff9114;
+  --color-orange-800: #eb7900;
+  --color-orange-900: #d66c00;
+  --color-orange-1000: #bd5b00;
+  --color-orange-1100: #a34c00;
+  --color-orange-1200: #8a3b00;
+  --color-orange-1300: #6b2900;
+  --color-orange-1400: #4d1c00;
+  --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
+  --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
 
   /* Violet */
-  --color-violet-100: #f7f0ff;
-  --color-violet-200: #ebdbff;
-  --color-violet-300: #dec7ff;
-  --color-violet-400: #d3b4fd;
-  --color-violet-500: #c7a0fd;
-  --color-violet-600: #b689fb;
-  --color-violet-700: #a771f9;
-  --color-violet-800: #9657f4;
-  --color-violet-900: #823aee;
-  --color-violet-1000: #6f21e4;
-  --color-violet-1100: #601ec2;
-  --color-violet-1200: #531ba7;
-  --color-violet-1300: #3e0e8b;
-  --color-violet-1400: #2b0868;
-  --color-violet-1000-16a: rgba(111, 33, 228, 0.16);
+  --color-violet-100: #faf6fe;
+  --color-violet-200: #f0e7fd;
+  --color-violet-300: #e4d5fb;
+  --color-violet-400: #dcc7fa;
+  --color-violet-500: #cfb4f8;
+  --color-violet-600: #c0a0f3;
+  --color-violet-700: #ac87ee;
+  --color-violet-800: #9e72e9;
+  --color-violet-900: #8854e8;
+  --color-violet-1000: #6f47cd;
+  --color-violet-1100: #5b3ba5;
+  --color-violet-1200: #462d80;
+  --color-violet-1300: #322361;
+  --color-violet-1400: #211844;
+  --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
 
   /* Indigo */
-  --color-indigo-100: #f2f3fd;
-  --color-indigo-200: #daddfb;
-  --color-indigo-300: #c8ccf9;
-  --color-indigo-400: #bbc0f7;
-  --color-indigo-500: #a8aff5;
-  --color-indigo-600: #919af2;
-  --color-indigo-700: #7d86ed;
-  --color-indigo-800: #6873e8;
-  --color-indigo-900: #5460e3;
-  --color-indigo-1000: #3b48de;
-  --color-indigo-1100: #1f2ed6;
-  --color-indigo-1200: #1422b8;
-  --color-indigo-1300: #0d1677;
-  --color-indigo-1400: #0b1365;
-  --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);
+  --color-indigo-100: #f5f6ff;
+  --color-indigo-200: #e5e8ff;
+  --color-indigo-300: #d6daff;
+  --color-indigo-400: #c7ccff;
+  --color-indigo-500: #b3baff;
+  --color-indigo-600: #9faafe;
+  --color-indigo-700: #8993fa;
+  --color-indigo-800: #7380f7;
+  --color-indigo-900: #5a67f6;
+  --color-indigo-1000: #4256d7;
+  --color-indigo-1100: #2f4aac;
+  --color-indigo-1200: #223987;
+  --color-indigo-1300: #192b66;
+  --color-indigo-1400: #101c46;
+  --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
 
   /* Lime */
-  --color-lime-100: #ecffd1;
-  --color-lime-200: #defcb0;
-  --color-lime-300: #cbf98b;
-  --color-lime-400: #b9f466;
-  --color-lime-500: #a7ef43;
-  --color-lime-600: #9aeb28;
-  --color-lime-700: #8ce114;
-  --color-lime-800: #7ecf0c;
-  --color-lime-900: #70bc06;
-  --color-lime-1000: #62a701;
-  --color-lime-1100: #508901;
-  --color-lime-1200: #3e6b00;
-  --color-lime-1300: #294600;
-  --color-lime-1400: #1b2e00;
-  --color-lime-900-16a: rgba(112, 188, 6, 0.16);
-  --color-lime-1000-16a: rgba(98, 167, 1, 0.16);
+  --color-lime-100: #f5faed;
+  --color-lime-200: #e4efd3;
+  --color-lime-300: #d5e6bb;
+  --color-lime-400: #c5dc9e;
+  --color-lime-500: #b2d07d;
+  --color-lime-600: #9dc057;
+  --color-lime-700: #87b018;
+  --color-lime-800: #779d00;
+  --color-lime-900: #688900;
+  --color-lime-1000: #577400;
+  --color-lime-1100: #476000;
+  --color-lime-1200: #364900;
+  --color-lime-1300: #283800;
+  --color-lime-1400: #1a2700;
+  --color-lime-900-16a: rgba(104, 137, 0, 0.16);
+  --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
 
   /* Cyan */
-  --color-cyan-100: #dbfaff;
-  --color-cyan-200: #bdf5ff;
-  --color-cyan-300: #99eeff;
-  --color-cyan-400: #8beafd;
-  --color-cyan-500: #7ee6fb;
-  --color-cyan-600: #68def8;
-  --color-cyan-700: #52d6f4;
-  --color-cyan-800: #31cbf2;
-  --color-cyan-900: #15c3ef;
-  --color-cyan-1000: #0fabd2;
-  --color-cyan-1100: #0589ad;
-  --color-cyan-1200: #006280;
-  --color-cyan-1300: #003f52;
-  --color-cyan-1400: #00232e;
+  --color-cyan-100: #eefafc;
+  --color-cyan-200: #cff1f7;
+  --color-cyan-300: #b6e8f2;
+  --color-cyan-400: #96dfee;
+  --color-cyan-500: #6ed3e7;
+  --color-cyan-600: #33c4e1;
+  --color-cyan-700: #00b2d6;
+  --color-cyan-800: #009fc7;
+  --color-cyan-900: #008cb3;
+  --color-cyan-1000: #007599;
+  --color-cyan-1100: #006080;
+  --color-cyan-1200: #004766;
+  --color-cyan-1300: #003952;
+  --color-cyan-1400: #002738;
 
   /* Sea */
-  --color-sea-100: #ddfdfa;
-  --color-sea-200: #c4f8f3;
-  --color-sea-300: #a5f3ec;
-  --color-sea-400: #8ceee7;
-  --color-sea-500: #73e7e0;
-  --color-sea-600: #5ce0d7;
-  --color-sea-700: #45d9cf;
-  --color-sea-800: #23d7cb;
-  --color-sea-900: #16c0b7;
-  --color-sea-1000: #0ca79f;
-  --color-sea-1100: #04867f;
-  --color-sea-1200: #00615c;
-  --color-sea-1300: #00423f;
-  --color-sea-1400: #002927;
+  --color-sea-100: #effaf9;
+  --color-sea-200: #cff2ef;
+  --color-sea-300: #b8eae5;
+  --color-sea-400: #98e2dc;
+  --color-sea-500: #6fd8d2;
+  --color-sea-600: #2fcac0;
+  --color-sea-700: #00b8ae;
+  --color-sea-800: #00a89d;
+  --color-sea-900: #008f88;
+  --color-sea-1000: #007a74;
+  --color-sea-1100: #00665f;
+  --color-sea-1200: #004d47;
+  --color-sea-1300: #003d3a;
+  --color-sea-1400: #002926;
 
   /* Magenta */
-  --color-magenta-100: #fff0f5;
-  --color-magenta-200: #ffdbe8;
-  --color-magenta-300: #ffc2d8;
-  --color-magenta-400: #ffadcb;
-  --color-magenta-500: #ff99c0;
-  --color-magenta-600: #ff85b4;
-  --color-magenta-700: #fe71a7;
-  --color-magenta-800: #fc5a98;
-  --color-magenta-900: #fa428c;
-  --color-magenta-1000: #f7267a;
-  --color-magenta-1100: #e40763;
-  --color-magenta-1200: #b00753;
-  --color-magenta-1300: #850040;
-  --color-magenta-1400: #520029;
+  --color-magenta-100: #fff5f9;
+  --color-magenta-200: #fee1eb;
+  --color-magenta-300: #fccfdf;
+  --color-magenta-400: #fabdd2;
+  --color-magenta-500: #f6a7c4;
+  --color-magenta-600: #ef8fb2;
+  --color-magenta-700: #e7739e;
+  --color-magenta-800: #de5487;
+  --color-magenta-900: #d62974;
+  --color-magenta-1000: #bb165b;
+  --color-magenta-1100: #991a44;
+  --color-magenta-1200: #751538;
+  --color-magenta-1300: #5a112d;
+  --color-magenta-1400: #3d0b20;
 
   /* Pink */
-  --color-pink-100: #fff0fd;
-  --color-pink-200: #ffe0fb;
-  --color-pink-300: #ffd1f9;
-  --color-pink-400: #ffc7f7;
-  --color-pink-500: #febdf7;
-  --color-pink-600: #fdaff5;
-  --color-pink-700: #fca1f6;
-  --color-pink-800: #f88cf2;
-  --color-pink-900: #f47cf2;
-  --color-pink-1000: #ed68ed;
-  --color-pink-1100: #d016d0;
-  --color-pink-1200: #ae09ae;
-  --color-pink-1300: #510151;
-  --color-pink-1400: #410c40;
+  --color-pink-100: #fdf6fc;
+  --color-pink-200: #f8e2f5;
+  --color-pink-300: #f3d3ef;
+  --color-pink-400: #efc2e9;
+  --color-pink-500: #e7ace1;
+  --color-pink-600: #dd92d5;
+  --color-pink-700: #d17acd;
+  --color-pink-800: #c55ec1;
+  --color-pink-900: #b83db8;
+  --color-pink-1000: #9d2d9f;
+  --color-pink-1100: #842a82;
+  --color-pink-1200: #651f64;
+  --color-pink-1300: #4e184d;
+  --color-pink-1400: #371036;
 
   /* Gray */
   --color-gray-100: #f7f7f7;
@@ -263,7 +263,7 @@
   /* Accent 2 (Violet) */
   --jamun: var(--color-violet-1000);
   --jamun-dark: var(--color-violet-1200);
-  --jamun-darker: var(--color-violet-1400);
+  --jamun-darker: var(--color-violet-1300);
   --jamun-light: var(--color-violet-700);
   --jamun-lighter: var(--color-violet-500);
   --jamun-lightest: var(--color-violet-200);
@@ -279,7 +279,7 @@
   /* Accent 3 (Indigo) */
   --neel: var(--color-indigo-1000);
   --neel-dark: var(--color-indigo-1200);
-  --neel-darker: var(--color-indigo-1400);
+  --neel-darker: var(--color-indigo-1300);
   --neel-light: var(--color-indigo-700);
   --neel-lighter: var(--color-indigo-500);
   --neel-lightest: var(--color-indigo-200);
@@ -299,8 +299,8 @@
   --night-lightest: var(--color-gray-700);
 
   /* Accent 4 (Lime) */
-  --nimbu: var(--color-lime-900);
-  --nimbu-dark: var(--color-lime-1100);
+  --nimbu: var(--color-lime-1000);
+  --nimbu-dark: var(--color-lime-1200);
   --nimbu-darker: var(--color-lime-1300);
   --nimbu-light: var(--color-lime-700);
   --nimbu-lighter: var(--color-lime-500);
@@ -345,6 +345,10 @@
   --accent2: var(--jamun);
   --accent3: var(--neel);
   --accent4: var(--nimbu);
+  --accent5: var(--color-cyan-1000);
+  --accent6: var(--color-magenta-1000);
+  --accent7: var(--color-sea-1000);
+  --accent8: var(--color-pink-1000);
   --inverse: var(--night);
 
   /* dark */
@@ -357,6 +361,10 @@
   --accent2-dark: var(--jamun-dark);
   --accent3-dark: var(--neel-dark);
   --accent4-dark: var(--nimbu-dark);
+  --accent5-dark: var(--color-cyan-1200);
+  --accent6-dark: var(--color-magenta-1200);
+  --accent7-dark: var(--color-sea-1200);
+  --accent8-dark: var(--color-pink-1200);
 
   /* darker */
   --primary-darker: var(--jal-darker);
@@ -367,6 +375,10 @@
   --accent2-darker: var(--jamun-darker);
   --accent3-darker: var(--neel-darker);
   --accent4-darker: var(--nimbu-darker);
+  --accent5-darker: var(--color-cyan-1300);
+  --accent6-darker: var(--color-magenta-1300);
+  --accent7-darker: var(--color-sea-1300);
+  --accent8-darker: var(--color-pink-1300);
 
   /* light */
   --primary-light: var(--jal-light);
@@ -378,6 +390,10 @@
   --accent2-light: var(--jamun-light);
   --accent3-light: var(--neel-light);
   --accent4-light: var(--nimbu-light);
+  --accent5-light: var(--color-cyan-700);
+  --accent6-light: var(--color-magenta-700);
+  --accent7-light: var(--color-sea-700);
+  --accent8-light: var(--color-pink-700);
   --inverse-light: var(--night-light);
 
   /* lighter */
@@ -390,6 +406,10 @@
   --accent2-lighter: var(--jamun-lighter);
   --accent3-lighter: var(--neel-lighter);
   --accent4-lighter: var(--nimbu-lighter);
+  --accent5-lighter: var(--color-cyan-500);
+  --accent6-lighter: var(--color-magenta-500);
+  --accent7-lighter: var(--color-sea-500);
+  --accent8-lighter: var(--color-pink-500);
   --inverse-lighter: var(--night-lighter);
 
   /* lightest */
@@ -402,6 +422,10 @@
   --accent2-lightest: var(--jamun-lightest);
   --accent3-lightest: var(--neel-lightest);
   --accent4-lightest: var(--nimbu-lightest);
+  --accent5-lightest: var(--color-cyan-200);
+  --accent6-lightest: var(--color-magenta-200);
+  --accent7-lightest: var(--color-sea-200);
+  --accent8-lightest: var(--color-pink-200);
   --inverse-lightest: var(--night-lightest);
 
   /* Focus */
@@ -417,27 +441,118 @@
   --accent2-ultra-light: var(--color-violet-100);
   --accent3-ultra-light: var(--color-indigo-100);
   --accent4-ultra-light: var(--color-lime-100);
+  --accent5-ultra-light: var(--color-cyan-100);
+  --accent6-ultra-light: var(--color-magenta-100);
+  --accent7-ultra-light: var(--color-sea-100);
+  --accent8-ultra-light: var(--color-pink-100);
 
-  /* Avatar specific color for the time being */
+  /* Numeric semantic steps */
   --primary-300: var(--color-blue-300);
+  --primary-400: var(--color-blue-400);
+  --primary-600: var(--color-blue-600);
+  --primary-800: var(--color-blue-800);
+  --primary-900: var(--color-blue-900);
+  --primary-1100: var(--color-blue-1100);
+  --primary-1400: var(--color-blue-1400);
   --success-300: var(--color-green-300);
+  --success-400: var(--color-green-400);
+  --success-600: var(--color-green-600);
+  --success-800: var(--color-green-800);
+  --success-900: var(--color-green-900);
+  --success-1100: var(--color-green-1100);
+  --success-1400: var(--color-green-1400);
   --alert-300: var(--color-red-300);
+  --alert-400: var(--color-red-400);
+  --alert-600: var(--color-red-600);
+  --alert-800: var(--color-red-800);
+  --alert-900: var(--color-red-900);
+  --alert-1100: var(--color-red-1100);
+  --alert-1400: var(--color-red-1400);
   --warning-300: var(--color-yellow-300);
+  --warning-400: var(--color-yellow-400);
+  --warning-600: var(--color-yellow-600);
+  --warning-800: var(--color-yellow-800);
+  --warning-1000: var(--color-yellow-1000);
+  --warning-1200: var(--color-yellow-1200);
+  --warning-1400: var(--color-yellow-1400);
   --accent1-300: var(--color-orange-300);
+  --accent1-400: var(--color-orange-400);
+  --accent1-600: var(--color-orange-600);
+  --accent1-800: var(--color-orange-800);
+  --accent1-900: var(--color-orange-900);
+  --accent1-1100: var(--color-orange-1100);
+  --accent1-1400: var(--color-orange-1400);
   --accent2-300: var(--color-violet-300);
+  --accent2-400: var(--color-violet-400);
+  --accent2-600: var(--color-violet-600);
+  --accent2-800: var(--color-violet-800);
+  --accent2-900: var(--color-violet-900);
+  --accent2-1100: var(--color-violet-1100);
+  --accent2-1400: var(--color-violet-1400);
   --accent3-300: var(--color-indigo-300);
+  --accent3-400: var(--color-indigo-400);
+  --accent3-600: var(--color-indigo-600);
+  --accent3-800: var(--color-indigo-800);
+  --accent3-900: var(--color-indigo-900);
+  --accent3-1100: var(--color-indigo-1100);
+  --accent3-1400: var(--color-indigo-1400);
   --accent4-300: var(--color-lime-300);
+  --accent4-400: var(--color-lime-400);
+  --accent4-600: var(--color-lime-600);
+  --accent4-800: var(--color-lime-800);
+  --accent4-900: var(--color-lime-900);
+  --accent4-1100: var(--color-lime-1100);
+  --accent4-1400: var(--color-lime-1400);
+  --accent5-300: var(--color-cyan-300);
+  --accent5-400: var(--color-cyan-400);
+  --accent5-600: var(--color-cyan-600);
+  --accent5-800: var(--color-cyan-800);
+  --accent5-900: var(--color-cyan-900);
+  --accent5-1100: var(--color-cyan-1100);
+  --accent5-1400: var(--color-cyan-1400);
+  --accent6-300: var(--color-magenta-300);
+  --accent6-400: var(--color-magenta-400);
+  --accent6-600: var(--color-magenta-600);
+  --accent6-800: var(--color-magenta-800);
+  --accent6-900: var(--color-magenta-900);
+  --accent6-1100: var(--color-magenta-1100);
+  --accent6-1400: var(--color-magenta-1400);
+  --accent7-300: var(--color-sea-300);
+  --accent7-400: var(--color-sea-400);
+  --accent7-600: var(--color-sea-600);
+  --accent7-800: var(--color-sea-800);
+  --accent7-900: var(--color-sea-900);
+  --accent7-1100: var(--color-sea-1100);
+  --accent7-1400: var(--color-sea-1400);
+  --accent8-300: var(--color-pink-300);
+  --accent8-400: var(--color-pink-400);
+  --accent8-600: var(--color-pink-600);
+  --accent8-800: var(--color-pink-800);
+  --accent8-900: var(--color-pink-900);
+  --accent8-1100: var(--color-pink-1100);
+  --accent8-1400: var(--color-pink-1400);
+
+  /* Neutral semantic steps */
+  --secondary-600: var(--color-gray-600);
+  --inverse-800: var(--color-gray-800);
+  --inverse-1000: var(--color-gray-1000);
+  --inverse-1200: var(--color-gray-1200);
+  --inverse-1300: var(--color-gray-1300);
 
   /* shadow */
   --primary-shadow: rgba(0, 96, 214, 0.16);
   --secondary-shadow: rgba(212, 212, 212, 0.16);
-  --success-shadow: rgba(0, 122, 14, 0.16);
-  --alert-shadow: rgba(214, 36, 0, 0.16);
+  --success-shadow: rgba(0, 128, 0, 0.16);
+  --alert-shadow: rgba(189, 28, 0, 0.16);
   --warning-shadow: rgba(245, 186, 10, 0.16);
-  --accent1-shadow: rgba(229, 111, 0, 0.16);
-  --accent2-shadow: rgba(111, 33, 228, 0.16);
-  --accent3-shadow: rgba(59, 72, 222, 0.16);
-  --accent4-shadow: rgba(112, 188, 6, 0.16);
+  --accent1-shadow: rgba(189, 91, 0, 0.16);
+  --accent2-shadow: rgba(111, 71, 205, 0.16);
+  --accent3-shadow: rgba(66, 86, 215, 0.16);
+  --accent4-shadow: rgba(87, 116, 0, 0.16);
+  --accent5-shadow: rgba(0, 117, 153, 0.16);
+  --accent6-shadow: rgba(187, 22, 91, 0.16);
+  --accent7-shadow: rgba(0, 122, 116, 0.16);
+  --accent8-shadow: rgba(157, 45, 159, 0.16);
   --inverse-shadow: rgba(26, 26, 26, 0.16);
 
   /* Text colors */
@@ -1408,6 +1523,13 @@ body {
   pointer-events: auto !important;
 }
 
+@media (forced-colors: active) {
+  .AvatarGroup-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 /* Selection avatar group */
 .SelectionAvatarGroup {
   box-sizing: border-box;
@@ -1604,6 +1726,28 @@ body {
   box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
 }
 
+@media (forced-colors: active) {
+  .SelectionAvatarGroup-item--selected:focus,
+  .SelectionAvatarGroup-item--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  .SelectionAvatarCount--selected:focus,
+  .SelectionAvatarCount--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  /* The inner search input uses outline:none !important — restore it in forced-colors mode */
+  .SelectionAvatar-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 @keyframes backdrop-open {
   from {
     opacity: 0;
@@ -1701,7 +1845,7 @@ body {
 }
 
 .Badge--accent1 {
-  background: var(--accent1-dark);
+  background: var(--accent1);
   color: var(--white);
 }
 
@@ -1717,7 +1861,7 @@ body {
 
 .Badge--accent4 {
   background: var(--accent4);
-  color: var(--accent4-darker);
+  color: var(--white);
 }
 
 .Badge--subtle-primary {
@@ -1742,7 +1886,7 @@ body {
 
 .Badge--subtle-warning {
   color: var(--warning-darker);
-  background: var(--warning-lightest);
+  background: var(--warning-300);
 }
 
 .Badge--subtle-accent1 {
@@ -1836,7 +1980,7 @@ body {
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Button:disabled {
+.Button--disabled {
   cursor: not-allowed;
 }
 
@@ -1920,13 +2064,6 @@ body {
   margin-left: var(--spacing-15);
 }
 
-.Button--tiny .Button-icon--left {
-  margin-right: var(--spacing-10);
-}
-.Button--tiny .Button-icon--right {
-  margin-left: var(--spacing-10);
-}
-
 .Button--basic {
   background: var(--secondary-light);
   color: var(--inverse);
@@ -1940,7 +2077,7 @@ body {
   background: var(--secondary-dark);
 }
 
-.Button--basic:disabled {
+.Button--basic-disabled {
   background: var(--secondary-lighter);
   color: var(--inverse-lightest);
 }
@@ -1957,10 +2094,14 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--primary:disabled {
+.Button--primary-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--primary {
+  color: var(--text-link);
+}
+
 .Button--success {
   background: var(--primary);
 }
@@ -1973,10 +2114,14 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--success:disabled {
+.Button--success-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--success {
+  color: var(--text-link);
+}
+
 .Button--alert {
   background: var(--alert);
 }
@@ -1989,10 +2134,14 @@ body {
   background: var(--alert-darker);
 }
 
-.Button--alert:disabled {
+.Button--alert-disabled {
   background: var(--alert-lighter);
 }
 
+.Button-infoIcon--alert {
+  color: var(--alert);
+}
+
 .Button--transparent {
   background: transparent;
   color: var(--inverse);
@@ -2010,7 +2159,7 @@ body {
   background: var(--secondary-dark);
 }
 
-.Button--transparent:disabled {
+.Button--transparent-disabled {
   background: transparent;
   color: var(--inverse-lightest);
 }
@@ -2051,7 +2200,7 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button--selected:disabled {
+.Button--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -2067,6 +2216,63 @@ body {
   text-overflow: ellipsis;
 }
 
+.Button-infoIconWrapper {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: var(--border-width-2-5) solid var(--secondary-lightest);
+  pointer-events: none;
+}
+
+.Button-infoIconWrapper--transparent {
+  border: none;
+  background: transparent;
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper--iconOnly-transparent {
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper-outlined--basic {
+  background: var(--secondary-lightest);
+}
+
+.Button-infoIconWrapper-outlined--primary {
+  background: var(--primary-ultra-light);
+}
+
+.Button-infoIconWrapper-outlined--alert {
+  background: var(--alert-ultra-light);
+}
+
+.Button-infoIconWrapper--basic {
+  background: var(--secondary-lighter);
+}
+
+.Button-infoIconWrapper--primary,
+.Button-infoIconWrapper--success {
+  background: var(--primary-lightest);
+}
+
+.Button-infoIconWrapper--alert {
+  background: var(--alert-lightest);
+}
+
+.Button-infoIcon {
+  color: var(--text-subtle);
+}
+
 /* outlined button styles */
 
 .Button-outlined--basic {
@@ -2091,7 +2297,7 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
 }
 
-.Button-outlined--basic:disabled {
+.Button-outlined--basic-disabled {
   color: var(--inverse-lightest);
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--secondary);
@@ -2129,7 +2335,7 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button-outlined--selected:disabled {
+.Button-outlined--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -2159,12 +2365,16 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
-.Button-outlined--primary:disabled {
+.Button-outlined--primary-disabled {
   background: transparent;
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
+.Button-infoIcon-outlined--primary {
+  color: var(--text-link);
+}
+
 .Button-outlined--alert {
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--alert);
@@ -2189,12 +2399,115 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
-.Button-outlined--alert:disabled {
+.Button-outlined--alert-disabled {
   background: transparent;
   color: var(--alert-lighter);
   box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
 
+.Button-infoIcon-outlined--alert {
+  color: var(--alert);
+}
+
+.Button-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .Button--basic,
+  .Button--primary,
+  .Button--success,
+  .Button--alert,
+  .Button--transparent {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  .Button--basic-disabled,
+  .Button--primary-disabled,
+  .Button--success-disabled,
+  .Button--alert-disabled,
+  .Button--transparent-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  /* Selected state: inset box-shadow acts as the visible border */
+  .Button--selected,
+  .Button--selected:hover,
+  .Button--selected:active,
+  .Button--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button--selected:focus-visible,
+  .Button--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  /* Outlined variants: inset box-shadow is the only visible border */
+  .Button-outlined--basic,
+  .Button-outlined--basic:hover,
+  .Button-outlined--basic:active,
+  .Button-outlined--basic-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--basic:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected,
+  .Button-outlined--selected:hover,
+  .Button-outlined--selected:active,
+  .Button-outlined--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected:focus-visible,
+  .Button-outlined--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary,
+  .Button-outlined--primary:hover,
+  .Button-outlined--primary:active,
+  .Button-outlined--primary-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert,
+  .Button-outlined--alert:hover,
+  .Button-outlined--alert:active,
+  .Button-outlined--alert-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+}
+
 /* calendar */
 
 .Calendar-wrapper {
@@ -2596,6 +2909,55 @@ body {
   border-color: transparent;
 }
 
+@media (forced-colors: active) {
+  .Calendar-valueWrapper--start,
+  .Calendar-valueWrapper--end,
+  .Calendar-valueWrapper--hoverDate,
+  .Calendar-valueWrapper--hoverEndDate,
+  .Calendar-valueWrapper--inStartRange,
+  .Calendar-valueWrapper--inEndRange,
+  .Calendar-valueWrapper--inRange,
+  .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
+    background: Highlight;
+  }
+
+  .Calendar-valueWrapper--startError,
+  .Calendar-valueWrapper--endError,
+  .Calendar-valueWrapper--inRangeError {
+    background: Mark;
+  }
+
+  /* Active/selected date cell */
+  .Calendar-value--active,
+  .Calendar-value--active:hover,
+  .Calendar-value--active:active {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    border-color: transparent;
+  }
+
+  /* Today's date marker ring */
+  .Calendar-value--currDateMonthYear {
+    border-color: ButtonText;
+  }
+
+  /* Event dot: use system color so it stays visible */
+  .Calendar-eventsIndicator {
+    background-color: ButtonText;
+  }
+
+  .Calendar-eventsIndicator--active {
+    background-color: HighlightText;
+  }
+
+  /* Disabled dates use opacity — switch to GrayText */
+  .Calendar-valueWrapper--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
 /* badge */
 
 .Card {
@@ -2651,6 +3013,20 @@ body {
   border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
+@media (forced-colors: active) {
+  /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */
+  .Card--default,
+  .Card--light,
+  .Card--medium,
+  .Card--dark,
+  .Card--shadow10,
+  .Card--shadow20,
+  .Card--shadow30 {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 .CardSubdued {
   background: var(--card-subdued-bg);
   padding: var(--spacing-40);
@@ -2720,7 +3096,7 @@ body {
   height: var(--spacing-10);
   border-radius: var(--border-radius-full);
   margin: 0 var(--spacing-20);
-  background: var(--inverse-lightest);
+  background: var(--inverse-lighter);
 }
 
 .ChatBubble-box--noSuccess {
@@ -2765,17 +3141,24 @@ body {
   flex: 0 0 auto;
 }
 
+.ChatBubble-actionBarWrapper--hidden {
+  width: 0;
+  overflow: hidden;
+}
+
 .ChatInput {
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: var(--border-width-2-5) solid var(--secondary);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   padding: var(--spacing-20);
   border-radius: var(--border-radius-10);
   background: var(--white);
   max-width: 100%;
   min-width: var(--spacing-640);
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
+    border-color var(--duration--slow-01) var(--standard-productive-curve),
+    outline var(--duration--slow-01) var(--standard-productive-curve);
   max-height: var(--spacing-440);
   position: relative;
   box-sizing: border-box;
@@ -2845,7 +3228,8 @@ body {
 .ChatInput-actions {
   display: flex;
   flex-shrink: 0;
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: margin var(--duration--slow-01) var(--standard-productive-curve),
+    width var(--duration--slow-01) var(--standard-productive-curve);
   margin-left: var(--spacing-20);
   align-items: center;
 }
@@ -2857,6 +3241,14 @@ body {
   margin-left: 0;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ChatInput,
+  .ChatInput-actions,
+  .ChatInput-textarea {
+    transition: none;
+  }
+}
+
 .Chat-UnreadMessage {
   border-radius: var(--border-radius-40);
   padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);
@@ -3067,9 +3459,6 @@ body {
   display: flex;
   box-sizing: border-box;
   border-radius: var(--border-radius-30);
-  padding-right: var(--spacing-20);
-  padding-top: var(--spacing-05);
-  padding-bottom: var(--spacing-05);
   width: -moz-fit-content;
   width: fit-content;
   justify-content: space-between;
@@ -3083,11 +3472,9 @@ body {
 
 .Chip-size--regular {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 .Chip-size--small {
   height: 20px;
-  padding-left: var(--spacing-15);
 }
 
 .Chip-wrapper {
@@ -3095,6 +3482,29 @@ body {
   align-items: center;
 }
 
+.Chip-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+  align-self: stretch;
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+  padding-right: var(--spacing-20);
+}
+
+.Chip-content--regular {
+  padding-left: var(--spacing-20);
+}
+
+.Chip-content--small {
+  padding-left: var(--spacing-15);
+}
+
+.Chip-content:focus-visible {
+  outline: none;
+}
+
 .Chip-icon--left {
   margin-right: var(--spacing-10);
   display: flex;
@@ -3128,7 +3538,7 @@ body {
   background: var(--secondary);
 }
 
-.Chip--action:focus-visible {
+.Chip--action:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -3156,7 +3566,7 @@ body {
   border-color: var(--secondary-dark);
 }
 
-.Chip--selection:focus-visible {
+.Chip--selection:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -3185,7 +3595,7 @@ body {
   box-shadow: inset 0 0 0 1px var(--primary);
 }
 
-.Chip-selection--selected:focus-visible {
+.Chip-selection--selected:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -3226,7 +3636,7 @@ body {
   background: var(--secondary);
 }
 
-.Chip--input:focus-visible {
+.Chip--input:has(.Chip-content:focus-visible) {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -3276,17 +3686,51 @@ body {
   background-color: var(--primary-light);
 }
 
-.Chip-selection--disabled:focus-visible,
+.Chip-selection--disabled:has(.Chip-content:focus-visible),
 .Chip-icon-disabled--right:focus-visible,
-.Chip-selection--selectedDisabled:focus-visible,
-.Chip-input--disabled:focus-visible {
+.Chip-selection--selectedDisabled:has(.Chip-content:focus-visible),
+.Chip-input--disabled:has(.Chip-content:focus-visible) {
   outline: none;
 }
 
-.Chip-icon--clear {
+.Chip-icon--clear .Chip-content {
   padding-right: 0;
 }
 
+@media (forced-colors: active) {
+  /* Action chips: border:0 makes them invisible — add a real border */
+  .Chip--action {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Input chips: border:0 makes them invisible — add a real border */
+  .Chip--input {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
+  .Chip-selection--selected,
+  .Chip-selection--selected:hover,
+  .Chip-selection--selected:active,
+  .Chip-selection--selectedDisabled {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+
+  .Chip-action--disabled,
+  .Chip-input--disabled {
+    opacity: 1;
+    color: GrayText;
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  .Chip-selection--disabled {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+
 .ChipGroup {
   display: inline-flex;
 }
@@ -3883,6 +4327,16 @@ body {
   }
 }
 
+.DatePicker-content {
+  display: flex;
+}
+
+@media (max-width: 576px) {
+  .DatePicker-content {
+    flex-direction: column;
+  }
+}
+
 .DateRangePicker {
   display: flex;
 }
@@ -3908,6 +4362,11 @@ body {
 }
 
 @media (max-width: 576px) {
+  .DateRangePicker--left,
+  .DateRangePicker--right {
+    flex-direction: column;
+  }
+
   .DateRangePicker-input {
     padding: 0;
   }
@@ -4144,6 +4603,13 @@ body {
   line-height: var(--font-height);
 }
 
+@media (forced-colors: active) {
+  .Dropdown-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 .DropdownButton {
   width: 100%;
   justify-content: space-between;
@@ -4229,6 +4695,18 @@ body {
   border: var(--border-width-2-5) solid var(--alert);
 }
 
+.Dropzone-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .Dropzone {
   display: flex;
   align-items: center;
@@ -4409,6 +4887,30 @@ body {
   fill: var(--alert);
 }
 
+@media (forced-colors: active) {
+  .Dropzone {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--active {
+    border: var(--border-width-05) dashed Highlight;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--error {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+  }
+
+  .Dropzone--disabled {
+    border: var(--border-width-05) dashed GrayText;
+    background-image: none;
+  }
+}
+
 .EditableChipInput {
   position: relative;
   width: 100%;
@@ -5144,6 +5646,10 @@ body {
   overflow-y: auto;
 }
 
+.Grid-rowGroup {
+  display: contents;
+}
+
 .Grid-rowWrapper {
   display: inline-flex;
   flex-direction: column;
@@ -5277,12 +5783,20 @@ body {
   overflow: hidden;
 }
 
+.Grid-cell--head .Grid-cellContent:focus-visible {
+  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);
+  border-radius: var(--border-radius-10);
+}
+
 .Grid-cellResize {
   position: absolute;
   right: 0;
   width: var(--spacing-10);
   cursor: ew-resize;
   height: 100%;
+  padding-right: var(--spacing-60);
+  margin-right: calc(-1 * var(--spacing-60));
+  box-sizing: content-box;
 }
 
 .Grid-cellSortIcon {
@@ -5299,6 +5813,11 @@ body {
   background: var(--primary);
 }
 
+.Grid-cellResize:focus-visible {
+  background: var(--primary);
+  outline: none;
+}
+
 .Grid-reorderHighlighter {
   position: absolute;
   height: 100%;
@@ -5518,9 +6037,10 @@ body {
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus {
+.Grid--resource .Grid-row--body:focus-visible {
   box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
 }
 
 /* Selected States */
@@ -5537,8 +6057,9 @@ body {
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus {
-  outline: none;
+.Grid-row--selected:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
   box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
@@ -5559,9 +6080,8 @@ body {
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
+.Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
-  outline: none;
 }
 
 /* Pinned Columns Selected State */
@@ -5578,8 +6098,7 @@ body {
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus .Grid-cellWrapper--pinned {
-  outline: none;
+.Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
@@ -5590,7 +6109,7 @@ body {
 
 .Grid-row--head .Grid-cellGroup--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-right-width: 4px;
   -o-border-image: linear-gradient(
       to right,
@@ -5612,7 +6131,7 @@ body {
 
 .Grid-row--head .Grid-cellGroup--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-left-width: 4px;
   -o-border-image: linear-gradient(
       to left,
@@ -5636,7 +6155,7 @@ body {
 
 .Grid-cellWrapper--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-right-width: 4px;
   -o-border-image: linear-gradient(
       to right,
@@ -5658,7 +6177,7 @@ body {
 
 .Grid-cellWrapper--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-left-width: 4px;
   -o-border-image: linear-gradient(
       to left,
@@ -5707,8 +6226,7 @@ body {
   outline: none;
 }
 
-.HorizontalNav-menu--default:focus-visible,
-.HorizontalNav-menu--default:focus {
+.HorizontalNav-menu--default:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -5726,8 +6244,7 @@ body {
   box-shadow: 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.HorizontalNav-menu--active:focus-visible,
-.HorizontalNav-menu--active:focus {
+.HorizontalNav-menu--active:focus-visible {
   background-color: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-10);
@@ -5747,8 +6264,7 @@ body {
   color: var(--primary-darker);
 }
 
-.HorizontalNav-menu--active:focus-visible:active,
-.HorizontalNav-menu--active:focus:active {
+.HorizontalNav-menu--active:focus-visible:active {
   background-color: var(--primary-lighter);
   box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
 }
@@ -5776,6 +6292,20 @@ body {
   opacity: var(--opacity-10);
 }
 
+@media (forced-colors: active) {
+  /* Active nav item uses box-shadow as its visible ring — replace with a real border */
+  .HorizontalNav-menu--active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .HorizontalNav-menu--active:active,
+  .HorizontalNav-menu--active:focus-visible:active {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+}
+
 /* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, 
  * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. 
  * https://google.github.io/material-design-icons/
@@ -6159,6 +6689,7 @@ body {
   cursor: pointer;
   color: var(--inverse-lighter);
   border-radius: var(--border-radius-full);
+  box-sizing: content-box;
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {
@@ -6202,12 +6733,24 @@ body {
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  transition: color var(--duration--fast-01) var(--standard-productive-curve),
+    border-color var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Link {
+    transition: none;
+  }
+}
+
+.Link-text {
+  display: inline-flex;
+  vertical-align: middle;
   border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
-.Link:focus {
+.Link:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
@@ -6233,24 +6776,32 @@ body {
   border-bottom-color: transparent;
 }
 
+.Link-text--subtle {
+  border-bottom-color: transparent;
+}
+
 .Link--default:hover {
-  border-bottom: var(--border-width-2-5) solid var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Link--subtle:hover {
-  border-bottom: var(--border-width-2-5) solid var(--inverse-light);
   color: var(--inverse-light);
 }
 
+.Link--subtle:hover .Link-text--subtle {
+  border-bottom-color: currentColor;
+}
+
 .Link--default:active {
   color: var(--primary-darker);
-  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
 .Link--subtle:active {
   color: var(--inverse);
-  border-bottom: var(--border-width-2-5) solid transparent;
+}
+
+.Link--subtle:active .Link-text--subtle {
+  border-bottom-color: transparent;
 }
 
 .Link--button-reset {
@@ -6273,6 +6824,39 @@ body {
   pointer-events: none;
 }
 
+.Link-infoIconWrapper {
+  display: inline-flex;
+  vertical-align: middle;
+  transform: translateY(calc(-1 * var(--spacing-15)));
+  margin-left: var(--spacing-2-5);
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+
+.Link-infoIcon {
+  color: var(--text-subtle);
+  pointer-events: none;
+}
+
+.Link-infoIcon--default {
+  color: var(--primary);
+}
+
+.Link-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.Link-tooltip--disabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 .LinkButton {
   display: flex;
   flex-direction: row;
@@ -6323,7 +6907,8 @@ body {
   font-size: var(--font-size-s);
 }
 
-.LinkButton--default {
+.LinkButton--default,
+.LinkButton--default-disabled {
   color: var(--primary);
 }
 
@@ -6335,21 +6920,25 @@ body {
   color: var(--primary-darker);
 }
 
-.LinkButton--default:focus,
-.LinkButton--default:focus-visible {
+.LinkButton--default:focus-visible,
+.LinkButton--default-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--default:disabled {
+.LinkButton--default-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--primary-lighter);
 }
 
+.LinkButton-infoIcon--default {
+  color: var(--text-link);
+}
+
 /* Subtle Appearance */
 
-.LinkButton--subtle {
+.LinkButton--subtle,
+.LinkButton--subtle-disabled {
   color: var(--inverse-lighter);
 }
 
@@ -6361,18 +6950,85 @@ body {
   color: var(--inverse);
 }
 
-.LinkButton--subtle:focus,
-.LinkButton--subtle:focus-visible {
+.LinkButton--subtle:focus-visible,
+.LinkButton--subtle-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--subtle:disabled {
+.LinkButton--subtle-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--inverse-lightest);
 }
 
+.LinkButton-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.LinkButton-infoIconWrapper {
+  position: absolute;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}
+
+.LinkButton-infoIconWrapper--tiny {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+}
+
+.LinkButton-infoIconWrapper--regularIcon {
+  top: 0px;
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-withInfo {
+  padding-right: var(--spacing-20);
+}
+
+.LinkButton-infoIconWrapper--withChildren {
+  right: calc(-1 * var(--spacing-30) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--iconOnly {
+  right: calc(-1 * var(--spacing-10) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  right: calc(-1 * var(--spacing-05) + var(--spacing-20));
+}
+
+.LinkButton-infoIcon {
+  color: inherit;
+}
+
+.LinkButton-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .List {
   display: flex;
   flex-grow: 1;
@@ -6464,6 +7120,11 @@ body {
   clip-path: polygon(0 0, 100% 0, 0 100%);
 }
 
+.Listbox-item--tight.Listbox-item--selected::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 .Listbox-item--selected:hover {
   background: rgba(139, 202, 254, 0.48);
 }
@@ -6512,6 +7173,11 @@ body {
   clip-path: polygon(0 0, 100% 0, 0 100%);
 }
 
+.Listbox-item--tight.Listbox-item--activated::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 /* Listbox type - description  */
 
 .Listbox-item--description:focus-visible {
@@ -6527,6 +7193,10 @@ body {
 
 /* Listbox type - draggable  */
 
+.Listbox-item--draggable:hover {
+  background-color: var(--secondary-lightest);
+}
+
 .Listbox-item--draggable:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -6534,17 +7204,87 @@ body {
 
 .Listbox-item--drag-icon {
   cursor: grab;
-  margin-right: var(--spacing-20);
+  padding: var(--spacing-10);
+  margin-right: calc(var(--spacing-20) - var(--spacing-10));
+  margin-left: calc(-1 * var(--spacing-10));
+  border-radius: var(--border-radius-10);
+  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),
+    color var(--duration--moderate-01) var(--standard-productive-curve),
+    box-shadow var(--duration--moderate-01) var(--standard-productive-curve);
+}
+
+.Listbox-item--drag-icon:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Listbox-item--drag-icon:hover {
+  background-color: var(--secondary);
   color: var(--inverse);
 }
 
 .Listbox-item--drag-icon:active {
+  background-color: var(--secondary-dark);
   color: var(--primary);
 }
 
+/* Drag and reorder interaction states */
+
+.Listbox-item--sticky-picked,
+.Listbox-item--drag-picked {
+  background-color: var(--text-white);
+  box-shadow: var(--shadow-l);
+  rotate: 0.5deg;
+  cursor: grabbing;
+  z-index: 1000;
+  position: relative;
+}
+
+.Listbox-item--sticky-picked .Listbox-item--selected,
+.Listbox-item--drag-picked .Listbox-item--selected {
+  background-color: rgba(214, 238, 255, 0.48);
+}
+
+.Listbox-item--sticky-picked .Listbox-item--drag-icon {
+  background-color: var(--primary);
+  color: var(--text-white);
+}
+
+.Listbox-item--drag-picked .Listbox-item--drag-icon {
+  background-color: var(--primary-ultra-light);
+  color: var(--primary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
+}
+
+.Listbox-aria-live {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .Listbox-item--description:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: calc(-1 * var(--border-width-05));
+  }
+
+  .Listbox-item--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .Listbox-item--selected::before,
+  .Listbox-item--activated::before {
+    background-color: Highlight;
+  }
+}
+
 /* MdsGrid */
 .MdsGrid {
   display: grid;
@@ -7007,12 +7747,12 @@ body {
 
 .Message--alert {
   border-color: var(--alert);
-  background-color: rgba(214, 36, 0, 0.04);
+  background-color: rgba(189, 28, 0, 0.04);
 }
 
 .Message--success {
   border-color: var(--success);
-  background-color: rgba(0, 122, 14, 0.04);
+  background-color: rgba(0, 128, 0, 0.04);
 }
 
 .Message--info {
@@ -7022,7 +7762,7 @@ body {
 
 .Message--warning {
   border-color: var(--accent1);
-  background-color: rgba(229, 111, 0, 0.04);
+  background-color: rgba(189, 91, 0, 0.04);
 }
 
 .Message-icon--regular {
@@ -7189,25 +7929,21 @@ body {
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
-  border: var(--border);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   background: var(--white);
-  overflow: hidden;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
   height: var(--spacing-80);
-  padding-left: var(--spacing-30);
 }
 
 .MetricInput--large {
   height: 40px;
-  padding-left: var(--spacing-40);
 }
 
 .MetricInput--small {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 
 .MetricInput:hover {
@@ -7217,9 +7953,12 @@ body {
 
 .MetricInput:focus-within {
   background: var(--white);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -7228,13 +7967,13 @@ body {
 
 .MetricInput--disabled {
   background: var(--secondary-lightest);
-  border-color: var(--secondary-light);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
   pointer-events: none;
 }
 
 .MetricInput--readOnly {
   background: var(--secondary-lightest);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   pointer-events: none;
 }
 
@@ -7245,19 +7984,46 @@ body {
 .MetricInput--error,
 .MetricInput--error:hover {
   background: var(--white);
-  border-color: var(--alert);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
 .MetricInput--error:focus-within {
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--alert);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput--error:focus-within .MetricInput-icon {
   color: var(--alert);
 }
 
+/* Content wrapper — holds icon, prefix, input, suffix */
+.MetricInput-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.MetricInput-content--regular {
+  padding: var(--spacing-15) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
+.MetricInput-content--large {
+  padding: var(--spacing-20) var(--spacing-15);
+  gap: var(--spacing-15);
+}
+
+.MetricInput-content--small {
+  padding: var(--spacing-10) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
 .MetricInput-input {
   display: flex;
   width: 100%;
@@ -7329,23 +8095,14 @@ body {
   margin: 0;
 }
 
-.MetricInput-arrowIcons {
-  border-left: var(--border);
-  box-sizing: border-box;
-  border-radius: 0;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
+/* Arrow buttons (decrement on left, increment on right) */
 .MetricInput-arrowButton {
-  height: 50%;
-  border: none;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--spacing-60);
   background: var(--secondary-light);
   color: var(--inverse);
+  border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7355,7 +8112,16 @@ body {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  overflow: hidden;
+}
+
+.MetricInput-arrowButton--left {
+  border-right: var(--border);
+  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
+}
+
+.MetricInput-arrowButton--right {
+  border-left: var(--border);
+  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .MetricInput-arrowButton:hover {
@@ -7368,16 +8134,44 @@ body {
 
 .MetricInput-arrowButton:focus {
   outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.MetricInput-arrowIcons--small,
-.MetricInput-arrowIcons--regular {
-  width: 20px;
+.MetricInput-arrowButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
-.MetricInput-arrowIcons--large {
-  width: var(--spacing-60);
+@media (forced-colors: active) {
+  /* box-shadow is stripped — restore a real border for the wrapper boundary */
+  .MetricInput {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .MetricInput--disabled {
+    border-color: GrayText;
+  }
+
+  /* Wrapper focus rings */
+  .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Arrow button states */
+  .MetricInput-arrowButton:disabled {
+    color: GrayText;
+  }
+
+  .MetricInput-arrowButton:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
 }
 
 @keyframes modal-open {
@@ -7479,6 +8273,14 @@ body {
   outline: none;
 }
 
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real border so the modal is visible */
+  .Modal {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 /* Navigation */
 
 .Navigation {
@@ -7672,6 +8474,10 @@ body {
   border-bottom: none;
 }
 
+.PageHeader-bottom--withTabs {
+  margin-top: var(--spacing-30);
+}
+
 .PageHeader .Row {
   width: 100%;
 }
@@ -7699,16 +8505,11 @@ body {
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-10);
+  margin-top: var(--spacing-30);
 }
 
-.PageHeader .PageHeader-navigationWrapper {
-  justify-content: center;
-  align-items: center;
-  margin-top: 0 !important;
-  padding-right: var(--spacing-20);
-  padding-left: var(--spacing-20);
-  display: flex;
+.PageHeader-navigationWrapper--noMargin {
+  margin-top: 0;
 }
 
 .PageHeader-title {
@@ -7723,6 +8524,102 @@ body {
   padding-left: var(--spacing-20);
 }
 
+/* =====================================================
+   Responsive main header row
+   ===================================================== */
+
+/* Base: flex layout — used by all variants */
+.PageHeader-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  width: 100%;
+}
+
+.PageHeader-group--title {
+  flex: 1 1 auto;
+  min-width: 0;
+  order: 1;
+}
+
+/* Center-nav group — navigation/stepper in center position */
+.PageHeader-group--center {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--spacing-20);
+  min-width: 0;
+  order: 2;
+}
+
+/* Actions / right-side group */
+.PageHeader-group--actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: var(--spacing-20);
+  row-gap: var(--spacing-30);
+  order: 3;
+}
+
+/* Default (full): CSS Grid for true 3-col centering */
+.PageHeader-row--withCenter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: start;
+}
+
+/* Ghost: center nav stays in the grid for measurement but is invisible and out of flow.
+   Used when collision detection moves the nav to PageHeader-bottom. */
+.PageHeader-group--center--ghost {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* All stacked: flex marker on the row + full-width children */
+.PageHeader-row--allStacked {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.PageHeader-group--title--stacked {
+  flex: 0 0 100%;
+  order: 1;
+}
+
+.PageHeader-group--actions--stacked {
+  flex: 0 0 100%;
+  order: 2;
+  padding-left: 0;
+  padding-top: var(--spacing-10);
+  justify-content: flex-start;
+}
+
+/* =====================================================
+   Level 1: inter-section spacing when right group wraps
+   ===================================================== */
+
+/* At < 576 px, the actions group sits between title and nav/stepper/tabs.
+   For level 1 headers that have actions, increase the gap to 12 px so all
+   three sections (title, actions, nav) have consistent breathing room. */
+@media (max-width: 575px) {
+  .PageHeader-group--actions--level1Responsive {
+    padding-top: var(--spacing-30);
+  }
+
+  .PageHeader-bottom--level1Responsive {
+    margin-top: var(--spacing-30);
+  }
+
+  .PageHeader-navigationWrapper--noMarginSm {
+    margin-top: 0;
+  }
+}
+
 /* pagination */
 
 .Pagination {
@@ -8389,7 +9286,7 @@ body {
   outline: none;
 }
 
-.SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
+.SegmentedControl-segment:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
@@ -8760,6 +9657,13 @@ body {
   border: var(--border-width-2-5) solid var(--alert) !important;
 }
 
+@media (forced-colors: active) {
+  .Select-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 .Selection-card {
   border-radius: var(--border-radius-10);
   position: relative;
@@ -8860,6 +9764,44 @@ body {
   opacity: var(--opacity-10);
 }
 
+@media (forced-colors: active) {
+  /* All states use inset box-shadow as the sole border — replace with real borders */
+  .Selection-card--default,
+  .Selection-card--default:hover,
+  .Selection-card--default:active,
+  .Selection-card--default-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Interactive selected states — use Highlight to signal selection */
+  .Selection-card--selected,
+  .Selection-card--selected:hover,
+  .Selection-card--selected:active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Selection-card--selected-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+    box-shadow: none;
+  }
+
+  .Selection-card--default:focus,
+  .Selection-card--default:focus-visible,
+  .Selection-card--selected:focus,
+  .Selection-card--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+
+  /* Disabled: suppress the focus indicator */
+  .Selection-card--disabled {
+    outline: none;
+  }
+}
+
 @keyframes sidesheet-open {
   from {
     right: -100%;
@@ -8979,6 +9921,14 @@ body {
   outline: none;
 }
 
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */
+  .Sidesheet {
+    border-left: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 .Slider {
   width: 100%;
 }
@@ -9116,6 +10066,27 @@ body {
   box-shadow: none;
 }
 
+@media (forced-colors: active) {
+  /* Handle elevation comes from box-shadow only — add a real border so it stays visible */
+  .Slider-handle {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Restore focus ring on the handle (outline:none is set unconditionally) */
+  .Slider-handle:focus,
+  .Slider-handle:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Filled portion of the track */
+  .Slider-progress--inRange {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -9449,6 +10420,45 @@ body {
   border-color: transparent;
 }
 
+@media (forced-colors: active) {
+  .Switch-wrapper {
+    outline: var(--border-width-2-5) solid ButtonText;
+    outline-offset: calc(-1 * var(--border-width-2-5));
+    box-shadow: none;
+  }
+
+  /* Checked (enabled) track: use Highlight to distinguish on-state */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled) {
+    background-color: Highlight;
+  }
+
+  .Switch-wrapper--checkedDisabled {
+    background-color: ButtonFace;
+    outline-color: GrayText;
+  }
+
+  /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */
+  .Switch-wrapper:before {
+    box-shadow: none;
+    border-color: ButtonText;
+  }
+
+  /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled):before {
+    border-color: HighlightText;
+  }
+
+  /* Checked-disabled thumb: use GrayText so it reads as disabled */
+  .Switch-wrapper--checkedDisabled:before {
+    border-color: GrayText;
+  }
+
+  /* Unchecked-disabled thumb */
+  .Switch-wrapper--disabled:before {
+    border-color: GrayText;
+  }
+}
+
 .Table {
   display: flex;
   flex-grow: 1;
@@ -9479,8 +10489,9 @@ body {
 }
 
 .Table-Header-Label--hide {
-  animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
+  animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
   animation-fill-mode: forwards;
+  pointer-events: none;
 }
 
 .Table-Header-Label--show {
@@ -9488,6 +10499,36 @@ body {
   animation-fill-mode: forwards;
 }
 
+@keyframes tableHeaderFadeOut {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Table-Header-Label--hide,
+  .Table-Header-Label--show {
+    animation-duration: 0.001ms;
+  }
+}
+
+.Table-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* tabs */
 
 .TabsWrapper {
@@ -9673,6 +10714,26 @@ body {
   box-sizing: border-box;
 }
 
+@media (forced-colors: active) {
+  /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */
+  .DismissibleRegularTab-icon--right:focus-visible,
+  .DismissibleSmallTab-icon--right:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+  }
+
+  .Tab--active::after {
+    background-color: transparent;
+    border-top: var(--spacing-05) solid Highlight;
+    box-sizing: border-box;
+  }
+
+  /* Disabled tab pills use opacity — use GrayText instead */
+  .Tab-pills--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
 /* Textarea */
 
 .Textarea {
@@ -9742,6 +10803,11 @@ body {
   line-height: var(--font-height-s);
 }
 
+.TimePicker-trigger {
+  width: calc(var(--spacing-40) * 20);
+  min-width: calc(var(--spacing-40) * 16);
+}
+
 /* toast */
 
 .Toast {
@@ -9941,6 +11007,16 @@ body {
   color: var(--text-white);
 }
 
+@media (forced-colors: active) {
+  /* Close icon focus ring is conveyed via box-shadow only — replace with outline */
+  .Toast-close-icon:focus,
+  .Toast-close-icon:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+}
+
 .Tooltip {
   max-width: var(--spacing-640);
   padding: var(--spacing-10) var(--spacing-20);
@@ -9958,6 +11034,7 @@ body {
 }
 
 .Tooltip-text {
+  white-space: pre-wrap;
   word-break: break-word;
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -10285,41 +11362,21 @@ body {
   display: flex;
   align-items: center;
   color: var(--inverse);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:hover {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 28%,
-    rgba(240, 125, 0, 0.2) 100%
-  );
+  background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
 }
 
 .AIButton:active {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 28%,
-    rgba(240, 125, 0, 0.31) 100%
-  );
+  background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
 }
 
 .AIButton:disabled {
   cursor: not-allowed;
   opacity: var(--opacity-10);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:focus {
@@ -10376,30 +11433,15 @@ body {
   width: fit-content;
   border: 0;
   position: relative;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip:hover {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.32) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
 }
 
 .AIChip:active {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.48) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
 }
 
 .AIChip:focus,
@@ -10429,12 +11471,7 @@ body {
 /* Disabled Chip */
 
 .AIChip--disabled {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip-icon--disabled {
@@ -10449,12 +11486,7 @@ body {
 
 .AIChip:disabled {
   cursor: not-allowed;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip-AIIcon {
@@ -10485,22 +11517,12 @@ body {
 }
 
 .AIIconButton:hover {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
   color: var(--secondary) !important;
 }
 
 .AIIconButton:active {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
   color: var(--secondary-dark) !important;
 }
 
@@ -12746,6 +13768,10 @@ body {
   white-space: pre;
 }
 
+.white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .bottom-0 {
   bottom: 0;
 }