@wwtdev/bsds-css 3.0.0-rc.47 → 3.0.1

package/dist/wwt-bsds.css

@@ -25,6 +25,7 @@
   --bs-cobalt-200: #948be1;
   --bs-cobalt-300: #5f52d3;
   --bs-cobalt-400: #2918c4;
+  --bs-gold-10: rgba(235, 223, 212, 0.1);
   --bs-gold-100: #f9f5f1;
   --bs-gold-200: #ebdfd4;
   --bs-gold-300: #e0c7ac;
@@ -110,98 +111,79 @@
   --bs-yellow-100: #fdeed3;
   --bs-yellow-200: #fcdea7;
   --bs-yellow-300: #f8c464;
-  --bs-yellow-400: #ffb834;
-  --bs-yellow-450: #c18300;
+  --bs-yellow-400: #c18300;
   --bs-yellow-500: #805a14;
   --bs-shadow-primary: rgba(0, 0, 0, 0.06);
   --bs-shadow-secondary: rgba(28, 0, 135, 0.2);
   --bs-gradient-dark: linear-gradient(
     90deg,
     #1c0087 0%,
-    #ee282a 35%,
-    #ffffff 50%,
+    #ee282a 35.01%,
+    #fff 49.99%,
     #0086ea 65%,
     #1c0087 100%
   );
   --bs-gradient-light: linear-gradient(
     90deg,
     #1c0087 0%,
-    #ee282a 20%,
-    #ee282a 40%,
-    #1c0087 50%,
+    #ee282a 19.93%,
+    #ee282a 39.91%,
+    #1c0087 49.9%,
     #0086ea 60%,
-    #0086ea 80%,
+    #0086ea 79.99%,
     #1c0087 100%
   );
   --bs-gradient-line: linear-gradient(
     90deg,
     #ee282a 0%,
-    #1c0087 50%,
+    #1c0087 49.35%,
     #0086ea 100%
   );
-  --bs-gradient-atom-ai-border: conic-gradient(
-    from 180deg at 50% 50%,
-    var(--bs-royal-400) -96.8deg,
-    var(--bs-pink-400) 74.2deg,
-    var(--bs-blue-400) 98.8deg,
-    var(--bs-orange-400) 259.6deg,
-    var(--bs-royal-400) 283.2deg,
-    var(--bs-pink-400) 414.4deg
-  );
-  --bs-gradient-atom-ai-bg: conic-gradient(
-    from 180deg at 50% 50%,
-    rgba(22, 47, 180, 0.05) -96.8deg,
-    rgba(227, 28, 121, 0.05) 74.2deg,
-    rgba(0, 134, 234, 0.05) 98.8deg,
-    rgba(251, 85, 14, 0.05) 259.6deg,
-    rgba(22, 47, 180, 0.05) 283.2deg,
-    rgba(227, 28, 121, 0.05) 414.4deg
-  );
-  --bs-gradient-blue-top-left: radial-gradient(
-    312.54% 141.42% at 0% 0%,
+  --bs-gradient-blue-center: radial-gradient(
+    154.77% 52.27% at 47.08% 49.86%,
     #162fb4 0%,
     #1d1e48 100%
   );
-  --bs-gradient-blue-top-center: radial-gradient(
-    201.14% 201.14% at 50% -51.28%,
-    #162fb4 26.06%,
-    #1d1e48 100%
-  );
-  --bs-gradient-blue-top-right: radial-gradient(
-    312.54% 141.42% at 100% 0%,
+  --bs-gradient-blue-mid-left: linear-gradient(
+    90deg,
     #162fb4 0%,
-    #1d1e48 100%
+    #1d1e48 98.9%
   );
-  --bs-gradient-blue-mid-left: radial-gradient(
-    347.1% 117.22% at -9.27% 49.86%,
-    #162fb4 8.19%,
-    #1d1e48 100%
+  --bs-gradient-blue-mid-right: linear-gradient(
+    90deg,
+    #1d1e48 0%,
+    #162fb4 99.27%
   );
-  --bs-gradient-blue-mid-right: radial-gradient(
-    347.1% 117.22% at 109.27% 49.86%,
-    #162fb4 8.19%,
-    #1d1e48 100%
+  --bs-gradient-blue-bottom-center: radial-gradient(
+    100% 100% at 50% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
   );
-  --bs-gradient-blue-center: radial-gradient(
-    172.57% 58.28% at 50% 49.86%,
-    #162fb4 0%,
+  --bs-gradient-blue-top-center: radial-gradient(
+    96.7% 96.7% at 50% 0%,
+    #162fb4 5%,
     #1d1e48 100%
   );
-  --bs-gradient-blue-bottom-left: radial-gradient(
-    312.54% 141.42% at 0% 100%,
+  --bs-gradient-blue-top-left: radial-gradient(
+    312.54% 141.42% at 0% 0%,
     #162fb4 0%,
     #1d1e48 100%
   );
-  --bs-gradient-blue-bottom-center: radial-gradient(
-    201.14% 201.14% at 50% 151.28%,
-    #162fb4 26.06%,
-    #1d1e48 100%
-  );
   --bs-gradient-blue-bottom-right: radial-gradient(
-    312.54% 141.42% at 100% 100%,
+    312.54% 141.42% at 0% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
+  );
+  --bs-gradient-blue-top-right: radial-gradient(
+    312.54% 141.42% at 100% 0%,
     #162fb4 0%,
     #1d1e48 100%
   );
+  --bs-gradient-blue-bottom-left: radial-gradient(
+    312.54% 141.42% at 100% 0%,
+    #1d1e48 0%,
+    #162fb4 100%
+  );
   --bs-gradient-light-blue-transparent: radial-gradient(
     236% 114.71% at 94.24% 7.6%,
     rgba(153, 207, 247, 0.2) 0%,
@@ -214,8 +196,8 @@
   );
   --bs-gradient-light-gray: linear-gradient(
     180deg,
-    #f7f7fc 24.82%,
-    #f0f0fa 100%
+    var(--background-light, #f7f7fc) 24.82%,
+    var(--background-medium, #f0f0fa) 100%
   );
   --bs-gradient-softchoice-light: linear-gradient(
     252deg,
@@ -227,6 +209,24 @@
     #ff5100 66.87%,
     #7d00ff 97.9%
   );
+  --bs-gradient-atom-ai-border: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--bs-royal-400) -96.8deg,
+    var(--bs-pink-400) 74.2deg,
+    var(--bs-blue-400) 98.8deg,
+    var(--bs-orange-400) 259.6deg,
+    var(--bs-royal-400) 283.2deg,
+    var(--bs-pink-400) 414.4deg
+  );
+  --bs-gradient-atom-ai-bg: conic-gradient(
+    from 180deg at 50% 50%,
+    rgba(22, 47, 180, 0.05) -96.8deg,
+    rgba(227, 28, 121, 0.05) 74.2deg,
+    rgba(0, 134, 234, 0.05) 98.8deg,
+    rgba(251, 85, 14, 0.05) 259.6deg,
+    rgba(22, 47, 180, 0.05) 283.2deg,
+    rgba(227, 28, 121, 0.05) 414.4deg
+  );
   --bs-space-0: var(--bs-space-none);
   --bs-space-1: var(--bs-space-3xs);
   --bs-space-2: var(--bs-space-2xs);
@@ -263,6 +263,7 @@
   --bs-font-light: 300;
   --bs-font-normal: 400;
   --bs-font-semibold: 600;
+  --bs-font-bold: 600;
   --bs-leading-none: 1;
   --bs-leading-sm: 1.1;
   --bs-leading-regular: 1.3;
@@ -297,8 +298,8 @@
   /* Navigation */
   --bs-horizontal-nav-height: 48px;
   --bs-vertical-nav-narrow-width: 4.5rem;
-  --bs-vertical-nav-width: 9.875rem;
-  --bs-vertical-nav-collapsed-width: 4rem;
+  --bs-vertical-nav-width: 11.25rem;
+  --bs-vertical-nav-collapsed-width: 4.5rem;
   /* Dynamic width set by the navigation component for page layout */
   --bs-page-nav-width: 0px;
 
@@ -318,7 +319,7 @@
   --bs-ink-base: var(--bs-black);
   --bs-ink-medium: var(--bs-gray-500);
   --bs-ink-light: var(--bs-gray-400);
-  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
+  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
   --bs-ink-invert-base: var(--bs-white);
   --bs-ink-invert-medium: var(--bs-gray-100);
   --bs-ink-invert-light: var(--bs-gray-200);
@@ -327,37 +328,12 @@
   --bs-ink-accent-1: var(--bs-royal-400);
   --bs-ink-accent-2: var(--bs-violet-400);
   --bs-ink-accent-3: var(--bs-pink-500);
-  --bs-ink-negative: var(--bs-red-500);
-  --bs-ink-ecomm-positive: var(--bs-green-500);
-  --bs-ink-positive: var(--bs-purple-400);
+  --bs-ink-accent-4: var(--bs-purple-400);
+  --bs-ink-positive: var(--bs-green-500);
   --bs-ink-warning: var(--bs-orange-500);
+  --bs-ink-negative: var(--bs-red-500);
   --bs-ink-white: var(--bs-white);
 
-  /* Background */
-  --bs-bg-base: var(--bs-white);
-  --bs-bg-light: var(--bs-gray-50);
-  --bs-bg-medium: var(--bs-gray-100);
-  --bs-bg-disabled: var(--bs-gray-200);
-  --bs-bg-invert-base: var(--bs-slate-600);
-  --bs-bg-invert-light: var(--bs-slate-500);
-  --bs-bg-invert-medium: var(--bs-slate-400);
-  --bs-bg-base-to-light: var(--bs-white);
-  --bs-bg-base-to-medium: var(--bs-white);
-  --bs-bg-medium-to-base: var(--bs-gray-100);
-  --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-light-to-base: var(--bs-gray-50);
-  --bs-bg-light-to-medium: var(--bs-gray-50);
-
-  /* Borders */
-  --bs-border-base: var(--bs-gray-200);
-  --bs-border-medium: var(--bs-gray-150);
-  --bs-border-light: var(--bs-gray-100);
-  --bs-border-dark: var(--bs-gray-400);
-  --bs-border-medium-to-light: var(--bs-gray-150);
-  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-500);
-
   /* Primary */
   --bs-primary-base-fixed: var(--bs-blue-400);
   --bs-primary-base: var(--bs-blue-400);
@@ -374,13 +350,6 @@
   --bs-secondary-lightest: var(--bs-plum-100);
   --bs-secondary-highlight: var(--bs-plum-10);
 
-  /* Neutral */
-  --bs-neutral-dark: var(--bs-gray-500);
-  --bs-neutral-base: var(--bs-gray-400);
-  --bs-neutral-medium: var(--bs-gray-300);
-  --bs-neutral-light: var(--bs-gray-200);
-  --bs-neutral-lightest: var(--bs-gray-100);
-
   /* Accent 1 */
   --bs-accent-1-base-fixed: var(--bs-royal-400);
   --bs-accent-1-base: var(--bs-royal-400);
@@ -406,46 +375,91 @@
   --bs-accent-3-highlight: var(--bs-pink-10);
 
   /* Accent 4 */
-  --bs-accent-4-base: var(--bs-navy-400);
-  --bs-accent-4-medium: var(--bs-navy-300);
-  --bs-accent-4-light: var(--bs-navy-200);
-  --bs-accent-4-lightest: var(--bs-navy-100);
-  --bs-accent-4-highlight: var(--bs-navy-10);
+  --bs-accent-4-base-fixed: var(--bs-purple-400);
+  --bs-accent-4-base: var(--bs-purple-400);
+  --bs-accent-4-medium: var(--bs-purple-300);
+  --bs-accent-4-light: var(--bs-purple-200);
+  --bs-accent-4-lightest: var(--bs-purple-100);
+  --bs-accent-4-highlight: var(--bs-purple-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-orange-400);
+  --bs-accent-5-medium: var(--bs-orange-300);
+  --bs-accent-5-light: var(--bs-orange-200);
+  --bs-accent-5-lightest: var(--bs-orange-100);
+  --bs-accent-5-highlight: var(--bs-orange-10);
+
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-400);
+  --bs-accent-6-medium: var(--bs-red-300);
+  --bs-accent-6-light: var(--bs-red-200);
+  --bs-accent-6-lightest: var(--bs-red-100);
+  --bs-accent-6-highlight: var(--bs-red-10);
+
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-400);
+  --bs-accent-7-medium: var(--bs-navy-300);
+  --bs-accent-7-light: var(--bs-navy-200);
+  --bs-accent-7-lightest: var(--bs-navy-100);
+  --bs-accent-7-highlight: var(--bs-navy-10);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-gray-500);
+  --bs-neutral-base: var(--bs-gray-400);
+  --bs-neutral-medium: var(--bs-gray-300);
+  --bs-neutral-light: var(--bs-gray-200);
+  --bs-neutral-lightest: var(--bs-gray-100);
 
   /* Positive */
-  --bs-positive-base-fixed: var(--bs-purple-400);
-  --bs-positive-base: var(--bs-purple-400);
-  --bs-positive-medium: var(--bs-purple-300);
-  --bs-positive-light: var(--bs-purple-200);
-  --bs-positive-lightest: var(--bs-purple-100);
-  --bs-positive-highlight: var(--bs-purple-10);
-
-  /* Ecommerce Positive */
-  --bs-ecomm-positive-base-fixed: var(--bs-green-400);
-  --bs-ecomm-positive-base: var(--bs-green-400);
-  --bs-ecomm-positive-medium: var(--bs-green-300);
-  --bs-ecomm-positive-light: var(--bs-green-200);
-  --bs-ecomm-positive-lightest: var(--bs-green-100);
-  --bs-ecomm-positive-highlight: var(--bs-green-10);
+  --bs-positive-base: var(--bs-green-400);
+  --bs-positive-medium: var(--bs-green-300);
+  --bs-positive-highlight: var(--bs-green-10);
 
   /* Warning */
-  --bs-warning-dark: var(--bs-orange-500);
-  --bs-warning-base: var(--bs-orange-400);
+  --bs-warning-base: var(--bs-orange-500);
   --bs-warning-medium: var(--bs-orange-300);
-  --bs-warning-light: var(--bs-orange-200);
-  --bs-warning-lightest: var(--bs-orange-100);
   --bs-warning-highlight: var(--bs-orange-10);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-red-500);
-  --bs-negative-base: var(--bs-red-400);
+  --bs-negative-base: var(--bs-red-500);
   --bs-negative-medium: var(--bs-red-300);
-  --bs-negative-light: var(--bs-red-200);
-  --bs-negative-lightest: var(--bs-red-100);
   --bs-negative-highlight: var(--bs-red-10);
 
-  
+  /* Background */
+  --bs-bg-base: var(--bs-white);
+  --bs-bg-light: var(--bs-gray-50);
+  --bs-bg-medium: var(--bs-gray-100);
+  --bs-bg-disabled: var(--bs-gray-200);
+  --bs-bg-invert-base: var(--bs-slate-600);
+  --bs-bg-invert-light: var(--bs-slate-500);
+  --bs-bg-invert-medium: var(--bs-slate-400);
+  --bs-bg-base-to-light: var(--bs-white);
+  --bs-bg-base-to-medium: var(--bs-white);
+  --bs-bg-medium-to-base: var(--bs-gray-100);
+  --bs-bg-medium-to-light: var(--bs-gray-100);
+  --bs-bg-light-to-base: var(--bs-gray-50);
+  --bs-bg-light-to-medium: var(--bs-gray-50);
+
+  /* Borders */
+  --bs-border-dark: var(--bs-gray-300);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-medium: var(--bs-gray-150);
+  --bs-border-light: var(--bs-gray-100);
+  --bs-border-medium-to-light: var(--bs-gray-150);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* violet-300 at 75% */
+  --bs-border-active: var(--bs-blue-400);
+  --bs-border-error: var(--bs-red-500);
+
   /* -------------- Deprecated Color Tokens -------------- */
+  /* Ink */
+  --bs-ink-blue: var(--bs-blue-500); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-500); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-500); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-400); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-400); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-500); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-400); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-400); /* replaced by Ink Accent 2 */
 
   /* Blue (replaced by Primary) */
   --bs-blue-base: var(--bs-blue-400);
@@ -460,7 +474,7 @@
   --bs-gray-light: var(--bs-gray-200);
   --bs-gray-lightest: var(--bs-gray-100);
 
-  /* Navy (replaced by Accent 4) */
+  /* Navy (replaced by Accent 7) */
   --bs-navy-base: var(--bs-navy-400);
   --bs-navy-medium: var(--bs-navy-300);
   --bs-navy-light: var(--bs-navy-200);
@@ -485,7 +499,7 @@
   --bs-plum-light: var(--bs-plum-200);
   --bs-plum-lightest: var(--bs-plum-100);
 
-  /* Purple (replaced by Positive) */
+  /* Purple (replaced by Accent 4) */
   --bs-purple-base: var(--bs-purple-400);
   --bs-purple-medium: var(--bs-purple-300);
   --bs-purple-light: var(--bs-purple-200);
@@ -508,121 +522,107 @@
   --bs-violet-medium: var(--bs-violet-300);
   --bs-violet-light: var(--bs-violet-200);
   --bs-violet-lightest: var(--bs-violet-100);
-
-
-  /* ------------ Deprecated Ink Color Tokens ------------ */
-
-  /* Ink Blue (replaced by Ink Primary) */
-  --bs-ink-blue: var(--bs-blue-500);
-
-  /* Ink Orange (replaced by Ink Warning) */
-  --bs-ink-orange: var(--bs-orange-500);
-
-  /* Ink Pink (replaced by Ink Accent 3) */
-  --bs-ink-pink: var(--bs-pink-500);
-
-  /* Ink Plum (replaced by Ink Secondary) */
-  --bs-ink-plum: var(--bs-plum-400);
-
-  /* Ink Purple (replaced by Ink Positive) */
-  --bs-ink-purple: var(--bs-purple-400);
-
-  /* Ink Red (replaced by Ink Negative) */
-  --bs-ink-red: var(--bs-red-500);
-
-  /* Ink Royal (replaced by Ink Accent 1) */
-  --bs-ink-royal: var(--bs-royal-400);
-
-  /* Ink Violet (replaced by Ink Accent 2) */
-  --bs-ink-violet: var(--bs-violet-400);
 }
-/* Token Overrides */
+/* put browser scrollbars into dark mode */
+/* html selector needed since .dark class gets added to body, but scrolling may be on <html> */
+html:where(:has(.dark)),
+.dark {
+  color-scheme: dark;
+}
 .dark {
   /* Ink */
   --bs-ink-base: var(--bs-white);
   --bs-ink-medium: var(--bs-gray-100);
   --bs-ink-light: var(--bs-gray-200);
-  --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
-  --bs-ink-invert-base: var(--bs-black);
-  --bs-ink-invert-medium: var(--bs-gray-500);
-  --bs-ink-invert-light: var(--bs-gray-400);
+  --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
   --bs-ink-primary: var(--bs-blue-100);
   --bs-ink-secondary: var(--bs-plum-100);
   --bs-ink-accent-1: var(--bs-royal-200);
-  --bs-ink-accent-2: var(--bs-violet-200);
+  --bs-ink-accent-2: var(--bs-violet-100);
   --bs-ink-accent-3: var(--bs-pink-200);
-  --bs-ink-negative: var(--bs-red-200);
-  --bs-ink-ecomm-positive: var(--bs-green-200);
-  --bs-ink-positive: var(--bs-purple-200);
+  --bs-ink-accent-4: var(--bs-purple-200);
+  --bs-ink-positive: var(--bs-green-200);
   --bs-ink-warning: var(--bs-orange-200);
+  --bs-ink-negative: var(--bs-red-200);
   --bs-ink-white: var(--bs-white);
-
-  /* Background */
-  --bs-bg-base: var(--bs-slate-600);
-  --bs-bg-light: var(--bs-slate-500);
-  --bs-bg-medium: var(--bs-slate-400);
-  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
-  --bs-bg-invert-base: var(--bs-white);
-  --bs-bg-invert-light: var(--bs-gray-50);
-  --bs-bg-invert-medium: var(--bs-gray-100);
-  --bs-bg-base-to-light: var(--bs-slate-500);
-  --bs-bg-base-to-medium: var(--bs-slate-400);
-  --bs-bg-medium-to-base: var(--bs-slate-600);
-  --bs-bg-medium-to-light: var(--bs-slate-500);
-  --bs-bg-light-to-base: var(--bs-slate-600);
-  --bs-bg-light-to-medium: var(--bs-slate-400);
-
-  /* Borders */
-  --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
-  --bs-border-medium: var(--bs-gray-400);
-  --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-dark: var(--bs-gray-300);
-  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-input: var(--bs-violet-200);
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-200);
+  --bs-ink-invert-base: var(--bs-black);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-invert-light: var(--bs-gray-400);
 
   /* Primary */
   --bs-primary-base: var(--bs-blue-300);
+  --bs-primary-medium: var(--bs-blue-200);
 
   /* Secondary */
   --bs-secondary-base: var(--bs-plum-300);
   --bs-secondary-medium: var(--bs-plum-200);
 
-  /* Neutral */
-  --bs-neutral-dark: var(--bs-gray-100);
-  --bs-neutral-base: var(--bs-gray-200);
-  --bs-neutral-medium: var(--bs-gray-300);
-  --bs-neutral-light: var(--bs-gray-400);
-  --bs-neutral-lightest: var(--bs-gray-500);
-
   /* Accent 1 */
   --bs-accent-1-base: var(--bs-royal-300);
   --bs-accent-1-medium: var(--bs-royal-200);
 
   /* Accent 2 */
   --bs-accent-2-base: var(--bs-violet-300);
+  --bs-accent-2-medium: var(--bs-violet-200);
 
   /* Accent 3 */
   --bs-accent-3-base: var(--bs-pink-300);
+  --bs-accent-3-medium: var(--bs-pink-200);
 
   /* Accent 4 */
-  --bs-accent-4-base: var(--bs-navy-200);
+  --bs-accent-4-base: var(--bs-purple-300);
+  --bs-accent-4-medium: var(--bs-purple-200);
 
-  /* Positive */
-  --bs-positive-base: var(--bs-purple-300);
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-orange-300);
+  --bs-accent-5-medium: var(--bs-orange-200);
+
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-300);
 
-  /* Ecommerce Positive */
-  --bs-ecomm-positive-base: var(--bs-green-300);
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-300);
+  --bs-accent-7-medium: var(--bs-navy-200);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-gray-100);
+  --bs-neutral-base: var(--bs-gray-200);
+  --bs-neutral-medium: var(--bs-gray-300);
+  --bs-neutral-light: var(--bs-gray-400);
+  --bs-neutral-lightest: var(--bs-gray-500);
 
   /* Warning */
-  --bs-warning-dark: var(--bs-orange-400);
-  --bs-warning-base: var(--bs-orange-300);
+  --bs-warning-base: var(--bs-orange-400);
+  --bs-warning-medium: var(--bs-orange-200);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-red-400);
   --bs-negative-base: var(--bs-red-300);
+  --bs-negative-medium: var(--bs-red-200);
 
+  /* Background */
+  --bs-bg-base: var(--bs-slate-600);
+  --bs-bg-light: var(--bs-slate-500);
+  --bs-bg-medium: var(--bs-slate-400);
+  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* gray-400 at 30% */
+  --bs-bg-invert-base: var(--bs-white);
+  --bs-bg-invert-light: var(--bs-gray-50);
+  --bs-bg-invert-medium: var(--bs-gray-100);
+  --bs-bg-base-to-light: var(--bs-slate-500);
+  --bs-bg-base-to-medium: var(--bs-slate-400);
+  --bs-bg-medium-to-base: var(--bs-slate-600);
+  --bs-bg-medium-to-light: var(--bs-slate-500);
+  --bs-bg-light-to-base: var(--bs-slate-600);
+  --bs-bg-light-to-medium: var(--bs-slate-400);
+
+  /* Borders */
+  --bs-border-dark: var(--bs-gray-300);
+  --bs-border-base: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
+  --bs-border-medium: var(--bs-gray-400);
+  --bs-border-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* gray-400 at 50% */
+  --bs-border-input: var(--bs-violet-200);
+  --bs-border-active: var(--bs-blue-300);
+  --bs-border-error: var(--bs-red-300);
 
   /* Atom gradients */
   --bs-gradient-atom-ai-bg: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
@@ -640,9 +640,16 @@
   --bs-shadow-drawerRight: 16px 20px 40px 0 #000;
   --bs-shadow-profilePhoto: inset 0px 0px 0.5em var(--bs-shadow-secondary);
 
-
-
   /* -------------- Deprecated Color Tokens -------------- */
+  /* Ink */
+  --bs-ink-blue: var(--bs-blue-200); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-200); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-100); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-200); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-200); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-200); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-200); /* replaced by Ink Accent 2 */
 
   /* Blue (replaced by Primary) */
   --bs-blue-base: var(--bs-blue-300);
@@ -653,7 +660,7 @@
   --bs-gray-light: var(--bs-gray-400);
   --bs-gray-lightest: var(--bs-gray-500);
 
-  /* Navy (replaced by Accent 4) */
+  /* Navy (replaced by Accent 7) */
   --bs-navy-base: var(--bs-navy-200);
 
   /* Orange (replaced by Warning) */
@@ -667,7 +674,7 @@
   --bs-plum-base: var(--bs-plum-300);
   --bs-plum-medium: var(--bs-plum-200);
 
-  /* Purple (replaced by Positive) */
+  /* Purple (replaced by Accent 4) */
   --bs-purple-base: var(--bs-purple-300);
 
   /* Red (replaced by Negative) */
@@ -679,52 +686,16 @@
 
   /* Violet (replaced by Accent 2) */
   --bs-violet-base: var(--bs-violet-300);
-
-
-  /* ------------ Deprecated Ink Color Tokens ------------ */
-
-  /* Ink Blue (replaced by Ink Primary) */
-  --bs-ink-blue: var(--bs-blue-200);
-
-  /* Ink Orange (replaced by Ink Warning) */
-  --bs-ink-orange: var(--bs-orange-200);
-
-  /* Ink Pink (replaced by Ink Accent 3) */
-  --bs-ink-pink: var(--bs-pink-200);
-
-  /* Ink Plum (replaced by Ink Secondary) */
-  --bs-ink-plum: var(--bs-plum-100);
-
-  /* Ink Purple (replaced by Ink Positive) */
-  --bs-ink-purple: var(--bs-purple-200);
-
-  /* Ink Red (replaced by Ink Negative) */
-  --bs-ink-red: var(--bs-red-200);
-
-  /* Ink Royal (replaced by Ink Accent 1) */
-  --bs-ink-royal: var(--bs-royal-200);
-
-  /* Ink Violet (replaced by Ink Accent 2) */
-  --bs-ink-violet: var(--bs-violet-200);
 }
-/* Token Overrides (Softchoice branding) */
 .softchoice {
   /* Ink */
   --bs-ink-primary: var(--bs-cobalt-400);
-  --bs-ink-secondary: var(--bs-midnight-400);
-  --bs-ink-accent-1: var(--bs-orange-500);
-  --bs-ink-negative: var(--bs-maroon-500);
+  --bs-ink-secondary: var(--bs-orange-500);
+  --bs-ink-accent-1: var(--bs-midnight-400);
+  --bs-ink-accent-4: var(--bs-orchid-400);
   --bs-ink-positive: var(--bs-green-500);
   --bs-ink-warning: var(--bs-yellow-500);
-
-  /* Background */
-  --bs-bg-light: var(--bs-charcoal-100);
-  --bs-bg-medium: var(--bs-charcoal-200);
-  --bs-bg-disabled: var(--bs-charcoal-300);
-  --bs-bg-medium-to-base: var(--bs-charcoal-200);
-  --bs-bg-medium-to-light: var(--bs-charcoal-200);
-  --bs-bg-light-to-base: var(--bs-charcoal-100);
-  --bs-bg-light-to-medium: var(--bs-charcoal-100);
+  --bs-ink-negative: var(--bs-maroon-500);
 
   /* Primary */
   --bs-primary-base-fixed: var(--bs-cobalt-400);
@@ -735,12 +706,35 @@
   --bs-primary-highlight: var(--bs-cobalt-10);
 
   /* Secondary */
-  --bs-secondary-base-fixed: var(--bs-midnight-400);
-  --bs-secondary-base: var(--bs-midnight-400);
-  --bs-secondary-medium: var(--bs-midnight-300);
-  --bs-secondary-light: var(--bs-midnight-200);
-  --bs-secondary-lightest: var(--bs-midnight-100);
-  --bs-secondary-highlight: var(--bs-midnight-10);
+  --bs-secondary-base-fixed: var(--bs-orange-400);
+  --bs-secondary-base: var(--bs-orange-400);
+  --bs-secondary-medium: var(--bs-orange-300);
+  --bs-secondary-light: var(--bs-orange-200);
+  --bs-secondary-lightest: var(--bs-orange-100);
+  --bs-secondary-highlight: var(--bs-orange-10);
+
+  /* Accent 1 */
+  --bs-accent-1-base-fixed: var(--bs-midnight-400);
+  --bs-accent-1-base: var(--bs-midnight-400);
+  --bs-accent-1-medium: var(--bs-midnight-300);
+  --bs-accent-1-light: var(--bs-midnight-200);
+  --bs-accent-1-lightest: var(--bs-midnight-100);
+  --bs-accent-1-highlight: var(--bs-midnight-10);
+
+  /* Accent 4 */
+  --bs-accent-4-base-fixed: var(--bs-orchid-400);
+  --bs-accent-4-base: var(--bs-orchid-400);
+  --bs-accent-4-medium: var(--bs-orchid-300);
+  --bs-accent-4-light: var(--bs-orchid-200);
+  --bs-accent-4-lightest: var(--bs-orchid-100);
+  --bs-accent-4-highlight: var(--bs-orchid-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-gold-400);
+  --bs-accent-5-medium: var(--bs-gold-300);
+  --bs-accent-5-light: var(--bs-gold-200);
+  --bs-accent-5-lightest: var(--bs-gold-100);
+  --bs-accent-5-highlight: var(--bs-gold-10);
 
   /* Neutral */
   --bs-neutral-dark: var(--bs-charcoal-500);
@@ -749,37 +743,28 @@
   --bs-neutral-light: var(--bs-charcoal-200);
   --bs-neutral-lightest: var(--bs-charcoal-100);
 
-  /* Accent 1 */
-  --bs-accent-1-base-fixed: var(--bs-cobalt-400);
-  --bs-accent-1-base: var(--bs-cobalt-400);
-  --bs-accent-1-medium: var(--bs-cobalt-300);
-  --bs-accent-1-light: var(--bs-cobalt-200);
-  --bs-accent-1-lightest: var(--bs-cobalt-100);
-  --bs-accent-1-highlight: var(--bs-cobalt-10);
-
-  /* Positive */
-  --bs-positive-base-fixed: var(--bs-green-400);
-  --bs-positive-base: var(--bs-green-400);
-  --bs-positive-medium: var(--bs-green-300);
-  --bs-positive-light: var(--bs-green-200);
-  --bs-positive-lightest: var(--bs-green-100);
-  --bs-positive-highlight: var(--bs-green-10);
-
   /* Warning */
-  --bs-warning-dark: var(--bs-yellow-450);
   --bs-warning-base: var(--bs-yellow-400);
   --bs-warning-medium: var(--bs-yellow-300);
-  --bs-warning-light: var(--bs-yellow-200);
-  --bs-warning-lightest: var(--bs-yellow-100);
   --bs-warning-highlight: var(--bs-yellow-10);
 
   /* Negative */
-  --bs-negative-dark: var(--bs-maroon-500);
-  --bs-negative-base: var(--bs-maroon-400);
+  --bs-negative-base: var(--bs-maroon-500);
   --bs-negative-medium: var(--bs-maroon-300);
-  --bs-negative-light: var(--bs-maroon-200);
-  --bs-negative-lightest: var(--bs-maroon-100);
   --bs-negative-highlight: var(--bs-maroon-10);
+
+  /* Background */
+  --bs-bg-light: var(--bs-charcoal-100);
+  --bs-bg-medium: var(--bs-charcoal-200);
+  --bs-bg-disabled: var(--bs-charcoal-300);
+  --bs-bg-medium-to-base: var(--bs-charcoal-200);
+  --bs-bg-medium-to-light: var(--bs-charcoal-200);
+  --bs-bg-light-to-base: var(--bs-charcoal-100);
+  --bs-bg-light-to-medium: var(--bs-charcoal-100);
+
+  /* Borders */
+  --bs-border-active: var(--bs-cobalt-400);
+  --bs-border-error: var(--bs-maroon-500);
 }
 /* Reset */
 /* Provides the minimum reset needed for CSS components to function properly */
@@ -852,6 +837,16 @@ textarea,
 select {
   font: inherit;
 }
+button {
+  background-color: inherit;
+  border-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  position: relative;
+  text-decoration: none;
+}
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   html:where(:focus-within) {
@@ -1104,8 +1099,8 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 }
 /* ---------- Error state ----------- */
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])) {
-  --box-shadow: var(--bs-negative-base);
-  --outline-color: var(--bs-negative-base);
+  --box-shadow: var(--bs-ink-negative);
+  --outline-color: var(--bs-ink-negative);
 }
 /* !! Styles duplicated from components/input-general.css !! */
 /* Includes text inputs & textarea */
@@ -1235,9 +1230,6 @@ a {
   text-underline-offset: 2px;
   transition: all var(--bs-transition-quick) var(--bs-transition-ease);
 }
-a:where(:hover) {
-  text-decoration: underline;
-}
 a:where(:visited) {
   color: var(--bs-ink-secondary);
 }
@@ -1249,17 +1241,6 @@ a:where(:focus-visible) {
 a:where(:focus:not(:focus-visible)) {
   outline: none;
 }
-/* Links */
-.dark :where(a) {
-  color: var(--bs-purple-200);
-  outline-color: var(--bs-blue-300);
-}
-.dark :where(a):where(:hover),
-.dark :where(a):where(:focus),
-.dark :where(a):where(:focus-visible) {
-  color: var(--bs-pink-300);
-  text-decoration-color: var(--bs-purple-200);
-}
 /* !! Styles duplicated from components/_deprecated/select.css !! */
 /*
 Custom properties:
@@ -1589,7 +1570,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* data-variant="negative" list option keyboard navigation focus */
 .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
-  --focus-border-color: var(--bs-negative-light);
+  --focus-border-color: var(--bs-red-light);
 }
 /* Multi-select divider */
 .bs-dropdown-options-deprecated :where(li[role="separator"]) {
@@ -2294,12 +2275,6 @@ Custom properties:
 .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
     color: var(--bs-ink-positive);
 }
-:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
-    border-top: 4px solid var(--bs-positive-light);
-}
-:where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
-    color: var(--bs-positive-light);
-}
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
     border-top: 4px solid var(--bs-negative-dark);
@@ -2759,16 +2734,16 @@ This must go last to properly override the other classes
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
-  /*
-    Should be very rare, but below is an optional way for consumer to override z-index.
-    See note in popover.css for more info...most often (but still rare) the consumer
-    would override the --bs-popover-z-index instead, which would take care of this bs-backdrop too.
-    Should be a very very rare use case to need to override both independently to different values.
-  */
-  z-index: var(--bs-backdrop-z-index, var(--bs-popover-z-index));
+  transition-property: opacity;
+  transition-duration: var(--bs-backdrop-transition-duration);
+  transition-timing-function: var(--bs-transition-cubic);
+}
+.bs-backdrop-enter-from,
+.bs-backdrop-leave-to {
+  opacity: 0;
 }
 .bs-badge {
-  --badge-bg: var(--bs-negative-dark);
+  --badge-bg: var(--bs-accent-6-base);
   --badge-text: var(--bs-white);
   display: inline-block;
 }
@@ -2896,10 +2871,7 @@ This must go last to properly override the other classes
   text-decoration: none;
 }
 .bs-banner:where([data-variant="negative"]) {
-  --banner-bg: var(--bs-red-300);
-}
-:where(.softchoice) .bs-banner:where([data-variant="negative"]) {
-  --banner-bg: var(--bs-maroon-400);
+  --banner-bg: var(--bs-accent-6-medium);
 }
 @media (min-width: 957px) {
   .bs-banner {
@@ -2914,7 +2886,7 @@ This must go last to properly override the other classes
   --btn-ghost-ink: var(--bs-ink-primary);
   --btn-highlight: var(--bs-primary-lightest);
   --btn-ink: var(--bs-white);
-  --btn-main: var(--bs-primary-base-fixed);
+  --btn-main: var(--bs-primary-base);
   --btn-padding: .25rem .75rem;
   --btn-secondary: var(--bs-primary-medium);
   --btn-text-size: var(--bs-text-md);
@@ -3015,50 +2987,67 @@ See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
   --btn-ghost-ink: var(--bs-ink-secondary);
   --btn-highlight: var(--bs-secondary-lightest);
   --btn-light: var(--bs-secondary-highlight);
-  --btn-main: var(--bs-secondary-base-fixed);
+  --btn-main: var(--bs-secondary-base);
   --btn-secondary: var(--bs-secondary-medium);
 }
-.dark .bs-button:where([data-variant^='secondary']) {
-  --btn-highlight: var(--bs-secondary-base-fixed);
-  --btn-light: var(--bs-navy-400);
-}
 .bs-button:where([data-variant^='positive']) {
   --btn-ghost-ink: var(--bs-ink-positive);
-  --btn-highlight: var(--bs-positive-lightest);
+  --btn-highlight: var(--bs-positive-highlight);
   --btn-light: var(--bs-positive-highlight);
-  --btn-main: var(--bs-positive-base-fixed);
+  --btn-main: var(--bs-positive-base);
   --btn-secondary: var(--bs-positive-medium);
 }
 .bs-button:where([data-variant^='warning']) {
   --btn-ghost-ink: var(--bs-ink-warning);
-  --btn-highlight: var(--bs-warning-lightest);
+  --btn-highlight: var(--bs-warning-highlight);
   --btn-light: var(--bs-warning-highlight);
-  --btn-main: var(--bs-warning-dark);
+  --btn-main: var(--bs-warning-base);
   --btn-secondary: var(--bs-warning-medium);
 }
 .bs-button:where([data-variant^='negative']) {
   --btn-ghost-ink: var(--bs-ink-negative);
-  --btn-highlight: var(--bs-negative-lightest);
+  --btn-highlight: var(--bs-negative-highlight);
   --btn-light: var(--bs-negative-highlight);
-  --btn-main: var(--bs-negative-dark);
+  --btn-main: var(--bs-negative-base);
   --btn-secondary: var(--bs-negative-medium);
 }
-/* pink variant */
-.bs-button:where([data-variant^='pink']) {
-  --btn-ghost-ink: var(--bs-ink-accent-3);
-  --btn-highlight: var(--bs-accent-3-base-fixed);
-  --btn-light: var(--bs-accent-3-highlight);
-  --btn-main: var(--bs-accent-3-base-fixed);
-  --btn-secondary: var(--bs-accent-3-medium);
+.bs-button:where([data-variant^='accent-1']) {
+  --btn-ghost-ink: var(--bs-ink-accent-1);
+  --btn-highlight: var(--bs-accent-1-base);
+  --btn-light: var(--bs-accent-1-highlight);
+  --btn-main: var(--bs-accent-1-base);
+  --btn-secondary: var(--bs-accent-1-medium);
 }
-/* royal blue variant */
+/* DEPRECATED - royal blue variant (use accent-1 instead) */
 .bs-button:where([data-variant^='royal']) {
   --btn-ghost-ink: var(--bs-ink-accent-1);
-  --btn-highlight: var(--bs-accent-1-base-fixed);
+  --btn-highlight: var(--bs-accent-1-base);
   --btn-light: var(--bs-accent-1-highlight);
-  --btn-main: var(--bs-accent-1-base-fixed);
+  --btn-main: var(--bs-accent-1-base);
   --btn-secondary: var(--bs-accent-1-medium);
 }
+.bs-button:where([data-variant^='accent-2']) {
+  --btn-ghost-ink: var(--bs-ink-accent-2);
+  --btn-highlight: var(--bs-accent-2-base);
+  --btn-light: var(--bs-accent-2-highlight);
+  --btn-main: var(--bs-accent-2-base);
+  --btn-secondary: var(--bs-accent-2-medium);
+}
+.bs-button:where([data-variant^='accent-3']) {
+  --btn-ghost-ink: var(--bs-ink-accent-3);
+  --btn-highlight: var(--bs-accent-3-base);
+  --btn-light: var(--bs-accent-3-highlight);
+  --btn-main: var(--bs-accent-3-base);
+  --btn-secondary: var(--bs-accent-3-medium);
+}
+/* DEPRECATED - pink variant (use accent-3 instead) */
+.bs-button:where([data-variant^='pink']) {
+  --btn-ghost-ink: var(--bs-ink-accent-3);
+  --btn-highlight: var(--bs-accent-3-base);
+  --btn-light: var(--bs-accent-3-highlight);
+  --btn-main: var(--bs-accent-3-base);
+  --btn-secondary: var(--bs-accent-3-medium);
+}
 /* white variant - for dark backgrounds + ghost btn or text btn only */
 .bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
   --btn-ghost-ink: var(--bs-ink-white);
@@ -3511,36 +3500,72 @@ a.bs-circle-button {
   --btn-secondary: transparent;
   --btn-shadow-color-active: transparent;
 }
+.bs-circle-button:where([data-variant="color-primary"]) {
+  --btn-border-color-focused: var(--bs-ink-primary);
+  --btn-text-color: var(--bs-ink-primary);
+  --btn-text-color-hovered: var(--bs-primary-base);
+}
+/* DEPRECATED - blue variant (use primary instead) */
 .bs-circle-button:where([data-variant="color-blue"]) {
   --btn-border-color-focused: var(--bs-ink-primary);
   --btn-text-color: var(--bs-ink-primary);
   --btn-text-color-hovered: var(--bs-primary-base);
 }
-.bs-circle-button:where([data-variant="color-royal"]) {
-  --btn-border-color-focused: var(--bs-ink-accent-1);
-  --btn-text-color: var(--bs-ink-accent-1);
-  --btn-text-color-hovered: var(--bs-accent-1-medium);
+.bs-circle-button:where([data-variant="color-positive"]) {
+  --btn-border-color-focused: var(--bs-positive-base);
+  --btn-text-color: var(--bs-ink-positive);
+  --btn-text-color-hovered: var(--bs-positive-medium);
 }
+/* DEPRECATED - purple variant (use positive instead) */
 .bs-circle-button:where([data-variant="color-purple"]) {
   --btn-border-color-focused: var(--bs-positive-base);
   --btn-text-color: var(--bs-ink-positive);
   --btn-text-color-hovered: var(--bs-positive-medium);
 }
-.bs-circle-button:where([data-variant="color-pink"]) {
-  --btn-border-color-focused: var(--bs-accent-3-base);
-  --btn-text-color: var(--bs-ink-accent-3);
-  --btn-text-color-hovered: var(--bs-accent-3-base);
+.bs-circle-button:where([data-variant="color-warning"]) {
+  --btn-border-color-focused: var(--bs-ink-warning);
+  --btn-text-color: var(--bs-ink-warning);
+  --btn-text-color-hovered: var(--bs-warning-base);
 }
+/* DEPRECATED - orange variant (use warning instead) */
 .bs-circle-button:where([data-variant="color-orange"]) {
   --btn-border-color-focused: var(--bs-ink-warning);
   --btn-text-color: var(--bs-ink-warning);
   --btn-text-color-hovered: var(--bs-warning-base);
 }
+.bs-circle-button:where([data-variant="color-negative"]) {
+  --btn-border-color-focused: var(--bs-ink-negative);
+  --btn-text-color: var(--bs-ink-negative);
+  --btn-text-color-hovered: var(--bs-negative-base);
+}
+/* DEPRECATED - red variant (use negative instead) */
 .bs-circle-button:where([data-variant="color-red"]) {
   --btn-border-color-focused: var(--bs-ink-regative);
   --btn-text-color: var(--bs-ink-negative);
   --btn-text-color-hovered: var(--bs-negative-base);
 }
+.bs-circle-button:where([data-variant="color-accent-1"]) {
+  --btn-border-color-focused: var(--bs-ink-accent-1);
+  --btn-text-color: var(--bs-ink-accent-1);
+  --btn-text-color-hovered: var(--bs-accent-1-medium);
+}
+/* DEPRECATED - royal blue variant (use accent-1 instead) */
+.bs-circle-button:where([data-variant="color-royal"]) {
+  --btn-border-color-focused: var(--bs-ink-accent-1);
+  --btn-text-color: var(--bs-ink-accent-1);
+  --btn-text-color-hovered: var(--bs-accent-1-medium);
+}
+.bs-circle-button:where([data-variant="color-accent-3"]) {
+  --btn-border-color-focused: var(--bs-accent-3-base);
+  --btn-text-color: var(--bs-ink-accent-3);
+  --btn-text-color-hovered: var(--bs-accent-3-medium);
+}
+/* DEPRECATED - pink variant (use accent-3 instead) */
+.bs-circle-button:where([data-variant="color-pink"]) {
+  --btn-border-color-focused: var(--bs-accent-3-base);
+  --btn-text-color: var(--bs-ink-accent-3);
+  --btn-text-color-hovered: var(--bs-accent-3-medium);
+}
 .bs-circle-button:where([data-variant="color-white"]) {
   --btn-border-color-focused: var(--bs-ink-white);
   --btn-text-color: var(--bs-ink-white);
@@ -3558,7 +3583,7 @@ a.bs-circle-button {
 }
 .bs-empty-state {
   --bs-empty-state-description-color: var(--bs-ink-light);
-  --bs-empty-state-icon-color: var(--bs-violet-300);
+  --bs-empty-state-icon-color: var(--bs-accent-2-medium);
   --bs-empty-state-title-color: var(--bs-ink-base);
   --col-gap: var(--bs-space-6);
   --cta-spacing: var(--bs-space-4);
@@ -4279,7 +4304,7 @@ button:where(.bs-filter-button) {
   border-color: transparent;
   border-radius: var(--bs-space-1);
   border: 1px solid transparent;
-  color: var(--bs-royal-400);
+  color: var(--bs-ink-accent-1);
   cursor: pointer;
   display: inline-flex;
   font-family: inherit;
@@ -4300,11 +4325,11 @@ button:where(.bs-filter-button) {
 }
 /* Hover */
 .bs-inline-tab:where(:not([data-selected]):hover) {
-  border-color: var(--bs-royal-400);
+  border-color: var(--bs-ink-accent-1);
 }
 /* Keyboard Focus */
 .bs-inline-tab:where(:focus-visible) {
-  outline: 2px solid var(--bs-royal-400);
+  outline: 2px solid var(--bs-ink-accent-1);
 
   &:where([data-selected]) {
     outline-offset: 2px;
@@ -4330,45 +4355,10 @@ button:where(.bs-filter-button) {
 /* -- Dark Mode Overrides -- */
 :where(.dark .bs-inline-tab) {
 
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-royal-200);
-  }
-
   /* Selected & Disabled */
   &[data-selected]:where(:disabled, [aria-disabled="true"]) {
     color: var(--bs-ink-invert-base);
   }
-
-  /* Keyboard Focus */
-  &:not([disabled]):where(:focus-visible) {
-    outline-color: var(--bs-royal-200);
-  }
-
-  /* Hover */
-  &:not([disabled]):where(:not([data-selected]):hover) {
-    border-color: var(--bs-royal-200);
-  }
-
-}
-/* -- Softchoice Mode Overrides -- */
-:where(.softchoice .bs-inline-tab) {
-
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-cobalt-400);
-  }
-
-  /* Keyboard Focus */
-  &:not([disabled]):where(:focus-visible) {
-    outline-color: var(--bs-cobalt-400);
-  }
-
-  /* Hover */
-  &:not([disabled]):where(:not([data-selected]):hover) {
-    border-color: var(--bs-cobalt-400);
-  }
-
 }
 /* 0 0 1 for width to allow e.g. tailwind override */
 :is(div, *):where(.bs-input-addon) {
@@ -4475,7 +4465,7 @@ and issues with box-sizing
 /* -------- Inner-bordered styles -------- */
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 .bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-200);
+  --input-addon-nested-border: var(--bs-border-input);
 }
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
 .bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
@@ -4569,7 +4559,7 @@ and issues with box-sizing
 /* Straight-lined ::before border to fill the gap below the rounded ::after border */
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(:focus-within)::before {
   border-bottom-width: 1px;
-  border-color: var(--bs-violet-300);
+  border-color: var(--bs-border-input);
   border-radius: 0;
   border-top-width: 1px;
   z-index: 1;
@@ -4772,8 +4762,8 @@ data-autosize-icons="true" - see above
 .bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
 .bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
-  --box-shadow: var(--bs-negative-base);
-  --outline-color: var(--bs-negative-base);
+  --box-shadow: var(--bs-ink-negative);
+  --outline-color: var(--bs-ink-negative);
 }
 /*
  HEADS-UP! Styling to look like an input is inherited from .bs-input
@@ -4872,73 +4862,88 @@ data-autosize-icons="true" - see above
 .bs-input-phone ul:where(.bs-dropdown-options-deprecated) {
   min-width: 7.5rem;
 }
-:where(.bs-input-search) {
-  display: inline-block;
+.bs-input-search {
+  display: grid;
+  grid-template-columns: 1fr 2.5rem;
+  align-items: center;
   width: 100%;
+  height: var(--input-search-height, 2.5rem);
 }
-.bs-input-search :where(.bs-icon svg) {
-  box-sizing: content-box;
-}
-.bs-input-search :where([data-component="bs-icon-search"]) {
+/* -- Icon -- */
+.bs-input-search-icon {
   --icon-size: var(--search-icon-size, 1.75rem);
+  position: relative;
+  grid-area: 1 / 1;
   padding: var(--search-icon-padding, 0 0 0 .75rem);
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
 }
-/* Clear Button */
-.bs-input-search button {
-  align-items: center;
-  background-color: transparent;
-  border-color: transparent;
-  color: inherit;
-  cursor: pointer;
+.bs-input-search-icon :where(svg) {
+  box-sizing: content-box;
+}
+/* -- Input -- */
+.bs-input-search-input {
+  --input-padding-inline: .75rem;
+  grid-area: 1 / 1 / 1 / -1;
+  pointer-events: auto;
+}
+/* make room for search icon */
+/* can't use 0,1,0 here due to :is() usage in input-text.css trumping it */
+.bs-input-search-icon + .bs-input-search-input {
+  padding-inline-start: 2.25rem;
+}
+/* make room for X button (so text doesn't overlap) */
+/* can't use 0,1,0 here due to :is() usage in input-text.css trumping it */
+.bs-input-search-input:has(+ .bs-input-search-button) {
+  padding-inline-end: 2.25rem;
+}
+.bs-input-search:where(:focus-within) :where(.bs-input-search-input) {
+  --input-border: var(--bs-blue-base);
+}
+/* -- Button -- */
+.bs-input-search-button {
+  grid-area: 1 / 2 / 1 / -1;
   display: flex;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  padding-bottom: var(--bs-space-0);
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: var(--bs-space-0);
-  position: relative;
-  text-decoration: none;
+  cursor: pointer;
+  background-color: inherit;
   transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
-.bs-input-search button:where(:active) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-primary-base);
-}
-.bs-input-search button:where(:focus) {
+.bs-input-search-button:where(:focus-visible) {
+  outline: none;
   border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
+  box-shadow: var(--bs-blue-base) 0px 0px 0px 1px inset;
+}
+/* -- Disabled -- */
+.bs-input-search:where(:has(:disabled)) {
+  color: var(--bs-ink-disabled);
 }
-/* Filter variant */
-.bs-input-search:where([data-variant="filter"]) {
+/* -- Filter Variant -- */
+.bs-input-search:where([data-variant="filter"]) :where(.bs-input-search-input) {
   --focus-border: transparent;
   --input-border: transparent;
   --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-primary-base);
+  --input-caret: var(--bs-blue-base);
   --input-padding-block: 0 0.125rem;
-  --input-padding-inline: 0.5rem;
+  --input-padding-inline: 2.5rem 0.5rem;
   --input-placeholder: var(--bs-ink-light);
   --input-text-size: var(--bs-text-sm);
   --search-icon-size: 1rem;
   --search-icon-padding: 0;
 }
-/* Filter variant: persist placeholder text color (`ink-light`) in dark mode */
-:where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::-moz-placeholder {
-  --input-placeholder: var(--bs-ink-light);
+.bs-input-search:where([data-variant="filter"]):where(:focus-within) .bs-input-search-input {
+  --input-border: transparent;
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::placeholder {
+:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
-/* Filter variant: cancels out base hover state styles */
-.bs-input-addon:where([data-variant="filter"]):hover {
-  --input-bg: var(--bs-bg-base);
+:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
+  --input-placeholder: var(--bs-ink-light);
 }
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
+.bs-input-search:where([data-variant="filter"]):where(:has(:disabled)) .bs-input-search-input {
   --input-bg: var(--bs-bg-base);
   --input-border: transparent;
 }
@@ -5171,11 +5176,17 @@ label:where(.bs-label) {
   }
 }
 .bs-option-group {
-  margin: var(--bs-space-3) 0;
+  margin-bottom: var(--bs-space-6);
   padding-top: var(--bs-space-3);
   border-top: 1px solid var(--bs-border-base);
+  display: flex;
+  flex-direction: column;
+}
+.bs-option-group:where(:first-child) {
+  padding-top: 0;
+  border-top: none;
 }
-.bs-option-group:where(:last-child) {
+.bs-option-group:where(:nth-last-child(1 of [data-visible="true"])) {
   margin-bottom: 0;
 }
 .bs-option-group:where(:has(.bs-option-group-title)) {
@@ -5191,27 +5202,47 @@ label:where(.bs-label) {
   display: flex;
   font-size: var(--bs-text-xs);
   font-weight: var(--bs-font-semibold);
-  margin: 0 0 var(--bs-space-3);
-  min-height: var(--bs-space-8);
-  padding: var(--bs-space-1) var(--bs-space-3);
+  height: var(--bs-space-8);
+  margin: 0 0 var(--bs-space-2);
+  padding: var(--bs-space-1) var(--bs-space-3) var(--bs-space-1) 1.75rem;
   position: sticky;
   top: 0;
+  order: -2;
+  z-index: 1;
+}
+/* Separator for multiple selected options */
+.bs-option-group-multiple-hr {
+  margin: 0 var(--bs-space-3) var(--bs-space-3);
+  border-bottom: 0.0625rem solid var(--bs-border-base);
+}
+@media (min-width: 1166px) {
+  .bs-option-group-title {
+    padding: var(--bs-space-1) var(--bs-space-3);
+  }
 }
 .bs-option {
-  padding: var(--bs-space-1) var(--bs-space-2);
-  color: var(--bs-ink-base);
   --description-color: var(--bs-ink-light);
-  cursor: pointer;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
+  color: var(--bs-ink-base);
+  cursor: pointer;
   overflow-wrap: break-word;
+  padding: var(--bs-space-1) var(--bs-space-3) var(--bs-space-1) var(--bs-space-6);
   scroll-margin-bottom: var(--bs-space-3);
+  /* Make sure options are visible when scrolling with group title */
+  /* This is group title height + margin + padding + border */
+  scroll-margin-top: 2.5rem;
+}
+@media (min-width: 1166px) {
+  .bs-option {
+    padding: var(--bs-space-1) var(--bs-space-2);
+  }
 }
 .bs-option {
   margin-bottom: var(--bs-space-2); /* ask ux: 12px is too much, can't see many menu options in view */
 }
-/* is basically doing a last visible child selector, since filtered options and groups are hidden by v-show */
-.bs-option:where(:not(:has(~ [data-visible="true"]))) {
+/* is basically doing a last visible child selector ignoring selectToTop, since filtered options and groups are hidden by v-show */
+.bs-option:where(:nth-last-child(1 of [data-visible="true"][data-selected-to-top="false"])) {
   margin-bottom: 0;
 }
 /* -- DISABLED -- */
@@ -5397,10 +5428,11 @@ label:where(.bs-label) {
   padding-right: 2px;
   width: auto;
 }
+/* todo: waiting to hear back from UX on disabled, but there is at least 1 exmple in code of a pill w/ disable */
 .bs-pill {
   --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-400);
+  --pill-text: var(--bs-ink-accent-1);
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -5422,33 +5454,24 @@ label:where(.bs-label) {
   position: relative;
   text-decoration: none;
 }
-:where(.bs-pill .bs-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
-:where(.dark) .bs-pill {
-  --pill-text: var(--bs-royal-200);
+.bs-pill-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pill-gap);
 }
-/* ------------------------------- Softchoice mode (basic & status types only) ------------------------------- */
-:where(.softchoice) .bs-pill {
-  --pill-text: var(--bs-cobalt-400);
+.bs-pill :where(.bs-icon) {
+  height: 0.75rem;
+  width: 0.75rem;
+  flex-shrink: 0;
 }
 /* ------------------------------ Auto-truncation for content ------------------------------ */
 .bs-pill:has([data-truncate="true"]) {
   max-width: 100%;
 }
-.bs-pill > :where([data-truncate="true"]) {
-  display: inline-block;
+.bs-pill-content:where([data-truncate="true"]) {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* If false, pass thru .bs-pill display styles */
-.bs-pill > :where([data-truncate="false"]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pill-gap);
 }
 /* ------------------------------ Button and Link Styles ------------------------------ */
 :is(a, button).bs-pill {
@@ -5468,37 +5491,47 @@ label:where(.bs-label) {
 }
 /* ------------------------------ Status Styles ------------------------------ */
 .bs-pill:where([data-status]) {
-  --status-color: var(--bs-primary-base-fixed);
-}
-.bs-pill:where([data-status])::before {
-  background-color: var(--status-color);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
+  font-size: var(--bs-text-xs);
+  font-weight: var(--bs-font-semibold);
+  color: var(--status-color);
 }
 /* ----- Status Colors ----- */
-.bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-primary-base-fixed);
-}
-.bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-positive-base-fixed);
-}
-.bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-ink-disabled);
+/* Disabled is being renamed to Neutral */
+.bs-pill:where([data-status^="neutral"], [data-status^="disabled"]) {
+  --status-color: var(--bs-ink-light);
+  --pill-background: var(--bs-accent-7-highlight);
 }
-.bs-pill:where([data-status^="error"]) {
-  --status-color: var(--bs-negative-dark);
+.bs-pill:where([data-status^="active"]) {
+  --status-color: var(--bs-ink-primary);
+  --pill-background: var(--bs-primary-highlight);
 }
 .bs-pill:where([data-status^="positive"]) {
-  --status-color:  var(--bs-ecomm-positive-base-fixed);
+  --status-color: var(--bs-ink-positive);
+  --pill-background: var(--bs-positive-highlight);
 }
 .bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-warning-dark);
+  --status-color: var(--bs-ink-warning);
+  --pill-background: var(--bs-warning-highlight);
+}
+/* Error is being renamed to Negative */
+.bs-pill:where([data-status^="negative"],[data-status^="error"]) {
+  --status-color: var(--bs-ink-negative);
+  --pill-background: var(--bs-negative-highlight);
 }
 /* Deprecated; use "data-status disabled" instead */
 .bs-pill:where([data-status^="inactive"]) {
-  --status-color: var(--bs-gray-300);
+  --status-color: var(--bs-gray-400);
+  --pill-background: var(--bs-gray-100);
+}
+/* Deprecated; use "data-status positive" instead */
+.bs-pill:where([data-status^="complete"]) {
+  --status-color: var(--bs-purple-500);
+  --pill-background: var(--bs-purple-100);
+}
+/* Dark mode selector for complete */
+:where(.dark) .bs-pill:where([data-status^="complete"]) {
+  --status-color: var(--bs-purple-100);
+  --pill-background: var(--bs-purple-500);
 }
 /* ------------------------------ Filter Styles ------------------------------ */
 .bs-pill:where([data-variant^="filter"]) {
@@ -5512,6 +5545,10 @@ label:where(.bs-label) {
 :is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
   --pill-border: var(--bs-ink-base);
 }
+/* ------------------------------ Variant: "White" Styles ------------------------------ */
+.bs-pill:where([data-variant="white"]) {
+  background-color: var(--bs-bg-base-to-medium);
+}
 /* ------------------------------ Variant: "Filter Add" Styles ------------------------------ */
 /* Black + */
 .bs-pill:where([data-variant^="filter"][data-variant*="add"])::after {
@@ -5530,7 +5567,7 @@ label:where(.bs-label) {
 :where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
 }
-/* ------------------------------ Variant: "Filter Active" Styles ------------------------------ */
+/* ------------------------------ Variant: "Filter Active" Styles DEPRECATED ------------------------------ */
 .bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])) {
   --pill-background: var(--bs-primary-base-fixed);
   --pill-border: transparent;
@@ -5557,6 +5594,8 @@ label:where(.bs-label) {
   --pill-text: var(--bs-white);
   --pill-gap: var(--bs-space-1);
   text-transform: uppercase;
+  font-size: var(--bs-text-xs);
+  font-weight: var(--bs-font-semibold);
 }
 .bs-pill:where([data-variant^="live"]):hover {
   --pill-border: transparent;
@@ -5570,6 +5609,7 @@ label:where(.bs-label) {
   width: 12px;
 }
 /* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
+/* Deprecated; use Status Neutral instead */
 .bs-pill:where([data-variant^="inactive"]) {
   --pill-background: var(--bs-neutral-base);
   --pill-text: var(--bs-ink-invert-base);
@@ -6524,7 +6564,7 @@ a.bs-text-button {
 /* ------------ Status colors ------------ */
 .bs-timeline :where(.bs-step-item[data-status="in-progress"]) {
   --step-color: var(--bs-ink-base);
-  --progress-step-bg: var(--bs-positive-light);
+  --progress-step-bg: var(--bs-accent-4-base);
 }
 .bs-progress-bar :where(.bs-step-item[data-status="not-started"]) {
   --step-color: var(--bs-ink-light);
@@ -6540,11 +6580,11 @@ a.bs-text-button {
 .bs-timeline :where(.bs-step-item[data-status="complete"]),
 .bs-timeline :where(.bs-step-item[data-status="paused"]),
 .bs-timeline :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-positive);
-  --progress-step-bg: var(--bs-positive-medium);
+  --step-color: var(--bs-ink-accent-4);
+  --progress-step-bg: var(--bs-accent-4-medium);
 }
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
-  --progress-step-bg: var(--bs-positive-base);
+  --progress-step-bg: var(--bs-accent-4-base);
 }
 .bs-timeline :where(.bs-step-item[data-status="warning"]) {
   --step-color: var(--bs-ink-warning);
@@ -6571,6 +6611,27 @@ a.bs-text-button {
   --toggle-color: var(--bs-white);
   --top-offset: 48px;
 }
+.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]) {
+  --active-color: var(--bs-blue-10);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-ink-medium);
+  --link-color: var(--bs-ink-medium);
+  --link-hover-color: var(--bs-ink-blue);
+  --link-active-color: var(--bs-ink-blue);
+  --toggle-bg-color: var(--bs-bg-base);
+  --toggle-color: var(--bs-ink-medium);
+}
+.dark :where(.bs-vertical-nav-wrapper),
+.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+  --text-color: var(--bs-white);
+  --link-color: var(--bs-white);
+  --link-hover-color: var(--bs-white);
+  --link-active-color: var(--bs-white);
+}
 .bs-vertical-nav {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
@@ -6594,30 +6655,25 @@ a.bs-text-button {
   /* Slight delay for visibility to change prior to opacity */
   transition: opacity var(--bs-transition-medium) var(--bs-transition-ease) 10ms;
   visibility: hidden;
+  pointer-events: none;
   width: auto;
-  z-index: 1000;
+  z-index: 999;
 }
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 .bs-vertical-nav:where([data-collapsible="true"]) {
   transition: opacity 200ms ease 10ms, width 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.dark .bs-vertical-nav-wrapper {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-medium);
-}
 @media (min-width: 1166px) {
   .bs-vertical-nav {
     opacity: 1;
-    padding-bottom: 1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 1rem;
+    padding: 1rem;
     right: auto;
     visibility: visible;
+    pointer-events: auto;
     width: var(--bs-vertical-nav-width);
   }
 
@@ -6648,7 +6704,7 @@ a.bs-text-button {
   position: fixed;
   left: calc(var(--bs-vertical-nav-width) - 0.5rem);
   pointer-events: auto; /* Ensure button is clickable */
-  top: calc(var(--top-offset) + 3rem); /* top-offset + 3rem */
+  top: calc(var(--top-offset) + 1.125rem); /* top-offset + 18px */
   transition: left 300ms ease-out, opacity 100ms ease-out;
   z-index: 1002; /* Above nav to prevent hover conflicts */
 }
@@ -6658,11 +6714,11 @@ a.bs-text-button {
     opacity: 1;
     transition: left 300ms ease-out, opacity 100ms ease-out;
   }
-  
+
   .bs-vertical-nav-toggle:where([data-collapsed="true"]) {
     left: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem);
   }
-  
+
   /* Adjust position for narrow variant when NOT collapsed */
   .bs-vertical-nav-toggle:where([data-narrow="true"]:not([data-collapsed="true"])) {
     left: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem);
@@ -6678,18 +6734,18 @@ a.bs-text-button {
 }
 /* ===== Sections ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-section) {
-  border-top: 2px solid var(--border-color);
+  border-top: 1px solid var(--border-color);
   margin-top: 0.5rem;
   padding-top: 0.5rem;
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section) {
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;
   }
 }
 /* Divider-only sections have no additional padding since no toggle button */
 .bs-vertical-nav :where(.bs-vertical-nav-section[data-divider-only="true"]) {
-  padding-top: 0.25rem;
+  padding-top: 0.5rem;
 }
 /* Don't show border if the very first item is a section */
 .bs-vertical-nav :where(ul li:first-child) {
@@ -6719,7 +6775,7 @@ a.bs-text-button {
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
@@ -6727,7 +6783,7 @@ a.bs-text-button {
     text-align: start;
     text-overflow: ellipsis;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 0.75rem);
   }
 }
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
@@ -6750,11 +6806,6 @@ a.bs-text-button {
   margin-top: 0;
   padding-left: 0;
 }
-@media (min-width: 1166px) {
-  .bs-vertical-nav :where(ul) {
-    gap: 0.25rem;
-  }
-}
 /* ===== Nav List Items / Links */
 .bs-vertical-nav :where(ul li a) {
   align-items: center;
@@ -6784,13 +6835,13 @@ a.bs-text-button {
     min-height: 2.5rem; /* Fixed minimum height to prevent height changes */
     padding: 0.5rem 0.75rem; /* Explicit padding for consistency */
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   /* Collapsed state width */
   .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a) {
     /* collapsed width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-collapsed-width) - 1rem - 1rem);
   }
 
   /* Text overflow - normal width - no icon */
@@ -6799,7 +6850,7 @@ a.bs-text-button {
     text-overflow: ellipsis;
     white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem);
   }
 
   /* Text overflow - normal width - with icon */
@@ -6808,7 +6859,7 @@ a.bs-text-button {
     text-overflow: ellipsis;
     white-space: nowrap;
     /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
@@ -6819,7 +6870,7 @@ a.bs-text-button {
     padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
     text-align: center;
     /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-narrow-width) - 1rem - 1rem);
   }
 
   /* Text overflow - narrow width */
@@ -6832,10 +6883,21 @@ a.bs-text-button {
     width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) {
+  padding-top: 1rem;
+}
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a) {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
 .bs-vertical-nav :where(ul li a:hover) {
   color: var(--link-hover-color);
   font-weight: 600;
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a:hover) {
+  color: var(--bs-ink-blue);
+}
 .bs-vertical-nav :where(ul li a[data-active="true"]) {
   background-color: var(--active-color);
   color: var(--link-active-color);
@@ -6853,7 +6915,6 @@ a.bs-text-button {
   .bs-vertical-nav:not([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 0.875rem;
     width: 0.875rem;
-    margin-left: 0.25rem; /* Visual centering adjustment */
   }
 
   /* Narrow variant icons - 16px (inherits from base) */
@@ -6862,6 +6923,11 @@ a.bs-text-button {
     width: 1rem;
   }
 }
+.bs-vertical-nav-section:where([data-app-links="true"]) .bs-vertical-nav-link-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-left: 0;
+}
 /* Default: Show text on mobile */
 .bs-vertical-nav :where(ul li a > span:last-child) {
   opacity: 1;
@@ -6912,7 +6978,7 @@ a.bs-text-button {
 
   /* Expand link widths on hover when collapsed */
   .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a) {
-    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+    width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
   /* Narrow variant links should respect narrow width on hover */
@@ -6925,7 +6991,6 @@ a.bs-text-button {
     opacity: 1;
     visibility: visible;
     width: auto;
-    overflow: visible;
   }
 
   /* Hide toggle button on hover when collapsed - but NOT when hovering the button itself */
@@ -6939,6 +7004,16 @@ a.bs-text-button {
     display: flex;
   }
 }
+/* ===== Top Content ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+  margin-bottom: 0.5rem;
+  padding: 0;
+}
+@media (min-width: 1166px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-top-content) {
+    margin-bottom: 0.75rem;
+  }
+}
 /* ===== End Items ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-end-items) {
   display: flex;
@@ -7010,9 +7085,6 @@ a.bs-text-button {
   overflow: hidden;
   z-index: var(--bs-popover-z-index);
 }
-.bs-popover-wrap .bs-backdrop {
-  z-index: -1;
-}
 .bs-popover {
   /* absolute positioning is needed for floating-ui, i.e. to anchor to element (is unset if anchored to viewport) */
   position: absolute;
@@ -7102,13 +7174,6 @@ a.bs-text-button {
 .bs-popover-leave-active {
   transition-duration: var(--bs-popover-transition-duration)
 }
-.bs-popover-enter-active .bs-backdrop,
-.bs-popover-leave-active .bs-backdrop {
-  transition-property: opacity;
-  transition-duration: var(--bs-popover-transition-duration);
-  transition-timing-function: var(--bs-transition-cubic);
-}
-.bs-popover-enter-from .bs-backdrop,
 .bs-popover-leave-to .bs-backdrop {
   opacity: 0;
 }
@@ -7245,13 +7310,6 @@ a.bs-text-button {
 .bs-flyout-leave-active {
   transition-duration: var(--bs-popover-transition-duration);
 }
-.bs-flyout-enter-active .bs-backdrop,
-.bs-flyout-leave-active .bs-backdrop {
-  transition-property: opacity;
-  transition-duration: var(--bs-transition-leisurely);
-  transition-timing-function: var(--bs-transition-cubic);
-}
-.bs-flyout-enter-from .bs-backdrop,
 .bs-flyout-leave-to .bs-backdrop {
   opacity: 0;
 }
@@ -7327,13 +7385,6 @@ a.bs-text-button {
 .bs-modal-leave-active {
   transition-duration: var(--bs-popover-transition-duration);
 }
-.bs-modal-enter-active .bs-backdrop,
-.bs-modal-leave-active .bs-backdrop {
-  transition-property: opacity;
-  transition-duration: var(--bs-transition-leisurely);
-  transition-timing-function: var(--bs-transition-cubic);
-}
-.bs-modal-enter-from .bs-backdrop,
 .bs-modal-leave-to .bs-backdrop {
   opacity: 0;
 }
@@ -7419,14 +7470,10 @@ a.bs-text-button {
   --toast-icon-color: var(--bs-ink-positive);
   --toast-variant-color: var(--bs-positive-base);
 }
-.dark :where(.bs-toast[data-variant="positive"]) {
-  --toast-icon-color: var(--bs-positive-light);
-  --toast-variant-color: var(--bs-positive-light);
-}
 .bs-toast:where([data-variant="negative"]) {
   --toast-icon: var(--toast-icon-warning);
-  --toast-icon-color: var(--bs-negative-dark);
-  --toast-variant-color: var(--bs-negative-dark);
+  --toast-icon-color: var(--bs-negative-base);
+  --toast-variant-color: var(--bs-negative-base);
 }
 /* Toast Header - auto-add the icon */
 .bs-toast :where(.bs-pop-header:not(:has(.bs-pop-title, .bs-pop-subtitle)))::before,
@@ -7465,52 +7512,185 @@ a.bs-text-button {
   BsDropdown inherits base styles from its BsPopover root element
   ...so some of these styles override those defaults.
 */
+/* -- DROPDOWN -- */
+/* Note: Assumes mobile sheet by default */
+/* Note: Some heights for reference */
+/* filter (desktop):                        4rem (64px) */
+/* filter (mobile sheet):                   5.5rem (88px) */
+/* mobile header (heading and description): 6rem (96px) */
+/* mobile header (just heading text):       4.25rem (68px) */
+/* mobile sheet footer:                     3rem (48px) */
 .bs-dropdown {
+  --bs-popover-width: 100dvw;
   background-color: var(--bs-bg-base-to-medium);
-  max-height: 20rem;
+  height: 60dvh;
+  margin: 0;
+  max-width: 100dvw;
   padding: 0;
 }
-/* filter could be "display: none" if mounted for it's logic, yet hidden due to using an outside input/model */
-.bs-dropdown:where(:has(.bs-dropdown-filter:not([style*="display: none"]))) {
-  padding-top: 0;
+/* Don't use mobile sheet at any breakpoint */
+.bs-dropdown:where(:not([data-mobile-sheet])) {
+  --bs-popover-width: 20rem;
+  height: unset;
+  max-height: 20rem; /* 320px */
+  max-width: calc(100dvw - 3rem);
 }
-.bs-dropdown :where(hr) {
-  margin: var(--bs-space-3) 0;
+@media (min-width: 752px) {
+  /* Remove bottom drawer at tablet breakpoint */
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) {
+    --bs-popover-width: 20rem;
+    height: unset;
+    max-height: 20rem; /* 320px */
+    max-width: calc(100dvw - 3rem);
+  }
 }
-.bs-dropdown:where(:focus-visible) {
-  outline: none;
+@media (min-width: 1166px) {
+  /* Remove bottom drawer at desktop breakpoint */
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) {
+    --bs-popover-width: 20rem;
+    height: unset;
+    max-height: 20rem; /* 320px */
+    max-width: calc(100dvw - 3rem);
+  }
 }
+/* Here if a consumer adds their own hr between BsOptions.  Just don't override the internal option group separator. */
+.bs-dropdown :where(hr:not(.bs-option-group-multiple-hr)) {
+  margin: var(--bs-space-3) 0;
+}
+/* -- LIST -- */
 .bs-dropdown-list {
-  max-height: 20rem;
+  display: flex;
+  flex-direction: column;
+}
+/* Only add padding, etc when there is at least one child visible */
+.bs-dropdown-list:where(:has(.bs-option[data-visible="true"], .bs-option-group[data-visible="true"])) {
+  flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--bs-space-3) 0;
 }
+.bs-dropdown-list:where(:has( .bs-option-group)) {
+  padding-top: 0;
+}
 .bs-dropdown-list:where(:focus-visible) {
   outline: none;
 }
 .bs-dropdown:where(:has(.bs-dropdown-filter)) :where(.bs-dropdown-list) {
   padding-top: 0;
-  /* filter input is 4rem, so 20rem (default) - 4rem = 16rem */
-  max-height: 16rem;
+}
+/* Move selected options to the top */
+.bs-dropdown-list:where([aria-multiselectable="true"]) :where(.bs-option:where([data-selected-to-top="true"])) {
+  order: -1;
+}
+/* Separator for multiple selected options */
+.bs-dropdown-multiple-hr {
+  margin: 0 var(--bs-space-3) var(--bs-space-3);
+  border-bottom: 0.0625rem solid var(--bs-accent-7-light);
+}
+/* -- MOBILE HEADER -- */
+/* Mobile sheet header */
+.bs-dropdown :where(.bs-dropdown-mobile-header) {
+  border-bottom: 1px solid var(--bs-border-base);
+  padding: var(--bs-space-6);
+}
+/* Hide header if not using mobile sheet */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-mobile-header) {
+  display: none;
+}
+/* Hide header at tablet breakpoint if only using mobile sheet */
+@media (min-width: 752px) {
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-mobile-header) {
+    display: none;
+  }
+}
+/* Hide header at desktop breakpoint if only using tablet sheet */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-mobile-header) {
+    display: none;
+  }
+}
+.bs-dropdown :where(.bs-dropdown-mobile-heading) {
+  font-size: var(--bs-text-lg);
+  line-height: var(--bs-leading-none);
+}
+.bs-dropdown :where(.bs-dropdown-mobile-description) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-base);
+  padding-top: var(--bs-space-1);
+}
+/* -- MOBILE FOOTER -- */
+/* Mobile sheet footer, show by default */
+.bs-dropdown-mobile-footer {
+  display: flex;
+}
+/* Hide footer if not using mobile sheet */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-mobile-footer) {
+  display: none;
+}
+@media (min-width: 752px) {
+  /* Hide footer at tablet breakpoint if only using mobile sheet */
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-mobile-footer) {
+    display: none;
+  }
+}
+@media (min-width: 1166px) {
+  /* Hide footer at desktop breakpoint if only using tablet sheet */
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-mobile-footer) {
+    display: none;
+  }
+}
+.bs-dropdown-mobile-footer :where(.bs-button) {
+  margin: var(--bs-space-2) var(--bs-space-6);
+  width: 100%;
+}
+/* -- CLOSE BUTTON -- */
+/* Override popover button positioning for mobile drawer */
+.bs-dropdown :where(.bs-popover-close-button) {
+  right: var(--bs-space-4);
+  top: var(--bs-space-4);
 }
 /* -- FILTER -- */
 .bs-dropdown-filter {
   position: sticky;
   top: 0;
-  padding: var(--bs-space-3);
-  /* fade to transparent in bottom padding area, so scrolling menu items under filter looks better */
-  background-image: linear-gradient(
-    var(--bs-bg-base-to-medium) calc(100% - var(--bs-space-3)),
-    transparent 100%
-  );
+  padding: var(--bs-space-6) var(--bs-space-3);
   z-index: 1;
 }
+/* No mobile sheet, so always use desktop padding */
+.bs-dropdown:where(:not([data-mobile-sheet])) :where(.bs-dropdown-filter) {
+  padding: var(--bs-space-3);
+}
+/* Mobile sheet, so use desktop padding at tablet breakpoint */
+@media (min-width: 752px) {
+  .bs-dropdown:where([data-mobile-sheet="mobile"]) :where(.bs-dropdown-filter) {
+    padding: var(--bs-space-3);
+  }
+}
+/* Tablet sheet, so use desktop padding at desktop breakpoint */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-mobile-sheet="tablet"]) :where(.bs-dropdown-filter) {
+    padding: var(--bs-space-3);
+  }
+}
+.bs-dropdown-filter:where([data-hide-input="true"]) {
+  padding-top: 0;
+}
 .bs-dropdown-filter-icon {
   margin-left: var(--bs-space-3);
 }
 .bs-dropdown-filter-input {
+  overflow: hidden;
   padding-inline: var(--bs-space-2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bs-dropdown-filter-hint {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+  padding-top: var(--bs-space-2);
+}
+.bs-dropdown-filter:where([data-hide-input="true"]) :where(.bs-dropdown-filter-hint) {
+  padding-top: var(--bs-space-4);
 }
 /* override form-text-fields.css style that hides placeholder when inputs are focused */
 .bs-dropdown-filter-input::-moz-placeholder {
@@ -7534,14 +7714,19 @@ a.bs-text-button {
   box-shadow: 0px 0px 0px 1px inset var(--bs-primary-base);
 }
 /* -- SIZING -- */
-.bs-dropdown:where([data-size="sm"]) {
-  --bs-popover-width: 10rem; /* 160px */
-}
-.bs-dropdown:where([data-size="md"]) {
-  --bs-popover-width: 20rem; /* 320px */
-}
-.bs-dropdown:where([data-size="lg"]) {
-  --bs-popover-width: 28rem; /* 448px */
+/* Only applies to non-mobile */
+@media (min-width: 1166px) {
+  .bs-dropdown:where([data-size="sm"]) {
+    --bs-popover-width: 10rem; /* 160px */
+  }
+
+  .bs-dropdown:where([data-size="md"]) {
+    --bs-popover-width: 20rem; /* 320px */
+  }
+
+  .bs-dropdown:where([data-size="lg"]) {
+    --bs-popover-width: 28rem; /* 448px */
+  }
 }
 /*
   HEADS-UP:
@@ -7549,16 +7734,14 @@ a.bs-text-button {
   so some of these styles are there to override those defaults.
 */
 .bs-tooltip {
+  display: block;
   padding: var(--bs-space-4);
   font-size: var(--bs-text-sm);
-  color: var(--bs-ink-violet);
+  color: var(--bs-ink-accent-2);
   text-align: center;
   line-height: var(--bs-leading-lg);
   background-color: var(--bs-bg-base-to-medium);
 }
-.dark :where(.bs-tooltip) {
-  color: var(--bs-ink-base);
-}
 /* Prevent tiny empty tooltip from showing if empty string is rendered into slot. */
 .bs-tooltip:where(:empty) {
   display: none;
@@ -8672,6 +8855,12 @@ a.bs-text-button {
 .bs-bg-accent-3-highlight {
   background-color: var(--bs-accent-3-highlight);
 }
+.bs-text-accent-4-base-fixed {
+  color: var(--bs-accent-4-base-fixed);
+}
+.bs-bg-accent-4-base-fixed {
+  background-color: var(--bs-accent-4-base-fixed);
+}
 .bs-text-accent-4-base {
   color: var(--bs-accent-4-base);
 }
@@ -8702,84 +8891,114 @@ a.bs-text-button {
 .bs-bg-accent-4-highlight {
   background-color: var(--bs-accent-4-highlight);
 }
-/* Status Colors */
-.bs-text-positive-base-fixed {
-  color: var(--bs-positive-base-fixed);
+.bs-text-accent-5-base {
+  color: var(--bs-accent-5-base);
 }
-.bs-bg-positive-base-fixed {
-  background-color: var(--bs-positive-base-fixed);
+.bs-bg-accent-5-base {
+  background-color: var(--bs-accent-5-base);
 }
-.bs-text-positive-base {
-  color: var(--bs-positive-base);
+.bs-text-accent-5-medium {
+  color: var(--bs-accent-5-medium);
 }
-.bs-bg-positive-base {
-  background-color: var(--bs-positive-base);
+.bs-bg-accent-5-medium {
+  background-color: var(--bs-accent-5-medium);
 }
-.bs-text-positive-medium {
-  color: var(--bs-positive-medium);
+.bs-text-accent-5-light {
+  color: var(--bs-accent-5-light);
 }
-.bs-bg-positive-medium {
-  background-color: var(--bs-positive-medium);
+.bs-bg-accent-5-light {
+  background-color: var(--bs-accent-5-light);
 }
-.bs-text-positive-light {
-  color: var(--bs-positive-light);
+.bs-text-accent-5-lightest {
+  color: var(--bs-accent-5-lightest);
 }
-.bs-bg-positive-light {
-  background-color: var(--bs-positive-light);
+.bs-bg-accent-5-lightest {
+  background-color: var(--bs-accent-5-lightest);
 }
-.bs-text-positive-lightest {
-  color: var(--bs-positive-lightest);
+.bs-text-accent-5-highlight {
+  color: var(--bs-accent-5-highlight);
 }
-.bs-bg-positive-lightest {
-  background-color: var(--bs-positive-lightest);
+.bs-bg-accent-5-highlight {
+  background-color: var(--bs-accent-5-highlight);
 }
-.bs-text-positive-highlight {
-  color: var(--bs-positive-highlight);
+.bs-text-accent-6-base {
+  color: var(--bs-accent-6-base);
 }
-.bs-bg-positive-highlight {
-  background-color: var(--bs-positive-highlight);
+.bs-bg-accent-6-base {
+  background-color: var(--bs-accent-6-base);
+}
+.bs-text-accent-6-medium {
+  color: var(--bs-accent-6-medium);
 }
-.bs-text-ecomm-positive-base-fixed {
-  color: var(--bs-ecomm-positive-base-fixed);
+.bs-bg-accent-6-medium {
+  background-color: var(--bs-accent-6-medium);
 }
-.bs-bg-ecomm-positive-base-fixed {
-  background-color: var(--bs-ecomm-positive-base-fixed);
+.bs-text-accent-6-light {
+  color: var(--bs-accent-6-light);
 }
-.bs-text-ecomm-positive-base {
-  color: var(--bs-ecomm-positive-base);
+.bs-bg-accent-6-light {
+  background-color: var(--bs-accent-6-light);
 }
-.bs-bg-ecomm-positive-base {
-  background-color: var(--bs-ecomm-positive-base);
+.bs-text-accent-6-lightest {
+  color: var(--bs-accent-6-lightest);
 }
-.bs-text-ecomm-positive-medium {
-  color: var(--bs-ecomm-positive-medium);
+.bs-bg-accent-6-lightest {
+  background-color: var(--bs-accent-6-lightest);
 }
-.bs-bg-ecomm-positive-medium {
-  background-color: var(--bs-ecomm-positive-medium);
+.bs-text-accent-6-highlight {
+  color: var(--bs-accent-6-highlight);
 }
-.bs-text-ecomm-positive-light {
-  color: var(--bs-ecomm-positive-light);
+.bs-bg-accent-6-highlight {
+  background-color: var(--bs-accent-6-highlight);
 }
-.bs-bg-ecomm-positive-light {
-  background-color: var(--bs-ecomm-positive-light);
+.bs-text-accent-7-base {
+  color: var(--bs-accent-7-base);
 }
-.bs-text-ecomm-positive-lightest {
-  color: var(--bs-ecomm-positive-lightest);
+.bs-bg-accent-7-base {
+  background-color: var(--bs-accent-7-base);
 }
-.bs-bg-ecomm-positive-lightest {
-  background-color: var(--bs-ecomm-positive-lightest);
+.bs-text-accent-7-medium {
+  color: var(--bs-accent-7-medium);
 }
-.bs-text-ecomm-positive-highlight {
-  color: var(--bs-ecomm-positive-highlight);
+.bs-bg-accent-7-medium {
+  background-color: var(--bs-accent-7-medium);
 }
-.bs-bg-ecomm-positive-highlight {
-  background-color: var(--bs-ecomm-positive-highlight);
+.bs-text-accent-7-light {
+  color: var(--bs-accent-7-light);
 }
-.bs-text-warning-dark {
-  color: var(--bs-warning-dark);
+.bs-bg-accent-7-light {
+  background-color: var(--bs-accent-7-light);
 }
-.bs-bg-warning-dark {
-  background-color: var(--bs-warning-dark);
+.bs-text-accent-7-lightest {
+  color: var(--bs-accent-7-lightest);
+}
+.bs-bg-accent-7-lightest {
+  background-color: var(--bs-accent-7-lightest);
+}
+.bs-text-accent-7-highlight {
+  color: var(--bs-accent-7-highlight);
+}
+.bs-bg-accent-7-highlight {
+  background-color: var(--bs-accent-7-highlight);
+}
+/* Status Colors */
+.bs-text-positive-base {
+  color: var(--bs-positive-base);
+}
+.bs-bg-positive-base {
+  background-color: var(--bs-positive-base);
+}
+.bs-text-positive-medium {
+  color: var(--bs-positive-medium);
+}
+.bs-bg-positive-medium {
+  background-color: var(--bs-positive-medium);
+}
+.bs-text-positive-highlight {
+  color: var(--bs-positive-highlight);
+}
+.bs-bg-positive-highlight {
+  background-color: var(--bs-positive-highlight);
 }
 .bs-text-warning-base {
   color: var(--bs-warning-base);
@@ -8793,30 +9012,12 @@ a.bs-text-button {
 .bs-bg-warning-medium {
   background-color: var(--bs-warning-medium);
 }
-.bs-text-warning-light {
-  color: var(--bs-warning-light);
-}
-.bs-bg-warning-light {
-  background-color: var(--bs-warning-light);
-}
-.bs-text-warning-lightest {
-  color: var(--bs-warning-lightest);
-}
-.bs-bg-warning-lightest {
-  background-color: var(--bs-warning-lightest);
-}
 .bs-text-warning-highlight {
   color: var(--bs-warning-highlight);
 }
 .bs-bg-warning-highlight {
   background-color: var(--bs-warning-highlight);
 }
-.bs-text-negative-dark {
-  color: var(--bs-negative-dark);
-}
-.bs-bg-negative-dark {
-  background-color: var(--bs-negative-dark);
-}
 .bs-text-negative-base {
   color: var(--bs-negative-base);
 }
@@ -8829,18 +9030,6 @@ a.bs-text-button {
 .bs-bg-negative-medium {
   background-color: var(--bs-negative-medium);
 }
-.bs-text-negative-light {
-  color: var(--bs-negative-light);
-}
-.bs-bg-negative-light {
-  background-color: var(--bs-negative-light);
-}
-.bs-text-negative-lightest {
-  color: var(--bs-negative-lightest);
-}
-.bs-bg-negative-lightest {
-  background-color: var(--bs-negative-lightest);
-}
 .bs-text-negative-highlight {
   color: var(--bs-negative-highlight);
 }