:root {
  --xpl-color-brand-primary-deepspace: #220021; /** Primary Xplor brand deep purple */
  --xpl-color-brand-secondary-sunray: #ecfd91; /** Secondary Xplor yellow typically used for highlights and infographics */
  --xpl-color-neutral-0: #ffffff; /** Pure white, base neutral color */
  --xpl-color-neutral-50: #f8f9fa; /** Base neutral color */
  --xpl-color-neutral-100: #f3f4f6; /** Base neutral color */
  --xpl-color-neutral-200: #eeeff3; /** Base neutral color */
  --xpl-color-neutral-300: #eaebef; /** Base neutral color */
  --xpl-color-neutral-400: #e1e2e8; /** Base neutral color */
  --xpl-color-neutral-500: #999ba8; /** Base neutral color */
  --xpl-color-neutral-600: #6a6d7d; /** Base neutral color */
  --xpl-color-neutral-700: #3c3847; /** Base neutral color */
  --xpl-color-neutral-800: #363240; /** Base neutral color */
  --xpl-color-neutral-900: #302d3b; /** Base neutral color */
  --xpl-color-neutral-1000: #292632; /** Base neutral color */
  --xpl-color-neutral-1100: #201e29; /** Base neutral color */
  --xpl-color-neutral-1200: #18161f; /** Base neutral color */
  --xpl-color-gray-0: #ffffff;
  --xpl-color-gray-50: #f8f9fa;
  --xpl-color-gray-100: #f3f4f6;
  --xpl-color-gray-200: #eeeff3;
  --xpl-color-gray-300: #eaebef;
  --xpl-color-gray-400: #e1e2e8;
  --xpl-color-gray-500: #999ba8;
  --xpl-color-gray-600: #6a6d7d;
  --xpl-color-gray-700: #3c3847;
  --xpl-color-gray-800: #363240;
  --xpl-color-gray-900: #302d3b;
  --xpl-color-gray-1000: #292632;
  --xpl-color-gray-1100: #201e29;
  --xpl-color-gray-1200: #18161f;
  --xpl-color-purple-50: #f4f2ff; /** Base purple color */
  --xpl-color-purple-100: #ebe5ff; /** Base purple color */
  --xpl-color-purple-200: #ddd1ff; /** Base purple color */
  --xpl-color-purple-300: #c3adff; /** Base purple color */
  --xpl-color-purple-400: #a480ff; /** Base purple color */
  --xpl-color-purple-500: #8857fa; /** Base purple color */
  --xpl-color-purple-600: #793ef7; /** Base purple color */
  --xpl-color-purple-700: #6923f4; /** Base purple color */
  --xpl-color-purple-800: #4d1ab2; /** Base purple color */
  --xpl-color-purple-900: #330d80; /** Base purple color */
  --xpl-color-orange-50: #fef7f3; /** Base orange color */
  --xpl-color-orange-100: #feede4; /** Base orange color */
  --xpl-color-orange-200: #ffdccc; /** Base orange color */
  --xpl-color-orange-300: #ffbda8; /** Base orange color */
  --xpl-color-orange-400: #f99170; /** Base orange color */
  --xpl-color-orange-500: #f76d43; /** Base orange color */
  --xpl-color-orange-600: #f44e27; /** Base orange color */
  --xpl-color-orange-700: #cc4121; /** Base orange color */
  --xpl-color-orange-800: #a6361a; /** Base orange color */
  --xpl-color-orange-900: #7a2714; /** Base orange color */
  --xpl-color-blue-50: #e8fcff; /** Base blue color */
  --xpl-color-blue-100: #d1f9ff; /** Base blue color */
  --xpl-color-blue-200: #baf6ff; /** Base blue color */
  --xpl-color-blue-300: #9fdaf5; /** Base blue color */
  --xpl-color-blue-400: #85bfeb; /** Base blue color */
  --xpl-color-blue-500: #6aa3e0; /** Base blue color */
  --xpl-color-blue-600: #5088d6; /** Base blue color */
  --xpl-color-blue-700: #356ccc; /** Base blue color */
  --xpl-color-blue-800: #2253b3; /** Base blue color */
  --xpl-color-blue-900: #0f3999; /** Base blue color */
  --xpl-color-green-50: #ebfff8; /** Base green color */
  --xpl-color-green-100: #c4ffed; /** Base green color */
  --xpl-color-green-200: #74fbd0; /** Base green color */
  --xpl-color-green-300: #52ebba; /** Base green color */
  --xpl-color-green-400: #4ad4a8; /** Base green color */
  --xpl-color-green-500: #37b88f; /** Base green color */
  --xpl-color-green-600: #2e9977; /** Base green color */
  --xpl-color-green-700: #24785d; /** Base green color */
  --xpl-color-green-800: #1d614b; /** Base green color */
  --xpl-color-green-900: #154737; /** Base green color */
  --xpl-color-yellow-50: #fff8e6; /** Base yellow color */
  --xpl-color-yellow-100: #ffedba; /** Base yellow color */
  --xpl-color-yellow-200: #ffe18f; /** Base yellow color */
  --xpl-color-yellow-300: #ffd563; /** Base yellow color */
  --xpl-color-yellow-400: #ffc937; /** Base yellow color */
  --xpl-color-yellow-500: #ffbe0b; /** Base yellow color */
  --xpl-color-yellow-600: #d69d00; /** Base yellow color */
  --xpl-color-yellow-700: #ad7f00; /** Base yellow color */
  --xpl-color-yellow-800: #856100; /** Base yellow color */
  --xpl-color-yellow-900: #5c4300; /** Base yellow color */
  --xpl-color-pink-50: #fff0fe; /** Base pink color */
  --xpl-color-pink-100: #ffd9fb; /** Base pink color */
  --xpl-color-pink-200: #ffb8f9; /** Base pink color */
  --xpl-color-pink-300: #ff8df4; /** Base pink color */
  --xpl-color-pink-400: #f26ddc; /** Base pink color */
  --xpl-color-pink-500: #e550c8; /** Base pink color */
  --xpl-color-pink-600: #cc3399; /** Base pink color */
  --xpl-color-pink-700: #bf1d7b; /** Base pink color */
  --xpl-color-pink-800: #990f54; /** Base pink color */
  --xpl-color-pink-900: #730b3f; /** Base pink color */
  --xpl-color-red-50: #fef7f3; /** Base red color */
  --xpl-color-red-100: #fed9d5; /** Base red color */
  --xpl-color-red-200: #fec5be; /** Base red color */
  --xpl-color-red-300: #ff9387; /** Base red color */
  --xpl-color-red-400: #f87263; /** Base red color */
  --xpl-color-red-500: #f24f3d; /** Base red color */
  --xpl-color-red-600: #db321f; /** Base red color */
  --xpl-color-red-700: #c2210f; /** Base red color */
  --xpl-color-red-800: #961305; /** Base red color */
  --xpl-color-red-900: #731409; /** Base red color */
  --xpl-color-transparent-0: rgba(255, 255, 255, 0); /** Clear transparent color */
  --xpl-color-transparent-light-5: rgba(255, 255, 255, 0.05); /** Light transparent color @ 5% opacity. */
  --xpl-color-transparent-light-10: rgba(255, 255, 255, 0.1); /** Light transparent color @ 10% opacity. */
  --xpl-color-transparent-light-25: rgba(255, 255, 255, 0.25); /** Light transparent color @ 25% opacity. */
  --xpl-color-transparent-light-50: rgba(255, 255, 255, 0.5); /** Light transparent color @ 50% opacity. */
  --xpl-color-transparent-light-75: rgba(255, 255, 255, 0.75); /** Light transparent color @ 75% opacity. */
  --xpl-color-transparent-neutral-5: rgba(48, 45, 59, 0.05); /** Neutral transparent color @ 5% opacity */
  --xpl-color-transparent-neutral-10: rgba(48, 45, 59, 0.1); /** Neutral transparent color @ 10% opacity */
  --xpl-color-transparent-neutral-25: rgba(48, 45, 59, 0.25); /** Neutral transparent color @ 25% opacity */
  --xpl-color-transparent-neutral-50: rgba(48, 45, 59, 0.5); /** Neutral transparent color @ 50% opacity */
  --xpl-color-transparent-neutral-75: rgba(48, 45, 59, 0.75); /** Neutral transparent color @ 75% opacity */
  --xpl-color-teal-50: #eafbff; /** Base teal color */
  --xpl-color-teal-100: #bcf1ff; /** Base teal color */
  --xpl-color-teal-200: #8ee8ff; /** Base teal color */
  --xpl-color-teal-300: #60deff; /** Base teal color */
  --xpl-color-teal-400: #31cff8; /** Base teal color */
  --xpl-color-teal-500: #1db0d6; /** Base teal color */
  --xpl-color-teal-600: #0d92b4; /** Base teal color */
  --xpl-color-teal-700: #017492; /** Base teal color */
  --xpl-color-teal-800: #005970; /** Base teal color */
  --xpl-color-teal-900: #003e4e; /** Base teal color */
  --xpl-font-family-default: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
  --xpl-font-weight-normal: 400; /** Bold type, used in Title typography styles */
  --xpl-font-weight-medium: 500; /** Semibold type, used in Display typography styles */
  --xpl-font-weight-semibold: 600; /** Medium type, used in Caption typography styles */
  --xpl-font-weight-bold: 700; /** Default type weight, used in body and caption typography styles */
  --xpl-size-0: 0; /** 0px/0rem */
  --xpl-size-100: 1rem; /** 16px/1rem (base value) */
  --xpl-size-125: 1.25rem; /** 20px/1.25rem */
  --xpl-size-150: 1.5rem; /** 24px/1.5rem */
  --xpl-size-175: 1.75rem; /** 28px/1.75rem */
  --xpl-size-200: 2rem; /** 32px/2rem */
  --xpl-size-225: 2.25rem; /** 36px/2.25rem */
  --xpl-size-250: 2.5rem; /** 40px/2.5rem */
  --xpl-size-300: 3rem; /** 48px/3rem */
  --xpl-size-350: 3.5rem; /** 56px/3.5rem */
  --xpl-size-400: 4rem; /** 64px/4rem */
  --xpl-size-450: 4.5rem; /** 72px/4.5rem */
  --xpl-size-500: 5rem; /** 80px/5rem */
  --xpl-size-600: 6rem; /** 96px/6rem */
  --xpl-size-700: 7rem; /** 112px/7rem */
  --xpl-size-800: 8rem; /** 128px/8rem */
  --xpl-size-900: 9rem; /** 144px/9rem */
  --xpl-size-1125: 1.125rem; /** 18px/1.125 (base value) */
  --xpl-size-0125: 0.125rem; /** 2px/0.125rem */
  --xpl-size-025: 0.25rem; /** 4px/0.25rem */
  --xpl-size-0375: 0.375rem; /** 6px/0.375rem */
  --xpl-size-050: 0.5rem; /** 8px/0.5rem */
  --xpl-size-0625: 0.625rem; /** 10px/0.625rem */
  --xpl-size-075: 0.75rem; /** 12px/0.75rem */
  --xpl-size-0875: 0.875rem; /** 14px/0.875rem */
  --xpl-size-radius-none: 0;
  --xpl-size-radius-small: 0.125rem;
  --xpl-size-radius-default: 0.5rem;
  --xpl-size-radius-large: 1rem;
  --xpl-size-radius-full: 62.4375rem;
  --xpl-size-spacing-0: 0; /** 0px/0rem */
  --xpl-size-spacing-2: 0.125rem; /** 2px/0.125rem */
  --xpl-size-spacing-4: 0.25rem; /** 4px/0.25rem */
  --xpl-size-spacing-6: 0.375rem; /** 6px/0.375rem */
  --xpl-size-spacing-8: 0.5rem; /** 8px/0.5rem */
  --xpl-size-spacing-10: 0.625rem; /** 10px/0.625rem */
  --xpl-size-spacing-12: 0.75rem; /** 12px/0.75rem */
  --xpl-size-spacing-14: 0.875rem; /** 14px/0.875rem */
  --xpl-size-spacing-16: 1rem; /** 16px/1rem (base value) */
  --xpl-size-spacing-20: 1.25rem; /** 20px/1.25rem */
  --xpl-size-spacing-24: 1.5rem; /** 24px/1.5rem */
  --xpl-size-spacing-28: 1.75rem; /** 28px/1.75rem */
  --xpl-size-spacing-32: 2rem; /** 32px/2rem */
  --xpl-size-spacing-36: 2.25rem; /** 36px/2.25rem */
  --xpl-size-spacing-40: 2.5rem; /** 40px/2.5rem */
  --xpl-size-spacing-48: 3rem; /** 48px/3rem */
  --xpl-size-spacing-56: 3.5rem; /** 56px/3.5rem */
  --xpl-size-spacing-64: 4rem; /** 64px/4rem */
  --xpl-size-spacing-72: 4.5rem; /** 72px/4.5rem */
  --xpl-size-spacing-80: 5rem; /** 80px/5rem */
  --xpl-size-spacing-96: 6rem; /** 96px/6rem */
  --xpl-size-spacing-112: 7rem; /** 112px/7rem */
  --xpl-size-spacing-128: 8rem; /** 128px/8rem */
  --xpl-size-spacing-144: 9rem; /** 144px/9rem */
  --xpl-border-small: 0.0625rem;
  --xpl-border-radius-full: 624.9375rem;
  --xpl-space-0: 0; /** 0px/0rem */
  --xpl-space-2: 0.125rem; /** 2px/0.125rem */
  --xpl-space-4: 0.25rem; /** 4px/0.25rem */
  --xpl-space-6: 0.375rem; /** 6px/0.375rem */
  --xpl-space-8: 0.5rem; /** 8px/0.5rem */
  --xpl-space-10: 0.625rem; /** 10px/0.625rem */
  --xpl-space-12: 0.75rem; /** 12px/0.75rem */
  --xpl-space-16: 1rem; /** 16px/1rem */
  --xpl-space-24: 1.5rem; /** 24px/1.5rem */
  --xpl-space-32: 2rem; /** 32px/2rem */
  --xpl-space-40: 2.5rem; /** 40px/2.5rem */
  --xpl-space-48: 3rem; /** 48px/3rem */
  --xpl-space-56: 3.5rem; /** 56px/3.5rem */
  --xpl-space-64: 4rem; /** 64px/4rem */
  --xpl-space-72: 4.5rem; /** 72px/4.5rem */
  --xpl-space-80: 5rem; /** 80px/5rem */
  --xpl-space-112: 7rem; /** 112px/7rem */
  --xpl-space-144: 9rem; /** 144px/8.75rem */
  --xpl-z-index-100: 100;
  --xpl-z-index-200: 200;
  --xpl-z-index-300: 300;
  --xpl-z-index-400: 400;
  --xpl-z-index-500: 500;
  --xpl-z-index-600: 600;
  --xpl-z-index-700: 700;
  --xpl-z-index-800: 800;
  --xpl-z-index-900: 900;
  --xpl-color-positive-lm: var(--xpl-color-green-500);
  --xpl-color-positive-dm: var(--xpl-color-green-300);
  --xpl-color-positive-bg-lm: var(--xpl-color-green-100);
  --xpl-color-positive-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-negative-lm: var(--xpl-color-red-600);
  --xpl-color-negative-dm: var(--xpl-color-red-300);
  --xpl-color-negative-bg-lm: var(--xpl-color-red-100);
  --xpl-color-negative-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-highlight-lm: var(--xpl-color-yellow-500);
  --xpl-color-highlight-dm: var(--xpl-color-yellow-200);
  --xpl-color-highlight-bg-lm: var(--xpl-color-yellow-200);
  --xpl-color-highlight-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-information-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-trivial-lm: var(--xpl-color-gray-600);
  --xpl-color-trivial-dm: var(--xpl-color-gray-500);
  --xpl-color-trivial-bg-lm: var(--xpl-color-gray-400);
  --xpl-color-trivial-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-action-primary-lm: var(--xpl-color-purple-700);
  --xpl-color-action-primary-dm: var(--xpl-color-purple-300);
  --xpl-color-action-primary-hover-lm: var(--xpl-color-purple-800);
  --xpl-color-action-primary-hover-dm: var(--xpl-color-purple-400);
  --xpl-color-action-disabled-lm: var(--xpl-color-gray-100);
  --xpl-color-action-disabled-dm: var(--xpl-color-gray-800);
  --xpl-color-action-warning-lm: var(--xpl-color-red-700);
  --xpl-color-action-warning-dm: var(--xpl-color-red-300);
  --xpl-color-action-warning-hover-lm: var(--xpl-color-red-800);
  --xpl-color-action-warning-hover-dm: var(--xpl-color-red-400);
  --xpl-color-accent-green: var(--xpl-color-green-200);
  --xpl-color-accent-yellow: var(--xpl-color-yellow-200);
  --xpl-color-accent-pink: var(--xpl-color-pink-300);
  --xpl-color-accent-purple: var(--xpl-color-purple-300);
  --xpl-color-accent-blue-lm: var(--xpl-color-blue-500);
  --xpl-color-accent-blue-dm: var(--xpl-color-blue-200);
  --xpl-color-brand-primary-xplorange: var(--xpl-color-orange-600); /** Primary Xplor brand orange */
  --xpl-color-brand-primary-starwhite: var(--xpl-color-orange-50); /** Used for brand colored surfaces */
  --xpl-color-brand-secondary-supernova: var(--xpl-color-green-200); /** Secondary Xplor green typically used for highlights and infographics */
  --xpl-color-brand-secondary-neptune: var(--xpl-color-purple-600); /** Secondary Xplor purple typically used for UI elements and active states, highlights and infographics */
  --xpl-color-brand-secondary-pinkplanet: var(--xpl-color-pink-300); /** Secondary Xplor pink typically used for highlights and infographics */
  --xpl-color-brand-secondary-skyblue: var(--xpl-color-blue-200); /** Secondary Xplor blue typically used for highlights and infographics */
  --xpl-color-foreground-lm: var(--xpl-color-neutral-0);
  --xpl-color-foreground-dm: var(--xpl-color-neutral-1000);
  --xpl-color-background-lm: var(--xpl-color-neutral-50);
  --xpl-color-background-dm: var(--xpl-color-neutral-1200);
  --xpl-color-background-2-lm: var(--xpl-color-neutral-100);
  --xpl-color-background-2-dm: var(--xpl-color-neutral-1100);
  --xpl-color-navigation-lm: var(--xpl-color-neutral-1000);
  --xpl-color-navigation-dm: var(--xpl-color-neutral-1000);
  --xpl-color-stroke-lm: var(--xpl-color-neutral-400);
  --xpl-color-stroke-dm: var(--xpl-color-neutral-600);
  --xpl-color-primary-lm: var(--xpl-color-orange-600); /** themable */
  --xpl-color-primary-dm: var(--xpl-color-orange-400); /** themable */
  --xpl-color-primary-bg-lm: var(--xpl-color-orange-50); /** themable */
  --xpl-color-primary-bg-dm: var(--xpl-color-neutral-900); /** themable */
  --xpl-color-secondary-lm: var(--xpl-color-purple-700); /** themable */
  --xpl-color-secondary-dm: var(--xpl-color-purple-300); /** themable */
  --xpl-color-secondary-hover-lm: var(--xpl-color-purple-800); /** themable */
  --xpl-color-secondary-hover-dm: var(--xpl-color-purple-400); /** themable */
  --xpl-color-secondary-bg-lm: var(--xpl-color-purple-50); /** themable */
  --xpl-color-secondary-bg-dm: var(--xpl-color-neutral-900); /** themable */
  --xpl-color-text-primary-lm: var(--xpl-color-gray-900);
  --xpl-color-text-primary-dm: var(--xpl-color-gray-0);
  --xpl-color-text-secondary-lm: var(--xpl-color-gray-600);
  --xpl-color-text-secondary-dm: var(--xpl-color-gray-500);
  --xpl-color-text-reverse-lm: var(--xpl-color-gray-0);
  --xpl-color-text-reverse-dm: var(--xpl-color-gray-1000);
  --xpl-color-text-warning-lm: var(--xpl-color-red-700);
  --xpl-color-text-warning-dm: var(--xpl-color-red-300);
  --xpl-font-weight-label-default: var(--xpl-font-weight-medium); /** Default weight labels, typically on forms */
  --xpl-font-weight-label-strong: var(--xpl-font-weight-bold); /** Bold weight labels, typically on forms */
  --xpl-font-size-display-1: var(--xpl-size-350); /** Title size typography */
  --xpl-font-size-display-2: var(--xpl-size-300); /** Title size typography */
  --xpl-font-size-display-3: var(--xpl-size-250); /** Title size typography */
  --xpl-font-size-title-1: var(--xpl-size-200); /** Title size typography */
  --xpl-font-size-title-2: var(--xpl-size-150); /** Title size typography */
  --xpl-font-size-title-3: var(--xpl-size-125); /** Title size typography */
  --xpl-font-size-title-4: var(--xpl-size-100); /** Title size typography */
  --xpl-font-size-title-5: var(--xpl-size-0875); /** Smallest Title size typography */
  --xpl-font-size-body: var(--xpl-size-0875); /** Default body size typography */
  --xpl-font-size-callout: var(--xpl-size-075); /** Callout size typography */
  --xpl-font-size-caption: var(--xpl-size-0625); /** Caption size typography */
  --xpl-size-font-title-1: var(--xpl-size-175);
  --xpl-size-font-title-2: var(--xpl-size-150);
  --xpl-size-font-title-3: var(--xpl-size-125);
  --xpl-size-font-title-4: var(--xpl-size-100);
  --xpl-size-font-title-5: var(--xpl-size-0875);
  --xpl-size-font-body: var(--xpl-size-0875);
  --xpl-size-font-callout: var(--xpl-size-075);
  --xpl-size-font-caption: var(--xpl-size-0625);
  --xpl-size-radius-button: var(--xpl-size-radius-full); /** themable */
  --xpl-border-none: var(--xpl-size-0);
  --xpl-border-large: var(--xpl-size-0125);
  --xpl-border-radius-none: var(--xpl-size-0);
  --xpl-border-radius-small: var(--xpl-size-025);
  --xpl-border-radius-default: var(--xpl-size-050);
  --xpl-border-radius-large: var(--xpl-size-100);
  --xpl-border-radius-button: var(--xpl-border-radius-full);
  --xpl-border-default: var(--xpl-color-neutral-400); /** Default border color */
  --xpl-border-strong: var(--xpl-color-neutral-600); /** Use for strong weight borders */
  --xpl-border-subtle: var(--xpl-color-neutral-200); /** Use for subtle weight borders */
  --xpl-border-inverse: var(--xpl-color-neutral-0); /** Use for inverse borders (light on dark/dark on light) */
  --xpl-border-hover: var(--xpl-color-purple-700); /** Use for borders in a hover state */
  --xpl-border-active: var(--xpl-color-purple-700); /** Use for borders in an active state */
  --xpl-border-focus: var(--xpl-color-purple-800); /** Use for borders in a focus state */
  --xpl-border-negative: var(--xpl-color-red-700); /** Use for negative sentiment borders */
  --xpl-border-positive: var(--xpl-color-green-700); /** Use for positive sentiment borders */
  --xpl-border-accent-default: var(--xpl-color-purple-700); /** Default color accented borders */
  --xpl-border-accent-brand: var(--xpl-color-orange-600); /** Brand color accented borders */
  --xpl-border-accent-information: var(--xpl-color-purple-700); /** Informational accented borders */
  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-warning: var(--xpl-color-yellow-500); /** Highlight accented borders */
  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
  --xpl-border-accent-alternative: var(--xpl-color-blue-100); /** Alternative accented borders */
  --xpl-background-surface-default: var(--xpl-color-neutral-0); /** The default surface for pages and containers */
  --xpl-background-surface-subtlest: var(--xpl-color-neutral-50); /** Use for the subtlest surfaces */
  --xpl-background-surface-subtle: var(--xpl-color-neutral-100); /** Use for subtle surfaces */
  --xpl-background-surface-bold: var(--xpl-color-neutral-1000); /** Use for bold dark surfaces */
  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-50); /** Use on transparent backdrops; eg. behind a modal */
  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
  --xpl-background-surface-information: var(--xpl-color-purple-50); /** Use for informational surfaces */
  --xpl-background-surface-information-bold: var(--xpl-color-purple-100); /** Use for informational surfaces where a bold weight is needed */
  --xpl-background-surface-positive: var(--xpl-color-green-100); /** Use for positive sentiment surfaces */
  --xpl-background-surface-negative: var(--xpl-color-red-100); /** Use for negative sentiment surfaces */
  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-neutral-5); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-neutral-10); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-neutral-25); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-neutral-50); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-neutral-75); /** Use for elevation shadows and overlays */
  --xpl-background-action-disabled: var(--xpl-color-neutral-100); /** Use for disabled action states */
  --xpl-background-action-primary-default: var(--xpl-color-purple-700); /** Use for primary action default state */
  --xpl-background-action-primary-hover: var(--xpl-color-purple-800); /** Use for primary action hover state */
  --xpl-background-action-primary-active: var(--xpl-color-purple-800); /** Use for primary action active state */
  --xpl-background-action-primary-focus: var(--xpl-color-purple-700); /** Use for primary action focus state */
  --xpl-background-action-secondary-default: var(--xpl-color-neutral-0); /** Use for secondary action default state */
  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-0); /** Use for secondary action hover state */
  --xpl-background-action-secondary-active: var(--xpl-color-neutral-0); /** Use for secondary action active state */
  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-0); /** Use for secondary action focus state */
  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-100); /** Use for tertiary action hover state */
  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-300); /** Use for tertiary action active state */
  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-100); /** Use for tertiary action focus state */
  --xpl-background-action-positive-default: var(--xpl-color-green-700); /** Use for positive actions default state */
  --xpl-background-action-positive-hover: var(--xpl-color-green-800); /** Use for positive actions hover state */
  --xpl-background-action-positive-active: var(--xpl-color-green-800); /** Use for positive actions active state */
  --xpl-background-action-positive-focus: var(--xpl-color-green-700); /** Use for positive actions focused state */
  --xpl-background-action-negative-default: var(--xpl-color-red-700); /** Use for negative actions default state */
  --xpl-background-action-negative-hover: var(--xpl-color-red-800); /** Use for negative actions hover state */
  --xpl-background-action-negative-active: var(--xpl-color-red-800); /** Use for negative actions active state */
  --xpl-background-action-negative-focus: var(--xpl-color-red-700); /** Use for negative actions focused state */
  --xpl-background-accent-default: var(--xpl-color-purple-700); /** Use for default accent backgrounds */
  --xpl-background-accent-pink: var(--xpl-color-pink-400); /** Use for pink accent backgrounds */
  --xpl-background-accent-highlight: var(--xpl-color-yellow-500); /** Use for highlighted accent backgrounds */
  --xpl-background-accent-positive: var(--xpl-color-green-400); /** Use for positive sentiment accents */
  --xpl-background-accent-positive-bold: var(--xpl-color-green-700); /** Use for positive sentiments when a bold weight is needed */
  --xpl-background-accent-negative: var(--xpl-color-red-600); /** Use for negative sentiments */
  --xpl-background-accent-negative-bold: var(--xpl-color-red-800); /** Use for negative sentiments when a bold weight is needed */
  --xpl-background-accent-alternative: var(--xpl-color-blue-400); /** Alternative accent color */
  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-700); /** Alternative accent color in a bold weight */
  --xpl-background-accent-brand: var(--xpl-color-orange-600); /** Use for brand color accents */
  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-200); /** Use for subtle brand accents */
  --xpl-background-accent-neutral: var(--xpl-color-neutral-400); /** Use for neutral accents */
  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-500); /** Use for neutral accents that need a bolder weight */
  --xpl-background-brand-primary: var(--xpl-color-orange-600); /** Primary brand color. Used for logos and brand accents */
  --xpl-background-brand-primary-surface: var(--xpl-color-orange-50); /** Primary brand surface color */
  --xpl-background-brand-secondary: var(--xpl-color-purple-700); /** Secondary brand color */
  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-50); /** Secondary brand surface color */
  --xpl-background-badge-yellow: var(--xpl-color-yellow-100); /** Neutral sentiment Toast surface */
  --xpl-background-badge-blue: var(--xpl-color-blue-100); /** Positive sentiment toast surface */
  --xpl-background-badge-orange: var(--xpl-color-orange-100); /** Orange badge surface */
  --xpl-background-messaging-warning: var(--xpl-color-yellow-100); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning-bold: var(--xpl-color-yellow-300); /** Yellow Badge surface */
  --xpl-background-messaging-negative-bold: var(--xpl-color-red-700); /** Blue badge surface */
  --xpl-chart-theme-warm-5: var(--xpl-color-orange-600); /** Warm theme color for the 5th data point */
  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-light: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-normal: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bold: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-1000); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-1200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-lighter: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-light: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bold: var(--xpl-color-orange-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bolder: var(--xpl-color-orange-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-boldest: var(--xpl-color-orange-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-lighter: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-light: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bold: var(--xpl-color-purple-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bolder: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-boldest: var(--xpl-color-purple-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-lighter: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-light: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-normal: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bold: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bolder: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-boldest: var(--xpl-color-green-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-light: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bold: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-lighter: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-light: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bold: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bolder: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-boldest: var(--xpl-color-red-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-lighter: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-light: var(--xpl-color-pink-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-normal: var(--xpl-color-pink-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bold: var(--xpl-color-pink-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bolder: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-boldest: var(--xpl-color-pink-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-lighter: var(--xpl-color-blue-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-light: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-normal: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bold: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bolder: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-boldest: var(--xpl-color-blue-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-lighter: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-light: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bold: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bolder: var(--xpl-color-teal-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-boldest: var(--xpl-color-teal-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-icon-default: var(--xpl-color-neutral-1000); /** Default icon color and when paired with default or strong text. */
  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions. */
  --xpl-icon-inverse: var(--xpl-color-neutral-0); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch. */
  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch. */
  --xpl-icon-disabled: var(--xpl-color-neutral-600); /** Use for icons paired with disabled text or actions. */
  --xpl-icon-negative: var(--xpl-color-red-700); /** Use for icons with negative sentiment, or paired with negative text. */
  --xpl-icon-warning: var(--xpl-color-yellow-600); /** Highlight accented borders. */
  --xpl-icon-positive: var(--xpl-color-green-700); /** Use for icons in a positive sentiment or paired with positive text. */
  --xpl-icon-information: var(--xpl-color-purple-700); /** Use for icons communicating information */
  --xpl-text-strong: var(--xpl-color-neutral-1100); /** Bold text color, use for display text styles, page headings */
  --xpl-text-default: var(--xpl-color-neutral-900); /** Use for primary text color such as body or titles in sentence case */
  --xpl-text-subdued: var(--xpl-color-neutral-600); /** Use for subdued text such as descriptions and details */
  --xpl-text-inverse: var(--xpl-color-neutral-0); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
  --xpl-text-positive: var(--xpl-color-green-700); /** Use on positive sentiment text */
  --xpl-text-negative: var(--xpl-color-red-700); /** Use on negative sentiment text */
  --xpl-text-link-default: var(--xpl-color-purple-700); /** Use for link text */
  --xpl-text-link-hovered: var(--xpl-color-purple-800); /** Use for default badge text */
  --xpl-text-link-visited: var(--xpl-color-pink-800); /** Use for yellow badge text */
  --xpl-color-information-lm: var(--xpl-color-secondary-lm); /** uses themable token */
  --xpl-color-information-dm: var(--xpl-color-secondary-dm); /** uses themable token */
  --xpl-color-information-bg-lm: var(--xpl-color-secondary-bg-lm); /** uses themable token */
  --xpl-color-text-action-lm: var(--xpl-color-primary-lm); /** uses themable token */
  --xpl-color-text-action-dm: var(--xpl-color-primary-dm); /** uses themable token */
  --xpl-border-badge-purple: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-border-badge-yellow: var(--xpl-background-surface-transparent-0); /** Yellow badge surface */
  --xpl-border-badge-green: var(--xpl-background-surface-transparent-0); /** Green badge surface */
  --xpl-border-badge-grey: var(--xpl-background-surface-transparent-0); /** Grey badge surface */
  --xpl-border-badge-blue: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-border-badge-red: var(--xpl-background-surface-transparent-0); /** Red badge surface */
  --xpl-border-badge-orange: var(--xpl-background-surface-transparent-0); /** Orange badge border */
  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
  --xpl-background-badge-default: var(--xpl-background-surface-information-bold); /** Default Badge surface */
  --xpl-background-badge-green: var(--xpl-background-surface-positive); /** Neutral sentiment Toast surface */
  --xpl-background-badge-red: var(--xpl-background-surface-negative); /** Neutral sentiment Toast surface */
  --xpl-background-badge-grey: var(--xpl-background-accent-neutral); /** Positive sentiment toast surface */
  --xpl-background-messaging-information: var(--xpl-background-surface-information); /** Negative sentiment Toast surface */
  --xpl-background-messaging-positive: var(--xpl-background-surface-positive); /** Green badge surface */
  --xpl-background-messaging-positive-bold: var(--xpl-background-accent-positive-bold); /** Red Badge surface */
  --xpl-background-messaging-negative: var(--xpl-background-surface-negative); /** Grey Badge surface */
  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-light); /** Twilight theme color for the 7th data point */
  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
  --xpl-icon-brand: var(--xpl-color-brand-primary-xplorange); /** Use for brand logos and icons paired with primary brand color. */
  --xpl-icon-badge-default: var(--xpl-background-accent-default);
  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
  --xpl-color-transparent: var(--xpl-color-transparent-0); /** Backwards-compatible alias. Use --xpl-color-transparent-0 instead. */
}

.dark {
  --xpl-background-surface-default: var(--xpl-color-neutral-1000); /** The default surface for pages and containers */
  --xpl-background-surface-subtlest: var(--xpl-color-neutral-900); /** Use for the subtlest surfaces */
  --xpl-background-surface-subtle: var(--xpl-color-neutral-1200); /** Use for subtle surfaces */
  --xpl-background-surface-bold: var(--xpl-color-neutral-200); /** Use for bold dark surfaces */
  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-75); /** Use on transparent backdrops; eg. behind a modal */
  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
  --xpl-background-surface-information: var(--xpl-color-neutral-700); /** Use for informational surfaces */
  --xpl-background-surface-information-bold: var(--xpl-color-neutral-600); /** Use for informational surfaces where a bold weight is needed */
  --xpl-background-surface-positive: var(--xpl-color-green-300); /** Use for positive sentiment surfaces */
  --xpl-background-surface-negative: var(--xpl-color-red-300); /** Use for negative sentiment surfaces */
  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-light-5); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-light-10); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-light-25); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-light-50); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-light-75); /** Use for elevation shadows and overlays */
  --xpl-background-action-disabled: var(--xpl-color-neutral-800); /** Use for disabled action states */
  --xpl-background-action-primary-default: var(--xpl-color-purple-300); /** Use for primary action default state */
  --xpl-background-action-primary-hover: var(--xpl-color-purple-400); /** Use for primary action hover state */
  --xpl-background-action-primary-active: var(--xpl-color-purple-400); /** Use for primary action active state */
  --xpl-background-action-primary-focus: var(--xpl-color-purple-300); /** Use for primary action focus state */
  --xpl-background-action-secondary-default: var(--xpl-color-neutral-1000); /** Use for secondary action default state */
  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-1000); /** Use for secondary action hover state */
  --xpl-background-action-secondary-active: var(--xpl-color-neutral-1000); /** Use for secondary action active state */
  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-1000); /** Use for secondary action focus state */
  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-800); /** Use for tertiary action hover state */
  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-700); /** Use for tertiary action active state */
  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-1000); /** Use for tertiary action focus state */
  --xpl-background-action-positive-default: var(--xpl-color-green-300); /** Use for positive actions default state */
  --xpl-background-action-positive-hover: var(--xpl-color-green-400); /** Use for positive actions hover state */
  --xpl-background-action-positive-active: var(--xpl-color-green-400); /** Use for positive actions active state */
  --xpl-background-action-positive-focus: var(--xpl-color-green-300); /** Use for positive actions focused state */
  --xpl-background-action-negative-default: var(--xpl-color-red-300); /** Use for negative actions default state */
  --xpl-background-action-negative-hover: var(--xpl-color-red-400); /** Use for negative actions hover state */
  --xpl-background-action-negative-active: var(--xpl-color-red-400); /** Use for negative actions active state */
  --xpl-background-action-negative-focus: var(--xpl-color-red-300); /** Use for negative actions focused state */
  --xpl-background-accent-default: var(--xpl-color-purple-300); /** Use for default accent backgrounds */
  --xpl-background-accent-pink: var(--xpl-color-pink-300); /** Use for pink accent backgrounds */
  --xpl-background-accent-highlight: var(--xpl-color-yellow-200); /** Use for highlighted accent backgrounds */
  --xpl-background-accent-positive: var(--xpl-color-green-700); /** Use for positive sentiment accents */
  --xpl-background-accent-positive-bold: var(--xpl-color-green-400); /** Use for positive sentiments when a bold weight is needed */
  --xpl-background-accent-negative: var(--xpl-color-red-300); /** Use for negative sentiments */
  --xpl-background-accent-negative-bold: var(--xpl-color-red-600); /** Use for negative sentiments when a bold weight is needed */
  --xpl-background-accent-alternative: var(--xpl-color-blue-200); /** Alternative accent color */
  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-300); /** Alternative accent color in a bold weight */
  --xpl-background-accent-brand: var(--xpl-color-orange-400); /** Use for brand color accents */
  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-500); /** Use for subtle brand accents */
  --xpl-background-accent-neutral: var(--xpl-color-neutral-600); /** Use for neutral accents */
  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-400); /** Use for neutral accents that need a bolder weight */
  --xpl-background-brand-primary: var(--xpl-color-orange-200); /** Primary brand color. Used for logos and brand accents */
  --xpl-background-brand-primary-surface: var(--xpl-color-orange-900); /** Primary brand surface color */
  --xpl-background-brand-secondary: var(--xpl-color-purple-300); /** Secondary brand color */
  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-900); /** Secondary brand surface color */
  --xpl-border-default: var(--xpl-color-neutral-600); /** Default border color */
  --xpl-border-strong: var(--xpl-color-neutral-400); /** Use for strong weight borders */
  --xpl-border-subtle: var(--xpl-color-neutral-800); /** Use for subtle weight borders */
  --xpl-border-inverse: var(--xpl-color-neutral-1000); /** Use for inverse borders (light on dark/dark on light) */
  --xpl-border-hover: var(--xpl-color-purple-300); /** Use for borders in a hover state */
  --xpl-border-active: var(--xpl-color-purple-300); /** Use for borders in an active state */
  --xpl-border-focus: var(--xpl-color-purple-400); /** Use for borders in a focus state */
  --xpl-border-negative: var(--xpl-color-red-300); /** Use for negative sentiment borders */
  --xpl-border-positive: var(--xpl-color-green-300); /** Use for positive sentiment borders */
  --xpl-border-accent-default: var(--xpl-color-purple-300); /** Default color accented borders */
  --xpl-border-accent-brand: var(--xpl-color-orange-500); /** Brand color accented borders */
  --xpl-border-accent-information: var(--xpl-color-purple-300); /** Informational accented borders */
  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
  --xpl-border-accent-alternative: var(--xpl-color-blue-300); /** Alternative accented borders */
  --xpl-border-badge-purple: var(--xpl-color-purple-300); /** Blue badge surface */
  --xpl-border-badge-yellow: var(--xpl-color-yellow-200); /** Yellow badge surface */
  --xpl-border-badge-green: var(--xpl-color-green-300); /** Green badge surface */
  --xpl-border-badge-grey: var(--xpl-color-neutral-500); /** Grey badge surface */
  --xpl-border-badge-blue: var(--xpl-color-blue-300); /** Blue badge surface */
  --xpl-border-badge-red: var(--xpl-color-red-300); /** Red badge surface */
  --xpl-border-badge-orange: var(--xpl-color-orange-300); /** Orange badge border */
  --xpl-chart-theme-warm-5: var(--xpl-color-orange-500); /** Warm theme color for the 5th data point */
  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-light: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-normal: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bold: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-50); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-lighter: var(--xpl-color-orange-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-light: var(--xpl-color-orange-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bold: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bolder: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-boldest: var(--xpl-color-orange-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-lighter: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-light: var(--xpl-color-purple-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bold: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bolder: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-boldest: var(--xpl-color-purple-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-lighter: var(--xpl-color-green-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-light: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-normal: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bold: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bolder: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-boldest: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-light: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bold: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-lighter: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-light: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bold: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bolder: var(--xpl-color-red-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-boldest: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-lighter: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-light: var(--xpl-color-pink-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-normal: var(--xpl-color-pink-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bold: var(--xpl-color-pink-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bolder: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-boldest: var(--xpl-color-pink-50); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-lighter: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-light: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-normal: var(--xpl-color-blue-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bold: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bolder: var(--xpl-color-blue-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-boldest: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-lighter: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-light: var(--xpl-color-teal-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bold: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bolder: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-boldest: var(--xpl-color-teal-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-icon-default: var(--xpl-color-neutral-0); /** Default icon color and when paired with default or strong text */
  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions */
  --xpl-icon-inverse: var(--xpl-color-neutral-1000); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch */
  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch */
  --xpl-icon-disabled: var(--xpl-color-neutral-500); /** Use for icons paired with disabled text or actions */
  --xpl-icon-brand: var(--xpl-color-orange-300); /** Use for brand logos and icons paired with primary brand color */
  --xpl-icon-negative: var(--xpl-color-red-300); /** Use for icons with negative sentiment, or paired with negative text */
  --xpl-icon-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-icon-positive: var(--xpl-color-green-300); /** Use for icons in a positive sentiment or paired with positive text */
  --xpl-icon-information: var(--xpl-color-purple-300); /** Use for icons communicating information */
  --xpl-text-strong: var(--xpl-color-neutral-0); /** Bold text color, use for display text styles, page headings */
  --xpl-text-default: var(--xpl-color-neutral-50); /** Use for primary text color such as body or titles in sentence case */
  --xpl-text-subdued: var(--xpl-color-neutral-500); /** Use for subdued text such as descriptions and details */
  --xpl-text-inverse: var(--xpl-color-neutral-1000); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
  --xpl-text-positive: var(--xpl-color-green-300); /** Use on positive sentiment text */
  --xpl-text-negative: var(--xpl-color-red-300); /** Use on negative sentiment text */
  --xpl-text-link-default: var(--xpl-color-purple-300); /** Use for link text */
  --xpl-text-link-hovered: var(--xpl-color-purple-400); /** Use for default badge text */
  --xpl-text-link-visited: var(--xpl-color-pink-300); /** Use for yellow badge text */
  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
  --xpl-background-badge-default: var(--xpl-background-surface-transparent-0); /** Default Badge surface */
  --xpl-background-badge-yellow: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-green: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-red: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-grey: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
  --xpl-background-badge-blue: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
  --xpl-background-badge-orange: var(--xpl-background-surface-transparent-0); /** Orange badge surface */
  --xpl-background-messaging-information: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning-bold: var(--xpl-background-surface-transparent-0); /** Yellow Badge surface */
  --xpl-background-messaging-positive: var(--xpl-background-surface-transparent-0); /** Green badge surface */
  --xpl-background-messaging-positive-bold: var(--xpl-background-surface-transparent-0); /** Red Badge surface */
  --xpl-background-messaging-negative: var(--xpl-background-surface-transparent-0); /** Grey Badge surface */
  --xpl-background-messaging-negative-bold: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-bold); /** Twilight theme color for the 7th data point */
  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
  --xpl-icon-badge-default: var(--xpl-background-accent-default);
  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
}
$xpl-color-positive-lm: var(--xpl-color-positive-lm);
$xpl-color-positive-dm: var(--xpl-color-positive-dm);
$xpl-color-positive-bg-lm: var(--xpl-color-positive-bg-lm);
$xpl-color-positive-bg-dm: var(--xpl-color-positive-bg-dm);
$xpl-color-negative-lm: var(--xpl-color-negative-lm);
$xpl-color-negative-dm: var(--xpl-color-negative-dm);
$xpl-color-negative-bg-lm: var(--xpl-color-negative-bg-lm);
$xpl-color-negative-bg-dm: var(--xpl-color-negative-bg-dm);
$xpl-color-highlight-lm: var(--xpl-color-highlight-lm);
$xpl-color-highlight-dm: var(--xpl-color-highlight-dm);
$xpl-color-highlight-bg-lm: var(--xpl-color-highlight-bg-lm);
$xpl-color-highlight-bg-dm: var(--xpl-color-highlight-bg-dm);
$xpl-color-information-lm: var(--xpl-color-information-lm);
$xpl-color-information-dm: var(--xpl-color-information-dm);
$xpl-color-information-bg-lm: var(--xpl-color-information-bg-lm);
$xpl-color-information-bg-dm: var(--xpl-color-information-bg-dm);
$xpl-color-trivial-lm: var(--xpl-color-trivial-lm);
$xpl-color-trivial-dm: var(--xpl-color-trivial-dm);
$xpl-color-trivial-bg-lm: var(--xpl-color-trivial-bg-lm);
$xpl-color-trivial-bg-dm: var(--xpl-color-trivial-bg-dm);
$xpl-color-action-primary-lm: var(--xpl-color-action-primary-lm);
$xpl-color-action-primary-dm: var(--xpl-color-action-primary-dm);
$xpl-color-action-primary-hover-lm: var(--xpl-color-action-primary-hover-lm);
$xpl-color-action-primary-hover-dm: var(--xpl-color-action-primary-hover-dm);
$xpl-color-action-disabled-lm: var(--xpl-color-action-disabled-lm);
$xpl-color-action-disabled-dm: var(--xpl-color-action-disabled-dm);
$xpl-color-action-warning-lm: var(--xpl-color-action-warning-lm);
$xpl-color-action-warning-dm: var(--xpl-color-action-warning-dm);
$xpl-color-action-warning-hover-lm: var(--xpl-color-action-warning-hover-lm);
$xpl-color-action-warning-hover-dm: var(--xpl-color-action-warning-hover-dm);
$xpl-color-accent-green: var(--xpl-color-accent-green);
$xpl-color-accent-yellow: var(--xpl-color-accent-yellow);
$xpl-color-accent-pink: var(--xpl-color-accent-pink);
$xpl-color-accent-purple: var(--xpl-color-accent-purple);
$xpl-color-accent-blue-lm: var(--xpl-color-accent-blue-lm);
$xpl-color-accent-blue-dm: var(--xpl-color-accent-blue-dm);
$xpl-color-brand-primary-xplorange: var(--xpl-color-brand-primary-xplorange);
$xpl-color-brand-primary-deepspace: var(--xpl-color-brand-primary-deepspace);
$xpl-color-brand-primary-starwhite: var(--xpl-color-brand-primary-starwhite);
$xpl-color-brand-secondary-sunray: var(--xpl-color-brand-secondary-sunray);
$xpl-color-brand-secondary-supernova: var(--xpl-color-brand-secondary-supernova);
$xpl-color-brand-secondary-neptune: var(--xpl-color-brand-secondary-neptune);
$xpl-color-brand-secondary-pinkplanet: var(--xpl-color-brand-secondary-pinkplanet);
$xpl-color-brand-secondary-skyblue: var(--xpl-color-brand-secondary-skyblue);
$xpl-color-neutral-0: var(--xpl-color-neutral-0);
$xpl-color-neutral-50: var(--xpl-color-neutral-50);
$xpl-color-neutral-100: var(--xpl-color-neutral-100);
$xpl-color-neutral-200: var(--xpl-color-neutral-200);
$xpl-color-neutral-300: var(--xpl-color-neutral-300);
$xpl-color-neutral-400: var(--xpl-color-neutral-400);
$xpl-color-neutral-500: var(--xpl-color-neutral-500);
$xpl-color-neutral-600: var(--xpl-color-neutral-600);
$xpl-color-neutral-700: var(--xpl-color-neutral-700);
$xpl-color-neutral-800: var(--xpl-color-neutral-800);
$xpl-color-neutral-900: var(--xpl-color-neutral-900);
$xpl-color-neutral-1000: var(--xpl-color-neutral-1000);
$xpl-color-neutral-1100: var(--xpl-color-neutral-1100);
$xpl-color-neutral-1200: var(--xpl-color-neutral-1200);
$xpl-color-gray-0: var(--xpl-color-gray-0);
$xpl-color-gray-50: var(--xpl-color-gray-50);
$xpl-color-gray-100: var(--xpl-color-gray-100);
$xpl-color-gray-200: var(--xpl-color-gray-200);
$xpl-color-gray-300: var(--xpl-color-gray-300);
$xpl-color-gray-400: var(--xpl-color-gray-400);
$xpl-color-gray-500: var(--xpl-color-gray-500);
$xpl-color-gray-600: var(--xpl-color-gray-600);
$xpl-color-gray-700: var(--xpl-color-gray-700);
$xpl-color-gray-800: var(--xpl-color-gray-800);
$xpl-color-gray-900: var(--xpl-color-gray-900);
$xpl-color-gray-1000: var(--xpl-color-gray-1000);
$xpl-color-gray-1100: var(--xpl-color-gray-1100);
$xpl-color-gray-1200: var(--xpl-color-gray-1200);
$xpl-color-purple-50: var(--xpl-color-purple-50);
$xpl-color-purple-100: var(--xpl-color-purple-100);
$xpl-color-purple-200: var(--xpl-color-purple-200);
$xpl-color-purple-300: var(--xpl-color-purple-300);
$xpl-color-purple-400: var(--xpl-color-purple-400);
$xpl-color-purple-500: var(--xpl-color-purple-500);
$xpl-color-purple-600: var(--xpl-color-purple-600);
$xpl-color-purple-700: var(--xpl-color-purple-700);
$xpl-color-purple-800: var(--xpl-color-purple-800);
$xpl-color-purple-900: var(--xpl-color-purple-900);
$xpl-color-orange-50: var(--xpl-color-orange-50);
$xpl-color-orange-100: var(--xpl-color-orange-100);
$xpl-color-orange-200: var(--xpl-color-orange-200);
$xpl-color-orange-300: var(--xpl-color-orange-300);
$xpl-color-orange-400: var(--xpl-color-orange-400);
$xpl-color-orange-500: var(--xpl-color-orange-500);
$xpl-color-orange-600: var(--xpl-color-orange-600);
$xpl-color-orange-700: var(--xpl-color-orange-700);
$xpl-color-orange-800: var(--xpl-color-orange-800);
$xpl-color-orange-900: var(--xpl-color-orange-900);
$xpl-color-blue-50: var(--xpl-color-blue-50);
$xpl-color-blue-100: var(--xpl-color-blue-100);
$xpl-color-blue-200: var(--xpl-color-blue-200);
$xpl-color-blue-300: var(--xpl-color-blue-300);
$xpl-color-blue-400: var(--xpl-color-blue-400);
$xpl-color-blue-500: var(--xpl-color-blue-500);
$xpl-color-blue-600: var(--xpl-color-blue-600);
$xpl-color-blue-700: var(--xpl-color-blue-700);
$xpl-color-blue-800: var(--xpl-color-blue-800);
$xpl-color-blue-900: var(--xpl-color-blue-900);
$xpl-color-green-50: var(--xpl-color-green-50);
$xpl-color-green-100: var(--xpl-color-green-100);
$xpl-color-green-200: var(--xpl-color-green-200);
$xpl-color-green-300: var(--xpl-color-green-300);
$xpl-color-green-400: var(--xpl-color-green-400);
$xpl-color-green-500: var(--xpl-color-green-500);
$xpl-color-green-600: var(--xpl-color-green-600);
$xpl-color-green-700: var(--xpl-color-green-700);
$xpl-color-green-800: var(--xpl-color-green-800);
$xpl-color-green-900: var(--xpl-color-green-900);
$xpl-color-yellow-50: var(--xpl-color-yellow-50);
$xpl-color-yellow-100: var(--xpl-color-yellow-100);
$xpl-color-yellow-200: var(--xpl-color-yellow-200);
$xpl-color-yellow-300: var(--xpl-color-yellow-300);
$xpl-color-yellow-400: var(--xpl-color-yellow-400);
$xpl-color-yellow-500: var(--xpl-color-yellow-500);
$xpl-color-yellow-600: var(--xpl-color-yellow-600);
$xpl-color-yellow-700: var(--xpl-color-yellow-700);
$xpl-color-yellow-800: var(--xpl-color-yellow-800);
$xpl-color-yellow-900: var(--xpl-color-yellow-900);
$xpl-color-pink-50: var(--xpl-color-pink-50);
$xpl-color-pink-100: var(--xpl-color-pink-100);
$xpl-color-pink-200: var(--xpl-color-pink-200);
$xpl-color-pink-300: var(--xpl-color-pink-300);
$xpl-color-pink-400: var(--xpl-color-pink-400);
$xpl-color-pink-500: var(--xpl-color-pink-500);
$xpl-color-pink-600: var(--xpl-color-pink-600);
$xpl-color-pink-700: var(--xpl-color-pink-700);
$xpl-color-pink-800: var(--xpl-color-pink-800);
$xpl-color-pink-900: var(--xpl-color-pink-900);
$xpl-color-red-50: var(--xpl-color-red-50);
$xpl-color-red-100: var(--xpl-color-red-100);
$xpl-color-red-200: var(--xpl-color-red-200);
$xpl-color-red-300: var(--xpl-color-red-300);
$xpl-color-red-400: var(--xpl-color-red-400);
$xpl-color-red-500: var(--xpl-color-red-500);
$xpl-color-red-600: var(--xpl-color-red-600);
$xpl-color-red-700: var(--xpl-color-red-700);
$xpl-color-red-800: var(--xpl-color-red-800);
$xpl-color-red-900: var(--xpl-color-red-900);
$xpl-color-transparent-0: var(--xpl-color-transparent-0);
$xpl-color-transparent-light-5: var(--xpl-color-transparent-light-5);
$xpl-color-transparent-light-10: var(--xpl-color-transparent-light-10);
$xpl-color-transparent-light-25: var(--xpl-color-transparent-light-25);
$xpl-color-transparent-light-50: var(--xpl-color-transparent-light-50);
$xpl-color-transparent-light-75: var(--xpl-color-transparent-light-75);
$xpl-color-transparent-neutral-5: var(--xpl-color-transparent-neutral-5);
$xpl-color-transparent-neutral-10: var(--xpl-color-transparent-neutral-10);
$xpl-color-transparent-neutral-25: var(--xpl-color-transparent-neutral-25);
$xpl-color-transparent-neutral-50: var(--xpl-color-transparent-neutral-50);
$xpl-color-transparent-neutral-75: var(--xpl-color-transparent-neutral-75);
$xpl-color-teal-50: var(--xpl-color-teal-50);
$xpl-color-teal-100: var(--xpl-color-teal-100);
$xpl-color-teal-200: var(--xpl-color-teal-200);
$xpl-color-teal-300: var(--xpl-color-teal-300);
$xpl-color-teal-400: var(--xpl-color-teal-400);
$xpl-color-teal-500: var(--xpl-color-teal-500);
$xpl-color-teal-600: var(--xpl-color-teal-600);
$xpl-color-teal-700: var(--xpl-color-teal-700);
$xpl-color-teal-800: var(--xpl-color-teal-800);
$xpl-color-teal-900: var(--xpl-color-teal-900);
$xpl-color-foreground-lm: var(--xpl-color-foreground-lm);
$xpl-color-foreground-dm: var(--xpl-color-foreground-dm);
$xpl-color-background-lm: var(--xpl-color-background-lm);
$xpl-color-background-dm: var(--xpl-color-background-dm);
$xpl-color-background-2-lm: var(--xpl-color-background-2-lm);
$xpl-color-background-2-dm: var(--xpl-color-background-2-dm);
$xpl-color-navigation-lm: var(--xpl-color-navigation-lm);
$xpl-color-navigation-dm: var(--xpl-color-navigation-dm);
$xpl-color-stroke-lm: var(--xpl-color-stroke-lm);
$xpl-color-stroke-dm: var(--xpl-color-stroke-dm);
$xpl-color-primary-lm: var(--xpl-color-primary-lm);
$xpl-color-primary-dm: var(--xpl-color-primary-dm);
$xpl-color-primary-bg-lm: var(--xpl-color-primary-bg-lm);
$xpl-color-primary-bg-dm: var(--xpl-color-primary-bg-dm);
$xpl-color-secondary-lm: var(--xpl-color-secondary-lm);
$xpl-color-secondary-dm: var(--xpl-color-secondary-dm);
$xpl-color-secondary-hover-lm: var(--xpl-color-secondary-hover-lm);
$xpl-color-secondary-hover-dm: var(--xpl-color-secondary-hover-dm);
$xpl-color-secondary-bg-lm: var(--xpl-color-secondary-bg-lm);
$xpl-color-secondary-bg-dm: var(--xpl-color-secondary-bg-dm);
$xpl-color-text-primary-lm: var(--xpl-color-text-primary-lm);
$xpl-color-text-primary-dm: var(--xpl-color-text-primary-dm);
$xpl-color-text-secondary-lm: var(--xpl-color-text-secondary-lm);
$xpl-color-text-secondary-dm: var(--xpl-color-text-secondary-dm);
$xpl-color-text-reverse-lm: var(--xpl-color-text-reverse-lm);
$xpl-color-text-reverse-dm: var(--xpl-color-text-reverse-dm);
$xpl-color-text-warning-lm: var(--xpl-color-text-warning-lm);
$xpl-color-text-warning-dm: var(--xpl-color-text-warning-dm);
$xpl-color-text-action-lm: var(--xpl-color-text-action-lm);
$xpl-color-text-action-dm: var(--xpl-color-text-action-dm);
$xpl-font-family-default: var(--xpl-font-family-default);
$xpl-font-weight-normal: var(--xpl-font-weight-normal);
$xpl-font-weight-medium: var(--xpl-font-weight-medium);
$xpl-font-weight-semibold: var(--xpl-font-weight-semibold);
$xpl-font-weight-bold: var(--xpl-font-weight-bold);
$xpl-font-weight-label-default: var(--xpl-font-weight-label-default);
$xpl-font-weight-label-strong: var(--xpl-font-weight-label-strong);
$xpl-font-size-display-1: var(--xpl-font-size-display-1);
$xpl-font-size-display-2: var(--xpl-font-size-display-2);
$xpl-font-size-display-3: var(--xpl-font-size-display-3);
$xpl-font-size-title-1: var(--xpl-font-size-title-1);
$xpl-font-size-title-2: var(--xpl-font-size-title-2);
$xpl-font-size-title-3: var(--xpl-font-size-title-3);
$xpl-font-size-title-4: var(--xpl-font-size-title-4);
$xpl-font-size-title-5: var(--xpl-font-size-title-5);
$xpl-font-size-body: var(--xpl-font-size-body);
$xpl-font-size-callout: var(--xpl-font-size-callout);
$xpl-font-size-caption: var(--xpl-font-size-caption);
$xpl-size-0: var(--xpl-size-0);
$xpl-size-100: var(--xpl-size-100);
$xpl-size-125: var(--xpl-size-125);
$xpl-size-150: var(--xpl-size-150);
$xpl-size-175: var(--xpl-size-175);
$xpl-size-200: var(--xpl-size-200);
$xpl-size-225: var(--xpl-size-225);
$xpl-size-250: var(--xpl-size-250);
$xpl-size-300: var(--xpl-size-300);
$xpl-size-350: var(--xpl-size-350);
$xpl-size-400: var(--xpl-size-400);
$xpl-size-450: var(--xpl-size-450);
$xpl-size-500: var(--xpl-size-500);
$xpl-size-600: var(--xpl-size-600);
$xpl-size-700: var(--xpl-size-700);
$xpl-size-800: var(--xpl-size-800);
$xpl-size-900: var(--xpl-size-900);
$xpl-size-1125: var(--xpl-size-1125);
$xpl-size-0125: var(--xpl-size-0125);
$xpl-size-025: var(--xpl-size-025);
$xpl-size-0375: var(--xpl-size-0375);
$xpl-size-050: var(--xpl-size-050);
$xpl-size-0625: var(--xpl-size-0625);
$xpl-size-075: var(--xpl-size-075);
$xpl-size-0875: var(--xpl-size-0875);
$xpl-size-font-title-1: var(--xpl-size-font-title-1);
$xpl-size-font-title-2: var(--xpl-size-font-title-2);
$xpl-size-font-title-3: var(--xpl-size-font-title-3);
$xpl-size-font-title-4: var(--xpl-size-font-title-4);
$xpl-size-font-title-5: var(--xpl-size-font-title-5);
$xpl-size-font-body: var(--xpl-size-font-body);
$xpl-size-font-callout: var(--xpl-size-font-callout);
$xpl-size-font-caption: var(--xpl-size-font-caption);
$xpl-size-radius-none: var(--xpl-size-radius-none);
$xpl-size-radius-small: var(--xpl-size-radius-small);
$xpl-size-radius-default: var(--xpl-size-radius-default);
$xpl-size-radius-large: var(--xpl-size-radius-large);
$xpl-size-radius-full: var(--xpl-size-radius-full);
$xpl-size-radius-button: var(--xpl-size-radius-button);
$xpl-size-spacing-0: var(--xpl-size-spacing-0);
$xpl-size-spacing-2: var(--xpl-size-spacing-2);
$xpl-size-spacing-4: var(--xpl-size-spacing-4);
$xpl-size-spacing-6: var(--xpl-size-spacing-6);
$xpl-size-spacing-8: var(--xpl-size-spacing-8);
$xpl-size-spacing-10: var(--xpl-size-spacing-10);
$xpl-size-spacing-12: var(--xpl-size-spacing-12);
$xpl-size-spacing-14: var(--xpl-size-spacing-14);
$xpl-size-spacing-16: var(--xpl-size-spacing-16);
$xpl-size-spacing-20: var(--xpl-size-spacing-20);
$xpl-size-spacing-24: var(--xpl-size-spacing-24);
$xpl-size-spacing-28: var(--xpl-size-spacing-28);
$xpl-size-spacing-32: var(--xpl-size-spacing-32);
$xpl-size-spacing-36: var(--xpl-size-spacing-36);
$xpl-size-spacing-40: var(--xpl-size-spacing-40);
$xpl-size-spacing-48: var(--xpl-size-spacing-48);
$xpl-size-spacing-56: var(--xpl-size-spacing-56);
$xpl-size-spacing-64: var(--xpl-size-spacing-64);
$xpl-size-spacing-72: var(--xpl-size-spacing-72);
$xpl-size-spacing-80: var(--xpl-size-spacing-80);
$xpl-size-spacing-96: var(--xpl-size-spacing-96);
$xpl-size-spacing-112: var(--xpl-size-spacing-112);
$xpl-size-spacing-128: var(--xpl-size-spacing-128);
$xpl-size-spacing-144: var(--xpl-size-spacing-144);
$xpl-border-none: var(--xpl-border-none);
$xpl-border-small: var(--xpl-border-small);
$xpl-border-large: var(--xpl-border-large);
$xpl-border-radius-none: var(--xpl-border-radius-none);
$xpl-border-radius-small: var(--xpl-border-radius-small);
$xpl-border-radius-default: var(--xpl-border-radius-default);
$xpl-border-radius-large: var(--xpl-border-radius-large);
$xpl-border-radius-full: var(--xpl-border-radius-full);
$xpl-border-radius-button: var(--xpl-border-radius-button);
$xpl-border-default: var(--xpl-border-default);
$xpl-border-strong: var(--xpl-border-strong);
$xpl-border-subtle: var(--xpl-border-subtle);
$xpl-border-inverse: var(--xpl-border-inverse);
$xpl-border-hover: var(--xpl-border-hover);
$xpl-border-active: var(--xpl-border-active);
$xpl-border-focus: var(--xpl-border-focus);
$xpl-border-negative: var(--xpl-border-negative);
$xpl-border-positive: var(--xpl-border-positive);
$xpl-border-accent-default: var(--xpl-border-accent-default);
$xpl-border-accent-brand: var(--xpl-border-accent-brand);
$xpl-border-accent-information: var(--xpl-border-accent-information);
$xpl-border-accent-highlight: var(--xpl-border-accent-highlight);
$xpl-border-accent-warning: var(--xpl-border-accent-warning);
$xpl-border-accent-subtle: var(--xpl-border-accent-subtle);
$xpl-border-accent-alternative: var(--xpl-border-accent-alternative);
$xpl-border-badge-purple: var(--xpl-border-badge-purple);
$xpl-border-badge-yellow: var(--xpl-border-badge-yellow);
$xpl-border-badge-green: var(--xpl-border-badge-green);
$xpl-border-badge-grey: var(--xpl-border-badge-grey);
$xpl-border-badge-blue: var(--xpl-border-badge-blue);
$xpl-border-badge-red: var(--xpl-border-badge-red);
$xpl-border-badge-orange: var(--xpl-border-badge-orange);
$xpl-space-0: var(--xpl-space-0);
$xpl-space-2: var(--xpl-space-2);
$xpl-space-4: var(--xpl-space-4);
$xpl-space-6: var(--xpl-space-6);
$xpl-space-8: var(--xpl-space-8);
$xpl-space-10: var(--xpl-space-10);
$xpl-space-12: var(--xpl-space-12);
$xpl-space-16: var(--xpl-space-16);
$xpl-space-24: var(--xpl-space-24);
$xpl-space-32: var(--xpl-space-32);
$xpl-space-40: var(--xpl-space-40);
$xpl-space-48: var(--xpl-space-48);
$xpl-space-56: var(--xpl-space-56);
$xpl-space-64: var(--xpl-space-64);
$xpl-space-72: var(--xpl-space-72);
$xpl-space-80: var(--xpl-space-80);
$xpl-space-112: var(--xpl-space-112);
$xpl-space-144: var(--xpl-space-144);
$xpl-z-index-100: var(--xpl-z-index-100);
$xpl-z-index-200: var(--xpl-z-index-200);
$xpl-z-index-300: var(--xpl-z-index-300);
$xpl-z-index-400: var(--xpl-z-index-400);
$xpl-z-index-500: var(--xpl-z-index-500);
$xpl-z-index-600: var(--xpl-z-index-600);
$xpl-z-index-700: var(--xpl-z-index-700);
$xpl-z-index-800: var(--xpl-z-index-800);
$xpl-z-index-900: var(--xpl-z-index-900);
$xpl-background-surface-default: var(--xpl-background-surface-default);
$xpl-background-surface-subtlest: var(--xpl-background-surface-subtlest);
$xpl-background-surface-subtle: var(--xpl-background-surface-subtle);
$xpl-background-surface-bold: var(--xpl-background-surface-bold);
$xpl-background-surface-backdrop: var(--xpl-background-surface-backdrop);
$xpl-background-surface-inverse-on-light: var(--xpl-background-surface-inverse-on-light);
$xpl-background-surface-inverse-on-dark: var(--xpl-background-surface-inverse-on-dark);
$xpl-background-surface-information: var(--xpl-background-surface-information);
$xpl-background-surface-information-bold: var(--xpl-background-surface-information-bold);
$xpl-background-surface-positive: var(--xpl-background-surface-positive);
$xpl-background-surface-negative: var(--xpl-background-surface-negative);
$xpl-background-surface-transparent-0: var(--xpl-background-surface-transparent-0);
$xpl-background-surface-transparent-5: var(--xpl-background-surface-transparent-5);
$xpl-background-surface-transparent-10: var(--xpl-background-surface-transparent-10);
$xpl-background-surface-transparent-25: var(--xpl-background-surface-transparent-25);
$xpl-background-surface-transparent-50: var(--xpl-background-surface-transparent-50);
$xpl-background-surface-transparent-75: var(--xpl-background-surface-transparent-75);
$xpl-background-action-disabled: var(--xpl-background-action-disabled);
$xpl-background-action-primary-default: var(--xpl-background-action-primary-default);
$xpl-background-action-primary-hover: var(--xpl-background-action-primary-hover);
$xpl-background-action-primary-active: var(--xpl-background-action-primary-active);
$xpl-background-action-primary-focus: var(--xpl-background-action-primary-focus);
$xpl-background-action-secondary-default: var(--xpl-background-action-secondary-default);
$xpl-background-action-secondary-hover: var(--xpl-background-action-secondary-hover);
$xpl-background-action-secondary-active: var(--xpl-background-action-secondary-active);
$xpl-background-action-secondary-focus: var(--xpl-background-action-secondary-focus);
$xpl-background-action-tertiary-default: var(--xpl-background-action-tertiary-default);
$xpl-background-action-tertiary-hover: var(--xpl-background-action-tertiary-hover);
$xpl-background-action-tertiary-active: var(--xpl-background-action-tertiary-active);
$xpl-background-action-tertiary-focus: var(--xpl-background-action-tertiary-focus);
$xpl-background-action-positive-default: var(--xpl-background-action-positive-default);
$xpl-background-action-positive-hover: var(--xpl-background-action-positive-hover);
$xpl-background-action-positive-active: var(--xpl-background-action-positive-active);
$xpl-background-action-positive-focus: var(--xpl-background-action-positive-focus);
$xpl-background-action-negative-default: var(--xpl-background-action-negative-default);
$xpl-background-action-negative-hover: var(--xpl-background-action-negative-hover);
$xpl-background-action-negative-active: var(--xpl-background-action-negative-active);
$xpl-background-action-negative-focus: var(--xpl-background-action-negative-focus);
$xpl-background-accent-default: var(--xpl-background-accent-default);
$xpl-background-accent-pink: var(--xpl-background-accent-pink);
$xpl-background-accent-highlight: var(--xpl-background-accent-highlight);
$xpl-background-accent-positive: var(--xpl-background-accent-positive);
$xpl-background-accent-positive-bold: var(--xpl-background-accent-positive-bold);
$xpl-background-accent-negative: var(--xpl-background-accent-negative);
$xpl-background-accent-negative-bold: var(--xpl-background-accent-negative-bold);
$xpl-background-accent-alternative: var(--xpl-background-accent-alternative);
$xpl-background-accent-alternative-bold: var(--xpl-background-accent-alternative-bold);
$xpl-background-accent-brand: var(--xpl-background-accent-brand);
$xpl-background-accent-brand-subtle: var(--xpl-background-accent-brand-subtle);
$xpl-background-accent-neutral: var(--xpl-background-accent-neutral);
$xpl-background-accent-neutral-bold: var(--xpl-background-accent-neutral-bold);
$xpl-background-brand-primary: var(--xpl-background-brand-primary);
$xpl-background-brand-primary-surface: var(--xpl-background-brand-primary-surface);
$xpl-background-brand-secondary: var(--xpl-background-brand-secondary);
$xpl-background-brand-secondary-surface: var(--xpl-background-brand-secondary-surface);
$xpl-background-brand-tertiary: var(--xpl-background-brand-tertiary);
$xpl-background-badge-default: var(--xpl-background-badge-default);
$xpl-background-badge-yellow: var(--xpl-background-badge-yellow);
$xpl-background-badge-green: var(--xpl-background-badge-green);
$xpl-background-badge-red: var(--xpl-background-badge-red);
$xpl-background-badge-grey: var(--xpl-background-badge-grey);
$xpl-background-badge-blue: var(--xpl-background-badge-blue);
$xpl-background-badge-orange: var(--xpl-background-badge-orange);
$xpl-background-messaging-information: var(--xpl-background-messaging-information);
$xpl-background-messaging-warning: var(--xpl-background-messaging-warning);
$xpl-background-messaging-warning-bold: var(--xpl-background-messaging-warning-bold);
$xpl-background-messaging-positive: var(--xpl-background-messaging-positive);
$xpl-background-messaging-positive-bold: var(--xpl-background-messaging-positive-bold);
$xpl-background-messaging-negative: var(--xpl-background-messaging-negative);
$xpl-background-messaging-negative-bold: var(--xpl-background-messaging-negative-bold);
$xpl-chart-theme-vibrant-1: var(--xpl-chart-theme-vibrant-1);
$xpl-chart-theme-vibrant-2: var(--xpl-chart-theme-vibrant-2);
$xpl-chart-theme-vibrant-3: var(--xpl-chart-theme-vibrant-3);
$xpl-chart-theme-vibrant-4: var(--xpl-chart-theme-vibrant-4);
$xpl-chart-theme-vibrant-5: var(--xpl-chart-theme-vibrant-5);
$xpl-chart-theme-vibrant-6: var(--xpl-chart-theme-vibrant-6);
$xpl-chart-theme-vibrant-7: var(--xpl-chart-theme-vibrant-7);
$xpl-chart-theme-vibrant-8: var(--xpl-chart-theme-vibrant-8);
$xpl-chart-theme-sunset-1: var(--xpl-chart-theme-sunset-1);
$xpl-chart-theme-sunset-2: var(--xpl-chart-theme-sunset-2);
$xpl-chart-theme-sunset-3: var(--xpl-chart-theme-sunset-3);
$xpl-chart-theme-sunset-4: var(--xpl-chart-theme-sunset-4);
$xpl-chart-theme-sunset-5: var(--xpl-chart-theme-sunset-5);
$xpl-chart-theme-sunset-6: var(--xpl-chart-theme-sunset-6);
$xpl-chart-theme-sunset-7: var(--xpl-chart-theme-sunset-7);
$xpl-chart-theme-sunset-8: var(--xpl-chart-theme-sunset-8);
$xpl-chart-theme-warm-1: var(--xpl-chart-theme-warm-1);
$xpl-chart-theme-warm-2: var(--xpl-chart-theme-warm-2);
$xpl-chart-theme-warm-3: var(--xpl-chart-theme-warm-3);
$xpl-chart-theme-warm-4: var(--xpl-chart-theme-warm-4);
$xpl-chart-theme-warm-5: var(--xpl-chart-theme-warm-5);
$xpl-chart-theme-warm-6: var(--xpl-chart-theme-warm-6);
$xpl-chart-theme-warm-7: var(--xpl-chart-theme-warm-7);
$xpl-chart-theme-warm-8: var(--xpl-chart-theme-warm-8);
$xpl-chart-theme-cool-1: var(--xpl-chart-theme-cool-1);
$xpl-chart-theme-cool-2: var(--xpl-chart-theme-cool-2);
$xpl-chart-theme-cool-3: var(--xpl-chart-theme-cool-3);
$xpl-chart-theme-cool-4: var(--xpl-chart-theme-cool-4);
$xpl-chart-theme-cool-5: var(--xpl-chart-theme-cool-5);
$xpl-chart-theme-cool-6: var(--xpl-chart-theme-cool-6);
$xpl-chart-theme-cool-7: var(--xpl-chart-theme-cool-7);
$xpl-chart-theme-cool-8: var(--xpl-chart-theme-cool-8);
$xpl-chart-theme-fun-1: var(--xpl-chart-theme-fun-1);
$xpl-chart-theme-fun-2: var(--xpl-chart-theme-fun-2);
$xpl-chart-theme-fun-3: var(--xpl-chart-theme-fun-3);
$xpl-chart-theme-fun-4: var(--xpl-chart-theme-fun-4);
$xpl-chart-theme-fun-5: var(--xpl-chart-theme-fun-5);
$xpl-chart-theme-fun-6: var(--xpl-chart-theme-fun-6);
$xpl-chart-theme-fun-7: var(--xpl-chart-theme-fun-7);
$xpl-chart-theme-fun-8: var(--xpl-chart-theme-fun-8);
$xpl-chart-theme-twilight-1: var(--xpl-chart-theme-twilight-1);
$xpl-chart-theme-twilight-2: var(--xpl-chart-theme-twilight-2);
$xpl-chart-theme-twilight-3: var(--xpl-chart-theme-twilight-3);
$xpl-chart-theme-twilight-4: var(--xpl-chart-theme-twilight-4);
$xpl-chart-theme-twilight-5: var(--xpl-chart-theme-twilight-5);
$xpl-chart-theme-twilight-6: var(--xpl-chart-theme-twilight-6);
$xpl-chart-theme-twilight-7: var(--xpl-chart-theme-twilight-7);
$xpl-chart-theme-twilight-8: var(--xpl-chart-theme-twilight-8);
$xpl-chart-neutral-lighter: var(--xpl-chart-neutral-lighter);
$xpl-chart-neutral-light: var(--xpl-chart-neutral-light);
$xpl-chart-neutral-normal: var(--xpl-chart-neutral-normal);
$xpl-chart-neutral-bold: var(--xpl-chart-neutral-bold);
$xpl-chart-neutral-bolder: var(--xpl-chart-neutral-bolder);
$xpl-chart-neutral-boldest: var(--xpl-chart-neutral-boldest);
$xpl-chart-orange-lighter: var(--xpl-chart-orange-lighter);
$xpl-chart-orange-light: var(--xpl-chart-orange-light);
$xpl-chart-orange-normal: var(--xpl-chart-orange-normal);
$xpl-chart-orange-bold: var(--xpl-chart-orange-bold);
$xpl-chart-orange-bolder: var(--xpl-chart-orange-bolder);
$xpl-chart-orange-boldest: var(--xpl-chart-orange-boldest);
$xpl-chart-purple-lighter: var(--xpl-chart-purple-lighter);
$xpl-chart-purple-light: var(--xpl-chart-purple-light);
$xpl-chart-purple-normal: var(--xpl-chart-purple-normal);
$xpl-chart-purple-bold: var(--xpl-chart-purple-bold);
$xpl-chart-purple-bolder: var(--xpl-chart-purple-bolder);
$xpl-chart-purple-boldest: var(--xpl-chart-purple-boldest);
$xpl-chart-green-lighter: var(--xpl-chart-green-lighter);
$xpl-chart-green-light: var(--xpl-chart-green-light);
$xpl-chart-green-normal: var(--xpl-chart-green-normal);
$xpl-chart-green-bold: var(--xpl-chart-green-bold);
$xpl-chart-green-bolder: var(--xpl-chart-green-bolder);
$xpl-chart-green-boldest: var(--xpl-chart-green-boldest);
$xpl-chart-yellow-lighter: var(--xpl-chart-yellow-lighter);
$xpl-chart-yellow-light: var(--xpl-chart-yellow-light);
$xpl-chart-yellow-normal: var(--xpl-chart-yellow-normal);
$xpl-chart-yellow-bold: var(--xpl-chart-yellow-bold);
$xpl-chart-yellow-bolder: var(--xpl-chart-yellow-bolder);
$xpl-chart-yellow-boldest: var(--xpl-chart-yellow-boldest);
$xpl-chart-red-lighter: var(--xpl-chart-red-lighter);
$xpl-chart-red-light: var(--xpl-chart-red-light);
$xpl-chart-red-normal: var(--xpl-chart-red-normal);
$xpl-chart-red-bold: var(--xpl-chart-red-bold);
$xpl-chart-red-bolder: var(--xpl-chart-red-bolder);
$xpl-chart-red-boldest: var(--xpl-chart-red-boldest);
$xpl-chart-pink-lighter: var(--xpl-chart-pink-lighter);
$xpl-chart-pink-light: var(--xpl-chart-pink-light);
$xpl-chart-pink-normal: var(--xpl-chart-pink-normal);
$xpl-chart-pink-bold: var(--xpl-chart-pink-bold);
$xpl-chart-pink-bolder: var(--xpl-chart-pink-bolder);
$xpl-chart-pink-boldest: var(--xpl-chart-pink-boldest);
$xpl-chart-blue-lighter: var(--xpl-chart-blue-lighter);
$xpl-chart-blue-light: var(--xpl-chart-blue-light);
$xpl-chart-blue-normal: var(--xpl-chart-blue-normal);
$xpl-chart-blue-bold: var(--xpl-chart-blue-bold);
$xpl-chart-blue-bolder: var(--xpl-chart-blue-bolder);
$xpl-chart-blue-boldest: var(--xpl-chart-blue-boldest);
$xpl-chart-teal-lighter: var(--xpl-chart-teal-lighter);
$xpl-chart-teal-light: var(--xpl-chart-teal-light);
$xpl-chart-teal-normal: var(--xpl-chart-teal-normal);
$xpl-chart-teal-bold: var(--xpl-chart-teal-bold);
$xpl-chart-teal-bolder: var(--xpl-chart-teal-bolder);
$xpl-chart-teal-boldest: var(--xpl-chart-teal-boldest);
$xpl-icon-default: var(--xpl-icon-default);
$xpl-icon-subtle: var(--xpl-icon-subtle);
$xpl-icon-inverse: var(--xpl-icon-inverse);
$xpl-icon-inverse-on-light: var(--xpl-icon-inverse-on-light);
$xpl-icon-inverse-on-dark: var(--xpl-icon-inverse-on-dark);
$xpl-icon-disabled: var(--xpl-icon-disabled);
$xpl-icon-brand: var(--xpl-icon-brand);
$xpl-icon-negative: var(--xpl-icon-negative);
$xpl-icon-warning: var(--xpl-icon-warning);
$xpl-icon-positive: var(--xpl-icon-positive);
$xpl-icon-information: var(--xpl-icon-information);
$xpl-icon-badge-default: var(--xpl-icon-badge-default);
$xpl-icon-badge-yellow: var(--xpl-icon-badge-yellow);
$xpl-icon-badge-green: var(--xpl-icon-badge-green);
$xpl-icon-badge-red: var(--xpl-icon-badge-red);
$xpl-icon-badge-grey: var(--xpl-icon-badge-grey);
$xpl-icon-badge-blue: var(--xpl-icon-badge-blue);
$xpl-text-strong: var(--xpl-text-strong);
$xpl-text-default: var(--xpl-text-default);
$xpl-text-subdued: var(--xpl-text-subdued);
$xpl-text-inverse: var(--xpl-text-inverse);
$xpl-text-inverse-on-light: var(--xpl-text-inverse-on-light);
$xpl-text-inverse-on-dark: var(--xpl-text-inverse-on-dark);
$xpl-text-positive: var(--xpl-text-positive);
$xpl-text-negative: var(--xpl-text-negative);
$xpl-text-disabled: var(--xpl-text-disabled);
$xpl-text-link-default: var(--xpl-text-link-default);
$xpl-text-link-hovered: var(--xpl-text-link-hovered);
$xpl-text-link-visited: var(--xpl-text-link-visited);
$xpl-text-badge-default: var(--xpl-text-badge-default);
$xpl-text-badge-yellow: var(--xpl-text-badge-yellow);
$xpl-text-badge-green: var(--xpl-text-badge-green);
$xpl-text-badge-red: var(--xpl-text-badge-red);
$xpl-text-badge-gray: var(--xpl-text-badge-gray);
$xpl-text-badge-blue: var(--xpl-text-badge-blue);
$xpl-color-transparent: var(--xpl-color-transparent);