:root,
:host {
  --wt-font-family-base:
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI';
  --wt-font-weight-medium: 500;
  --wt-font-weight-semibold: 600;
  --wt-font-weight-bold: 700;
  --wt-font-weight-light: 300;
  --wt-font-weight-normal: 400;
  --wt-color-text-primary: #212529; /* Ciemny tekst */
  --wt-color-background-primary: #fff; /* Jasne tło */
  --wt-color-border-primary: #ced4da; /* Jasna obramowanie */
  --wt-transition-duration-fast: 0.15s;
  --wt-color-focus-ring: rgba(0, 123, 255, 0.25); /* Kolor obwódki focus */
  --wt-focus-ring-width: 0.2rem;

  /* Spacing */
  --wt-spacing-none: 0px;
  --wt-spacing-xxs: 2px;
  --wt-spacing-xs: 4px;
  --wt-spacing-xsd: 5px;
  --wt-spacing-s: 6px;
  --wt-spacing-md: 8px;
  --wt-spacing-mdp: 10px;
  --wt-spacing-lg: 12px;
  --wt-spacing-lgp: 14px;
  --wt-spacing-xl: 16px;
  --wt-spacing-2xl: 20px;
  --wt-spacing-3xl: 24px;
  --wt-spacing-4xl: 28px;
  --wt-spacing-5xl: 32px;
  --wt-spacing-6xl: 40px;
  --wt-spacing-7xl: 48px;
  --wt-spacing-8xl: 64px;
  --wt-spacing-9xl: 80px;
  --wt-spacing-10xl: 96px;
  --wt-spacing-11xl: 112px;
  --wt-spacing-12xl: 224px;

  /* Radius */
  --wt-radius-none: 0px;
  --wt-radius-xxs: var(--wt-spacing-xxs);
  --wt-radius-xs: var(--wt-spacing-xs);
  --wt-radius-sm: var(--wt-spacing-s);
  --wt-radius-md: var(--wt-spacing-md);
  --wt-radius-lg: var(--wt-spacing-mdp);
  --wt-radius-xl: var(--wt-spacing-lg);
  --wt-radius-2xl: var(--wt-spacing-xl);
  --wt-radius-3xl: var(--wt-spacing-2xl);
  --wt-radius-4xl: var(--wt-spacing-3xl);
  --wt-radius-max: 625rem;
  --wt-radius-full: 100%;

  /* Width */
  --wt-width-xxs: 20rem;
  --wt-width-xs: 24rem;
  --wt-width-sm: 30rem;
  --wt-width-md: 35rem;
  --wt-width-lg: 40rem;
  --wt-width-xl: 48rem;
  --wt-width-2xl: 64rem;
  --wt-width-3xl: 80rem;
  --wt-width-4xl: 90rem;
  --wt-width-5xl: 100rem;
  --wt-width-6xl: 120rem;

  /* Containers */
  --wt-container-padding-mobile: 1.25rem;
  --wt-container-padding-tablet: 1.75rem;
  --wt-container-padding-desktop: 1.75rem;

  /* Focus ring */
  --wt-focus-ring-brand: 0px 0px 0px 2px var(--wt-border-brand, #0254b5);
  --wt-focus-ring-gray: 0px 0px 0px 2px var(--wt-colors-gray-300, #d0d5dd);
  --wt-focus-ring-error: 0px 0px 0px 2px var(--wt-colors-error-400, #ea4848);

  /* Typography */
  --wt-display-sm: 1.875rem;
  --wt-display-xs: 1.5rem;
  --wt-text-xl: 1.25rem;
  --wt-text-lg: 1.125rem;
  --wt-text-md: 1rem;
  --wt-text-sm: 0.875rem;
  --wt-text-xs: 0.75rem;
  --wt-text-xxs: 0.375rem;
  --wt-chart-label: 0.688rem;

  /* Typography CH */
  --wt-display-sm-ch: var(--wt-display-sm, 1.875rem);
  --wt-display-xs-ch: var(--wt-display-xs, 1.5rem);
  --wt-text-xl-ch: var(--wt-text-xl, 1.25rem);
  --wt-text-lg-ch: var(--wt-text-lg, 1.125rem);
  --wt-text-md-ch: var(--wt-text-md, 1rem);
  --wt-text-sm-ch: var(--wt-text-sm, 0.875rem);
  --wt-text-xs-ch: var(--wt-text-xs, 0.75rem);
  --wt-chart-label-ch: var(--wt-chart-label, 0.688rem);

  /* Line height CH */
  --wt-display-sm-ch-line-height: 2.375rem;
  --wt-display-xs-ch-line-height: 2rem;
  --wt-text-xl-ch-line-height: 1.875rem;
  --wt-text-lg-ch-line-height: 1.75rem;
  --wt-text-md-ch-line-height: 1.5rem;
  --wt-text-sm-ch-line-height: 1.25rem;
  --wt-text-xs-ch-line-height: 1.125rem;
  --wt-chart-label-ch-line-height: 0.875rem;

  /* Animations */
  --wt-slide-up-down: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.4);
  --wt-slide-in-out-slow: right 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --wt-slide-in-out-fast: right 0.5s ease;
  --wt-slide-in-out-mobile: transform 0.64s cubic-bezier(0.25, 0.8, 0.25, 1);
  --wt-bounce-resize: width 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Shadow */
  --wt-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.08);
  --wt-shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.12), 0px 1px 2px 0px rgba(16, 24, 40, 0.08);
  --wt-shadow-ms: 0px 4px 8px -2px rgba(16, 24, 40, 0.12), 0px 2px 4px -2px rgba(16, 24, 40, 0.08);
  --wt-shadow-lg: 0px 4px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --wt-shadow-xl: 0px 8px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  --wt-shadow-2xl: 0px 8px 48px -12px rgba(16, 24, 40, 0.18);
  --wt-shadow-3xl: 0px 8px 64px -12px rgba(16, 24, 40, 0.14);
  --wt-shadow-map-symbology: 0px 4px 4px 0px rgba(16, 24, 40, 0.16), 0px 6px 12px 0px rgba(16, 24, 40, 0.4);
  --wt-shadow-badge:
    0 2px 4px -1px var(--wt-alpha-black-20), 0 4px 5px 0 var(--wt-alpha-black-14), 0 1px 10px 0 var(--wt-alpha-black-12);

  /* Z-Index Base Scale */
  --wt-z-index-sm: 1;
  --wt-z-index-mdp: 5;
  --wt-z-index-md: 10;
  --wt-z-index-lgp: 50;
  --wt-z-index-lg: 100;
  --wt-z-index-xlp: 500;
  --wt-z-index-xl: 1000;
  --wt-z-index-2xl: 2000;
  --wt-z-index-3xl: 3000;
  --wt-z-index-4xl: 5000;
  --wt-z-index-5xl: 10000;

  /* Z-Index Semantic Variables - Component-specific
   *
   * Hierarchy (lowest to highest):
   * - base: Internal component positioning (badges, focus states)
   * - dropdown: Dropdown menus, select options
   * - modal: Modal dialogs, drawers, overlays
   * - modal-content: Content rendered inside modals (dropdowns in modals)
   * - tooltip: Tooltips (appear above modal content)
   * - toast: Toast notifications (always on top of WT components)
   * - max: Reserved for client apps to place elements above watchtower components
   * base (1) < dropdown (100) < modal (1000) < modal-content (2000) < tooltip (3000) < toast (5000) < max (10000)
   */
  --wt-z-index-base: var(--wt-z-index-sm);
  --wt-z-index-dropdown: var(--wt-z-index-lg);
  --wt-z-index-modal: var(--wt-z-index-xl);
  --wt-z-index-modal-content: var(--wt-z-index-2xl);
  --wt-z-index-tooltip: var(--wt-z-index-3xl);
  --wt-z-index-toast: var(--wt-z-index-4xl);
  --wt-z-index-max: var(--wt-z-index-5xl);

  /* Priority Colors */
  --wt-priority-critical: #ea4848;
  --wt-priority-high: #ffcd66;
  --wt-priority-medium: #8c94a1;
  --wt-priority-low: #c8deff;
  --wt-priority-informational: #c8deff; /* TODO: Update this color once UX/UI provide it */
}

:root,
:host {
  /* Base */
  --wt-colors-base-white: #ffffff;
  --wt-colors-base-black: #000000;
  --wt-colors-transparent: #ffffff00;
  --wt-text-white: var(--wt-colors-base-white);
  --wt-text-black: var(--wt-colors-gray-900);

  /* Primitives */
  --wt-colors-error-25: #fef6f6;
  --wt-colors-error-50: #fce8e8;
  --wt-colors-error-100: #fad1d1;
  --wt-colors-error-200: #f7baba;
  --wt-colors-error-300: #f07575;
  --wt-colors-error-400: #ea4848;
  --wt-colors-error-500: #e12929;
  --wt-colors-error-600: #a01212;
  --wt-colors-error-700: #8a0f0f;
  --wt-colors-error-800: #730d0d;
  --wt-colors-error-900: #5c0a0a;
  --wt-colors-error-950: #450808;

  --wt-colors-warning-25: #fef9f6;
  --wt-colors-warning-50: #fef2ea;
  --wt-colors-warning-100: #fde5d6;
  --wt-colors-warning-200: #fad0b7;
  --wt-colors-warning-300: #f3a372;
  --wt-colors-warning-400: #ed762e;
  --wt-colors-warning-500: #c64f07;
  --wt-colors-warning-600: #ac4506;
  --wt-colors-warning-700: #933b06;
  --wt-colors-warning-800: #7b3105;
  --wt-colors-warning-900: #622704;
  --wt-colors-warning-950: #4a1e03;

  --wt-colors-success-25: #f5fffa;
  --wt-colors-success-50: #e6fff3;
  --wt-colors-success-100: #cefde7;
  --wt-colors-success-200: #b9f8db;
  --wt-colors-success-300: #8df1c2;
  --wt-colors-success-400: #01a659;
  --wt-colors-success-450: #04874a;
  --wt-colors-success-500: #00763f;
  --wt-colors-success-600: #005c31;
  --wt-colors-success-700: #004d29;
  --wt-colors-success-800: #003d21;
  --wt-colors-success-900: #002e19;
  --wt-colors-success-950: #001f10;

  --wt-colors-moss-25: #f6fef9;
  --wt-colors-moss-50: #e9fcef;
  --wt-colors-moss-100: #d2f9df;
  --wt-colors-moss-200: #bcf6d0;
  --wt-colors-moss-300: #79eca0;
  --wt-colors-moss-400: #36e371;
  --wt-colors-moss-500: #19b34d;
  --wt-colors-moss-600: #169c44;
  --wt-colors-moss-700: #13863a;
  --wt-colors-moss-800: #107030;
  --wt-colors-moss-900: #0d5927;
  --wt-colors-moss-950: #09431d;

  --wt-colors-cyan-25: #f5feff;
  --wt-colors-cyan-50: #e6fdfe;
  --wt-colors-cyan-100: #cdfbfe;
  --wt-colors-cyan-200: #b4f9fd;
  --wt-colors-cyan-300: #6af3fb;
  --wt-colors-cyan-400: #06dce9;
  --wt-colors-cyan-500: #00bbc7;
  --wt-colors-cyan-600: #00a8b2;
  --wt-colors-cyan-700: #009099;
  --wt-colors-cyan-800: #007880;
  --wt-colors-cyan-900: #006066;
  --wt-colors-cyan-950: #00484d;

  --wt-colors-purple-25: #f9f7fd;
  --wt-colors-purple-50: #efeafb;
  --wt-colors-purple-100: #dfd5f6;
  --wt-colors-purple-200: #cfbff2;
  --wt-colors-purple-300: #9e80e5;
  --wt-colors-purple-400: #784ddb;
  --wt-colors-purple-500: #4b2eb2;
  --wt-colors-purple-600: #3c258e;
  --wt-colors-purple-700: #331f7a;
  --wt-colors-purple-800: #2b1a65;
  --wt-colors-purple-900: #221551;
  --wt-colors-purple-950: #1a103d;

  --wt-colors-pink-25: #fff5f8;
  --wt-colors-pink-50: #ffe6ed;
  --wt-colors-pink-100: #fce7f6;
  --wt-colors-pink-200: #feb3ca;
  --wt-colors-pink-300: #fd6894;
  --wt-colors-pink-400: #fc1a5d;
  --wt-colors-pink-500: #cc003d;
  --wt-colors-pink-600: #b20036;
  --wt-colors-pink-700: #99002e;
  --wt-colors-pink-800: #800026;
  --wt-colors-pink-900: #66001f;
  --wt-colors-pink-950: #4d0017;

  --wt-colors-orange-25: #fff9f5;
  --wt-colors-orange-50: #feefe7;
  --wt-colors-orange-100: #fde0ce;
  --wt-colors-orange-200: #fcd0b6;
  --wt-colors-orange-300: #f9a16c;
  --wt-colors-orange-400: #f78f4f;
  --wt-colors-orange-500: #f67c32;
  --wt-colors-orange-600: #f4630b;
  --wt-colors-orange-700: #dc590a;
  --wt-colors-orange-800: #c34f09;
  --wt-colors-orange-900: #ab4508;
  --wt-colors-orange-950: #933b06;

  --wt-colors-yellow-25: #fffcf5;
  --wt-colors-yellow-50: #fff7e5;
  --wt-colors-yellow-100: #ffeecc;
  --wt-colors-yellow-200: #ffe6b2;
  --wt-colors-yellow-300: #ffcd66;
  --wt-colors-yellow-400: #f5a500;
  --wt-colors-yellow-500: #cc8900;
  --wt-colors-yellow-600: #b27800;
  --wt-colors-yellow-700: #996700;
  --wt-colors-yellow-800: #805600;
  --wt-colors-yellow-900: #664500;
  --wt-colors-yellow-950: #4d3400;

  /* TODO: Remove the following variables when the example button is removed */
  /* Primary */
  --wt-color-primary-base: #007bff;
  --wt-color-primary-hover: #0056b3;
  --wt-color-primary-active: #003d82;
  --wt-color-primary-contrast: #fff;
  /* Secondary */
  --wt-color-secondary-base: #6c757d;
  --wt-color-secondary-hover: #545b62;
  --wt-color-secondary-active: #3d4043;
  --wt-color-secondary-contrast: #fff;
  /* Tertiary */
  --wt-color-tertiary-base: #f8f9fa;
  --wt-color-tertiary-hover: #e2e6ea;
  --wt-color-tertiary-active: #c8cbcf;
  --wt-color-tertiary-contrast: #212529;
  /* Success */
  --wt-color-success-base: #28a745;
  --wt-color-success-hover: #1e7e34;
  --wt-color-success-active: #155724;
  --wt-color-success-contrast: #fff;
  /* Warning */
  --wt-color-warning-base: #ac4506;
  --wt-color-warning-hover: #e0a800;
  --wt-color-warning-active: #c68900;
  --wt-color-warning-contrast: #212529;
  /* Danger */
  --wt-color-danger-base: #dc3545;
  --wt-color-danger-hover: #c82333;
  --wt-color-danger-active: #b21f2d;
  --wt-color-danger-contrast: #fff;
  /* End of button variables */

  /* Spinner */
  --spinner-color: #2d2d2d;
  --spinner-color-dark: #2d2d2d;
  --spinner-color-light: #ffffff;
}

.wt-h1 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--display-sm-ch, 30px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--display-sm-ch-line-height, 38px); /* 126.667% */
}

.wt-h2 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-lg-ch, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--text-lg-ch-line-height, 28px); /* 155.556% */
}

.wt-h3 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-md-ch, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--text-md-ch-line-height, 24px); /* 150% */
}

.wt-h4 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-sm-ch, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--text-sm-ch-line-height, 20px); /* 142.857% */
}

.wt-h5 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-xs-ch, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--text-xs-ch-line-height, 18px); /* 150% */
}

.wt-h6 {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-xs-ch, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--text-xs-ch-line-height, 18px); /* 150% */
  text-transform: uppercase;
}

.wt-body-regular {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-md-ch, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-md-ch-line-height, 24px); /* 150% */
}

.wt-body-caption {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-sm-ch, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-sm-ch-line-height, 20px); /* 142.857% */
}

.wt-text-caption {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--text-xs-ch, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--text-xs-ch-line-height, 18px); /* 150% */
}

.wt-chart-axis-label {
  color: var(--wt-colors-Text-text-primary, #101828);
  font-family: Roboto;
  font-size: var(--chart-label-ch, 11px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--chart-label-ch-line-height, 14px); /* 127.273% */
}

/* Timing Classes */

/* Animations: Fade */
.wt-easyinout-fast {
  animation-timing-function: ease-in-out;
  animation-duration: 240ms;
}

.wt-linear-mid {
  animation-timing-function: linear;
  animation-duration: 240ms;
}

.wt-linear-fast {
  animation-timing-function: linear;
  animation-duration: 160ms;
}

/* Badge-specific animations */
@keyframes wt-badge-appear {
  from {
    opacity: 0;
    transform: scale(0) translate(50%, -50%);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(50%, -50%);
  }
}

@keyframes wt-badge-disappear {
  from {
    opacity: 1;
    transform: scale(1) translate(50%, -50%);
  }
  to {
    opacity: 0;
    transform: scale(0) translate(50%, -50%);
  }
}

:root,
:host {
  font-family: var(--wt-font-family-base);
}

/* Tooltip styles are global because tooltip elements are created on the fly at the body level */
.wt-tooltip-portal {
  position: absolute;
  display: none;
  opacity: 0;
  transition: opacity 160ms linear;
  z-index: var(--wt-z-index-tooltip);
}

.wt-tooltip-portal.wt-tooltip-rendered {
  display: block;
}

.wt-tooltip-portal.wt-tooltip-visible {
  opacity: 1;
}

.wt-tooltip-container {
  position: relative;
  border: none;
  background-color: var(--wt-tooltip-bg);
  border-radius: var(--wt-spacing-md);
  padding: var(--wt-spacing-lg);
  box-shadow: var(--wt-shadow-lg);
  color: var(--wt-tooltip-main-text);
}

.wt-tooltip-custom {
  background-color: var(--wt-tooltip-custom-bg);
  color: var(--wt-text-primary);
  border: 0.0625rem solid var(--wt-border-primary);

  .wt-tooltip-header {
    color: var(--wt-text-primary);
  }

  .wt-tooltip-arrow::before {
    background-color: var(--wt-border-primary);
  }
}

.wt-tooltip-container div {
  font-size: var(--text-xs-ch, 12px);
  font-family: 'Roboto', sans-serif;
  line-height: var(--text-xs-ch-line-height, 18px);
}

.wt-tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
}

.wt-tooltip-arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 16px;
  height: 6px;
  background-color: var(--wt-tooltip-bg);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" viewBox="0 0 17 9"><path d="M14.5711 0.485289C15.462 0.485289 15.9081 1.56243 15.2782 2.1924L9.20711 8.26347C8.81658 8.654 8.18342 8.654 7.79289 8.26347L1.72183 2.1924C1.09187 1.56243 1.53803 0.485289 2.42894 0.485289L14.5711 0.485289Z"/></svg>');
  mask-position: center bottom;
}

.wt-tooltip-header {
  font-weight: bold;
  color: var(--wt-tooltip-main-text);
  font-weight: 600;
}

.wt-tooltip-text {
  max-width: 300px;
  margin-top: var(--wt-spacing-xs);
  color: var(--wt-tooltip-supporting-text);
  font-weight: 400;
}

html[data-theme='cobalt-dark'] .wt-tooltip-container,
html[data-theme='cobalt-light'] .wt-tooltip-container {
  padding: 6px 8px;
  border-radius: 4px;
  background-color: var(--tooltip-background);
  border: 1px solid var(--input-border-color);
}

html[data-theme='cobalt-dark'] .wt-tooltip-header,
html[data-theme='cobalt-dark'] .wt-tooltip-text,
html[data-theme='cobalt-light'] .wt-tooltip-header,
html[data-theme='cobalt-light'] .wt-tooltip-text {
  font-weight: 400;
  color: var(--text-primary);
}

html[data-theme='cobalt-dark'] .wt-tooltip-arrow,
html[data-theme='cobalt-light'] .wt-tooltip-arrow {
  display: none;
}

/* Hide all external select children elements of wt-select
 * This prevents menu-items from being displayed when they
 * are rendered by the host element (e.g., from Angular @for loops).
 */
wt-select > :not(.wt-select) {
  display: none;
}

/* Scrollbar styles */
.wt-scroll-fixed,
.wt-scroll {
  --wt-scrollbar-width: var(--wt-spacing-xl, 1rem);
  --wt-scrollbar-box-shadow: inset 0 0 var(--wt-spacing-mdp) var(--wt-spacing-mdp)
    color-mix(in srgb, var(--wt-bg-secondary-solid) 40%, transparent);
}

html[data-theme='dark'] .wt-scroll-fixed,
html[data-theme='dark'] .wt-scroll {
  --wt-scrollbar-box-shadow: inset 0 0 var(--wt-spacing-mdp) var(--wt-spacing-mdp)
    color-mix(in srgb, var(--wt-bg-secondary-solid) 65%, transparent);
}

/* WebKit scrollbar styles (Chrome, Safari, Edge) */

/* Fixed scrollbar (always visible) */
.wt-scroll-fixed::-webkit-scrollbar {
  width: var(--wt-scrollbar-width);
}

.wt-scroll-fixed::-webkit-scrollbar-track {
  border-top: solid var(--wt-spacing-xs) transparent;
  box-shadow: inset 0 0 var(--wt-spacing-mdp) var(--wt-spacing-mdp) transparent;
  border: solid var(--wt-spacing-xs) transparent;
}

.wt-scroll-fixed::-webkit-scrollbar-thumb {
  box-shadow: var(--wt-scrollbar-box-shadow);
  border: solid var(--wt-spacing-xs) transparent;
  border-radius: var(--wt-radius-xl);
}

/* Dynamic scrollbar styles (only visible when hovering) */
.wt-scroll {
  &::-webkit-scrollbar {
    background-color: transparent;
    width: var(--wt-scrollbar-width);
  }

  &::-webkit-scrollbar-thumb {
    border: solid var(--wt-spacing-xs) transparent;
    border-radius: var(--wt-radius-xl);
  }
}

.wt-scroll:hover {
  &::-webkit-scrollbar {
    width: var(--wt-scrollbar-width);
  }

  &::-webkit-scrollbar-thumb {
    box-shadow: var(--wt-scrollbar-box-shadow);
  }
}

@media (hover: none) {
  .wt-scroll {
    &::-webkit-scrollbar {
      width: var(--wt-scrollbar-width);
    }
    &::-webkit-scrollbar-thumb {
      box-shadow: var(--wt-scrollbar-box-shadow);
    }
  }
}

/* Fallback for browsers that don't support -webkit-scrollbar pseudo-elements (Firefox) */
@supports not (selector(::-webkit-scrollbar)) {
  .wt-scroll-fixed,
  .wt-scroll {
    scrollbar-width: auto;
  }

  .wt-scroll-fixed {
    scrollbar-color: var(--wt-bg-secondary-solid) transparent;
  }

  .wt-scroll {
    scrollbar-color: transparent transparent;
  }

  .wt-scroll:hover {
    scrollbar-color: var(--wt-bg-secondary-solid) transparent;
  }

  html[data-theme='light'] .wt-scroll:hover {
    scrollbar-color: var(--wt-scrollbar-box-shadow) transparent;
  }
}

:root[data-theme='dark'],
:root[data-theme='cobalt-dark'],
:host-context(html[data-theme='dark']),
:host-context(html[data-theme='cobalt-dark']) {
  color-scheme: dark; /* Match scrollbar and form controls for dark theme */

  /* Primitives */
  --wt-colors-gray-25: #f2f6fa;
  --wt-colors-gray-50: #e4eaf2;
  --wt-colors-gray-100: #d8dee5;
  --wt-colors-gray-200: #ccd2d9;
  --wt-colors-gray-300: #a1a9b2;
  --wt-colors-gray-400: #707d8c;
  --wt-colors-gray-450: #5b6571;
  --wt-colors-gray-500: #495666;
  --wt-colors-gray-600: #3e4b59;
  --wt-colors-gray-700: #293b52;
  --wt-colors-gray-800: #192e47;
  --wt-colors-gray-900: #0e2138;
  --wt-colors-gray-950: #061930;

  --wt-colors-brand-primary-100: #e3eeff;
  --wt-colors-brand-primary-200: #c8deff;
  --wt-colors-brand-primary-300: #accdff;
  --wt-colors-brand-primary-400: #91bdff;
  --wt-colors-brand-primary-500: #7bb0ff;
  --wt-colors-brand-primary-600: #5e8acc;
  --wt-colors-brand-primary-700: #466799;
  --wt-colors-brand-primary-800: #2f4566;
  --wt-colors-brand-primary-850: #1f2d42;
  --wt-colors-brand-primary-900: #1d2b40;

  /* Text */
  --wt-text-primary: var(--wt-colors-gray-50);
  --wt-text-secondary: var(--wt-colors-gray-100);
  --wt-text-tertiary: var(--wt-colors-gray-200);
  --wt-text_white: var(--wt-colors-gray-900);
  --wt-text-disabled: var(--wt-colors-gray-400);
  --wt-text-placeholder: var(--wt-colors-gray-300);
  --wt-text-brand-primary: var(--wt-colors-brand-primary-500);
  --wt-text-error-primary: var(--wt-colors-error-200);
  --wt-text-warning-primary: var(--wt-colors-warning-300);
  --wt-text-success-primary: var(--wt-colors-success-300);

  /* Borders */
  --wt-border-primary: var(--wt-colors-gray-300);
  --wt-border-medium: var(--wt-colors-gray-400);
  --wt-border-secondary: var(--wt-colors-gray-500);
  --wt-border-tertiary: var(--wt-colors-gray-600);
  --wt-border-disabled: var(--wt-colors-gray-700);
  --wt-border-brand: var(--wt-colors-brand-primary-500);
  --wt-border-error: var(--wt-colors-error-400);
  --wt-border-success: var(--wt-colors-success-400);
  --wt-border-invisible: var(--wt-colors-gray-700);
  --wt-border-form-invisible: var(--wt-colors-gray-600);

  /* Foreground */
  --wt-fg-primary: var(--wt-colors-base-white);
  --wt-fg-secondary: var(--wt-colors-gray-100);
  --wt-fg-secondary_hover: var(--wt-colors-gray-25);
  --wt-fg-tertiary: var(--wt-colors-gray-200);
  --wt-fg-tertiary_hover: var(--wt-colors-gray-100);
  --wt-fg-quaternary: var(--wt-colors-gray-300);
  --wt-fg-quaternary_hover: var(--wt-colors-gray-200);
  --wt-fg-quinary: var(--wt-colors-gray-400);
  --wt-fg-quinary_hover: var(--wt-colors-gray-300);
  --wt-fg-white: var(--wt-colors-base-white);
  --wt-fg-disabled: var(--wt-colors-gray-500);
  --wt-fg-brand-primary: var(--wt-colors-brand-primary-500);
  --wt-fg-brand-primary_alt: var(--wt-colors-brand-primary-400);
  --wt-fg-brand-secondary: var(--wt-colors-brand-primary-200);
  --wt-fg-error-primary: var(--wt-colors-error-200);
  --wt-fg-warning-primary: var(--wt-colors-warning-300);
  --wt-fg-success-primary: var(--wt-colors-success-200);

  /* Background */
  --wt-bg-primary: var(--wt-colors-gray-900);
  --wt-bg-primary_alt: var(--wt-colors-gray-950);
  --wt-bg-primary_alt-header: rgba(1, 11, 24, 0.94);
  --wt-bg-primary_hover: var(--wt-colors-gray-800);
  --wt-bg-primary-solid: var(--wt-colors-gray-900);
  --wt-bg-secondary: var(--wt-colors-gray-900);
  --wt-bg-secondary_hover: var(--wt-colors-gray-700);
  --wt-bg-secondary-solid: var(--wt-colors-gray-600);
  --wt-bg-tertiary: var(--wt-colors-gray-800);
  --wt-bg-tertiary-hover: var(--wt-colors-gray-700);
  --wt-bg-quaternary: var(--wt-colors-gray-600);
  --wt-bg-quinary: var(--wt-colors-gray-400);
  --wt-bg-active: var(--wt-colors-gray-700);
  --wt-bg-disabled: var(--wt-colors-gray-700);
  --wt-bg-overlay: var(--wt-colors-gray-800);
  --wt-bg-brand-primary: var(--wt-colors-brand-primary-850);
  --wt-bg-brand-primary_alt: var(--wt-colors-gray-900);
  --wt-bg-brand-secondary: var(--wt-colors-brand-primary-500);
  --wt-bg-brand-solid: var(--wt-colors-brand-primary-300);
  --wt-bg-brand-solid_hover: var(--wt-colors-brand-primary-200);
  --wt-bg-error-solid: var(--wt-colors-error-400);
  --wt-bg-warning-solid: var(--wt-colors-warning-400);
  --wt-bg-success-solid: var(--wt-colors-success-400);
  --wt-bg-modal-backdrop: rgba(6, 25, 48, 0.85);
  --wt-bg-login-mobile: var(--wt-colors-gray-900);
  --wt-brand-bg-primary: #000f1f;

  /* Background - Pop-up menu */
  --wt-bg-modal: var(--wt-colors-gray-800);
  --wt-bg-modal_hover: var(--wt-colors-gray-700);

  /* Background - Form */
  --wt-bg-form-parent_level1: var(--wt-colors-gray-800);
  --wt-bg-form-parent_level2: var(--wt-colors-gray-700);
  --wt-bg-form-parent_level3: var(--wt-colors-gray-600);
  --wt-bg-form-footer: rgba(14, 33, 56, 0.5);

  /* Alpha */
  --wt-alpha-white-10: rgba(6, 25, 48, 0.9);
  --wt-alpha-white-20: rgba(6, 25, 48, 0.8);
  --wt-alpha-white-30: rgba(6, 25, 48, 0.7);
  --wt-alpha-white-40: rgba(6, 25, 48, 0.6);
  --wt-alpha-white-50: rgba(6, 25, 48, 0.5);
  --wt-alpha-white-60: rgba(6, 25, 48, 0.4);
  --wt-alpha-white-70: rgba(6, 25, 48, 0.3);
  --wt-alpha-white-80: rgba(6, 25, 48, 0.2);
  --wt-alpha-white-90: rgba(6, 25, 48, 0.1);
  --wt-alpha-white-100: var(--wt-colors-gray-950);
  --wt-alpha-black-10: rgba(255, 255, 255, 0.9);
  --wt-alpha-black-20: rgba(255, 255, 255, 0.8);
  --wt-alpha-black-30: rgba(255, 255, 255, 0.7);
  --wt-alpha-black-40: rgba(255, 255, 255, 0.6);
  --wt-alpha-black-50: rgba(255, 255, 255, 0.5);
  --wt-alpha-black-60: rgba(255, 255, 255, 0.4);
  --wt-alpha-black-70: rgba(255, 255, 255, 0.3);
  --wt-alpha-black-80: rgba(255, 255, 255, 0.2);
  --wt-alpha-black-90: rgba(255, 255, 255, 0.1);
  --wt-alpha-black-100: #ffffff;

  /**** UTILITY ****/
  --wt-utility-gray-50: var(--wt-colors-gray-900);
  --wt-utility-gray-100: var(--wt-colors-gray-800);
  --wt-utility-gray-200: var(--wt-colors-gray-700);
  --wt-utility-gray-300: var(--wt-colors-gray-700);
  --wt-utility-gray-400: var(--wt-colors-gray-600);
  --wt-utility-gray-500: var(--wt-colors-gray-500);
  --wt-utility-gray-600: var(--wt-colors-gray-400);
  --wt-utility-gray-700: var(--wt-colors-gray-300);
  --wt-utility-gray-800: var(--wt-colors-gray-200);
  --wt-utility-gray-900: var(--wt-colors-gray-100);

  --wt-utility-brand-50: var(--wt-colors-gray-900);
  --wt-utility-brand-100: var(--wt-colors-gray-800);
  --wt-utility-brand-200: var(--wt-colors-gray-700);
  --wt-utility-brand-300: var(--wt-colors-gray-600);
  --wt-utility-brand-400: var(--wt-colors-gray-500);
  --wt-utility-brand-500: var(--wt-colors-gray-500);
  --wt-utility-brand-600: var(--wt-colors-gray-400);
  --wt-utility-brand-700: var(--wt-colors-gray-300);
  --wt-utility-brand-800: var(--wt-colors-gray-200);
  --wt-utility-brand-900: var(--wt-colors-gray-100);

  --wt-utility-error-50: var(--wt-colors-error-900);
  --wt-utility-error-100: var(--wt-colors-error-700);
  --wt-utility-error-200: var(--wt-colors-error-600);
  --wt-utility-error-300: var(--wt-colors-error-500);
  --wt-utility-error-400: var(--wt-colors-error-400);
  --wt-utility-error-500: var(--wt-colors-error-200);
  --wt-utility-error-600: var(--wt-colors-error-100);
  --wt-utility-error-700: var(--wt-colors-error-50);

  --wt-utility-warning-50: var(--wt-colors-warning-900);
  --wt-utility-warning-100: var(--wt-colors-warning-800);
  --wt-utility-warning-200: var(--wt-colors-warning-700);
  --wt-utility-warning-300: var(--wt-colors-warning-600);
  --wt-utility-warning-400: var(--wt-colors-warning-500);
  --wt-utility-warning-500: var(--wt-colors-warning-400);
  --wt-utility-warning-600: var(--wt-colors-warning-200);
  --wt-utility-warning-700: var(--wt-colors-warning-100);

  --wt-utility-success-50: var(--wt-colors-success-800);
  --wt-utility-success-100: var(--wt-colors-success-700);
  --wt-utility-success-200: var(--wt-colors-success-600);
  --wt-utility-success-300: var(--wt-colors-success-500);
  --wt-utility-success-400: var(--wt-colors-success-400);
  --wt-utility-success-500: var(--wt-colors-success-300);
  --wt-utility-success-600: var(--wt-colors-success-200);
  --wt-utility-success-700: var(--wt-colors-success-100);

  --wt-utility-gray-alt-50: var(--wt-colors-gray-800);
  --wt-utility-gray-alt-100: var(--wt-colors-gray-700);
  --wt-utility-gray-alt-200: var(--wt-colors-gray-600);
  --wt-utility-gray-alt-300: var(--wt-colors-gray-500);
  --wt-utility-gray-alt-400: var(--wt-colors-gray-400);
  --wt-utility-gray-alt-500: var(--wt-colors-gray-200);
  --wt-utility-gray-alt-600: var(--wt-colors-gray-100);
  --wt-utility-gray-alt-700: var(--wt-colors-gray-50);

  --wt-utility-moss-50: var(--wt-colors-moss-900);
  --wt-utility-moss-100: var(--wt-colors-moss-800);
  --wt-utility-moss-200: var(--wt-colors-moss-700);
  --wt-utility-moss-300: var(--wt-colors-moss-600);
  --wt-utility-moss-400: var(--wt-colors-moss-500);
  --wt-utility-moss-500: var(--wt-colors-moss-400);
  --wt-utility-moss-600: var(--wt-colors-moss-300);
  --wt-utility-moss-700: var(--wt-colors-moss-200);

  --wt-utility-cyan-50: var(--wt-colors-cyan-900);
  --wt-utility-cyan-100: var(--wt-colors-cyan-800);
  --wt-utility-cyan-200: var(--wt-colors-cyan-700);
  --wt-utility-cyan-300: var(--wt-colors-cyan-600);
  --wt-utility-cyan-400: var(--wt-colors-cyan-500);
  --wt-utility-cyan-500: var(--wt-colors-cyan-400);
  --wt-utility-cyan-600: var(--wt-colors-cyan-300);
  --wt-utility-cyan-700: var(--wt-colors-cyan-200);

  --wt-utility-purple-50: var(--wt-colors-purple-900);
  --wt-utility-purple-100: var(--wt-colors-purple-800);
  --wt-utility-purple-200: var(--wt-colors-purple-700);
  --wt-utility-purple-300: var(--wt-colors-purple-600);
  --wt-utility-purple-400: var(--wt-colors-purple-500);
  --wt-utility-purple-500: var(--wt-colors-purple-400);
  --wt-utility-purple-600: var(--wt-colors-purple-300);
  --wt-utility-purple-700: var(--wt-colors-purple-200);

  --wt-utility-pink-50: var(--wt-colors-pink-800);
  --wt-utility-pink-100: var(--wt-colors-pink-700);
  --wt-utility-pink-200: var(--wt-colors-pink-600);
  --wt-utility-pink-300: var(--wt-colors-pink-500);
  --wt-utility-pink-400: var(--wt-colors-pink-400);
  --wt-utility-pink-500: var(--wt-colors-pink-200);
  --wt-utility-pink-600: var(--wt-colors-pink-100);
  --wt-utility-pink-700: var(--wt-colors-pink-50);

  --wt-utility-orange-50: var(--wt-colors-orange-800);
  --wt-utility-orange-100: var(--wt-colors-orange-700);
  --wt-utility-orange-200: var(--wt-colors-orange-600);
  --wt-utility-orange-300: var(--wt-colors-orange-500);
  --wt-utility-orange-400: var(--wt-colors-orange-400);
  --wt-utility-orange-500: var(--wt-colors-orange-300);
  --wt-utility-orange-600: var(--wt-colors-orange-100);
  --wt-utility-orange-700: var(--wt-colors-orange-50);

  --wt-utility-yellow-50: var(--wt-colors-yellow-900);
  --wt-utility-yellow-100: var(--wt-colors-yellow-800);
  --wt-utility-yellow-200: var(--wt-colors-yellow-700);
  --wt-utility-yellow-300: var(--wt-colors-yellow-600);
  --wt-utility-yellow-400: var(--wt-colors-yellow-500);
  --wt-utility-yellow-500: var(--wt-colors-yellow-400);
  --wt-utility-yellow-600: var(--wt-colors-yellow-300);
  --wt-utility-yellow-700: var(--wt-colors-yellow-200);

  /*** COMPONENTS ***/

  /* Navigation */
  --wt-nav-item-icon-fg: var(--wt-colors-gray-200);
  --wt-nav-item-icon-fg_active: var(--wt-colors-gray-25);
  --wt-nav-item-bg-active: var(--wt-colors-brand-primary-800);
  --wt-button-create-fg: var(--wt-colors-base-white);

  /* Avatar */
  --wt-avatar-fg: var(--wt-colors-gray-800);
  --wt-avatar-bg: var(--wt-colors-gray-800);
  --wt-avatar-profile-photo-border: var(--wt-colors-gray-950);
  --wt-avatar-contrast-border: rgba(255, 255, 255, 0.12);
  --wt-avatar-focus-border: rgba(112, 125, 140, 0.14);

  /* Breadcrumb */
  --wt-breadcrumb-fg: var(--wt-colors-gray-300);
  --wt-breadcrumb-fg_hover: var(--wt-colors-brand-primary-500);

  /* Button */
  --wt-button-bg_default: rgba(255, 255, 255, 0.1);
  --wt-button-bg_hover: rgba(255, 255, 255, 0.13);
  --wt-button-bg_active: rgba(255, 255, 255, 0.16);

  --wt-button-primary-fg: var(--wt-colors-gray-950);
  --wt-button-primary-fg_hover: var(--wt-colors-base-white);
  --wt-button-primary-bg: var(--wt-colors-brand-primary-500);
  --wt-button-primary-bg_hover: var(--wt-colors-brand-primary-600);

  --wt-button-secondary-fg: var(--wt-colors-base-white);
  --wt-button-secondary-fg_hover: var(--wt-colors-brand-primary-300);
  --wt-button-secondary-bg: var(--wt-colors-gray-700);
  --wt-button-secondary-bg_hover: var(--wt-colors-gray-800-alpha);
  --wt-button-secondary-border: var(--wt-colors-gray-500);

  --wt-button-secondary-quiet-fg: var(--wt-colors-gray-100);
  --wt-button-secondary-quiet-bg: var(--wt-colors-gray-900);
  --wt-button-secondary-quiet-bg_hover: var(--wt-colors-gray-800);
  --wt-button-secondary-quiet-border: var(--wt-colors-gray-300);

  --wt-button-tertiary-fg: var(--wt-colors-gray-500);
  --wt-button-tertiary-fg_hover: var(--wt-colors-gray-300);
  --wt-button-tertiary-bg_hover: var(--wt-colors-brand-primary-800);

  --wt-button-success-fg: var(--wt-colors-base-white);
  --wt-button-success-bg: var(--wt-colors-success-450);
  --wt-button-success-bg_hover: var(--wt-colors-success-600);

  --wt-button-error-fg: var(--wt-colors-base-white);
  --wt-button-error-bg: var(--wt-colors-error-500);
  --wt-button-error-bg_hover: var(--wt-colors-error-600);

  --wt-button-group-orange-bg: var(--wt-colors-orange-400);
  --wt-button-group-orange-bg_hover: var(--wt-colors-orange-500);

  --wt-button-brand-link: var(--wt-colors-brand-primary-500);
  --wt-button-brand-link_hover: var(--wt-colors-brand-primary-300);
  --wt-button-error-link-bg_hover: var(--wt-colors-gray-800);
  --wt-button-error-link-fg: var(--wt-colors-error-200);
  --wt-button-error-link-fg_hover: var(--wt-colors-error-200);

  --wt-button-tertiary-quiet-fg: var(--wt-colors-gray-100);
  --wt-button-tertiary-quiet-bg_hover: var(--wt-colors-gray-800);

  /* Social */
  --wt-social-icon-fg: var(--wt-colors-base-white);

  /* Metric */
  --wt-metric-brand-bg: var(--wt-colors-brand-primary-400);
  --wt-metric-brand-bg_hover: var(--wt-colors-brand-primary-200);
  --wt-metric-brand-fg: var(--wt-colors-gray-950);
  --wt-metric-brand-bar: var(--wt-colors-brand-primary-500);
  --wt-metric-brand-border: var(--wt-colors-brand-primary-300);
  --wt-metric-gray-bg: var(--wt-colors-gray-450);
  --wt-metric-gray-bg_hover: var(--wt-colors-gray-200);
  --wt-metric-gray-fg: var(--wt-colors-base-white);
  --wt-metric-gray-bar: var(--wt-colors-gray-300);
  --wt-metric-gray-border: var(--wt-colors-gray-300);
  --wt-metric-gray-highlight-bg: var(--wt-colors-gray-300);
  --wt-metric-black-bg: var(--wt-colors-gray-600);
  --wt-metric-black-bg_hover: var(--wt-colors-gray-500);
  --wt-metric-black-fg: var(--wt-colors-base-white);
  --wt-metric-black-bar: var(--wt-colors-gray-25);
  --wt-metric-black-border: var(--wt-colors-gray-300);
  --wt-metric-error-bg: var(--wt-colors-error-500);
  --wt-metric-error-bg_hover: var(--wt-colors-error-25);
  --wt-metric-error-fg: var(--wt-colors-base-white);
  --wt-metric-error-bar: var(--wt-colors-error-300);
  --wt-metric-error-border: var(--wt-colors-error-50);
  --wt-metric-warning-bg: var(--wt-colors-warning-600);
  --wt-metric-warning-bg_hover: var(--wt-colors-warning-100);
  --wt-metric-warning-fg: var(--wt-colors-base-white);
  --wt-metric-warning-bar: var(--wt-colors-warning-300);
  --wt-metric-warning-border: var(--wt-colors-warning-400);
  --wt-metric-success-bg: var(--wt-colors-success-400);
  --wt-metric-success-bg_hover: var(--wt-colors-success-50);
  --wt-metric-success-fg: var(--wt-colors-success-950);
  --wt-metric-success-bar: var(--wt-colors-success-300);
  --wt-metric-success-border: var(--wt-colors-success-50);
  --wt-metric-moss-bg: var(--wt-colors-moss-400);
  --wt-metric-moss-bg_hover: var(--wt-colors-moss-25);
  --wt-metric-moss-fg: var(--wt-colors-moss-950);
  --wt-metric-moss-bar: var(--wt-colors-moss-400);
  --wt-metric-moss-border: rgba(255, 255, 255, 0);
  --wt-metric-cyan-bg: var(--wt-colors-cyan-300);
  --wt-metric-cyan-bg_hover: var(--wt-colors-cyan-50);
  --wt-metric-cyan-fg: var(--wt-colors-cyan-950);
  --wt-metric-cyan-bar: var(--wt-colors-cyan-400);
  --wt-metric-cyan-border: rgba(255, 255, 255, 0);
  --wt-metric-purple-bg: var(--wt-colors-purple-500);
  --wt-metric-purple-bg_hover: var(--wt-colors-purple-25);
  --wt-metric-purple-fg: var(--wt-colors-base-white);
  --wt-metric-purple-bar: var(--wt-colors-purple-300);
  --wt-metric-purple-border: var(--wt-colors-purple-300);
  --wt-metric-pink-bg: var(--wt-colors-pink-300);
  --wt-metric-pink-bg_hover: var(--wt-colors-pink-25);
  --wt-metric-pink-fg: var(--wt-colors-pink-950);
  --wt-metric-pink-bar: var(--wt-colors-pink-300);
  --wt-metric-pink-border: rgba(255, 255, 255, 0);
  --wt-metric-orange-bg: var(--wt-colors-orange-500);
  --wt-metric-orange-bg_hover: var(--wt-colors-orange-25);
  --wt-metric-orange-fg: var(--wt-colors-base-black);
  --wt-metric-orange-bar: var(--wt-colors-orange-300);
  --wt-metric-orange-border: rgba(255, 255, 255, 0);
  --wt-metric-yellow-bg: var(--wt-colors-yellow-400);
  --wt-metric-yellow-bg_hover: var(--wt-colors-yellow-25);
  --wt-metric-yellow-fg: var(--wt-colors-yellow-950);
  --wt-metric-yellow-bar: var(--wt-colors-yellow-300);
  --wt-metric-yellow-border: rgba(255, 255, 255, 0);
  --wt-metric-default-bg: rgba(14, 33, 56, 0);
  --wt-metric-default-bg_hover: rgba(255, 255, 255, 0.13);
  --wt-metric-default-fg: var(--wt-colors-gray-50);
  --wt-metric-symbology-border: var(--wt-colors-gray-900);

  /* Notification */
  --wt-notification-bg: var(--wt-colors-gray-50);
  --wt-notification-bg_hover: var(--wt-colors-gray-700-alpha);
  --wt-notification-bg_warning: var(--wt-colors-orange-400);

  /* Symbology */
  --wt-symbology-blue-bg: var(--wt-colors-brand-primary-300);
  --wt-symbology-blue-bg_hover: var(--wt-colors-brand-primary-500);
  --wt-symbology-green-bg: var(--wt-colors-moss-600);
  --wt-symbology-green-bg_hover: var(--wt-colors-moss-500);
  --wt-symbology-yellow-bg: var(--wt-colors-yellow-300);
  --wt-symbology-yellow-bg_hover: var(--wt-colors-yellow-400);
  --wt-symbology-orange-bg: var(--wt-colors-orange-500);
  --wt-symbology-orange-bg_hover: var(--wt-colors-orange-600);
  --wt-symbology-red-bg: var(--wt-colors-error-500);
  --wt-symbology-red-bg_hover: var(--wt-colors-error-600);
  --wt-symbology-purple-bg: var(--wt-colors-purple-400);
  --wt-symbology-purple-bg_hover: var(--wt-colors-purple-500);
  --wt-symbology-black-bg: var(--wt-colors-gray-50);
  --wt-symbology-black-bg_hover: var(--wt-colors-gray-200);
  --wt-symbology-white-bg: var(--wt-colors-gray-900);
  --wt-symbology-white-bg_hover: var(--wt-colors-gray-700);
  --wt-symbology-gray-bg: var(--wt-colors-gray-300);
  --wt-symbology-gray-bg_hover: var(--wt-colors-gray-300);
  --wt-symbology-black-fg: var(--wt-colors-gray-900);

  /* Slider */
  --wt-slider-handle-bg: var(--wt-colors-gray-900);
  --wt-slider-handle-border: var(--wt-colors-brand-primary-400);

  /* Spinner */
  --spinner-color: var(--spinner-color-light);

  /* Table */
  --wt-table-bg-alternate: var(--wt-colors-gray-800);
  --wt-table-bg-high: var(--wt-alpha-white-10);

  /* Timeline */
  --wt-timeline-bg: var(--wt-bg-tertiary);
  --wt-timeline-bg_hover: var(--wt-bg-tertiary-hover);

  /* Toggle */
  --wt-toggle-button-fg: var(--wt-colors-gray-600);
  --wt-toggle-button-fg_disabled: var(--wt-colors-gray-600);

  /* Tooltip */
  --wt-tooltip-main-text: #101828; /* no matching color variable in dark theme */
  --wt-tooltip-supporting-text: var(--wt-colors-gray-700);
  --wt-tooltip-bg: var(--wt-colors-gray-50);
  --wt-tooltip-custom-bg: var(--wt-colors-gray-900);

  /* Wizard */
  --wt-wizard-progress-bg: var(--wt-colors-gray-700);
  --wt-wizard-text-error: var(--wt-colors-error-200);

  /* Chart */
  --wt-chart-01: var(--wt-colors-purple-300);
  --wt-chart-02: var(--wt-colors-moss-500);
  --wt-chart-03: var(--wt-colors-purple-400);
  --wt-chart-04: var(--wt-colors-error-400);
  --wt-chart-05: var(--wt-colors-cyan-400);
  --wt-chart-06: var(--wt-colors-yellow-400);
  --wt-chart-07: var(--wt-colors-error-300);
  --wt-chart-08: var(--wt-colors-warning-400);
  --wt-chart-09: var(--wt-colors-cyan-500);
  --wt-chart-10: var(--wt-colors-cyan-700);
  --wt-chart-11: var(--wt-colors-moss-200);
  --wt-chart-12: var(--wt-colors-error-200);
  --wt-chart-13: var(--wt-colors-yellow-500);
  --wt-chart-14: var(--wt-colors-purple-200);
  --wt-chart-good: #00d744;
  --wt-chart-low: var(--wt-colors-gray-450);
  --wt-chart-medium: var(--wt-colors-yellow-300);
  --wt-chart-high: #ff7f38;
  --wt-chart-critical: var(--wt-colors-error-400);
  --wt-chart-05-border: rgba(0, 0, 0, 0);
  --wt-chart-06-border: rgba(0, 0, 0, 0);
  --wt-chart-11-border: rgba(0, 0, 0, 0);
  --wt-chart-12-border: rgba(0, 0, 0, 0);
  --wt-chart-14-border: rgba(0, 0, 0, 0);

  /* Map */
  --wt-map-green-bg: rgba(13, 89, 39, 0.4);
  --wt-map-gray-bg: var(--wt-colors-gray-700);

  /* AI */
  --wt-ai-bg: #ffffff;

  /* Logos */
  --wt-gamma: #9b39ff;
  --wt-motorola-blue: var(--wt-fg-white);
  --wt-motorola-black: var(--wt-fg-white);

  /* Scrollbar */
  --wt-scrollbar-bg: var(--wt-colors-gray-100);

  /* Solid button */
  --wt-button-solid-bg: var(--wt-colors-gray-900);
  --wt-button-solid-bg_hover: var(--wt-colors-gray-800);
  --wt-button-solid-border: var(--wt-colors-gray-300);
}

:root[data-theme='light'],
:root[data-theme='cobalt-light'],
:host-context(html[data-theme='light']),
:host-context(html[data-theme='cobalt-light']) {
  color-scheme: light; /* Match scrollbar and form controls for light theme */

  /* Primitives */
  --wt-colors-gray-25: #fcfcfd;
  --wt-colors-gray-50: #f9fafb;
  --wt-colors-gray-100: #f2f4f7;
  --wt-colors-gray-200: #eaecf0;
  --wt-colors-gray-300: #d0d5dd;
  --wt-colors-gray-400: #8c94a1;
  --wt-colors-gray-450: #757f8f;
  --wt-colors-gray-500: #667085;
  --wt-colors-gray-600: #475467;
  --wt-colors-gray-700: #344054;
  --wt-colors-gray-800: #182230;
  --wt-colors-gray-900: #101828;
  --wt-colors-gray-950: #0c111d;

  --wt-colors-gray-25-alpha: rgba(255, 255, 255, 0.98);
  --wt-colors-gray-50-alpha: rgba(255, 255, 255, 0.96);
  --wt-colors-gray-100-alpha: rgba(255, 255, 255, 0.94);
  --wt-colors-gray-200-alpha: rgba(255, 255, 255, 0.92);
  --wt-colors-gray-300-alpha: rgba(255, 255, 255, 0.8);
  --wt-colors-gray-400-alpha: rgba(255, 255, 255, 0.56);
  --wt-colors-gray-500-alpha: rgba(255, 255, 255, 0.5);
  --wt-colors-gray-600-alpha: rgba(255, 255, 255, 0.35);
  --wt-colors-gray-700-alpha: rgba(255, 255, 255, 0.16);
  --wt-colors-gray-800-alpha: rgba(255, 255, 255, 0.8);
  --wt-colors-gray-900-alpha: rgba(255, 255, 255, 0.4);
  --wt-colors-gray-950-alpha: rgba(255, 255, 255, 0);

  --wt-colors-brand-primary-25: #f3f7fc;
  --wt-colors-brand-primary-50: #e6eef8;
  --wt-colors-brand-primary-100: #ccddf0;
  --wt-colors-brand-primary-200: #9abbe1;
  --wt-colors-brand-primary-300: #6798d3;
  --wt-colors-brand-primary-400: #3576c4;
  --wt-colors-brand-primary-500: #0254b5;
  --wt-colors-brand-primary-600: #024ca3;
  --wt-colors-brand-primary-700: #024391;
  --wt-colors-brand-primary-800: #01326d;
  --wt-colors-brand-primary-900: #012248;
  --wt-colors-brand-primary-950: #000e1e;

  /* Text */
  --wt-text-primary: var(--wt-colors-gray-900);
  --wt-text-secondary: var(--wt-colors-gray-700);
  --wt-text-tertiary: var(--wt-colors-gray-600);
  --wt-text_white: var(--wt-colors-base-white);
  --wt-text-disabled: var(--wt-colors-gray-500);
  --wt-text-placeholder: var(--wt-colors-gray-500);
  --wt-text-brand-primary: var(--wt-colors-brand-primary-500);
  --wt-text-error-primary: var(--wt-colors-error-600);
  --wt-text-warning-primary: var(--wt-colors-warning-500);
  --wt-text-success-primary: var(--wt-colors-success-500);

  /* Borders */
  --wt-border-primary: var(--wt-colors-gray-400);
  --wt-border-medium: var(--wt-colors-gray-450);
  --wt-border-secondary: var(--wt-colors-gray-300);
  --wt-border-tertiary: var(--wt-colors-gray-200);
  --wt-border-disabled: var(--wt-colors-gray-200);
  --wt-border-brand: var(--wt-colors-brand-primary-500);
  --wt-border-error: var(--wt-colors-error-500);
  --wt-border-success: var(--wt-colors-success-500);
  --wt-border-invisible: var(--wt-colors-transparent);
  --wt-border-form-invisible: var(--wt-colors-transparent);

  /* Foreground */
  --wt-fg-primary: var(--wt-colors-gray-900);
  --wt-fg-secondary: var(--wt-colors-gray-700);
  --wt-fg-secondary_hover: var(--wt-colors-gray-800);
  --wt-fg-tertiary: var(--wt-colors-gray-600);
  --wt-fg-tertiary_hover: var(--wt-colors-gray-700);
  --wt-fg-quaternary: var(--wt-colors-gray-500);
  --wt-fg-quaternary_hover: var(--wt-colors-gray-600);
  --wt-fg-quinary: var(--wt-colors-gray-400);
  --wt-fg-quinary_hover: var(--wt-colors-gray-500);
  --wt-fg-white: var(--wt-colors-base-white);
  --wt-fg-disabled: var(--wt-colors-gray-400);
  --wt-fg-brand-primary: var(--wt-colors-brand-primary-500);
  --wt-fg-brand-primary_alt: var(--wt-colors-brand-primary-600);
  --wt-fg-brand-secondary: var(--wt-colors-brand-primary-200);
  --wt-fg-error-primary: var(--wt-colors-error-600);
  --wt-fg-warning-primary: var(--wt-colors-warning-500);
  --wt-fg-success-primary: var(--wt-colors-success-400);

  /* Background */
  --wt-bg-primary: var(--wt-colors-base-white);
  --wt-bg-primary_alt: var(--wt-colors-gray-50);
  --wt-bg-primary_alt-header: rgba(249, 250, 251, 0.94);
  --wt-bg-primary_hover: var(--wt-colors-gray-50);
  --wt-bg-primary-solid: var(--wt-colors-gray-950);
  --wt-bg-secondary: var(--wt-colors-gray-50);
  --wt-bg-secondary_hover: var(--wt-colors-gray-100);
  --wt-bg-secondary-solid: var(--wt-colors-gray-600);
  --wt-bg-tertiary: var(--wt-colors-gray-100);
  --wt-bg-tertiary-hover: var(--wt-colors-gray-200);
  --wt-bg-quaternary: var(--wt-colors-gray-300);
  --wt-bg-quinary: var(--wt-colors-gray-450);
  --wt-bg-active: var(--wt-colors-gray-100);
  --wt-bg-disabled: var(--wt-colors-gray-100);
  --wt-bg-overlay: var(--wt-colors-gray-950);
  --wt-bg-brand-primary: var(--wt-colors-brand-primary-25);
  --wt-bg-brand-primary_alt: var(--wt-colors-brand-primary-50);
  --wt-bg-brand-secondary: var(--wt-colors-brand-primary-100);
  --wt-bg-brand-solid: var(--wt-colors-brand-primary-500);
  --wt-bg-brand-solid_hover: var(--wt-colors-brand-primary-600);
  --wt-bg-error-solid: var(--wt-colors-error-500);
  --wt-bg-warning-solid: var(--wt-colors-warning-600);
  --wt-bg-success-solid: var(--wt-colors-success-500);
  --wt-bg-modal-backdrop: rgba(71, 84, 103, 0.85);
  --wt-bg-login-mobile: var(--wt-colors-base-white);
  --wt-brand-bg-primary: #001c3b;

  /* Background - Pop-up menu */
  --wt-bg-modal: var(--wt-colors-base-white);
  --wt-bg-modal_hover: var(--wt-colors-gray-50);

  /* Background - Form */
  --wt-bg-form-parent_level1: var(--wt-colors-gray-100);
  --wt-bg-form-parent_level2: var(--wt-colors-gray-200);
  --wt-bg-form-parent_level3: var(--wt-colors-gray-300);
  --wt-bg-form-footer: rgba(255, 255, 255, 0.8);

  /* Alpha */
  --wt-alpha-white-10: rgba(255, 255, 255, 0.1);
  --wt-alpha-white-20: rgba(255, 255, 255, 0.2);
  --wt-alpha-white-30: rgba(255, 255, 255, 0.3);
  --wt-alpha-white-40: rgba(255, 255, 255, 0.4);
  --wt-alpha-white-50: rgba(255, 255, 255, 0.5);
  --wt-alpha-white-60: rgba(255, 255, 255, 0.6);
  --wt-alpha-white-70: rgba(255, 255, 255, 0.7);
  --wt-alpha-white-80: rgba(255, 255, 255, 0.8);
  --wt-alpha-white-90: rgba(255, 255, 255, 0.9);
  --wt-alpha-white-100: #ffffff;
  --wt-alpha-black-10: rgba(0, 0, 0, 0.1);
  --wt-alpha-black-12: rgba(0, 0, 0, 0.12);
  --wt-alpha-black-14: rgba(0, 0, 0, 0.14);
  --wt-alpha-black-15: rgba(0, 0, 0, 0.15);
  --wt-alpha-black-20: rgba(0, 0, 0, 0.2);
  --wt-alpha-black-30: rgba(0, 0, 0, 0.3);
  --wt-alpha-black-40: rgba(0, 0, 0, 0.4);
  --wt-alpha-black-50: rgba(0, 0, 0, 0.5);
  --wt-alpha-black-60: rgba(0, 0, 0, 0.6);
  --wt-alpha-black-70: rgba(0, 0, 0, 0.7);
  --wt-alpha-black-80: rgba(0, 0, 0, 0.8);
  --wt-alpha-black-90: rgba(0, 0, 0, 0.9);
  --wt-alpha-black-100: -#000000;

  /**** UTILITY ****/
  --wt-utility-gray-50: var(--wt-colors-gray-50);
  --wt-utility-gray-100: var(--wt-colors-gray-100);
  --wt-utility-gray-200: var(--wt-colors-gray-200);
  --wt-utility-gray-300: var(--wt-colors-gray-300);
  --wt-utility-gray-400: var(--wt-colors-gray-400);
  --wt-utility-gray-500: var(--wt-colors-gray-500);
  --wt-utility-gray-600: var(--wt-colors-gray-600);
  --wt-utility-gray-700: var(--wt-colors-gray-700);
  --wt-utility-gray-800: var(--wt-colors-gray-800);
  --wt-utility-gray-900: var(--wt-colors-gray-900);

  --wt-utility-brand-50: var(--wt-colors-brand-primary-50);
  --wt-utility-brand-100: var(--wt-colors-brand-primary-100);
  --wt-utility-brand-200: var(--wt-colors-brand-primary-200);
  --wt-utility-brand-300: var(--wt-colors-brand-primary-300);
  --wt-utility-brand-400: var(--wt-colors-brand-primary-400);
  --wt-utility-brand-500: var(--wt-colors-brand-primary-500);
  --wt-utility-brand-600: var(--wt-colors-brand-primary-600);
  --wt-utility-brand-700: var(--wt-colors-brand-primary-700);
  --wt-utility-brand-800: var(--wt-colors-brand-primary-800);
  --wt-utility-brand-900: var(--wt-colors-brand-primary-900);

  --wt-utility-error-50: var(--wt-colors-error-50);
  --wt-utility-error-100: var(--wt-colors-error-100);
  --wt-utility-error-200: var(--wt-colors-error-200);
  --wt-utility-error-300: var(--wt-colors-error-300);
  --wt-utility-error-400: var(--wt-colors-error-400);
  --wt-utility-error-500: var(--wt-colors-error-500);
  --wt-utility-error-600: var(--wt-colors-error-600);
  --wt-utility-error-700: var(--wt-colors-error-700);

  --wt-utility-warning-50: var(--wt-colors-warning-50);
  --wt-utility-warning-100: var(--wt-colors-warning-100);
  --wt-utility-warning-200: var(--wt-colors-warning-200);
  --wt-utility-warning-300: var(--wt-colors-warning-300);
  --wt-utility-warning-400: var(--wt-colors-warning-400);
  --wt-utility-warning-500: var(--wt-colors-warning-500);
  --wt-utility-warning-600: var(--wt-colors-warning-600);
  --wt-utility-warning-700: var(--wt-colors-warning-700);

  --wt-utility-success-50: var(--wt-colors-success-50);
  --wt-utility-success-100: var(--wt-colors-success-100);
  --wt-utility-success-200: var(--wt-colors-success-200);
  --wt-utility-success-300: var(--wt-colors-success-300);
  --wt-utility-success-400: var(--wt-colors-success-400);
  --wt-utility-success-500: var(--wt-colors-success-500);
  --wt-utility-success-600: var(--wt-colors-success-600);
  --wt-utility-success-700: var(--wt-colors-success-700);

  --wt-utility-gray-alt-50: var(--wt-colors-gray-50);
  --wt-utility-gray-alt-100: var(--wt-colors-gray-100);
  --wt-utility-gray-alt-200: var(--wt-colors-gray-200);
  --wt-utility-gray-alt-300: var(--wt-colors-gray-300);
  --wt-utility-gray-alt-400: var(--wt-colors-gray-400);
  --wt-utility-gray-alt-500: var(--wt-colors-gray-500);
  --wt-utility-gray-alt-600: var(--wt-colors-gray-600);
  --wt-utility-gray-alt-700: var(--wt-colors-gray-700);

  --wt-utility-moss-50: var(--wt-colors-moss-50);
  --wt-utility-moss-100: var(--wt-colors-moss-100);
  --wt-utility-moss-200: var(--wt-colors-moss-200);
  --wt-utility-moss-300: var(--wt-colors-moss-300);
  --wt-utility-moss-400: var(--wt-colors-moss-400);
  --wt-utility-moss-500: var(--wt-colors-moss-500);
  --wt-utility-moss-600: var(--wt-colors-moss-600);
  --wt-utility-moss-700: var(--wt-colors-moss-800);

  --wt-utility-cyan-50: var(--wt-colors-cyan-50);
  --wt-utility-cyan-100: var(--wt-colors-cyan-100);
  --wt-utility-cyan-200: var(--wt-colors-cyan-200);
  --wt-utility-cyan-300: var(--wt-colors-cyan-300);
  --wt-utility-cyan-400: var(--wt-colors-cyan-400);
  --wt-utility-cyan-500: var(--wt-colors-cyan-500);
  --wt-utility-cyan-600: var(--wt-colors-cyan-600);
  --wt-utility-cyan-700: var(--wt-colors-cyan-900);

  --wt-utility-purple-50: var(--wt-colors-purple-50);
  --wt-utility-purple-100: var(--wt-colors-purple-100);
  --wt-utility-purple-200: var(--wt-colors-purple-200);
  --wt-utility-purple-300: var(--wt-colors-purple-300);
  --wt-utility-purple-400: var(--wt-colors-purple-400);
  --wt-utility-purple-500: var(--wt-colors-purple-500);
  --wt-utility-purple-600: var(--wt-colors-purple-600);
  --wt-utility-purple-700: var(--wt-colors-purple-700);

  --wt-utility-pink-50: var(--wt-colors-pink-50);
  --wt-utility-pink-100: var(--wt-colors-pink-100);
  --wt-utility-pink-200: var(--wt-colors-pink-200);
  --wt-utility-pink-300: var(--wt-colors-pink-300);
  --wt-utility-pink-400: var(--wt-colors-pink-400);
  --wt-utility-pink-500: var(--wt-colors-pink-500);
  --wt-utility-pink-600: var(--wt-colors-pink-600);
  --wt-utility-pink-700: var(--wt-colors-pink-700);

  --wt-utility-orange-50: var(--wt-colors-orange-50);
  --wt-utility-orange-100: var(--wt-colors-orange-100);
  --wt-utility-orange-200: var(--wt-colors-orange-200);
  --wt-utility-orange-300: var(--wt-colors-orange-300);
  --wt-utility-orange-400: var(--wt-colors-orange-400);
  --wt-utility-orange-500: var(--wt-colors-orange-500);
  --wt-utility-orange-600: var(--wt-colors-orange-600);
  --wt-utility-orange-700: var(--wt-colors-orange-800);

  --wt-utility-yellow-50: var(--wt-colors-yellow-50);
  --wt-utility-yellow-100: var(--wt-colors-yellow-100);
  --wt-utility-yellow-200: var(--wt-colors-yellow-200);
  --wt-utility-yellow-300: var(--wt-colors-yellow-300);
  --wt-utility-yellow-400: var(--wt-colors-yellow-400);
  --wt-utility-yellow-500: var(--wt-colors-yellow-500);
  --wt-utility-yellow-600: var(--wt-colors-yellow-600);
  --wt-utility-yellow-700: var(--wt-colors-yellow-700);

  /*** COMPONENTS ***/

  /* Navigation */
  --wt-nav-item-icon-fg: var(--wt-colors-gray-700);
  --wt-nav-item-icon-fg_active: var(--wt-colors-gray-700);
  --wt-nav-item-bg-active: var(--wt-colors-brand-primary-50);
  --wt-button-create-fg: var(--wt-colors-brand-primary-900);

  /* Avatar */
  --wt-avatar-fg: var(--wt-colors-base-white);
  --wt-avatar-bg: var(--wt-colors-gray-100);
  --wt-avatar-profile-photo-border: var(--wt-colors-base-white);
  --wt-avatar-contrast-border: rgba(0, 0, 0, 0.08);
  --wt-avatar-focus-border: rgba(140, 148, 161, 0.14);

  /* Breadcrumb */
  --wt-breadcrumb-fg: var(--wt-colors-gray-600);
  --wt-breadcrumb-fg_hover: var(--wt-colors-brand-primary-500);

  /* Button */
  --wt-button-bg_default: rgba(0, 0, 0, 0.06);
  --wt-button-bg_hover: rgba(0, 0, 0, 0.09);
  --wt-button-bg_active: rgba(0, 0, 0, 0.12);

  --wt-button-primary-fg: var(--wt-colors-base-white);
  --wt-button-primary-fg_hover: var(--wt-colors-base-white);
  --wt-button-primary-bg: var(--wt-colors-brand-primary-500);
  --wt-button-primary-bg_hover: var(--wt-colors-brand-primary-600);

  --wt-button-secondary-fg: var(--wt-colors-brand-primary-600);
  --wt-button-secondary-fg_hover: var(--wt-colors-brand-primary-600);
  --wt-button-secondary-bg: var(--wt-colors-base-white);
  --wt-button-secondary-bg_hover: var(--wt-colors-brand-primary-50);
  --wt-button-secondary-border: var(--wt-colors-brand-primary-400);

  --wt-button-secondary-quiet-fg: var(--wt-colors-gray-900);
  --wt-button-secondary-quiet-bg: var(--wt-colors-base-white);
  --wt-button-secondary-quiet-bg_hover: var(--wt-colors-gray-50);
  --wt-button-secondary-quiet-border: var(--wt-colors-gray-500);

  --wt-button-tertiary-fg: var(--wt-colors-gray-600);
  --wt-button-tertiary-fg_hover: var(--wt-colors-gray-600);
  --wt-button-tertiary-bg_hover: var(--wt-colors-brand-primary-100);

  --wt-button-success-fg: var(--wt-colors-base-white);
  --wt-button-success-bg: var(--wt-colors-success-500);
  --wt-button-success-bg_hover: var(--wt-colors-success-600);

  --wt-button-error-fg: var(--wt-colors-base-white);
  --wt-button-error-bg: var(--wt-colors-error-500);
  --wt-button-error-bg_hover: var(--wt-colors-error-600);

  --wt-button-group-orange-bg: var(--wt-colors-orange-800);
  --wt-button-group-orange-bg_hover: var(--wt-colors-orange-900);

  --wt-button-brand-link: var(--wt-colors-brand-primary-500);
  --wt-button-brand-link_hover: var(--wt-colors-brand-primary-500);
  --wt-button-error-link-bg_hover: var(--wt-colors-error-50);
  --wt-button-error-link-fg: var(--wt-colors-error-600);
  --wt-button-error-link-fg_hover: var(--wt-colors-error-700);

  --wt-button-tertiary-quiet-fg: var(--wt-colors-gray-900);
  --wt-button-tertiary-quiet-bg_hover: var(--wt-colors-gray-100);

  /* Social */
  --wt-social-icon-fg: var(--wt-colors-base-black);

  /* Metric */
  --wt-metric-brand-bg: var(--wt-colors-brand-primary-500);
  --wt-metric-brand-bg_hover: var(--wt-colors-brand-primary-700);
  --wt-metric-brand-fg: var(--wt-colors-base-white);
  --wt-metric-brand-bar: var(--wt-colors-brand-primary-500);
  --wt-metric-brand-border: var(--wt-colors-brand-primary-300);
  --wt-metric-gray-bg: var(--wt-colors-gray-500);
  --wt-metric-gray-bg_hover: var(--wt-colors-gray-300);
  --wt-metric-gray-fg: var(--wt-colors-base-white);
  --wt-metric-gray-bar: var(--wt-colors-gray-500);
  --wt-metric-gray-border: rgba(255, 255, 255, 0);
  --wt-metric-gray-highlight-bg: var(--wt-colors-gray-200);
  --wt-metric-black-bg: var(--wt-colors-gray-950);
  --wt-metric-black-bg_hover: var(--wt-colors-gray-700);
  --wt-metric-black-fg: var(--wt-colors-base-white);
  --wt-metric-black-bar: var(--wt-colors-gray-800);
  --wt-metric-black-border: rgba(255, 255, 255, 0);
  --wt-metric-error-bg: var(--wt-colors-error-500);
  --wt-metric-error-bg_hover: var(--wt-colors-error-200);
  --wt-metric-error-fg: var(--wt-colors-base-white);
  --wt-metric-error-bar: var(--wt-colors-error-500);
  --wt-metric-error-border: var(--wt-colors-error-400);
  --wt-metric-warning-bg: var(--wt-colors-warning-600);
  --wt-metric-warning-bg_hover: var(--wt-colors-warning-300);
  --wt-metric-warning-fg: var(--wt-colors-base-white);
  --wt-metric-warning-bar: var(--wt-colors-warning-400);
  --wt-metric-warning-border: rgba(255, 255, 255, 0);
  --wt-metric-success-bg: var(--wt-colors-success-400);
  --wt-metric-success-bg_hover: var(--wt-colors-success-300);
  --wt-metric-success-fg: var(--wt-colors-success-950);
  --wt-metric-success-bar: var(--wt-colors-success-400);
  --wt-metric-success-border: var(--wt-colors-success-400);
  --wt-metric-moss-bg: var(--wt-colors-moss-300);
  --wt-metric-moss-bg_hover: var(--wt-colors-moss-200);
  --wt-metric-moss-fg: var(--wt-colors-moss-950);
  --wt-metric-moss-bar: var(--wt-colors-moss-500);
  --wt-metric-moss-border: var(--wt-colors-moss-600);
  --wt-metric-cyan-bg: var(--wt-colors-cyan-400);
  --wt-metric-cyan-bg_hover: var(--wt-colors-cyan-300);
  --wt-metric-cyan-fg: var(--wt-colors-cyan-950);
  --wt-metric-cyan-bar: var(--wt-colors-cyan-500);
  --wt-metric-cyan-border: var(--wt-colors-cyan-700);
  --wt-metric-purple-bg: var(--wt-colors-purple-500);
  --wt-metric-purple-bg_hover: var(--wt-colors-purple-200);
  --wt-metric-purple-fg: var(--wt-colors-base-white);
  --wt-metric-purple-bar: var(--wt-colors-purple-400);
  --wt-metric-purple-border: rgba(255, 255, 255, 0);
  --wt-metric-pink-bg: var(--wt-colors-pink-200);
  --wt-metric-pink-bg_hover: var(--wt-colors-pink-200);
  --wt-metric-pink-fg: var(--wt-colors-pink-950);
  --wt-metric-pink-bar: var(--wt-colors-pink-400);
  --wt-metric-pink-border: var(--wt-colors-pink-500);
  --wt-metric-orange-bg: var(--wt-colors-orange-500);
  --wt-metric-orange-bg_hover: var(--wt-colors-orange-200);
  --wt-metric-orange-fg: var(--wt-colors-base-black);
  --wt-metric-orange-bar: var(--wt-colors-orange-600);
  --wt-metric-orange-border: var(--wt-colors-orange-800);
  --wt-metric-yellow-bg: var(--wt-colors-yellow-400);
  --wt-metric-yellow-bg_hover: var(--wt-colors-yellow-200);
  --wt-metric-yellow-fg: var(--wt-colors-yellow-950);
  --wt-metric-yellow-bar: var(--wt-colors-yellow-400);
  --wt-metric-yellow-border: var(--wt-colors-yellow-600);
  --wt-metric-default-bg: rgba(255, 255, 255, 0);
  --wt-metric-default-bg_hover: rgba(0, 0, 0, 0.09);
  --wt-metric-default-fg: var(--wt-colors-gray-900);
  --wt-metric-symbology-border: var(--wt-colors-base-white);

  /* Notification */
  --wt-notification-bg: var(--wt-colors-gray-800);
  --wt-notification-bg_hover: var(--wt-alpha-white-20);
  --wt-notification-bg_warning: var(--wt-colors-orange-600);

  /* Symbology */
  --wt-symbology-blue-bg: var(--wt-colors-brand-primary-500);
  --wt-symbology-blue-bg_hover: var(--wt-colors-brand-primary-700);
  --wt-symbology-green-bg: var(--wt-colors-moss-600);
  --wt-symbology-green-bg_hover: var(--wt-colors-moss-500);
  --wt-symbology-yellow-bg: var(--wt-colors-yellow-300);
  --wt-symbology-yellow-bg_hover: var(--wt-colors-yellow-400);
  --wt-symbology-orange-bg: var(--wt-colors-orange-500);
  --wt-symbology-orange-bg_hover: var(--wt-colors-orange-600);
  --wt-symbology-red-bg: var(--wt-colors-error-500);
  --wt-symbology-red-bg_hover: var(--wt-colors-error-600);
  --wt-symbology-purple-bg: var(--wt-colors-purple-400);
  --wt-symbology-purple-bg_hover: var(--wt-colors-purple-500);
  --wt-symbology-black-bg: var(--wt-colors-gray-800);
  --wt-symbology-black-bg_hover: var(--wt-colors-gray-700);
  --wt-symbology-white-bg: var(--wt-colors-base-white);
  --wt-symbology-white-bg_hover: var(--wt-colors-gray-100);
  --wt-symbology-gray-bg: var(--wt-colors-gray-400);
  --wt-symbology-gray-bg_hover: var(--wt-colors-gray-300);
  --wt-symbology-black-fg: var(--wt-colors-base-white);

  /* Slider */
  --wt-slider-handle-bg: var(--wt-colors-base-white);
  --wt-slider-handle-border: var(--wt-colors-brand-primary-500);

  /* Spinner */
  --spinner-color: var(--spinner-color-dark);

  /* Table */
  --wt-table-bg-alternate: var(--wt-colors-gray-50);
  --wt-table-bg-high: var(--wt-alpha-black-10);

  /* Timeline */
  --wt-timeline-bg: var(--wt-colors-gray-50);
  --wt-timeline-bg_hover: var(--wt-colors-gray-100);

  /* Toggle */
  --wt-toggle-button-fg: var(--wt-colors-base-white);
  --wt-toggle-button-fg_disabled: var(--wt-colors-gray-50);

  /* Tooltip */
  --wt-tooltip-main-text: var(--wt-text_white);
  --wt-tooltip-supporting-text: var(--wt-colors-gray-300);
  --wt-tooltip-bg: var(--wt-colors-gray-900);
  --wt-tooltip-custom-bg: var(--wt-colors-gray-200);

  /* Wizard */
  --wt-wizard-progress-bg: var(--wt-colors-gray-200);
  --wt-wizard-text-error: var(--wt-colors-error-600);

  /* Chart */
  --wt-chart-01: var(--wt-colors-purple-400);
  --wt-chart-02: var(--wt-colors-success-400);
  --wt-chart-03: var(--wt-colors-purple-700);
  --wt-chart-04: var(--wt-colors-error-500);
  --wt-chart-05: var(--wt-colors-cyan-400);
  --wt-chart-06: var(--wt-colors-yellow-400);
  --wt-chart-07: var(--wt-colors-error-800);
  --wt-chart-08: #e5722d;
  --wt-chart-09: #00a5ae;
  --wt-chart-10: var(--wt-colors-cyan-900);
  --wt-chart-11: var(--wt-colors-moss-300);
  --wt-chart-12: var(--wt-colors-error-200);
  --wt-chart-13: var(--wt-colors-yellow-800);
  --wt-chart-14: var(--wt-colors-purple-200);
  --wt-chart-good: var(--wt-colors-moss-600);
  --wt-chart-low: var(--wt-colors-gray-450);
  --wt-chart-medium: var(--wt-colors-yellow-300);
  --wt-chart-high: #f68037;
  --wt-chart-critical: var(--wt-colors-error-500);
  --wt-chart-05-border: var(--wt-colors-cyan-700);
  --wt-chart-06-border: var(--wt-colors-yellow-600);
  --wt-chart-11-border: var(--wt-colors-moss-600);
  --wt-chart-12-border: var(--wt-colors-error-400);
  --wt-chart-14-border: var(--wt-colors-purple-300);

  /* Map */
  --wt-map-green-bg: var(--wt-colors-moss-100);
  --wt-map-gray-bg: var(--wt-colors-gray-200);

  /* AI */
  --wt-ai-bg: #ffffff;

  /* Logos */
  --wt-logos-gamma: #6800d2;
  --wt-logos-motorola-blue: #005eb8;
  --wt-logos-motorola-black: #231f20;

  /* Scrollbar */
  --wt-scrollbar-bg: var(--wt-colors-gray-600);

  /* Solid button */
  --wt-button-solid-bg: var(--wt-colors-base-white);
  --wt-button-solid-bg_hover: var(--wt-colors-gray-100);
  --wt-button-solid-border: var(--wt-colors-gray-500);
}