@sage/design-tokens 5.2.0 → 6.0.0

package/css/marketing/all.css

@@ -151,12 +151,7 @@
   --modes-color-brand-with-default-alt-light: #FFFFFF;
   --modes-color-brand-copilot-ai-identifier-default-light: #000000;
   --modes-color-brand-copilot-ai-identifier-with-default-light: #00D639;
-  --modes-color-brand-copilot-no-bg-s-light: #000000;
-  --modes-color-brand-copilot-no-bg-star-light: #000000;
-  --modes-color-brand-copilot-no-bg-mono-light: #000000;
-  --modes-color-brand-copilot-with-bg-s-light: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-  --modes-color-brand-copilot-with-bg-star-light: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-  --modes-color-brand-copilot-with-bg-bg-light: #000000;
+  --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
   --modes-color-custom-default-light: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
   --modes-color-custom-frozen-light: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
   --modes-color-generic-bg-nought-light: #FFFFFF;
@@ -269,7 +264,8 @@
   --modes-color-status-caution-hover-light: #b13a0d; /* used on pill hover states */
   --modes-color-status-caution-hover-alt-light: #f1e0d8; /* used on pill hover states and message bg */
   --modes-color-status-caution-text-light: #bf3e0c;
-  --modes-color-status-caution-frozen-default-light: #FF8629; /* used on global message bg */
+  --modes-color-status-caution-frozenglobal-default-light: #ff8629; /* used on global message bg */
+  --modes-color-status-caution-frozenglobal-hover-light: #ff9a4e; /* used on global message bg */
   --modes-color-status-content-with-default-light: #FFFFFF;
   --modes-color-status-content-with-default-alt-light: #000000f2;
   --modes-color-status-content-with-hover-light: #FFFFFF; /* for pill hover X */
@@ -281,19 +277,21 @@
   --modes-color-status-info-default-alt-light: #eaeef6; /* Subtle message bg */
   --modes-color-status-info-hover-light: #10508a; /* used on pill hover states */
   --modes-color-status-info-hover-alt-light: #dde1e8; /* used on pill hover states and message bg */
-  --modes-color-status-info-frozen-default-light: #65a9ff; /* used on global message bg */
+  --modes-color-status-info-frozenglobal-default-light: #65a9ff; /* used on global message bg */
+  --modes-color-status-info-frozenglobal-hover-light: #84b6ff; /* used on global message bg */
   --modes-color-status-negative-default-light: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-negative-default-alt-light: #fdeceb; /* Subtle message bg */
   --modes-color-status-negative-hover-light: #aa323f; /* used on pill hover states */
   --modes-color-status-negative-hover-alt-light: #efdfde; /* used on pill hover states and message bg */
   --modes-color-status-negative-text-light: #CD384B;
-  --modes-color-status-neutral-alt-light: #656565;
   --modes-color-status-neutral-default-light: #656565;
   --modes-color-status-neutral-default-alt-light: #efefef; /* Subtle message bg */
   --modes-color-status-neutral-hover-light: #555; /* used on pill hover states */
   --modes-color-status-neutral-hover-alt-light: #e2e2e2; /* used on pill hover states and message bg */
   --modes-color-status-neutral-frozen-default-light: #335B70;
+  --modes-color-status-neutral-frozen-default-alt-light: #eaedf0; /* Subtle message bg */
   --modes-color-status-neutral-frozen-hover-light: #20313b;
+  --modes-color-status-neutral-frozen-hover-alt-light: #dde0e2; /* used on pill hover states and message bg */
   --modes-color-status-positive-default-light: #008A21; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-positive-default-alt-light: #eaf3e8; /* Subtle message bg */
   --modes-color-status-positive-hover-light: #0f731e; /* used on pill hover states  */
@@ -325,12 +323,7 @@
   --modes-color-brand-with-default-alt-dark: #000000;
   --modes-color-brand-copilot-ai-identifier-default-dark: #FFFFFF;
   --modes-color-brand-copilot-ai-identifier-with-default-dark: #00D639;
-  --modes-color-brand-copilot-no-bg-s-dark: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-  --modes-color-brand-copilot-no-bg-star-dark: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-  --modes-color-brand-copilot-no-bg-mono-dark: #FFFFFF;
-  --modes-color-brand-copilot-with-bg-s-dark: #000000;
-  --modes-color-brand-copilot-with-bg-star-dark: #000000;
-  --modes-color-brand-copilot-with-bg-bg-dark: #FFFFFF;
+  --modes-color-brand-copilot-no-bg-monochrome-dark: #FFFFFF;
   --modes-color-custom-default-dark: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
   --modes-color-custom-frozen-dark: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
   --modes-color-generic-bg-nought-dark: #000000;
@@ -433,17 +426,18 @@
   --modes-color-interactive-progress-bg-dark: #ffffff14;
   --modes-color-interactive-progress-bg-alt-dark: #00000014;
   --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
-  --modes-color-status-ai-default-dark: #000000;
-  --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-generic-default-dark: #008a89;
   --modes-color-status-caution-default-dark: #E04500;
   --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
   --modes-color-status-caution-hover-alt-dark: #34211a; /* used on pill hover states and message bg */
   --modes-color-status-caution-text-dark: #e75b23;
-  --modes-color-status-caution-frozen-default-dark: #251206; /* Global message bg */
+  --modes-color-status-caution-frozenglobal-default-dark: #E04500; /* Global message bg */
+  --modes-color-status-caution-frozenglobal-hover-dark: #eb6732; /* used on global message bg */
+  --modes-color-status-ai-default-dark: #000000;
+  --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
+  --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-generic-default-dark: #008a89;
   --modes-color-status-content-with-default-dark: #000000;
   --modes-color-status-content-with-default-alt-dark: #fffffff2;
   --modes-color-status-content-with-hover-dark: #000000;
@@ -455,19 +449,21 @@
   --modes-color-status-info-default-alt-dark: #111722; /* Subtle message bg */
   --modes-color-status-info-hover-dark: #5291e0; /* used on pill hover states */
   --modes-color-status-info-hover-alt-dark: #212631; /* used on pill hover states and message bg */
-  --modes-color-status-info-frozen-default-dark: #111722; /* Global message bg */
+  --modes-color-status-info-frozenglobal-default-dark: #007ED9; /* Global message bg */
+  --modes-color-status-info-frozenglobal-hover-dark: #5291e0; /* used on global message bg */
   --modes-color-status-negative-default-dark: #E13E53;
   --modes-color-status-negative-default-alt-dark: #241212; /* Subtle message bg */
   --modes-color-status-negative-hover-dark: #eb646c; /* used on pill hover states */
   --modes-color-status-negative-hover-alt-dark: #332122; /* used on pill hover states and message bg */
   --modes-color-status-negative-text-dark: #E13E53;
-  --modes-color-status-neutral-alt-dark: #7C7C7C;
   --modes-color-status-neutral-default-dark: #7C7C7C;
   --modes-color-status-neutral-default-alt-dark: #171717; /* Subtle message bg */
   --modes-color-status-neutral-hover-dark: #909090; /* used on pill hover states */
   --modes-color-status-neutral-hover-alt-dark: #262626; /* used on pill hover states and message bg */
   --modes-color-status-neutral-frozen-default-dark: #9e9e9e;
+  --modes-color-status-neutral-frozen-default-alt-dark: #171717; /* Subtle message bg */
   --modes-color-status-neutral-frozen-hover-dark: #909090;
+  --modes-color-status-neutral-frozen-hover-alt-dark: #262626; /* used on pill hover states and message bg */
   --modes-color-status-positive-default-dark: #009023;
   --modes-color-status-positive-default-alt-dark: #0e1a0b; /* Subtle message bg */
   --modes-color-status-positive-hover-dark: #2e9936; /* used on pill hover states */
@@ -528,9 +524,6 @@
   --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
   --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
   --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
-  --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
-  --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
-  --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --button-typography-primary-s: var(--global-typography-component-firm-s);
   --button-typography-primary-m: var(--global-typography-component-firm-m);
   --button-typography-primary-l: var(--global-typography-component-firm-l);
@@ -543,7 +536,6 @@
   --button-typography-subtle-s: var(--global-typography-component-firm-s);
   --button-typography-subtle-m: var(--global-typography-component-firm-m);
   --button-typography-subtle-l: var(--global-typography-component-firm-l);
-  --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
   --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
   --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
@@ -551,25 +543,17 @@
   --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
   --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
   --button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
-  --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
-  --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
-  --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
+  --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
   --button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
-  --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
   --button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
-  --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
   --button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
-  --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
+  --button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
+  --button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
-  --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
-  --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
   --button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
   --button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
-  --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
-  --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
-  --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
   --button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
   --button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
@@ -659,8 +643,8 @@
   --button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
   --button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
   --button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
-  --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
   --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
+  --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
   --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
   --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
@@ -672,25 +656,30 @@
   --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
   --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
   --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
-  --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
-  --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
+  --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
+  --button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
-  --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
+  --button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
-  --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
-  --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
+  --button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
+  --button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark));
   --button-color-typical-tertiary-label-active-copy: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
   --button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
+  --button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
+  --button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
   --button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
+  --button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
   --button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
   --button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
+  --button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
+  --button-color-video-primary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-color-video-secondary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
   --button-color-video-secondary-border-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
   --button-color-video-secondary-border-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
   --button-color-video-secondary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark));
+  --button-color-video-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container) */
   --button-radius-m: var(--global-radius-interactive-xl); /* Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container) */
   --button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
@@ -711,12 +700,19 @@
   --button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button.  */
   --button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
   --button-color-ai-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
+  --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
   --button-color-destructive-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
   --button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
   --button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
+  --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
   --button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
+  --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
+  --button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
+  --button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
+  --button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-alt-light), var(--modes-color-interactive-monochrome-generic-active-alt-dark));
   --button-color-typical-tertiary-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
   --button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
+  --button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-alt-light), var(--modes-color-interactive-monochrome-generic-with-active-alt-dark));
   --button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
 
   /* container component tokens */
@@ -727,20 +723,15 @@
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
   --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
   --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
   --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
   --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /*   */
   --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /*   */
-  --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
   --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color  */
   --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
-  --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
-  --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
   --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
   --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
   --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -752,17 +743,18 @@
   --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
   --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
   --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color  */
+  --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
   --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
   --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
   --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
+  --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds  */
-  --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
-  --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
-  --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
+  --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
+  --container-color-interactive-icon-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active chevron for any accordion. */
+  --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
   --container-color-interactive-text-enabled: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* Enabled label for standard accordion. */
   --container-color-interactive-text-alt-enabled: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* Enabled label for subtle accordion. */
-  --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
   --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
@@ -782,9 +774,13 @@
   --container-color-interactive-border-alt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Link preview.  */
   --container-color-interactive-border-inactive: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
   --container-color-interactive-border-enabled: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
+  --container-color-interactive-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Enabled chevron for any accordion. */
+  --container-color-interactive-icon-alt-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark)); /* Enabled label for subtle accordion. */
+  --container-color-interactive-icon-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover chevron for any accordion. */
   --container-color-interactive-label-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
   --container-color-interactive-label-footer-activated: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
   --container-color-interactive-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
+  --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
   --container-size-none: var(--global-size-none);
   --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
   --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
@@ -1309,16 +1305,11 @@
 
   /* logo component tokens */
   --logo-size-ai-m: 14px; /* AI star */
-  --logo-color-copilot-with-bg-bg-s: light-dark(var(--modes-color-brand-copilot-with-bg-s-light), var(--modes-color-brand-copilot-with-bg-s-dark));
-  --logo-color-copilot-with-bg-bg-star: light-dark(var(--modes-color-brand-copilot-with-bg-star-light), var(--modes-color-brand-copilot-with-bg-star-dark));
   --logo-color-sage-bg-default: light-dark(var(--modes-color-brand-default-light), var(--modes-color-brand-default-dark)); /* sage logo */
   --logo-color-sage-bg-alt: light-dark(var(--modes-color-brand-default-alt-light), var(--modes-color-brand-default-alt-dark));
   --logo-color-trust-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* filled */
   --logo-color-trust-outline: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
-  --logo-color-copilot-no-bg-bg-s: light-dark(var(--modes-color-brand-copilot-no-bg-s-light), var(--modes-color-brand-copilot-no-bg-s-dark));
-  --logo-color-copilot-no-bg-bg-star: light-dark(var(--modes-color-brand-copilot-no-bg-star-light), var(--modes-color-brand-copilot-no-bg-star-dark));
-  --logo-color-copilot-no-bg-fg-default: light-dark(var(--modes-color-brand-copilot-no-bg-mono-light), var(--modes-color-brand-copilot-no-bg-mono-dark));
-  --logo-color-copilot-with-bg-bg-default: light-dark(var(--modes-color-brand-copilot-with-bg-bg-light), var(--modes-color-brand-copilot-with-bg-bg-dark));
+  --logo-color-copilot-no-bg-fg-default: light-dark(var(--modes-color-brand-copilot-no-bg-monochrome-light), var(--modes-color-brand-copilot-no-bg-monochrome-dark));
   --logo-color-ai-identifier-bg-star: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star bg color */
   --logo-color-ai-identifier-bg-dot: light-dark(var(--modes-color-brand-copilot-ai-identifier-with-default-light), var(--modes-color-brand-copilot-ai-identifier-with-default-dark));
   --logo-color-ai-identifier-outline: light-dark(var(--modes-color-brand-copilot-ai-identifier-default-light), var(--modes-color-brand-copilot-ai-identifier-default-dark)); /* star outline variant */
@@ -1654,31 +1645,46 @@
   /* status component tokens */
   --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
   --status-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
-  --status-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
-  --status-color-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
-  --status-color-callout-bg-alt-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
-  --status-color-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
-  --status-color-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
-  --status-color-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
-  --status-color-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
-  --status-color-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Global message bg */
-  --status-color-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
-  --status-color-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
-  --status-color-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
-  --status-color-neutral-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark)); /* Subtle message bg */
-  --status-color-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
-  --status-color-neutral-icon: light-dark(var(--modes-color-status-neutral-alt-light), var(--modes-color-status-neutral-alt-dark)); /* Icon on tinted bgs */
-  --status-color-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
-  --status-color-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
-  --status-color-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
-  --status-color-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
-  --status-color-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
-  --status-color-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
-  --status-color-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-global-callout-bg-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
+  --status-color-message-global-info-bg-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Global message bg */
+  --status-color-message-global-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-global-warning-bg-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
+  --status-color-message-global-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-contextual-bg: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
+  --status-color-message-contextual-icon: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* decorative icon on standard contextual messages */
+  --status-color-message-contextual-ai-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark));
+  --status-color-message-contextual-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
+  --status-color-message-contextual-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
+  --status-color-message-contextual-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
+  --status-color-message-contextual-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
+  --status-color-message-contextual-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-contextual-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
+  --status-color-message-contextual-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
+  --status-color-message-contextual-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
+  --status-color-message-contextual-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-contextual-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
+  --status-color-message-contextual-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
+  --status-color-message-contextual-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
+  --status-color-message-contextual-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
+  --status-color-message-contextual-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
+  --status-color-message-contextual-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
+  --status-color-message-contextual-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
+  --status-color-message-contextual-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
+  --status-color-pill-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
+  --status-color-pill-error-bg-alt-default: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* outline pill bg */
+  --status-color-pill-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
+  --status-color-pill-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
+  --status-color-pill-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* outline pill bg */
+  --status-color-pill-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
+  --status-color-pill-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
+  --status-color-pill-neutral-bg-alt-default: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark)); /* outline pill bg */
+  --status-color-pill-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
+  --status-color-pill-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
+  --status-color-pill-success-bg-alt-default: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* outline pill bg */
+  --status-color-pill-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
+  --status-color-pill-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
+  --status-color-pill-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
+  --status-color-pill-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
   --status-typography-label-s: var(--global-typography-component-firm-s);
   --status-typography-label-m: var(--global-typography-component-firm-m);
   --status-typography-label-l: var(--global-typography-component-firm-l);
@@ -1688,31 +1694,35 @@
   --status-typography-heading-s: var(--global-typography-component-firm-s);
   --status-typography-heading-m: var(--global-typography-component-firm-m);
   --status-typography-heading-l: var(--global-typography-component-firm-l);
-  --status-color-label-alt-readonly: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-label-alt-hover: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark));
-  --status-color-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
-  --status-color-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
-  --status-color-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
-  --status-color-callout-bg-alt-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* Subtle message bg */
-  --status-color-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
-  --status-color-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
-  --status-color-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
-  --status-color-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
-  --status-color-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-hover-alt-light), var(--modes-color-status-neutral-hover-alt-dark));
-  --status-color-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
+  --status-color-message-global-callout-bg-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* global message bg hover */
+  --status-color-message-global-info-bg-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
+  --status-color-message-global-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
+  --status-color-message-contextual-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
+  --status-color-message-contextual-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
+  --status-color-message-contextual-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
+  --status-color-pill-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
+  --status-color-pill-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
+  --status-color-pill-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
+  --status-color-pill-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
+  --status-color-pill-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-hover-alt-light), var(--modes-color-status-neutral-hover-alt-dark));
+  --status-color-pill-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
+  --status-color-pill-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
+  --status-color-pill-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
+  --status-color-pill-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
+  --status-color-pill-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
+  --status-color-pill-readonly-label: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
   --status-color-rating-bg-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
   --status-color-rating-bg-default-alt: light-dark(var(--modes-color-status-reviews-default-alt-light), var(--modes-color-status-reviews-default-alt-dark));
   --status-color-rating-bg-hover: light-dark(var(--modes-color-status-reviews-hover-light), var(--modes-color-status-reviews-hover-dark));
   --status-color-rating-border-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
-  --status-color-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
-  --status-color-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
-  --status-color-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
-  --status-color-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
-  --status-color-icon-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark)); /* Decorative message icons */
-  --status-color-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
-  --status-color-label-readonly: light-dark(var(--modes-color-interactive-monochrome-generic-with-default-light), var(--modes-color-interactive-monochrome-generic-with-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
-  --status-color-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
+  --status-color-message-global-label-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
+  --status-color-message-global-label-hover: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
+  --status-color-message-global-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark)); /* Icon on tinted bgs */
+  --status-color-message-contextual-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
+  --status-color-pill-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
+  --status-color-pill-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
+  --status-color-pill-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
+  --status-color-pill-label-alt-hover: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
   --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
   --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
   --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
@@ -1748,8 +1758,8 @@
   --status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
   --status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
   --status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
-  --status-color-bg-readonly: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-border-readonly: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
+  --status-color-pill-readonly-bg-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
+  --status-color-pill-readonly-border-default: light-dark(var(--modes-color-status-inactive-default-light), var(--modes-color-status-inactive-default-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
   --status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
 
   /* tab component tokens */

package/css/marketing/large/components/logo.css

@@ -4,16 +4,11 @@
 
 :root {
   --logo-size-ai-m: 14px; /* AI star */
-  --logo-color-copilot-with-bg-bg-s: var(--modes-color-brand-copilot-with-bg-s);
-  --logo-color-copilot-with-bg-bg-star: var(--modes-color-brand-copilot-with-bg-star);
   --logo-color-sage-bg-default: var(--modes-color-brand-default); /* sage logo */
   --logo-color-sage-bg-alt: var(--modes-color-brand-default-alt);
   --logo-color-trust-bg-default: var(--modes-color-status-positive-default); /* filled */
   --logo-color-trust-outline: var(--modes-color-generic-content-extreme);
-  --logo-color-copilot-no-bg-bg-s: var(--modes-color-brand-copilot-no-bg-s);
-  --logo-color-copilot-no-bg-bg-star: var(--modes-color-brand-copilot-no-bg-star);
-  --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-mono);
-  --logo-color-copilot-with-bg-bg-default: var(--modes-color-brand-copilot-with-bg-bg);
+  --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-monochrome);
   --logo-color-ai-identifier-bg-star: var(--modes-color-brand-copilot-ai-identifier-default); /* star bg color */
   --logo-color-ai-identifier-bg-dot: var(--modes-color-brand-copilot-ai-identifier-with-default);
   --logo-color-ai-identifier-outline: var(--modes-color-brand-copilot-ai-identifier-default); /* star outline variant */