@bspk/ui 1.3.30 → 1.4.1

package/dist/styles/era.css

@@ -1,183 +1,43 @@
-/* Generated from figma export: 2025-07-08T20:32:21.402Z */
+/* Generated from figma export: 2026-02-02T17:54:13.533Z */
 
-@import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 body {
     font-family: var(--typeface);
 }
 
 :root {
     /* Body/Base */
-    --body-base: 400 16px/20px var(--typeface);
-    /* Body/Base - line height */
-    --body-base-line-height: 20px;
-    /* Body/Base - size */
+    --body-base: 400 16px/24px var(--typeface);
+    /* Body/Base -  line height */
+    --body-base-line-height: 24px;
+    /* Body/Base -  size */
     --body-base-size: 16px;
-    /* Body/Base - style */
+    /* Body/Base -  style */
     --body-base-style: regular;
     /* Body/Large */
-    --body-large: 400 18px/24px var(--typeface);
-    /* Body/Large - line height */
-    --body-large-line-height: 24px;
-    /* Body/Large - size */
+    --body-large: 400 18px/28px var(--typeface);
+    /* Body/Large -  line height */
+    --body-large-line-height: 28px;
+    /* Body/Large -  size */
     --body-large-size: 18px;
-    /* Body/Large - style */
+    /* Body/Large -  style */
     --body-large-style: regular;
     /* Body/Small */
     --body-small: 400 14px/20px var(--typeface);
-    /* Body/Small - line height */
+    /* Body/Small -  line height */
     --body-small-line-height: 20px;
-    /* Body/Small - size */
+    /* Body/Small -  size */
     --body-small-size: 14px;
-    /* Body/Small - style */
+    /* Body/Small -  style */
     --body-small-style: regular;
     /* Body/X-Small */
     --body-x-small: 400 12px/16px var(--typeface);
-    /* Body/X-Small - line height */
+    /* Body/X-Small -  line height */
     --body-x-small-line-height: 16px;
-    /* Body/X-Small - size */
+    /* Body/X-Small -  size */
     --body-x-small-size: 12px;
-    /* Body/X-Small - style */
+    /* Body/X-Small -  style */
     --body-x-small-style: regular;
-    /* Colors/Brands/Experiment/blue-dark/100 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-100: #0a2f85;
-    /* Colors/Brands/Experiment/blue-dark/200 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-200: #1347cc;
-    /* Colors/Brands/Experiment/blue-dark/300 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-300: #0f59e2;
-    /* Colors/Brands/Experiment/blue-dark/400 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-400: #357aea;
-    /* Colors/Brands/Experiment/blue-dark/50 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-50: #181d34;
-    /* Colors/Brands/Experiment/blue-dark/500 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-500: #2e88f6;
-    /* Colors/Brands/Experiment/blue-dark/600 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-600: #50a1ff;
-    /* Colors/Brands/Experiment/blue-dark/700 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-700: #7ab7ff;
-    /* Colors/Brands/Experiment/blue-dark/800 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-800: #dcebfe;
-    /* Colors/Brands/Experiment/blue-dark/900 - Global (primitives) */
-    --colors-brands-experiment-blue-dark-900: #f0f6ff;
-    /* Colors/Brands/Experiment/blue-gray-dark/100 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-100: #1a2332;
-    /* Colors/Brands/Experiment/blue-gray-dark/200 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-200: #252e3c;
-    /* Colors/Brands/Experiment/blue-gray-dark/300 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-300: #323b49;
-    /* Colors/Brands/Experiment/blue-gray-dark/400 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-400: #5e6d82;
-    /* Colors/Brands/Experiment/blue-gray-dark/50 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-50: #0c101c;
-    /* Colors/Brands/Experiment/blue-gray-dark/500 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-500: #8b9bb2;
-    /* Colors/Brands/Experiment/blue-gray-dark/600 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-600: #b1c0d2;
-    /* Colors/Brands/Experiment/blue-gray-dark/700 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-700: #d4dce8;
-    /* Colors/Brands/Experiment/blue-gray-dark/800 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-800: #e2ebf3;
-    /* Colors/Brands/Experiment/blue-gray-dark/900 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-dark-900: #f8fafc;
-    /* Colors/Brands/Experiment/blue-gray-light/100 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-100: #f1f5f9;
-    /* Colors/Brands/Experiment/blue-gray-light/200 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-200: #e1e7ef;
-    /* Colors/Brands/Experiment/blue-gray-light/300 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-300: #c8d6e5;
-    /* Colors/Brands/Experiment/blue-gray-light/400 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-400: #9eacc0;
-    /* Colors/Brands/Experiment/blue-gray-light/50 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-50: #f8fafc;
-    /* Colors/Brands/Experiment/blue-gray-light/500 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-500: #65758b;
-    /* Colors/Brands/Experiment/blue-gray-light/600 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-600: #48566a;
-    /* Colors/Brands/Experiment/blue-gray-light/700 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-700: #344256;
-    /* Colors/Brands/Experiment/blue-gray-light/800 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-800: #1d283a;
-    /* Colors/Brands/Experiment/blue-gray-light/900 - Global (primitives) */
-    --colors-brands-experiment-blue-gray-light-900: #0f1729;
-    /* Colors/Brands/Experiment/blue-light/100 - Global (primitives) */
-    --colors-brands-experiment-blue-light-100: #dcebfe;
-    /* Colors/Brands/Experiment/blue-light/200 - Global (primitives) */
-    --colors-brands-experiment-blue-light-200: #bedbfe;
-    /* Colors/Brands/Experiment/blue-light/300 - Global (primitives) */
-    --colors-brands-experiment-blue-light-300: #91c3fd;
-    /* Colors/Brands/Experiment/blue-light/400 - Global (primitives) */
-    --colors-brands-experiment-blue-light-400: #61a6fa;
-    /* Colors/Brands/Experiment/blue-light/50 - Global (primitives) */
-    --colors-brands-experiment-blue-light-50: #f2f7ff;
-    /* Colors/Brands/Experiment/blue-light/500 - Global (primitives) */
-    --colors-brands-experiment-blue-light-500: #3479e9;
-    /* Colors/Brands/Experiment/blue-light/600 - Global (primitives) */
-    --colors-brands-experiment-blue-light-600: #1559ea;
-    /* Colors/Brands/Experiment/blue-light/700 - Global (primitives) */
-    --colors-brands-experiment-blue-light-700: #173fab;
-    /* Colors/Brands/Experiment/blue-light/800 - Global (primitives) */
-    --colors-brands-experiment-blue-light-800: #162f82;
-    /* Colors/Brands/Experiment/blue-light/900 - Global (primitives) */
-    --colors-brands-experiment-blue-light-900: #0c1736;
-    /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-10 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-dark-opacity-10: #50a1ff1a;
-    /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-12 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-dark-opacity-12: #50a1ff1f;
-    /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-16 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-dark-opacity-16: #50a1ff29;
-    /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-20 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-dark-opacity-20: #50a1ff33;
-    /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-8 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-dark-opacity-8: #50a1ff14;
-    /* Colors/Brands/Experiment/Interactions/primary-light-opacity-10 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-light-opacity-10: #1559ea1a;
-    /* Colors/Brands/Experiment/Interactions/primary-light-opacity-12 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-light-opacity-12: #1559ea1f;
-    /* Colors/Brands/Experiment/Interactions/primary-light-opacity-16 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-light-opacity-16: #1559ea29;
-    /* Colors/Brands/Experiment/Interactions/primary-light-opacity-20 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-light-opacity-20: #1559ea33;
-    /* Colors/Brands/Experiment/Interactions/primary-light-opacity-8 - Global (primitives) */
-    --colors-brands-experiment-interactions-primary-light-opacity-8: #1559ea14;
-    /* Colors/Brands/Experiment/orange-dark/100 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-100: #852c0f;
-    /* Colors/Brands/Experiment/orange-dark/200 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-200: #ab4827;
-    /* Colors/Brands/Experiment/orange-dark/300 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-300: #ce5a07;
-    /* Colors/Brands/Experiment/orange-dark/400 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-400: #f27013;
-    /* Colors/Brands/Experiment/orange-dark/50 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-50: #31160d;
-    /* Colors/Brands/Experiment/orange-dark/500 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-500: #fb923c;
-    /* Colors/Brands/Experiment/orange-dark/600 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-600: #fdba72;
-    /* Colors/Brands/Experiment/orange-dark/700 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-700: #fed6a9;
-    /* Colors/Brands/Experiment/orange-dark/800 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-800: #ffedd6;
-    /* Colors/Brands/Experiment/orange-dark/900 - Global (primitives) */
-    --colors-brands-experiment-orange-dark-900: #fff6eb;
-    /* Colors/Brands/Experiment/orange-light/100 - Global (primitives) */
-    --colors-brands-experiment-orange-light-100: #ffedd6;
-    /* Colors/Brands/Experiment/orange-light/200 - Global (primitives) */
-    --colors-brands-experiment-orange-light-200: #fed6a9;
-    /* Colors/Brands/Experiment/orange-light/300 - Global (primitives) */
-    --colors-brands-experiment-orange-light-300: #fdba72;
-    /* Colors/Brands/Experiment/orange-light/400 - Global (primitives) */
-    --colors-brands-experiment-orange-light-400: #fb923c;
-    /* Colors/Brands/Experiment/orange-light/50 - Global (primitives) */
-    --colors-brands-experiment-orange-light-50: #fff6eb;
-    /* Colors/Brands/Experiment/orange-light/500 - Global (primitives) */
-    --colors-brands-experiment-orange-light-500: #f67416;
-    /* Colors/Brands/Experiment/orange-light/600 - Global (primitives) */
-    --colors-brands-experiment-orange-light-600: #e4570c;
-    /* Colors/Brands/Experiment/orange-light/700 - Global (primitives) */
-    --colors-brands-experiment-orange-light-700: #b63c0b;
-    /* Colors/Brands/Experiment/orange-light/800 - Global (primitives) */
-    --colors-brands-experiment-orange-light-800: #80310f;
-    /* Colors/Brands/Experiment/orange-light/900 - Global (primitives) */
-    --colors-brands-experiment-orange-light-900: #471a0a;
     /* Colors/Internal/pink-00-light - Global (primitives) */
     --colors-internal-pink-00-light: #ff4f8d;
     /* Colors/Internal/pink-50-dark - Global (primitives) */
@@ -209,7 +69,7 @@ body {
     /* Colors/Neutral/22 - Global (primitives) */
     --colors-neutral-22: #383838;
     /* Colors/Neutral/24 - Global (primitives) */
-    --colors-neutral-24: #424242;
+    --colors-neutral-24: #3d3d3d;
     /* Colors/Neutral/26 - Global (primitives) */
     --colors-neutral-26: #424242;
     /* Colors/Neutral/28 - Global (primitives) */
@@ -286,6 +146,10 @@ body {
     --colors-neutral-98: #fafafa;
     /* Colors/Neutral/transparent - Global (primitives) */
     --colors-neutral-transparent: #ffffff00;
+    /* Colors/System/AI-gradient/blue - Global (primitives) */
+    --colors-system-ai-gradient-blue: #215ecd;
+    /* Colors/System/AI-gradient/pink - Global (primitives) */
+    --colors-system-ai-gradient-pink: #c60ede;
     /* Colors/System/blue-dark - Global (primitives) */
     --colors-system-blue-dark: #5d92f5;
     /* Colors/System/blue-dark-bg - Global (primitives) */
@@ -334,10 +198,10 @@ body {
     --colors-system-spectrum-data-visual-azure-400: #7fc4ec;
     /* Colors/System/Spectrum/Data visual/azure-700 - Global (primitives) */
     --colors-system-spectrum-data-visual-azure-700: #299de0;
-    /* Colors/System/Spectrum/Data visual/backrose-900 - Global (primitives) */
-    --colors-system-spectrum-data-visual-backrose-900: #958ca3;
     /* Colors/System/Spectrum/Data visual/blackrose-1200 - Global (primitives) */
     --colors-system-spectrum-data-visual-blackrose-1200: #130033;
+    /* Colors/System/Spectrum/Data visual/blackrose-900 - Global (primitives) */
+    --colors-system-spectrum-data-visual-blackrose-900: #958ca3;
     /* Colors/System/Spectrum/Data visual/bronze-1100 - Global (primitives) */
     --colors-system-spectrum-data-visual-bronze-1100: #794b34;
     /* Colors/System/Spectrum/Data visual/bronze-800 - Global (primitives) */
@@ -366,10 +230,10 @@ body {
     --colors-system-spectrum-data-visual-highlight-azure-400-opacity: #7fc4ec4d;
     /* Colors/System/Spectrum/Data visual/Highlight/azure-700-opacity - Global (primitives) */
     --colors-system-spectrum-data-visual-highlight-azure-700-opacity: #299de04d;
-    /* Colors/System/Spectrum/Data visual/Highlight/backrose-900-opacity - Global (primitives) */
-    --colors-system-spectrum-data-visual-highlight-backrose-900-opacity: #958ca34d;
     /* Colors/System/Spectrum/Data visual/Highlight/blackrose-1200-opacity - Global (primitives) */
     --colors-system-spectrum-data-visual-highlight-blackrose-1200-opacity: #1300334d;
+    /* Colors/System/Spectrum/Data visual/Highlight/blackrose-900-opacity - Global (primitives) */
+    --colors-system-spectrum-data-visual-highlight-blackrose-900-opacity: #958ca34d;
     /* Colors/System/Spectrum/Data visual/Highlight/bronze-1100-opacity - Global (primitives) */
     --colors-system-spectrum-data-visual-highlight-bronze-1100-opacity: #794b344d;
     /* Colors/System/Spectrum/Data visual/Highlight/bronze-800-opacity - Global (primitives) */
@@ -604,26 +468,10 @@ body {
     --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
     /* West - side sheets */
     --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
-    /* Foreground/Brand/on-brand-primary - Theme - ERA */
-    --foreground-brand-on-primary: #ffffff;
-    /* Foreground/Link text/subtle-inverse-hovered - Theme - ERA */
-    --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inverse-pressed - Theme - ERA */
-    --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
-    /* Foreground/Neutral/inverse-on-surface - Theme - ERA */
-    --foreground-neutral-inverse-on-surface: #fafafa;
-    /* Foreground/Neutral/on-color - Theme - ERA */
-    --foreground-neutral-on-color: #ffffff;
-    /* Foreground/Neutral/on-inverse-surface - Theme - ERA */
-    --foreground-neutral-on-inverse-surface: #fafafa;
-    /* Interaction/disabled-opacity - Theme - 3.0 */
-    --interaction-disabled-opacity: #0000000f;
-    /* Interaction/primary-disabled-opacity - Theme - 3.0 */
-    --interaction-primary-disabled-opacity: #1559ea1f;
-    /* Interaction/primary-hover-opacity - Theme - 3.0 */
-    --interaction-primary-hover-opacity: #1559ea1a;
-    /* Interaction/primary-press-opacity - Theme - 3.0 */
-    --interaction-primary-press-opacity: #1559ea33;
+    /* Foreground/AI-powered/blue - Theme - BRAND */
+    --foreground-ai-powered-blue: #000000;
+    /* Foreground/AI-powered/pink - Theme - BRAND */
+    --foreground-ai-powered-pink: #000000;
     /* Interactions/opacity-black-10 - Global (primitives) */
     --interactions-opacity-black-10: #0000001a;
     /* Interactions/opacity-black-16 - Global (primitives) */
@@ -648,69 +496,69 @@ body {
     --interactions-opacity-white-6: #ffffff0f;
     /* Interactions/opacity-white-8 - Global (primitives) */
     --interactions-opacity-white-8: #ffffff14;
-    /* Colors/Brands/ERA/Interactions/primary-dark-opacity-10 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
     --interactions-primary-dark-opacity-10: #6d84af1a;
-    /* Colors/Brands/ERA/Interactions/primary-dark-opacity-12 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
     --interactions-primary-dark-opacity-12: #6d84af1f;
-    /* Colors/Brands/ERA/Interactions/primary-dark-opacity-16 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
     --interactions-primary-dark-opacity-16: #6d84af29;
-    /* Colors/Brands/ERA/Interactions/primary-dark-opacity-20 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
     --interactions-primary-dark-opacity-20: #6d84af33;
-    /* Colors/Brands/ERA/Interactions/primary-dark-opacity-8 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
     --interactions-primary-dark-opacity-8: #6d84af14;
-    /* Colors/Brands/ERA/Interactions/primary-light-opacity-10 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
     --interactions-primary-light-opacity-10: #0b32791a;
-    /* Colors/Brands/ERA/Interactions/primary-light-opacity-12 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
     --interactions-primary-light-opacity-12: #0b32791f;
-    /* Colors/Brands/ERA/Interactions/primary-light-opacity-16 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
     --interactions-primary-light-opacity-16: #0b327929;
-    /* Colors/Brands/ERA/Interactions/primary-light-opacity-20 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
     --interactions-primary-light-opacity-20: #0b327933;
-    /* Colors/Brands/ERA/Interactions/primary-light-opacity-8 - Global (primitives) */
+    /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
     --interactions-primary-light-opacity-8: #0b327914;
     /* Labels/Base */
-    --labels-base: 500 16px/20px var(--typeface);
-    /* Labels/Base - line height */
-    --labels-base-line-height: 20px;
-    /* Labels/Base - size */
+    --labels-base: 500 16px/24px var(--typeface);
+    /* Labels/Base -  line height */
+    --labels-base-line-height: 24px;
+    /* Labels/Base -  size */
     --labels-base-size: 16px;
-    /* Labels/Base - style */
+    /* Labels/Base -  style */
     --labels-base-style: medium;
     /* Labels/Large */
-    --labels-large: 500 18px/24px var(--typeface);
-    /* Labels/Large - line height */
-    --labels-large-line-height: 24px;
-    /* Labels/Large - size */
+    --labels-large: 500 18px/28px var(--typeface);
+    /* Labels/Large -  line height */
+    --labels-large-line-height: 28px;
+    /* Labels/Large -  size */
     --labels-large-size: 18px;
-    /* Labels/Large - style */
+    /* Labels/Large -  style */
     --labels-large-style: medium;
     /* Labels/Small */
     --labels-small: 500 14px/20px var(--typeface);
-    /* Labels/Small - line height */
+    /* Labels/Small -  line height */
     --labels-small-line-height: 20px;
-    /* Labels/Small - size */
+    /* Labels/Small -  size */
     --labels-small-size: 14px;
-    /* Labels/Small - style */
+    /* Labels/Small -  style */
     --labels-small-style: medium;
     /* Labels/X-Small */
     --labels-x-small: 500 12px/16px var(--typeface);
-    /* Labels/X-Small - line height */
+    /* Labels/X-Small -  line height */
     --labels-x-small-line-height: 16px;
-    /* Labels/X-Small - size */
+    /* Labels/X-Small -  size */
     --labels-x-small-size: 12px;
-    /* Labels/X-Small - style */
+    /* Labels/X-Small -  style */
     --labels-x-small-style: medium;
-    /* Colors/Brands/ERA/Primary/00-base - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
     --primary-00-base: #0b3279;
-    /* Colors/Brands/ERA/Primary/15-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
     --primary-15-dark: #092b67;
-    /* Colors/Brands/ERA/Primary/40-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
     --primary-40-light: #6d84af;
-    /* Colors/Brands/ERA/Primary/55-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
     --primary-55-light: #91a3c3;
-    /* Colors/Brands/ERA/Primary/75-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
     --primary-75-dark: #030d1e;
-    /* Colors/Brands/ERA/Primary/85-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
     --primary-85-light: #dae0eb;
     /* Radius/full - Borders */
     --radius-full: 999px;
@@ -724,17 +572,17 @@ body {
     --radius-sm: 4px;
     /* Radius/xlg - Borders */
     --radius-xlg: 16px;
-    /* Colors/Brands/ERA/Secondary/00-base - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
     --secondary-00-base: #c8102e;
-    /* Colors/Brands/ERA/Secondary/15-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
     --secondary-15-dark: #aa0e27;
-    /* Colors/Brands/ERA/Secondary/40-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
     --secondary-40-light: #de7082;
-    /* Colors/Brands/ERA/Secondary/55-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
     --secondary-55-light: #e693a1;
-    /* Colors/Brands/ERA/Secondary/75-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
     --secondary-75-dark: #32040c;
-    /* Colors/Brands/ERA/Secondary/85-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
     --secondary-85-light: #f7dbe0;
     /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
     --shadows-inner-shadow-black-100: #000000;
@@ -868,22 +716,10 @@ body {
     --spacings-960: 96px;
     /* Spacings/None - Global (primitives) */
     --spacings-none: 0;
-    /* Status/on-error - Theme - ERA */
-    --status-on-error: #ffffff;
-    /* Status/on-information - Theme - ERA */
-    --status-on-information: #ffffff;
-    /* Status/on-informational - Theme - ERA */
-    --status-on-informational: #ffffff;
-    /* Status/on-success - Theme - ERA */
-    --status-on-success: #ffffff;
-    /* Status/on-warning - Theme - ERA */
-    --status-on-warning: #141414;
-    /* Stroke/Neutral/focus-on-inverse - Theme - ERA */
-    --stroke-neutral-focus-on-inverse: #ffffff;
-    /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
-    --stroke-neutral-interaction-inverse-focus: #ffffff;
-    /* Stroke/Neutral/Interactions/inverse-focus - Theme - ERA */
-    --stroke-neutral-interactions-inverse-focus: #ffffff;
+    /* Stroke/AI-powered/blue - Theme - BRAND */
+    --stroke-ai-powered-blue: #000000;
+    /* Stroke/AI-powered/pink - Theme - BRAND */
+    --stroke-ai-powered-pink: #000000;
     /* Stroke/none - Borders */
     --stroke-none: 0;
     /* Stroke/thick - Borders */
@@ -892,22 +728,24 @@ body {
     --stroke-thicker: 4px;
     /* Stroke/thin - Borders */
     --stroke-thin: 1px;
-    /* Surface/Neutral/transparent - Theme - ERA */
-    --surface-neutral-transparent: #ffffff00;
-    /* Colors/Brands/ERA/Tertiary/00-base - Global (primitives) */
+    /* Surface/AI-powered/blue - Theme - BRAND */
+    --surface-ai-powered-blue: #000000;
+    /* Surface/AI-powered/pink - Theme - BRAND */
+    --surface-ai-powered-pink: #000000;
+    /* Colors/Brands/BRAND/Tertiary/00-base - Global (primitives) */
     --tertiary-00-base: #990033;
-    /* Colors/Brands/ERA/Tertiary/15-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Tertiary/15-dark - Global (primitives) */
     --tertiary-15-dark: #82002b;
-    /* Colors/Brands/ERA/Tertiary/40-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Tertiary/40-light - Global (primitives) */
     --tertiary-40-light: #c26685;
-    /* Colors/Brands/ERA/Tertiary/55-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Tertiary/55-light - Global (primitives) */
     --tertiary-55-light: #d18ca3;
-    /* Colors/Brands/ERA/Tertiary/75-dark - Global (primitives) */
+    /* Colors/Brands/BRAND/Tertiary/75-dark - Global (primitives) */
     --tertiary-75-dark: #26000d;
-    /* Colors/Brands/ERA/Tertiary/85-light - Global (primitives) */
+    /* Colors/Brands/BRAND/Tertiary/85-light - Global (primitives) */
     --tertiary-85-light: #f0d9e0;
     /* Typeface - Brand */
-    --typeface: 'SF Pro', 'Work Sans', sans-serif;
+    --typeface: 'SF Pro', 'Inter', sans-serif;
     /* Typography/Line-height/lh-1 - Global (primitives) */
     --typography-line-height-lh-1: 16px;
     /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -971,29 +809,29 @@ body {
     /* Typography/Size/xxxlg - Global (primitives) */
     --typography-size-xxxlg: 40px;
     /* Typography/Typeface/Arial - Global (primitives) */
-    --typography-typeface-arial: 'Arial', sans-serif;
+    --typography-typeface-arial: 'Arial';
     /* Typography/Typeface/Geist - Global (primitives) */
-    --typography-typeface-geist: 'Geist', sans-serif;
+    --typography-typeface-geist: 'Geist';
     /* Typography/Typeface/Helvetica - Global (primitives) */
-    --typography-typeface-helvetica: 'Helvetica', sans-serif;
+    --typography-typeface-helvetica: 'Helvetica';
     /* Typography/Typeface/Inter - Global (primitives) */
-    --typography-typeface-inter: 'Inter', sans-serif;
+    --typography-typeface-inter: 'Inter';
     /* Typography/Typeface/Lato - Global (primitives) */
-    --typography-typeface-lato: 'Lato', sans-serif;
+    --typography-typeface-lato: 'Lato';
     /* Typography/Typeface/Manrope - Global (primitives) */
-    --typography-typeface-manrope: 'Manrope', sans-serif;
+    --typography-typeface-manrope: 'Manrope';
     /* Typography/Typeface/Open Sans - Global (primitives) */
-    --typography-typeface-open-sans: 'Open Sans', sans-serif;
+    --typography-typeface-open-sans: 'Open Sans';
     /* Typography/Typeface/Red Hat Text - Global (primitives) */
-    --typography-typeface-red-hat-text: 'Red Hat Text', sans-serif;
+    --typography-typeface-red-hat-text: 'Red Hat Text';
     /* Typography/Typeface/Roboto - Global (primitives) */
-    --typography-typeface-roboto: 'Roboto', sans-serif;
+    --typography-typeface-roboto: 'Roboto';
     /* Typography/Typeface/SF Pro - Global (primitives) */
-    --typography-typeface-sf-pro: 'SF Pro', sans-serif;
+    --typography-typeface-sf-pro: 'SF Pro';
     /* Typography/Typeface/Typold - Global (primitives) */
-    --typography-typeface-typold: 'Typold', sans-serif;
+    --typography-typeface-typold: 'Typold';
     /* Typography/Typeface/Work Sans - Global (primitives) */
-    --typography-typeface-work-sans: 'Work Sans', sans-serif;
+    --typography-typeface-work-sans: 'Work Sans';
     /* Typography/Weight/300 - Global (primitives) */
     --typography-weight-300: 300;
     /* Typography/Weight/400 - Global (primitives) */
@@ -1004,52 +842,52 @@ body {
     --typography-weight-600: 600;
     /* Mobile/Display/Regular/Large */
     --display-regular-large: 400 56px/72px var(--typeface);
-    /* Mobile/Display/Regular/Large - line height */
+    /* Mobile/Display/Regular/Large -  line height */
     --display-regular-large-line-height: 72px;
-    /* Mobile/Display/Regular/Large - size */
+    /* Mobile/Display/Regular/Large -  size */
     --display-regular-large-size: 56px;
-    /* Mobile/Display/Regular/Large - style */
+    /* Mobile/Display/Regular/Large -  style */
     --display-regular-large-style: regular;
     /* Mobile/Display/Regular/Medium */
     --display-regular-medium: 400 48px/60px var(--typeface);
-    /* Mobile/Display/Regular/Medium - line height */
+    /* Mobile/Display/Regular/Medium -  line height */
     --display-regular-medium-line-height: 60px;
-    /* Mobile/Display/Regular/Medium - size */
+    /* Mobile/Display/Regular/Medium -  size */
     --display-regular-medium-size: 48px;
-    /* Mobile/Display/Regular/Medium - style */
+    /* Mobile/Display/Regular/Medium -  style */
     --display-regular-medium-style: regular;
     /* Mobile/Display/Regular/Small */
     --display-regular-small: 400 40px/48px var(--typeface);
-    /* Mobile/Display/Regular/Small - line height */
+    /* Mobile/Display/Regular/Small -  line height */
     --display-regular-small-line-height: 48px;
-    /* Mobile/Display/Regular/Small - size */
+    /* Mobile/Display/Regular/Small -  size */
     --display-regular-small-size: 40px;
-    /* Mobile/Display/Regular/Small - style */
+    /* Mobile/Display/Regular/Small -  style */
     --display-regular-small-style: regular;
     /* Mobile/Display/Semibold/Large */
     --display-semibold-large: 600 56px/72px var(--typeface);
-    /* Mobile/Display/Semibold/Large - line height */
+    /* Mobile/Display/Semibold/Large -  line height */
     --display-semibold-large-line-height: 72px;
-    /* Mobile/Display/Semibold/Large - size */
+    /* Mobile/Display/Semibold/Large -  size */
     --display-semibold-large-size: 56px;
-    /* Mobile/Display/Semibold/Large - style */
-    --display-semibold-large-style: semibold;
+    /* Mobile/Display/Semibold/Large -  style */
+    --display-semibold-large-style: 600;
     /* Mobile/Display/Semibold/Medium */
     --display-semibold-medium: 600 48px/60px var(--typeface);
-    /* Mobile/Display/Semibold/Medium - line height */
+    /* Mobile/Display/Semibold/Medium -  line height */
     --display-semibold-medium-line-height: 60px;
-    /* Mobile/Display/Semibold/Medium - size */
+    /* Mobile/Display/Semibold/Medium -  size */
     --display-semibold-medium-size: 48px;
-    /* Mobile/Display/Semibold/Medium - style */
-    --display-semibold-medium-style: semibold;
+    /* Mobile/Display/Semibold/Medium -  style */
+    --display-semibold-medium-style: 600;
     /* Mobile/Display/Semibold/Small */
     --display-semibold-small: 600 40px/48px var(--typeface);
-    /* Mobile/Display/Semibold/Small - line height */
+    /* Mobile/Display/Semibold/Small -  line height */
     --display-semibold-small-line-height: 48px;
-    /* Mobile/Display/Semibold/Small - size */
+    /* Mobile/Display/Semibold/Small -  size */
     --display-semibold-small-size: 40px;
-    /* Mobile/Display/Semibold/Small - style */
-    --display-semibold-small-style: semibold;
+    /* Mobile/Display/Semibold/Small -  style */
+    --display-semibold-small-style: 600;
     /* Mobile/Heading/H1 - Large Headline */
     --heading-h1: 600 32px/40px var(--typeface);
     /* Mobile/Heading/H1 - Large Headline line height */
@@ -1057,7 +895,7 @@ body {
     /* Mobile/Heading/H1 - Large Headline size */
     --heading-h1-size: 32px;
     /* Mobile/Heading/H1 - Large Headline style */
-    --heading-h1-style: semibold;
+    --heading-h1-style: 600;
     /* Mobile/Heading/H2 - Headline */
     --heading-h2: 600 28px/36px var(--typeface);
     /* Mobile/Heading/H2 - Headline line height */
@@ -1065,7 +903,7 @@ body {
     /* Mobile/Heading/H2 - Headline size */
     --heading-h2-size: 28px;
     /* Mobile/Heading/H2 - Headline style */
-    --heading-h2-style: semibold;
+    --heading-h2-style: 600;
     /* Mobile/Heading/H3 - Headline */
     --heading-h3: 600 24px/32px var(--typeface);
     /* Mobile/Heading/H3 - Headline line height */
@@ -1073,7 +911,7 @@ body {
     /* Mobile/Heading/H3 - Headline size */
     --heading-h3-size: 24px;
     /* Mobile/Heading/H3 - Headline style */
-    --heading-h3-style: semibold;
+    --heading-h3-style: 600;
     /* Mobile/Heading/H4 - Headline */
     --heading-h4: 600 20px/28px var(--typeface);
     /* Mobile/Heading/H4 - Headline line height */
@@ -1081,22 +919,22 @@ body {
     /* Mobile/Heading/H4 - Headline size */
     --heading-h4-size: 20px;
     /* Mobile/Heading/H4 - Headline style */
-    --heading-h4-style: semibold;
+    --heading-h4-style: 600;
     /* Mobile/Heading/H5 */
     --heading-h5: 600 18px/24px var(--typeface);
-    /* Mobile/Heading/H5 - line height */
+    /* Mobile/Heading/H5 -  line height */
     --heading-h5-line-height: 24px;
-    /* Mobile/Heading/H5 - size */
+    /* Mobile/Heading/H5 -  size */
     --heading-h5-size: 18px;
-    /* Mobile/Heading/H5 - style */
-    --heading-h5-style: semibold;
+    /* Mobile/Heading/H5 -  style */
+    --heading-h5-style: 600;
     /* Mobile/Heading/H6 */
     --heading-h6: 500 16px/20px var(--typeface);
-    /* Mobile/Heading/H6 - line height */
+    /* Mobile/Heading/H6 -  line height */
     --heading-h6-line-height: 20px;
-    /* Mobile/Heading/H6 - size */
+    /* Mobile/Heading/H6 -  size */
     --heading-h6-size: 16px;
-    /* Mobile/Heading/H6 - style */
+    /* Mobile/Heading/H6 -  style */
     --heading-h6-style: medium;
     /* Mobile/Subheader/Large - Headline */
     --subheader-large: 400 20px/28px var(--typeface);
@@ -1138,752 +976,825 @@ body {
     --subheader-xxx-large-size: 32px;
     /* Mobile/Subheader/XXX-Large - Large Headline style */
     --subheader-xxx-large-style: regular;
-
-    @media (width >= 640px) {
-        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
-        --display-regular-large: 400 64px/88px var(--typeface);
-        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
-        --display-regular-large-line-height: 88px;
-        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
-        --display-regular-large-size: 64px;
-        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
-        --display-regular-large-style: regular;
-        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
-        --display-regular-medium: 400 56px/72px var(--typeface);
-        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
-        --display-regular-medium-line-height: 72px;
-        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
-        --display-regular-medium-size: 56px;
-        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
-        --display-regular-medium-style: regular;
-        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
-        --display-regular-small: 400 48px/60px var(--typeface);
-        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
-        --display-regular-small-line-height: 60px;
-        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
-        --display-regular-small-size: 48px;
-        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
-        --display-regular-small-style: regular;
-        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
-        --display-semibold-large: 600 64px/88px var(--typeface);
-        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
-        --display-semibold-large-line-height: 88px;
-        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
-        --display-semibold-large-size: 64px;
-        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
-        --display-semibold-large-style: semibold;
-        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
-        --display-semibold-medium: 600 56px/72px var(--typeface);
-        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
-        --display-semibold-medium-line-height: 72px;
-        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
-        --display-semibold-medium-size: 56px;
-        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
-        --display-semibold-medium-style: semibold;
-        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
-        --display-semibold-small: 600 48px/60px var(--typeface);
-        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
-        --display-semibold-small-line-height: 60px;
-        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
-        --display-semibold-small-size: 48px;
-        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
-        --display-semibold-small-style: semibold;
-        /* Desktop/Heading/H1 */
-        --heading-h1: 600 40px/48px var(--typeface);
-        /* Desktop/Heading/H1 - line height */
-        --heading-h1-line-height: 48px;
-        /* Desktop/Heading/H1 - size */
-        --heading-h1-size: 40px;
-        /* Desktop/Heading/H1 - style */
-        --heading-h1-style: semibold;
-        /* Desktop/Heading/H2 */
-        --heading-h2: 600 32px/40px var(--typeface);
-        /* Desktop/Heading/H2 - line height */
-        --heading-h2-line-height: 40px;
-        /* Desktop/Heading/H2 - size */
-        --heading-h2-size: 32px;
-        /* Desktop/Heading/H2 - style */
-        --heading-h2-style: semibold;
-        /* Desktop/Heading/H3 */
-        --heading-h3: 600 28px/36px var(--typeface);
-        /* Desktop/Heading/H3 - line height */
-        --heading-h3-line-height: 36px;
-        /* Desktop/Heading/H3 - size */
-        --heading-h3-size: 28px;
-        /* Desktop/Heading/H3 - style */
-        --heading-h3-style: semibold;
-        /* Desktop/Heading/H4 */
-        --heading-h4: 600 24px/32px var(--typeface);
-        /* Desktop/Heading/H4 - line height */
-        --heading-h4-line-height: 32px;
-        /* Desktop/Heading/H4 - size */
-        --heading-h4-size: 24px;
-        /* Desktop/Heading/H4 - style */
-        --heading-h4-style: semibold;
-        /* Desktop/Heading/H5 */
-        --heading-h5: 600 20px/28px var(--typeface);
-        /* Desktop/Heading/H5 - line height */
-        --heading-h5-line-height: 28px;
-        /* Desktop/Heading/H5 - size */
-        --heading-h5-size: 20px;
-        /* Desktop/Heading/H5 - style */
-        --heading-h5-style: semibold;
-        /* Desktop/Heading/H6 */
-        --heading-h6: 500 18px/24px var(--typeface);
-        /* Desktop/Heading/H6 - line height */
-        --heading-h6-line-height: 24px;
-        /* Desktop/Heading/H6 - size */
-        --heading-h6-size: 18px;
-        /* Desktop/Heading/H6 - style */
-        --heading-h6-style: medium;
-        /* Desktop/Subheader/Large - Headline */
-        --subheader-large: 400 24px/32px var(--typeface);
-        /* Desktop/Subheader/Large - Headline line height */
-        --subheader-large-line-height: 32px;
-        /* Desktop/Subheader/Large - Headline size */
-        --subheader-large-size: 24px;
-        /* Desktop/Subheader/Large - Headline style */
-        --subheader-large-style: regular;
-        /* Desktop/Subheader/Medium */
-        --subheader-medium: 400 20px/28px var(--typeface);
-        /* Desktop/Subheader/Medium - line height */
-        --subheader-medium-line-height: 28px;
-        /* Desktop/Subheader/Medium - size */
-        --subheader-medium-size: 20px;
-        /* Desktop/Subheader/Medium - style */
-        --subheader-medium-style: regular;
-        /* Desktop/Subheader/X-Large - Headline */
-        --subheader-x-large: 400 28px/36px var(--typeface);
-        /* Desktop/Subheader/X-Large - Headline line height */
-        --subheader-x-large-line-height: 36px;
-        /* Desktop/Subheader/X-Large - Headline size */
-        --subheader-x-large-size: 28px;
-        /* Desktop/Subheader/X-Large - Headline style */
-        --subheader-x-large-style: regular;
-        /* Desktop/Subheader/XX-Large - Headline */
-        --subheader-xx-large: 400 32px/40px var(--typeface);
-        /* Desktop/Subheader/XX-Large - Headline line height */
-        --subheader-xx-large-line-height: 40px;
-        /* Desktop/Subheader/XX-Large - Headline size */
-        --subheader-xx-large-size: 32px;
-        /* Desktop/Subheader/XX-Large - Headline style */
-        --subheader-xx-large-style: regular;
-        /* Desktop/Subheader/XXX-Large - Large Headline */
-        --subheader-xxx-large: 400 40px/48px var(--typeface);
-        /* Desktop/Subheader/XXX-Large - Large Headline line height */
-        --subheader-xxx-large-line-height: 48px;
-        /* Desktop/Subheader/XXX-Large - Large Headline size */
-        --subheader-xxx-large-size: 40px;
-        /* Desktop/Subheader/XXX-Large - Large Headline style */
-        --subheader-xxx-large-style: regular;
-    }
-
-    /** Light theme (default) **/
-    /* Background/base - Theme - ERA */
+    /* light theme (default) */
+    /* Background/base - Theme - BRAND */
     --background-base: #ffffff;
-    /* Background/scrim - Theme - ERA */
+    /* Background/scrim - Theme - BRAND */
     --background-scrim: #00000040;
-    /* Background/shade - Theme - ERA */
+    /* Background/shade - Theme - BRAND */
     --background-shade: #f5f5f5;
-    /* Data visual/category-01 - Theme - ERA */
+    /* Data visual/category-01 - Brand */
     --data-visual-category-01: #0a466c;
-    /* Data visual/category-01-highlight - Theme - ERA */
+    /* Data visual/category-01-highlight - Brand */
     --data-visual-category-01-highlight: #0a466c4d;
-    /* Data visual/category-02 - Theme - ERA */
+    /* Data visual/category-02 - Brand */
     --data-visual-category-02: #299de0;
-    /* Data visual/category-02-highlight - Theme - ERA */
+    /* Data visual/category-02-highlight - Brand */
     --data-visual-category-02-highlight: #299de04d;
-    /* Data visual/category-03 - Theme - ERA */
+    /* Data visual/category-03 - Brand */
     --data-visual-category-03: #130033;
-    /* Data visual/category-03-highlight - Theme - ERA */
+    /* Data visual/category-03-highlight - Brand */
     --data-visual-category-03-highlight: #1300334d;
-    /* Data visual/category-04 - Theme - ERA */
+    /* Data visual/category-04 - Brand */
     --data-visual-category-04: #389e7a;
-    /* Data visual/category-04-highlight - Theme - ERA */
+    /* Data visual/category-04-highlight - Brand */
     --data-visual-category-04-highlight: #389e7a4d;
-    /* Data visual/category-05 - Theme - ERA */
+    /* Data visual/category-05 - Brand */
     --data-visual-category-05: #094a53;
-    /* Data visual/category-05-highlight - Theme - ERA */
+    /* Data visual/category-05-highlight - Brand */
     --data-visual-category-05-highlight: #094a534d;
-    /* Data visual/category-06 - Theme - ERA */
+    /* Data visual/category-06 - Brand */
     --data-visual-category-06: #7f7f7f;
-    /* Data visual/category-06-highlight - Theme - ERA */
+    /* Data visual/category-06-highlight - Brand */
     --data-visual-category-06-highlight: #7f7f7f4d;
-    /* Data visual/category-07 - Theme - ERA */
+    /* Data visual/category-07 - Brand */
     --data-visual-category-07: #433479;
-    /* Data visual/category-07-highlight - Theme - ERA */
+    /* Data visual/category-07-highlight - Brand */
     --data-visual-category-07-highlight: #4334794d;
-    /* Data visual/category-1 - Theme - ERA */
+    /* Data visual/category-1 - Theme - BRAND */
     --data-visual-category-1: #0a466c;
-    /* Data visual/category-1-highlight - Theme - ERA */
+    /* Data visual/category-1-highlight - Theme - BRAND */
     --data-visual-category-1-highlight: #0a466c4d;
-    /* Data visual/category-2 - Theme - ERA */
+    /* Data visual/category-2 - Theme - BRAND */
     --data-visual-category-2: #299de0;
-    /* Data visual/category-2-highlight - Theme - ERA */
+    /* Data visual/category-2-highlight - Theme - BRAND */
     --data-visual-category-2-highlight: #299de04d;
-    /* Data visual/category-3 - Theme - ERA */
+    /* Data visual/category-3 - Theme - BRAND */
     --data-visual-category-3: #130033;
-    /* Data visual/category-3-highlight - Theme - ERA */
+    /* Data visual/category-3-highlight - Theme - BRAND */
     --data-visual-category-3-highlight: #1300334d;
-    /* Data visual/category-4 - Theme - ERA */
+    /* Data visual/category-4 - Theme - BRAND */
     --data-visual-category-4: #389e7a;
-    /* Data visual/category-4-highlight - Theme - ERA */
+    /* Data visual/category-4-highlight - Theme - BRAND */
     --data-visual-category-4-highlight: #389e7a4d;
-    /* Data visual/category-5 - Theme - ERA */
+    /* Data visual/category-5 - Theme - BRAND */
     --data-visual-category-5: #094a53;
-    /* Data visual/category-5-highlight - Theme - ERA */
+    /* Data visual/category-5-highlight - Theme - BRAND */
     --data-visual-category-5-highlight: #094a534d;
-    /* Data visual/category-6 - Theme - ERA */
+    /* Data visual/category-6 - Theme - BRAND */
     --data-visual-category-6: #7f7f7f;
-    /* Data visual/category-6-highlight - Theme - ERA */
+    /* Data visual/category-6-highlight - Theme - BRAND */
     --data-visual-category-6-highlight: #7f7f7f4d;
-    /* Data visual/category-7 - Theme - ERA */
+    /* Data visual/category-7 - Theme - BRAND */
     --data-visual-category-7: #433479;
-    /* Data visual/category-7-highlight - Theme - ERA */
+    /* Data visual/category-7-highlight - Theme - BRAND */
     --data-visual-category-7-highlight: #4334794d;
-    /* Data visual/gradient-end - Theme - ERA */
+    /* Data visual/gradient-end - Theme - BRAND */
     --data-visual-gradient-end: #ffffff4d;
-    /* Data visual/green - Theme - ERA */
+    /* Data visual/green - Theme - BRAND */
     --data-visual-green: #258750;
-    /* Data visual/green-highlight - Theme - ERA */
+    /* Data visual/green-highlight - Theme - BRAND */
     --data-visual-green-highlight: #deede5;
-    /* Data visual/negative - Theme - ERA */
+    /* Data visual/negative - Brand */
     --data-visual-negative: #d83a52;
-    /* Data visual/negative-highlight - Theme - ERA */
+    /* Data visual/negative-highlight - Brand */
     --data-visual-negative-highlight: #f9e1e5;
-    /* Data visual/positive - Theme - ERA */
+    /* Data visual/positive - Brand */
     --data-visual-positive: #258750;
-    /* Data visual/positive-highlight - Theme - ERA */
+    /* Data visual/positive-highlight - Brand */
     --data-visual-positive-highlight: #deede5;
-    /* Data visual/red - Theme - ERA */
+    /* Data visual/red - Theme - BRAND */
     --data-visual-red: #d83a52;
-    /* Data visual/red-highlight - Theme - ERA */
+    /* Data visual/red-highlight - Theme - BRAND */
     --data-visual-red-highlight: #f9e1e5;
-    /* Foreground/Brand/on-inverse-primary - Theme - ERA */
+    /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
     --foreground-brand-on-inverse-primary: #6d84af;
-    /* Foreground/Brand/on-inverse-secondary - Theme - ERA */
+    /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
     --foreground-brand-on-inverse-secondary: #de7082;
-    /* Foreground/Brand/on-brand-secondary - Theme - ERA */
+    /* Foreground/Brand/on-brand-primary - Theme - BRAND */
+    /* Foreground color used on Brand's primary color (non neutral color) */
+    --foreground-brand-on-primary: #ffffff;
+    /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
+    /* Foreground color used on Brand's primary color (non neutral color) */
     --foreground-brand-on-secondary: #ffffff;
-    /* Foreground/Brand/brand-primary - Theme - ERA */
+    /* Foreground/Brand/brand-primary - Theme - BRAND */
+    /* Foreground text and icons that match the brand's primary color */
     --foreground-brand-primary: #0b3279;
-    /* Foreground/Brand/brand-primary-depth - Theme - ERA */
+    /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
     --foreground-brand-primary-depth: #092b67;
-    /* Foreground/Brand/brand-secondary - Theme - ERA */
+    /* Foreground/Brand/brand-secondary - Theme - BRAND */
+    /* Foreground text and icons that match the brand's secondary color */
     --foreground-brand-secondary: #c8102e;
-    /* Foreground/Brand/brand-secondary-depth - Theme - ERA */
+    /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
     --foreground-brand-secondary-depth: #aa0e27;
-    /* Foreground/Link text/default - Theme - ERA */
+    /* Foreground/Link text/default - Theme - BRAND */
     --foreground-link-text-default: #215ecd;
-    /* Foreground/Link text/default-disabled - Theme - ERA */
+    /* Foreground/Link text/default-disabled - Theme - BRAND */
     --foreground-link-text-default-disabled: #7a9ee1;
-    /* Foreground/Link text/default-hovered - Theme - ERA */
+    /* Foreground/Link text/default-hovered - Theme - BRAND */
     --foreground-link-text-default-hovered: #1e55b9;
-    /* Foreground/Link text/default-pressed - Theme - ERA */
+    /* Foreground/Link text/default-pressed - Theme - BRAND */
     --foreground-link-text-default-pressed: #1a4ba4;
-    /* Foreground/Link text/default-visited - Theme - ERA */
+    /* Foreground/Link text/default-visited - Theme - BRAND */
     --foreground-link-text-default-visited: #7a3e7a;
-    /* Foreground/Link text/subtle-disabled - Theme - ERA */
+    /* Foreground/Link text/subtle-disabled - Brand */
     --foreground-link-text-subtle-disabled: #bdbdbd;
-    /* Foreground/Link text/subtle-hovered - Theme - ERA */
+    /* Foreground/Link text/subtle-hovered - Theme - BRAND */
     --foreground-link-text-subtle-hovered: #292929;
-    /* Foreground/Link text/subtle-inversed-disabled - Theme - ERA */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
+    --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
+    --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
+    /* Foreground/Link text/subtle-inversed-disabled - Brand */
     --foreground-link-text-subtle-inversed-disabled: #757575;
-    /* Foreground/Link text/subtle-pressed - Theme - ERA */
-    --foreground-link-text-subtle-pressed: #424242;
-    /* Foreground/Neutral/disabled-on-color-surface - Theme - ERA */
+    /* Foreground/Link text/subtle-pressed - Theme - BRAND */
+    --foreground-link-text-subtle-pressed: #3d3d3d;
+    /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
     --foreground-neutral-disabled-on-color-surface: #757575;
-    /* Foreground/Neutral/disabled-on-surface - Theme - ERA */
+    /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
     --foreground-neutral-disabled-on-surface: #bdbdbd;
-    /* Foreground/Neutral/on-surface - Theme - ERA */
+    /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
+    --foreground-neutral-inverse-on-surface: #fafafa;
+    /* Foreground/Neutral/on-color - Theme - BRAND */
+    /* Interactive controls */
+    --foreground-neutral-on-color: #ffffff;
+    /* Foreground/Neutral/on-inverse-surface - Brand */
+    /* Text and icons against inverse surface */
+    --foreground-neutral-on-inverse-surface: #fafafa;
+    /* Foreground/Neutral/on-surface - Theme - BRAND */
+    /* Default foreground text and icons against any surface color */
     --foreground-neutral-on-surface: #141414;
-    /* Foreground/Neutral/on-surface-variant-01 - Theme - ERA */
-    --foreground-neutral-on-surface-variant-01: #474747;
-    /* Foreground/Neutral/on-surface-variant-02 - Theme - ERA */
+    /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
+    /* Secondary foreground color for icons and text */
+    --foreground-neutral-on-surface-variant-01: #707070;
+    /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
+    /* Tertiary foreground color for icons and text */
     --foreground-neutral-on-surface-variant-02: #757575;
-    /* Foreground/Neutral/on-surface-variant-03 - Theme - ERA */
+    /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
+    /* Quaternary foreground color for icons and text. Only for placeholder text */
     --foreground-neutral-on-surface-variant-03: #8a8a8a;
-    /* Foreground/Neutral/skeleton-element - Theme - ERA */
-    --foreground-neutral-skeleton-element: #c7c7c7;
-    /* Foreground/Spectrum/blue - Theme - ERA */
+    /* Foreground/Neutral/skeleton-element - Theme - BRAND */
+    --foreground-neutral-skeleton-element: #e0e0e0;
+    /* Foreground/Spectrum/blue - Theme - BRAND */
     --foreground-spectrum-blue: #143778;
-    /* Foreground/Spectrum/green - Theme - ERA */
+    /* Foreground/Spectrum/green - Theme - BRAND */
     --foreground-spectrum-green: #134428;
-    /* Foreground/Spectrum/lime - Theme - ERA */
+    /* Foreground/Spectrum/lime - Theme - BRAND */
     --foreground-spectrum-lime: #60651a;
-    /* Foreground/Spectrum/magenta - Theme - ERA */
+    /* Foreground/Spectrum/magenta - Theme - BRAND */
     --foreground-spectrum-magenta: #63076f;
-    /* Foreground/Spectrum/orange - Theme - ERA */
+    /* Foreground/Spectrum/orange - Theme - BRAND */
     --foreground-spectrum-orange: #773001;
-    /* Foreground/Spectrum/pink - Theme - ERA */
+    /* Foreground/Spectrum/pink - Theme - BRAND */
     --foreground-spectrum-pink: #6c1240;
-    /* Foreground/Spectrum/purple - Theme - ERA */
+    /* Foreground/Spectrum/purple - Theme - BRAND */
     --foreground-spectrum-purple: #310077;
-    /* Foreground/Spectrum/red - Theme - ERA */
+    /* Foreground/Spectrum/red - Theme - BRAND */
     --foreground-spectrum-red: #6c1d29;
-    /* Foreground/Spectrum/teal - Theme - ERA */
+    /* Foreground/Spectrum/teal - Theme - BRAND */
     --foreground-spectrum-teal: #01413c;
-    /* Foreground/Spectrum/yellow - Theme - ERA */
+    /* Foreground/Spectrum/yellow - Theme - BRAND */
     --foreground-spectrum-yellow: #7b5e18;
-    /* Interaction/brand-disabled-opacity - Theme - 3.0 */
-    --interaction-brand-disabled-opacity: #0000000f;
-    /* Interaction/brand-hover-opacity - Theme - 3.0 */
-    --interaction-brand-hover-opacity: #0000001a;
-    /* Interaction/brand-press-opacity - Theme - 3.0 */
-    --interaction-brand-press-opacity: #00000033;
-    /* Interaction/hover-opacity - Theme - 3.0 */
-    --interaction-hover-opacity: #00000014;
-    /* Interaction/link-active-opacity - Theme - 3.0 */
-    --interaction-link-active-opacity: #0000004d;
-    /* Interaction/press-opacity - Theme - 3.0 */
-    --interaction-press-opacity: #00000029;
-    /* Interactions/brand-disabled-opacity - Theme - ERA */
+    /* Interactions/brand-disabled-opacity - Theme - BRAND */
     --interactions-brand-disabled-opacity: #0000000f;
-    /* Interactions/brand-hover-opacity - Theme - ERA */
+    /* Interactions/brand-hover-opacity - Theme - BRAND */
     --interactions-brand-hover-opacity: #0000001a;
-    /* Interactions/brand-press-opacity - Theme - ERA */
+    /* Interactions/brand-press-opacity - Theme - BRAND */
     --interactions-brand-press-opacity: #00000033;
-    /* Interactions/disabled-opacity - Theme - ERA */
+    /* Interactions/disabled-opacity - Theme - BRAND */
     --interactions-disabled-opacity: #0000000f;
-    /* Interactions/hover-opacity - Theme - ERA */
+    /* Interactions/hover-opacity - Theme - BRAND */
     --interactions-hover-opacity: #00000014;
-    /* Interactions/link-active-opacity - Theme - ERA */
+    /* Interactions/link-active-opacity - Theme - BRAND */
     --interactions-link-active-opacity: #0000004d;
-    /* Interactions/neutral-hover-opacity - Theme - ERA */
+    /* Interactions/neutral-hover-opacity - Brand */
+    /* surfaces using neutral tones */
     --interactions-neutral-hover-opacity: #00000014;
-    /* Interactions/neutral-press-opacity - Theme - ERA */
+    /* Interactions/neutral-press-opacity - Brand */
+    /* surfaces using neutral tones */
     --interactions-neutral-press-opacity: #00000029;
-    /* Interactions/press-opacity - Theme - ERA */
+    /* Interactions/press-opacity - Theme - BRAND */
     --interactions-press-opacity: #00000029;
-    /* Interactions/primary-disabled-opacity - Theme - ERA */
+    /* Interactions/primary-disabled-opacity - Theme - BRAND */
     --interactions-primary-disabled-opacity: #0b32791f;
-    /* Interactions/primary-hover-opacity - Theme - ERA */
+    /* Interactions/primary-hover-opacity - Theme - BRAND */
     --interactions-primary-hover-opacity: #0b32791a;
-    /* Interactions/primary-press-opacity - Theme - ERA */
+    /* Interactions/primary-press-opacity - Theme - BRAND */
     --interactions-primary-press-opacity: #0b327933;
-    /* Shadow/shadow-10 - Theme - ERA */
+    /* Shadow/shadow-10 - Theme - BRAND */
     --shadow-10: #0000001a;
-    /* Shadow/shadow-12 - Theme - ERA */
+    /* Shadow/shadow-12 - Theme - BRAND */
     --shadow-12: #0000001f;
-    /* Shadow/shadow-15 - Theme - ERA */
+    /* Shadow/shadow-15 - Theme - BRAND */
     --shadow-15: #00000026;
-    /* Shadow/shadow-25 - Theme - ERA */
+    /* Shadow/shadow-25 - Theme - BRAND */
     --shadow-25: #00000040;
-    /* Shadow/shadow-32 - Theme - ERA */
+    /* Shadow/shadow-32 - Theme - BRAND */
     --shadow-32: #00000052;
-    /* Shadow/inner-shadow - Theme - ERA */
+    /* Shadow/inner-shadow - Brand */
     --shadow-inner: #ffffff;
-    /* Shadow/inner-shadow-100 - Theme - ERA */
+    /* Shadow/inner-shadow-100 - Theme - BRAND */
     --shadow-inner-100: #ffffff;
-    /* Shadow/variant-01 - Theme - ERA */
+    /* Shadow/variant-01 - Brand */
     --shadow-variant-01: #0000001a;
-    /* Shadow/variant-02 - Theme - ERA */
+    /* Shadow/variant-02 - Brand */
     --shadow-variant-02: #0000001f;
-    /* Shadow/variant-03 - Theme - ERA */
+    /* Shadow/variant-03 - Brand */
     --shadow-variant-03: #00000026;
-    /* Shadow/variant-04 - Theme - ERA */
+    /* Shadow/variant-04 - Brand */
     --shadow-variant-04: #00000040;
-    /* Shadow/variant-05 - Theme - ERA */
+    /* Shadow/variant-05 - Brand */
     --shadow-variant-05: #00000052;
-    /* Status/error - Theme - ERA */
+    /* Status/error - Theme - BRAND */
+    /* Foreground error text and icons */
     --status-error: #d83a52;
-    /* Status/information - Theme - ERA */
+    /* Status/information - Theme - BRAND */
     --status-information: #276ef1;
-    /* Status/informational - Theme - ERA */
+    /* Status/informational - Brand */
+    /* Foreground informational text and icons */
     --status-informational: #276ef1;
-    /* Status/success - Theme - ERA */
+    /* Status/on-error - Theme - BRAND */
+    /* Foreground error text and icons */
+    --status-on-error: #ffffff;
+    /* Status/on-information - Theme - BRAND */
+    --status-on-information: #ffffff;
+    /* Status/on-informational - Brand */
+    /* Foreground informational text and icons */
+    --status-on-informational: #ffffff;
+    /* Status/on-success - Theme - BRAND */
+    /* Foreground success icons and text */
+    --status-on-success: #ffffff;
+    /* Status/on-warning - Theme - BRAND */
+    /* Foreground warning icons */
+    --status-on-warning: #141414;
+    /* Status/success - Theme - BRAND */
+    /* Foreground success icons and text */
     --status-success: #258750;
-    /* Status/warning - Theme - ERA */
+    /* Status/warning - Theme - BRAND */
+    /* Foreground warning icons */
     --status-warning: #f6bc2f;
-    /* Stroke/Brand/brand-primary - Theme - ERA */
+    /* Stroke/Brand/brand-primary - Theme - BRAND */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-brand-primary: #0b3279;
-    /* Stroke/Brand/brand-primary-depth - Theme - ERA */
+    /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-brand-primary-depth: #092b67;
-    /* Stroke/Brand/brand-secondary - Theme - ERA */
+    /* Stroke/Brand/brand-secondary - Theme - BRAND */
     --stroke-brand-secondary: #c8102e;
-    /* Stroke/Brand/brand-secondary-depth - Theme - ERA */
+    /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
     --stroke-brand-secondary-depth: #a3474e;
-    /* Stroke/Neutral/neutral-base - Theme - ERA */
+    /* Stroke/Neutral/neutral-base - Theme - BRAND */
+    /* For control components */
     --stroke-neutral-base: #949494;
-    /* Stroke/Neutral/disabled-dark - Theme - ERA */
+    /* Stroke/Neutral/disabled-dark - Brand */
+    /* Disabled outline separating the fill and surface background */
     --stroke-neutral-disabled-dark: #757575;
-    /* Stroke/Neutral/disabled-light - Theme - ERA */
+    /* Stroke/Neutral/disabled-light - Brand */
+    /* Disabled outline separating the fill and surface background */
     --stroke-neutral-disabled-light: #bdbdbd;
-    /* Stroke/Neutral/focus - Theme - ERA */
+    /* Stroke/Neutral/focus - Brand */
+    /* Highlight focus element */
     --stroke-neutral-focus: #000000;
-    /* Stroke/Neutral/neutral-high - Theme - ERA */
+    /* Stroke/Neutral/focus-on-inverse - Brand */
+    /* Highlight focus element */
+    --stroke-neutral-focus-on-inverse: #ffffff;
+    /* Stroke/Neutral/neutral-high - Brand */
     --stroke-neutral-high: #242424;
-    /* Stroke/Neutral/neutral-high-contrast - Theme - ERA */
+    /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
     --stroke-neutral-high-contrast: #242424;
-    /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
-    --stroke-neutral-interaction-disabled-dark: #48566a;
-    /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
-    --stroke-neutral-interaction-disabled-light: #c8d6e5;
-    /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
-    --stroke-neutral-interaction-focus: #000000;
-    /* Stroke/Neutral/Interactions/disabled-dark - Theme - ERA */
+    /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
     --stroke-neutral-interactions-disabled-dark: #757575;
-    /* Stroke/Neutral/Interactions/disabled-light - Theme - ERA */
+    /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
     --stroke-neutral-interactions-disabled-light: #bdbdbd;
-    /* Stroke/Neutral/Interactions/focus - Theme - ERA */
+    /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
     --stroke-neutral-interactions-focus: #000000;
-    /* Stroke/Neutral/neutral-low - Theme - ERA */
+    /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
+    --stroke-neutral-interactions-inverse-focus: #ffffff;
+    /* Stroke/Neutral/neutral-low - Brand */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-neutral-low: #e0e0e0;
-    /* Stroke/Neutral/neutral-low-contrast - Theme - ERA */
+    /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
     --stroke-neutral-low-contrast: #e0e0e0;
-    /* Surface/Brand/primary - Theme - ERA */
+    /* Surface/Brand/primary - Theme - BRAND */
     --surface-brand-primary: #0b3279;
-    /* Surface/Brand/primary-highlight - Theme - ERA */
+    /* Surface/Brand/primary-highlight - Theme - BRAND */
     --surface-brand-primary-highlight: #dae0eb;
-    /* Surface/Brand/secondary - Theme - ERA */
+    /* Surface/Brand/secondary - Theme - BRAND */
     --surface-brand-secondary: #c8102e;
-    /* Surface/Brand/secondary-highlight - Theme - ERA */
+    /* Surface/Brand/secondary-highlight - Theme - BRAND */
     --surface-brand-secondary-highlight: #f7dbe0;
-    /* Surface/Neutral/Interactions/dark-disabled - Theme - ERA */
+    /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
     --surface-neutral-interactions-dark-disabled: #d6d6d6;
-    /* Surface/Neutral/Interactions/light-disabled - Theme - ERA */
+    /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
     --surface-neutral-interactions-light-disabled: #f5f5f5;
-    /* Surface/Neutral/Interactions/skeleton - Theme - ERA */
-    --surface-neutral-interactions-skeleton: #e0e0e0;
-    /* Surface/Neutral/inverse - Theme - ERA */
+    /* Surface/Neutral/inverse - Brand */
+    /* Inverted. Use for toasts notification & snackbars */
     --surface-neutral-inverse: #1f1f1f;
-    /* Surface/Neutral/inverse-dark - Theme - ERA */
+    /* Surface/Neutral/inverse-dark - Theme - BRAND */
     --surface-neutral-inverse-dark: #1f1f1f;
-    /* Surface/Neutral/inverse-light - Theme - ERA */
+    /* Surface/Neutral/inverse-light - Theme - BRAND */
     --surface-neutral-inverse-light: #ffffff;
-    /* Surface/Neutral/skeleton - Theme - ERA */
-    --surface-neutral-skeleton: #e0e0e0;
-    /* Surface/Neutral/T1-base - Theme - ERA */
+    /* Surface/Neutral/T1-base - Theme - BRAND */
     --surface-neutral-t1-base: #ffffff;
-    /* Surface/Neutral/T2-lowest - Theme - ERA */
+    /* Surface/Neutral/T2-lowest - Theme - BRAND */
     --surface-neutral-t2-lowest: #f5f5f5;
-    /* Surface/Neutral/T3-low - Theme - ERA */
+    /* Surface/Neutral/T3-low - Theme - BRAND */
+    /* Navigations, app bar etc */
     --surface-neutral-t3-low: #dbdbdb;
-    /* Surface/Neutral/T4-high - Theme - ERA */
-    --surface-neutral-t4-high: #6b6b6b;
-    /* Surface/Spectrum/blue - Theme - ERA */
+    /* Surface/Neutral/T4-high - Theme - BRAND */
+    /* Navigations, app bar etc */
+    --surface-neutral-t4-high: #8a8a8a;
+    /* Surface/Neutral/transparent - Theme - BRAND */
+    --surface-neutral-transparent: #ffffff00;
+    /* Surface/Spectrum/blue - Theme - BRAND */
     --surface-spectrum-blue: #dfe9fd;
-    /* Surface/Spectrum/green - Theme - ERA */
+    /* Surface/Spectrum/green - Theme - BRAND */
     --surface-spectrum-green: #deede5;
-    /* Surface/Spectrum/lime - Theme - ERA */
+    /* Surface/Spectrum/lime - Theme - BRAND */
     --surface-spectrum-lime: #f6f7e0;
-    /* Surface/Spectrum/magenta - Theme - ERA */
+    /* Surface/Spectrum/magenta - Theme - BRAND */
     --surface-spectrum-magenta: #f6dbfa;
-    /* Surface/Spectrum/orange - Theme - ERA */
+    /* Surface/Spectrum/orange - Theme - BRAND */
     --surface-spectrum-orange: #fce7d9;
-    /* Surface/Spectrum/pink - Theme - ERA */
+    /* Surface/Spectrum/pink - Theme - BRAND */
     --surface-spectrum-pink: #f9deec;
-    /* Surface/Spectrum/purple - Theme - ERA */
+    /* Surface/Spectrum/purple - Theme - BRAND */
     --surface-spectrum-purple: #e7d9fc;
-    /* Surface/Spectrum/red - Theme - ERA */
+    /* Surface/Spectrum/red - Theme - BRAND */
     --surface-spectrum-red: #f9e1e5;
-    /* Surface/Spectrum/teal - Theme - ERA */
+    /* Surface/Spectrum/teal - Theme - BRAND */
     --surface-spectrum-teal: #d9eceb;
-    /* Surface/Spectrum/yellow - Theme - ERA */
+    /* Surface/Spectrum/yellow - Theme - BRAND */
     --surface-spectrum-yellow: #fef5e0;
-}
 
+    @media (width >= 640px) {
+        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
+        --display-regular-large: 400 64px/88px var(--typeface);
+        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
+        --display-regular-large-line-height: 88px;
+        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
+        --display-regular-large-size: 64px;
+        /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
+        --display-regular-large-style: regular;
+        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
+        --display-regular-medium: 400 56px/72px var(--typeface);
+        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
+        --display-regular-medium-line-height: 72px;
+        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
+        --display-regular-medium-size: 56px;
+        /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
+        --display-regular-medium-style: regular;
+        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
+        --display-regular-small: 400 48px/60px var(--typeface);
+        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
+        --display-regular-small-line-height: 60px;
+        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
+        --display-regular-small-size: 48px;
+        /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
+        --display-regular-small-style: regular;
+        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
+        --display-semibold-large: 600 64px/88px var(--typeface);
+        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
+        --display-semibold-large-line-height: 88px;
+        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
+        --display-semibold-large-size: 64px;
+        /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
+        --display-semibold-large-style: 600;
+        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
+        --display-semibold-medium: 600 56px/72px var(--typeface);
+        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
+        --display-semibold-medium-line-height: 72px;
+        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
+        --display-semibold-medium-size: 56px;
+        /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
+        --display-semibold-medium-style: 600;
+        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
+        --display-semibold-small: 600 48px/60px var(--typeface);
+        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
+        --display-semibold-small-line-height: 60px;
+        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
+        --display-semibold-small-size: 48px;
+        /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
+        --display-semibold-small-style: 600;
+        /* Desktop/Heading/H1 */
+        --heading-h1: 600 40px/48px var(--typeface);
+        /* Desktop/Heading/H1 -  line height */
+        --heading-h1-line-height: 48px;
+        /* Desktop/Heading/H1 -  size */
+        --heading-h1-size: 40px;
+        /* Desktop/Heading/H1 -  style */
+        --heading-h1-style: 600;
+        /* Desktop/Heading/H2 */
+        --heading-h2: 600 32px/40px var(--typeface);
+        /* Desktop/Heading/H2 -  line height */
+        --heading-h2-line-height: 40px;
+        /* Desktop/Heading/H2 -  size */
+        --heading-h2-size: 32px;
+        /* Desktop/Heading/H2 -  style */
+        --heading-h2-style: 600;
+        /* Desktop/Heading/H3 */
+        --heading-h3: 600 28px/36px var(--typeface);
+        /* Desktop/Heading/H3 -  line height */
+        --heading-h3-line-height: 36px;
+        /* Desktop/Heading/H3 -  size */
+        --heading-h3-size: 28px;
+        /* Desktop/Heading/H3 -  style */
+        --heading-h3-style: 600;
+        /* Desktop/Heading/H4 */
+        --heading-h4: 600 24px/32px var(--typeface);
+        /* Desktop/Heading/H4 -  line height */
+        --heading-h4-line-height: 32px;
+        /* Desktop/Heading/H4 -  size */
+        --heading-h4-size: 24px;
+        /* Desktop/Heading/H4 -  style */
+        --heading-h4-style: 600;
+        /* Desktop/Heading/H5 */
+        --heading-h5: 600 20px/28px var(--typeface);
+        /* Desktop/Heading/H5 -  line height */
+        --heading-h5-line-height: 28px;
+        /* Desktop/Heading/H5 -  size */
+        --heading-h5-size: 20px;
+        /* Desktop/Heading/H5 -  style */
+        --heading-h5-style: 600;
+        /* Desktop/Heading/H6 */
+        --heading-h6: 500 18px/24px var(--typeface);
+        /* Desktop/Heading/H6 -  line height */
+        --heading-h6-line-height: 24px;
+        /* Desktop/Heading/H6 -  size */
+        --heading-h6-size: 18px;
+        /* Desktop/Heading/H6 -  style */
+        --heading-h6-style: medium;
+        /* Desktop/Subheader/Large - Headline */
+        --subheader-large: 400 24px/32px var(--typeface);
+        /* Desktop/Subheader/Large - Headline line height */
+        --subheader-large-line-height: 32px;
+        /* Desktop/Subheader/Large - Headline size */
+        --subheader-large-size: 24px;
+        /* Desktop/Subheader/Large - Headline style */
+        --subheader-large-style: regular;
+        /* Desktop/Subheader/Medium */
+        --subheader-medium: 400 20px/28px var(--typeface);
+        /* Desktop/Subheader/Medium -  line height */
+        --subheader-medium-line-height: 28px;
+        /* Desktop/Subheader/Medium -  size */
+        --subheader-medium-size: 20px;
+        /* Desktop/Subheader/Medium -  style */
+        --subheader-medium-style: regular;
+        /* Desktop/Subheader/X-Large - Headline */
+        --subheader-x-large: 400 28px/36px var(--typeface);
+        /* Desktop/Subheader/X-Large - Headline line height */
+        --subheader-x-large-line-height: 36px;
+        /* Desktop/Subheader/X-Large - Headline size */
+        --subheader-x-large-size: 28px;
+        /* Desktop/Subheader/X-Large - Headline style */
+        --subheader-x-large-style: regular;
+        /* Desktop/Subheader/XX-Large - Headline */
+        --subheader-xx-large: 400 32px/40px var(--typeface);
+        /* Desktop/Subheader/XX-Large - Headline line height */
+        --subheader-xx-large-line-height: 40px;
+        /* Desktop/Subheader/XX-Large - Headline size */
+        --subheader-xx-large-size: 32px;
+        /* Desktop/Subheader/XX-Large - Headline style */
+        --subheader-xx-large-style: regular;
+        /* Desktop/Subheader/XXX-Large - Large Headline */
+        --subheader-xxx-large: 400 40px/48px var(--typeface);
+        /* Desktop/Subheader/XXX-Large - Large Headline line height */
+        --subheader-xxx-large-line-height: 48px;
+        /* Desktop/Subheader/XXX-Large - Large Headline size */
+        --subheader-xxx-large-size: 40px;
+        /* Desktop/Subheader/XXX-Large - Large Headline style */
+        --subheader-xxx-large-style: regular;
+    }
+}
+/* dark theme */
 [data-theme='dark'] {
-    /* Background/base - Theme - ERA */
+    /* Background/base - Theme - BRAND */
     --background-base: #1f1f1f;
-    /* Background/scrim - Theme - ERA */
+    /* Background/scrim - Theme - BRAND */
     --background-scrim: #61616180;
-    /* Background/shade - Theme - ERA */
+    /* Background/shade - Theme - BRAND */
     --background-shade: #292929;
-    /* Data visual/category-01 - Theme - ERA */
+    /* Data visual/category-01 - Brand */
     --data-visual-category-01: #7899ae;
-    /* Data visual/category-01-highlight - Theme - ERA */
+    /* Data visual/category-01-highlight - Brand */
     --data-visual-category-01-highlight: #7899ae4d;
-    /* Data visual/category-02 - Theme - ERA */
+    /* Data visual/category-02 - Brand */
     --data-visual-category-02: #7fc4ec;
-    /* Data visual/category-02-highlight - Theme - ERA */
+    /* Data visual/category-02-highlight - Brand */
     --data-visual-category-02-highlight: #7fc4ec4d;
-    /* Data visual/category-03 - Theme - ERA */
+    /* Data visual/category-03 - Brand */
     --data-visual-category-03: #958ca3;
-    /* Data visual/category-03-highlight - Theme - ERA */
+    /* Data visual/category-03-highlight - Brand */
     --data-visual-category-03-highlight: #958ca34d;
-    /* Data visual/category-04 - Theme - ERA */
+    /* Data visual/category-04 - Brand */
     --data-visual-category-04: #88c5af;
-    /* Data visual/category-04-highlight - Theme - ERA */
+    /* Data visual/category-04-highlight - Brand */
     --data-visual-category-04-highlight: #88c5af4d;
-    /* Data visual/category-05 - Theme - ERA */
+    /* Data visual/category-05 - Brand */
     --data-visual-category-05: #789ba0;
-    /* Data visual/category-05-highlight - Theme - ERA */
+    /* Data visual/category-05-highlight - Brand */
     --data-visual-category-05-highlight: #789ba04d;
-    /* Data visual/category-06 - Theme - ERA */
+    /* Data visual/category-06 - Brand */
     --data-visual-category-06: #b2b2b2;
-    /* Data visual/category-06-highlight - Theme - ERA */
+    /* Data visual/category-06-highlight - Brand */
     --data-visual-category-06-highlight: #b2b2b24d;
-    /* Data visual/category-07 - Theme - ERA */
+    /* Data visual/category-07 - Brand */
     --data-visual-category-07: #a19abc;
-    /* Data visual/category-07-highlight - Theme - ERA */
+    /* Data visual/category-07-highlight - Brand */
     --data-visual-category-07-highlight: #a19abc4d;
-    /* Data visual/category-1 - Theme - ERA */
+    /* Data visual/category-1 - Theme - BRAND */
     --data-visual-category-1: #7899ae;
-    /* Data visual/category-1-highlight - Theme - ERA */
+    /* Data visual/category-1-highlight - Theme - BRAND */
     --data-visual-category-1-highlight: #7899ae4d;
-    /* Data visual/category-2 - Theme - ERA */
+    /* Data visual/category-2 - Theme - BRAND */
     --data-visual-category-2: #7fc4ec;
-    /* Data visual/category-2-highlight - Theme - ERA */
+    /* Data visual/category-2-highlight - Theme - BRAND */
     --data-visual-category-2-highlight: #7fc4ec4d;
-    /* Data visual/category-3 - Theme - ERA */
+    /* Data visual/category-3 - Theme - BRAND */
     --data-visual-category-3: #958ca3;
-    /* Data visual/category-3-highlight - Theme - ERA */
+    /* Data visual/category-3-highlight - Theme - BRAND */
     --data-visual-category-3-highlight: #958ca34d;
-    /* Data visual/category-4 - Theme - ERA */
+    /* Data visual/category-4 - Theme - BRAND */
     --data-visual-category-4: #88c5af;
-    /* Data visual/category-4-highlight - Theme - ERA */
+    /* Data visual/category-4-highlight - Theme - BRAND */
     --data-visual-category-4-highlight: #88c5af4d;
-    /* Data visual/category-5 - Theme - ERA */
+    /* Data visual/category-5 - Theme - BRAND */
     --data-visual-category-5: #789ba0;
-    /* Data visual/category-5-highlight - Theme - ERA */
+    /* Data visual/category-5-highlight - Theme - BRAND */
     --data-visual-category-5-highlight: #789ba04d;
-    /* Data visual/category-6 - Theme - ERA */
+    /* Data visual/category-6 - Theme - BRAND */
     --data-visual-category-6: #b2b2b2;
-    /* Data visual/category-6-highlight - Theme - ERA */
+    /* Data visual/category-6-highlight - Theme - BRAND */
     --data-visual-category-6-highlight: #b2b2b24d;
-    /* Data visual/category-7 - Theme - ERA */
+    /* Data visual/category-7 - Theme - BRAND */
     --data-visual-category-7: #a19abc;
-    /* Data visual/category-7-highlight - Theme - ERA */
+    /* Data visual/category-7-highlight - Theme - BRAND */
     --data-visual-category-7-highlight: #a19abc4d;
-    /* Data visual/gradient-end - Theme - ERA */
+    /* Data visual/gradient-end - Theme - BRAND */
     --data-visual-gradient-end: #1f1f1f4d;
-    /* Data visual/green - Theme - ERA */
+    /* Data visual/green - Theme - BRAND */
     --data-visual-green: #7cb796;
-    /* Data visual/green-highlight - Theme - ERA */
+    /* Data visual/green-highlight - Theme - BRAND */
     --data-visual-green-highlight: #0d2f1c;
-    /* Data visual/negative - Theme - ERA */
+    /* Data visual/negative - Brand */
     --data-visual-negative: #e88997;
-    /* Data visual/negative-highlight - Theme - ERA */
+    /* Data visual/negative-highlight - Brand */
     --data-visual-negative-highlight: #4c141d;
-    /* Data visual/positive - Theme - ERA */
+    /* Data visual/positive - Brand */
     --data-visual-positive: #7cb796;
-    /* Data visual/positive-highlight - Theme - ERA */
+    /* Data visual/positive-highlight - Brand */
     --data-visual-positive-highlight: #0d2f1c;
-    /* Data visual/red - Theme - ERA */
+    /* Data visual/red - Theme - BRAND */
     --data-visual-red: #e88997;
-    /* Data visual/red-highlight - Theme - ERA */
+    /* Data visual/red-highlight - Theme - BRAND */
     --data-visual-red-highlight: #4c141d;
-    /* Foreground/Brand/on-inverse-primary - Theme - ERA */
+    /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
     --foreground-brand-on-inverse-primary: #6d84af;
-    /* Foreground/Brand/on-inverse-secondary - Theme - ERA */
+    /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
     --foreground-brand-on-inverse-secondary: #de7082;
-    /* Foreground/Brand/on-brand-secondary - Theme - ERA */
+    /* Foreground/Brand/on-brand-primary - Theme - BRAND */
+    /* Foreground color used on Brand's primary color (non neutral color) */
+    --foreground-brand-on-primary: #ffffff;
+    /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
+    /* Foreground color used on Brand's primary color (non neutral color) */
     --foreground-brand-on-secondary: #141414;
-    /* Foreground/Brand/brand-primary - Theme - ERA */
+    /* Foreground/Brand/brand-primary - Theme - BRAND */
+    /* Foreground text and icons that match the brand's primary color */
     --foreground-brand-primary: #6d84af;
-    /* Foreground/Brand/brand-primary-depth - Theme - ERA */
+    /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
     --foreground-brand-primary-depth: #91a3c3;
-    /* Foreground/Brand/brand-secondary - Theme - ERA */
+    /* Foreground/Brand/brand-secondary - Theme - BRAND */
+    /* Foreground text and icons that match the brand's secondary color */
     --foreground-brand-secondary: #de7082;
-    /* Foreground/Brand/brand-secondary-depth - Theme - ERA */
+    /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
     --foreground-brand-secondary-depth: #e693a1;
-    /* Foreground/Link text/default - Theme - ERA */
+    /* Foreground/Link text/default - Theme - BRAND */
     --foreground-link-text-default: #7a9ee1;
-    /* Foreground/Link text/default-disabled - Theme - ERA */
+    /* Foreground/Link text/default-disabled - Theme - BRAND */
     --foreground-link-text-default-disabled: #14387b;
-    /* Foreground/Link text/default-hovered - Theme - ERA */
+    /* Foreground/Link text/default-hovered - Theme - BRAND */
     --foreground-link-text-default-hovered: #90afe6;
-    /* Foreground/Link text/default-pressed - Theme - ERA */
+    /* Foreground/Link text/default-pressed - Theme - BRAND */
     --foreground-link-text-default-pressed: #a6bfeb;
-    /* Foreground/Link text/default-visited - Theme - ERA */
+    /* Foreground/Link text/default-visited - Theme - BRAND */
     --foreground-link-text-default-visited: #af8baf;
-    /* Foreground/Link text/subtle-disabled - Theme - ERA */
+    /* Foreground/Link text/subtle-disabled - Brand */
     --foreground-link-text-subtle-disabled: #4d4d4d;
-    /* Foreground/Link text/subtle-hovered - Theme - ERA */
+    /* Foreground/Link text/subtle-hovered - Theme - BRAND */
     --foreground-link-text-subtle-hovered: #e6e6e6;
-    /* Foreground/Link text/subtle-inversed-disabled - Theme - ERA */
-    --foreground-link-text-subtle-inversed-disabled: #424242;
-    /* Foreground/Link text/subtle-pressed - Theme - ERA */
+    /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
+    --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
+    /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
+    --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
+    /* Foreground/Link text/subtle-inversed-disabled - Brand */
+    --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
+    /* Foreground/Link text/subtle-pressed - Theme - BRAND */
     --foreground-link-text-subtle-pressed: #d1d1d1;
-    /* Foreground/Neutral/disabled-on-color-surface - Theme - ERA */
-    --foreground-neutral-disabled-on-color-surface: #424242;
-    /* Foreground/Neutral/disabled-on-surface - Theme - ERA */
+    /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
+    --foreground-neutral-disabled-on-color-surface: #3d3d3d;
+    /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
     --foreground-neutral-disabled-on-surface: #4d4d4d;
-    /* Foreground/Neutral/on-surface - Theme - ERA */
+    /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
+    --foreground-neutral-inverse-on-surface: #fafafa;
+    /* Foreground/Neutral/on-color - Theme - BRAND */
+    /* Interactive controls */
+    --foreground-neutral-on-color: #ffffff;
+    /* Foreground/Neutral/on-inverse-surface - Brand */
+    /* Text and icons against inverse surface */
+    --foreground-neutral-on-inverse-surface: #fafafa;
+    /* Foreground/Neutral/on-surface - Theme - BRAND */
+    /* Default foreground text and icons against any surface color */
     --foreground-neutral-on-surface: #fafafa;
-    /* Foreground/Neutral/on-surface-variant-01 - Theme - ERA */
+    /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
+    /* Secondary foreground color for icons and text */
     --foreground-neutral-on-surface-variant-01: #c2c2c2;
-    /* Foreground/Neutral/on-surface-variant-02 - Theme - ERA */
+    /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
+    /* Tertiary foreground color for icons and text */
     --foreground-neutral-on-surface-variant-02: #9e9e9e;
-    /* Foreground/Neutral/on-surface-variant-03 - Theme - ERA */
+    /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
+    /* Quaternary foreground color for icons and text. Only for placeholder text */
     --foreground-neutral-on-surface-variant-03: #757575;
-    /* Foreground/Neutral/skeleton-element - Theme - ERA */
-    --foreground-neutral-skeleton-element: #4d4d4d;
-    /* Foreground/Spectrum/blue - Theme - ERA */
+    /* Foreground/Neutral/skeleton-element - Theme - BRAND */
+    --foreground-neutral-skeleton-element: #333333;
+    /* Foreground/Spectrum/blue - Theme - BRAND */
     --foreground-spectrum-blue: #88aff7;
-    /* Foreground/Spectrum/green - Theme - ERA */
+    /* Foreground/Spectrum/green - Theme - BRAND */
     --foreground-spectrum-green: #87bd9f;
-    /* Foreground/Spectrum/lime - Theme - ERA */
+    /* Foreground/Spectrum/lime - Theme - BRAND */
     --foreground-spectrum-lime: #dce28f;
-    /* Foreground/Spectrum/magenta - Theme - ERA */
+    /* Foreground/Spectrum/magenta - Theme - BRAND */
     --foreground-spectrum-magenta: #e07aed;
-    /* Foreground/Spectrum/orange - Theme - ERA */
+    /* Foreground/Spectrum/orange - Theme - BRAND */
     --foreground-spectrum-orange: #f6a874;
-    /* Foreground/Spectrum/pink - Theme - ERA */
+    /* Foreground/Spectrum/pink - Theme - BRAND */
     --foreground-spectrum-pink: #ea86b9;
-    /* Foreground/Spectrum/purple - Theme - ERA */
+    /* Foreground/Spectrum/purple - Theme - BRAND */
     --foreground-spectrum-purple: #c8a6f9;
-    /* Foreground/Spectrum/red - Theme - ERA */
+    /* Foreground/Spectrum/red - Theme - BRAND */
     --foreground-spectrum-red: #ea93a0;
-    /* Foreground/Spectrum/teal - Theme - ERA */
+    /* Foreground/Spectrum/teal - Theme - BRAND */
     --foreground-spectrum-teal: #74bbb4;
-    /* Foreground/Spectrum/yellow - Theme - ERA */
+    /* Foreground/Spectrum/yellow - Theme - BRAND */
     --foreground-spectrum-yellow: #fada8d;
-    /* Interaction/brand-disabled-opacity - Theme - 3.0 */
-    --interaction-brand-disabled-opacity: #ffffff0f;
-    /* Interaction/brand-hover-opacity - Theme - 3.0 */
-    --interaction-brand-hover-opacity: #ffffff1a;
-    /* Interaction/brand-press-opacity - Theme - 3.0 */
-    --interaction-brand-press-opacity: #ffffff33;
-    /* Interaction/hover-opacity - Theme - 3.0 */
-    --interaction-hover-opacity: #ffffff14;
-    /* Interaction/link-active-opacity - Theme - 3.0 */
-    --interaction-link-active-opacity: #ffffff4d;
-    /* Interaction/press-opacity - Theme - 3.0 */
-    --interaction-press-opacity: #ffffff29;
-    /* Interactions/brand-disabled-opacity - Theme - ERA */
+    /* Interactions/brand-disabled-opacity - Theme - BRAND */
     --interactions-brand-disabled-opacity: #ffffff0f;
-    /* Interactions/brand-hover-opacity - Theme - ERA */
+    /* Interactions/brand-hover-opacity - Theme - BRAND */
     --interactions-brand-hover-opacity: #ffffff1a;
-    /* Interactions/brand-press-opacity - Theme - ERA */
+    /* Interactions/brand-press-opacity - Theme - BRAND */
     --interactions-brand-press-opacity: #ffffff33;
-    /* Interactions/disabled-opacity - Theme - ERA */
+    /* Interactions/disabled-opacity - Theme - BRAND */
     --interactions-disabled-opacity: #ffffff0f;
-    /* Interactions/hover-opacity - Theme - ERA */
+    /* Interactions/hover-opacity - Theme - BRAND */
     --interactions-hover-opacity: #ffffff14;
-    /* Interactions/link-active-opacity - Theme - ERA */
+    /* Interactions/link-active-opacity - Theme - BRAND */
     --interactions-link-active-opacity: #ffffff4d;
-    /* Interactions/neutral-hover-opacity - Theme - ERA */
+    /* Interactions/neutral-hover-opacity - Brand */
+    /* surfaces using neutral tones */
     --interactions-neutral-hover-opacity: #ffffff14;
-    /* Interactions/neutral-press-opacity - Theme - ERA */
+    /* Interactions/neutral-press-opacity - Brand */
+    /* surfaces using neutral tones */
     --interactions-neutral-press-opacity: #ffffff29;
-    /* Interactions/press-opacity - Theme - ERA */
+    /* Interactions/press-opacity - Theme - BRAND */
     --interactions-press-opacity: #ffffff29;
-    /* Interactions/primary-disabled-opacity - Theme - ERA */
+    /* Interactions/primary-disabled-opacity - Theme - BRAND */
     --interactions-primary-disabled-opacity: #0b32791f;
-    /* Interactions/primary-hover-opacity - Theme - ERA */
+    /* Interactions/primary-hover-opacity - Theme - BRAND */
     --interactions-primary-hover-opacity: #0b32791a;
-    /* Interactions/primary-press-opacity - Theme - ERA */
+    /* Interactions/primary-press-opacity - Theme - BRAND */
     --interactions-primary-press-opacity: #0b327933;
-    /* Shadow/shadow-10 - Theme - ERA */
+    /* Shadow/shadow-10 - Theme - BRAND */
     --shadow-10: #6161611a;
-    /* Shadow/shadow-12 - Theme - ERA */
+    /* Shadow/shadow-12 - Theme - BRAND */
     --shadow-12: #6161611f;
-    /* Shadow/shadow-15 - Theme - ERA */
+    /* Shadow/shadow-15 - Theme - BRAND */
     --shadow-15: #61616126;
-    /* Shadow/shadow-25 - Theme - ERA */
+    /* Shadow/shadow-25 - Theme - BRAND */
     --shadow-25: #61616140;
-    /* Shadow/shadow-32 - Theme - ERA */
+    /* Shadow/shadow-32 - Theme - BRAND */
     --shadow-32: #61616152;
-    /* Shadow/inner-shadow - Theme - ERA */
+    /* Shadow/inner-shadow - Brand */
     --shadow-inner: #000000;
-    /* Shadow/inner-shadow-100 - Theme - ERA */
+    /* Shadow/inner-shadow-100 - Theme - BRAND */
     --shadow-inner-100: #000000;
-    /* Shadow/variant-01 - Theme - ERA */
+    /* Shadow/variant-01 - Brand */
     --shadow-variant-01: #6161611a;
-    /* Shadow/variant-02 - Theme - ERA */
+    /* Shadow/variant-02 - Brand */
     --shadow-variant-02: #6161611f;
-    /* Shadow/variant-03 - Theme - ERA */
+    /* Shadow/variant-03 - Brand */
     --shadow-variant-03: #61616126;
-    /* Shadow/variant-04 - Theme - ERA */
+    /* Shadow/variant-04 - Brand */
     --shadow-variant-04: #61616140;
-    /* Shadow/variant-05 - Theme - ERA */
+    /* Shadow/variant-05 - Brand */
     --shadow-variant-05: #61616152;
-    /* Status/error - Theme - ERA */
+    /* Status/error - Theme - BRAND */
+    /* Foreground error text and icons */
     --status-error: #e26b7d;
-    /* Status/information - Theme - ERA */
+    /* Status/information - Theme - BRAND */
     --status-information: #5d92f5;
-    /* Status/informational - Theme - ERA */
+    /* Status/informational - Brand */
+    /* Foreground informational text and icons */
     --status-informational: #5d92f5;
-    /* Status/success - Theme - ERA */
+    /* Status/on-error - Theme - BRAND */
+    /* Foreground error text and icons */
+    --status-on-error: #ffffff;
+    /* Status/on-information - Theme - BRAND */
+    --status-on-information: #ffffff;
+    /* Status/on-informational - Brand */
+    /* Foreground informational text and icons */
+    --status-on-informational: #ffffff;
+    /* Status/on-success - Theme - BRAND */
+    /* Foreground success icons and text */
+    --status-on-success: #ffffff;
+    /* Status/on-warning - Theme - BRAND */
+    /* Foreground warning icons */
+    --status-on-warning: #141414;
+    /* Status/success - Theme - BRAND */
+    /* Foreground success icons and text */
     --status-success: #519f73;
-    /* Status/warning - Theme - ERA */
+    /* Status/warning - Theme - BRAND */
+    /* Foreground warning icons */
     --status-warning: #f8cd63;
-    /* Stroke/Brand/brand-primary - Theme - ERA */
+    /* Stroke/Brand/brand-primary - Theme - BRAND */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-brand-primary: #6d84af;
-    /* Stroke/Brand/brand-primary-depth - Theme - ERA */
+    /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-brand-primary-depth: #91a3c3;
-    /* Stroke/Brand/brand-secondary - Theme - ERA */
+    /* Stroke/Brand/brand-secondary - Theme - BRAND */
     --stroke-brand-secondary: #de7082;
-    /* Stroke/Brand/brand-secondary-depth - Theme - ERA */
+    /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
     --stroke-brand-secondary-depth: #e693a1;
-    /* Stroke/Neutral/neutral-base - Theme - ERA */
+    /* Stroke/Neutral/neutral-base - Theme - BRAND */
+    /* For control components */
     --stroke-neutral-base: #6b6b6b;
-    /* Stroke/Neutral/disabled-dark - Theme - ERA */
-    --stroke-neutral-disabled-dark: #424242;
-    /* Stroke/Neutral/disabled-light - Theme - ERA */
+    /* Stroke/Neutral/disabled-dark - Brand */
+    /* Disabled outline separating the fill and surface background */
+    --stroke-neutral-disabled-dark: #3d3d3d;
+    /* Stroke/Neutral/disabled-light - Brand */
+    /* Disabled outline separating the fill and surface background */
     --stroke-neutral-disabled-light: #4d4d4d;
-    /* Stroke/Neutral/focus - Theme - ERA */
+    /* Stroke/Neutral/focus - Brand */
+    /* Highlight focus element */
     --stroke-neutral-focus: #ffffff;
-    /* Stroke/Neutral/neutral-high - Theme - ERA */
+    /* Stroke/Neutral/focus-on-inverse - Brand */
+    /* Highlight focus element */
+    --stroke-neutral-focus-on-inverse: #ffffff;
+    /* Stroke/Neutral/neutral-high - Brand */
     --stroke-neutral-high: #fafafa;
-    /* Stroke/Neutral/neutral-high-contrast - Theme - ERA */
+    /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
     --stroke-neutral-high-contrast: #fafafa;
-    /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
-    --stroke-neutral-interaction-disabled-dark: #b1c0d2;
-    /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
-    --stroke-neutral-interaction-disabled-light: #323b49;
-    /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
-    --stroke-neutral-interaction-focus: #ffffff;
-    /* Stroke/Neutral/Interactions/disabled-dark - Theme - ERA */
-    --stroke-neutral-interactions-disabled-dark: #424242;
-    /* Stroke/Neutral/Interactions/disabled-light - Theme - ERA */
+    /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
+    --stroke-neutral-interactions-disabled-dark: #3d3d3d;
+    /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
     --stroke-neutral-interactions-disabled-light: #4d4d4d;
-    /* Stroke/Neutral/Interactions/focus - Theme - ERA */
+    /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
     --stroke-neutral-interactions-focus: #ffffff;
-    /* Stroke/Neutral/neutral-low - Theme - ERA */
+    /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
+    --stroke-neutral-interactions-inverse-focus: #ffffff;
+    /* Stroke/Neutral/neutral-low - Brand */
+    /* Outline variant - decorative elements such as dividers */
     --stroke-neutral-low: #4d4d4d;
-    /* Stroke/Neutral/neutral-low-contrast - Theme - ERA */
+    /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
     --stroke-neutral-low-contrast: #4d4d4d;
-    /* Surface/Brand/primary - Theme - ERA */
+    /* Surface/Brand/primary - Theme - BRAND */
     --surface-brand-primary: #6d84af;
-    /* Surface/Brand/primary-highlight - Theme - ERA */
+    /* Surface/Brand/primary-highlight - Theme - BRAND */
     --surface-brand-primary-highlight: #030d1e;
-    /* Surface/Brand/secondary - Theme - ERA */
+    /* Surface/Brand/secondary - Theme - BRAND */
     --surface-brand-secondary: #de7082;
-    /* Surface/Brand/secondary-highlight - Theme - ERA */
+    /* Surface/Brand/secondary-highlight - Theme - BRAND */
     --surface-brand-secondary-highlight: #32040c;
-    /* Surface/Neutral/Interactions/dark-disabled - Theme - ERA */
+    /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
     --surface-neutral-interactions-dark-disabled: #474747;
-    /* Surface/Neutral/Interactions/light-disabled - Theme - ERA */
+    /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
     --surface-neutral-interactions-light-disabled: #292929;
-    /* Surface/Neutral/Interactions/skeleton - Theme - ERA */
-    --surface-neutral-interactions-skeleton: #333333;
-    /* Surface/Neutral/inverse - Theme - ERA */
+    /* Surface/Neutral/inverse - Brand */
+    /* Inverted. Use for toasts notification & snackbars */
     --surface-neutral-inverse: #333333;
-    /* Surface/Neutral/inverse-dark - Theme - ERA */
+    /* Surface/Neutral/inverse-dark - Theme - BRAND */
     --surface-neutral-inverse-dark: #333333;
-    /* Surface/Neutral/inverse-light - Theme - ERA */
+    /* Surface/Neutral/inverse-light - Theme - BRAND */
     --surface-neutral-inverse-light: #575757;
-    /* Surface/Neutral/skeleton - Theme - ERA */
-    --surface-neutral-skeleton: #333333;
-    /* Surface/Neutral/T1-base - Theme - ERA */
+    /* Surface/Neutral/T1-base - Theme - BRAND */
     --surface-neutral-t1-base: #1f1f1f;
-    /* Surface/Neutral/T2-lowest - Theme - ERA */
+    /* Surface/Neutral/T2-lowest - Theme - BRAND */
     --surface-neutral-t2-lowest: #2e2e2e;
-    /* Surface/Neutral/T3-low - Theme - ERA */
+    /* Surface/Neutral/T3-low - Theme - BRAND */
+    /* Navigations, app bar etc */
     --surface-neutral-t3-low: #383838;
-    /* Surface/Neutral/T4-high - Theme - ERA */
-    --surface-neutral-t4-high: #474747;
-    /* Surface/Spectrum/blue - Theme - ERA */
+    /* Surface/Neutral/T4-high - Theme - BRAND */
+    /* Navigations, app bar etc */
+    --surface-neutral-t4-high: #7a7a7a;
+    /* Surface/Neutral/transparent - Theme - BRAND */
+    --surface-neutral-transparent: #ffffff00;
+    /* Surface/Spectrum/blue - Theme - BRAND */
     --surface-spectrum-blue: #0e2754;
-    /* Surface/Spectrum/green - Theme - ERA */
+    /* Surface/Spectrum/green - Theme - BRAND */
     --surface-spectrum-green: #0d2f1c;
-    /* Surface/Spectrum/lime - Theme - ERA */
+    /* Surface/Spectrum/lime - Theme - BRAND */
     --surface-spectrum-lime: #434712;
-    /* Surface/Spectrum/magenta - Theme - ERA */
+    /* Surface/Spectrum/magenta - Theme - BRAND */
     --surface-spectrum-magenta: #45054e;
-    /* Surface/Spectrum/orange - Theme - ERA */
+    /* Surface/Spectrum/orange - Theme - BRAND */
     --surface-spectrum-orange: #532201;
-    /* Surface/Spectrum/pink - Theme - ERA */
+    /* Surface/Spectrum/pink - Theme - BRAND */
     --surface-spectrum-pink: #4c0c2d;
-    /* Surface/Spectrum/purple - Theme - ERA */
+    /* Surface/Spectrum/purple - Theme - BRAND */
     --surface-spectrum-purple: #220053;
-    /* Surface/Spectrum/red - Theme - ERA */
+    /* Surface/Spectrum/red - Theme - BRAND */
     --surface-spectrum-red: #4c141d;
-    /* Surface/Spectrum/teal - Theme - ERA */
+    /* Surface/Spectrum/teal - Theme - BRAND */
     --surface-spectrum-teal: #012e2a;
-    /* Surface/Spectrum/yellow - Theme - ERA */
+    /* Surface/Spectrum/yellow - Theme - BRAND */
     --surface-spectrum-yellow: #564210;
 }