/**
 * Do not edit directly, this file was auto-generated.
 */

:root,
.hds-theme-default {
  --token-color-palette-blue-500: #1c345f;
  --token-color-palette-blue-400: #0046d1;
  --token-color-palette-blue-300: #0c56e9;
  --token-color-palette-blue-200: #1060ff;
  --token-color-palette-blue-100: #cce3fe;
  --token-color-palette-blue-50: #f2f8ff;
  --token-color-palette-purple-500: #42215b;
  --token-color-palette-purple-400: #7b00db;
  --token-color-palette-purple-300: #911ced;
  --token-color-palette-purple-200: #a737ff;
  --token-color-palette-purple-100: #ead2fe;
  --token-color-palette-purple-50: #f9f2ff;
  --token-color-palette-green-500: #054220;
  --token-color-palette-green-400: #006619;
  --token-color-palette-green-300: #00781e;
  --token-color-palette-green-200: #008a22;
  --token-color-palette-green-100: #cceeda;
  --token-color-palette-green-50: #f2fbf6;
  --token-color-palette-amber-500: #542800;
  --token-color-palette-amber-400: #803d00;
  --token-color-palette-amber-300: #9e4b00;
  --token-color-palette-amber-200: #bb5a00;
  --token-color-palette-amber-100: #fbeabf;
  --token-color-palette-amber-50: #fff9e8;
  --token-color-palette-red-500: #51130a;
  --token-color-palette-red-400: #940004;
  --token-color-palette-red-300: #c00005;
  --token-color-palette-red-200: #e52228;
  --token-color-palette-red-100: #fbd4d4;
  --token-color-palette-red-50: #fff5f5;
  --token-color-palette-neutral-700: #0c0c0e;
  --token-color-palette-neutral-600: #3b3d45;
  --token-color-palette-neutral-500: #656a76;
  --token-color-palette-neutral-400: #8c909c;
  --token-color-palette-neutral-300: #c2c5cb;
  --token-color-palette-neutral-200: #dedfe3;
  --token-color-palette-neutral-100: #f1f2f3;
  --token-color-palette-neutral-50: #fafafa;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-border-primary: #656a7633;
  --token-color-border-faint: #656a761a;
  --token-color-border-strong: #3b3d4566;
  --token-color-border-action: #cce3fe;
  --token-color-border-highlight: #ead2fe;
  --token-color-border-success: #cceeda;
  --token-color-border-warning: #fbeabf;
  --token-color-border-critical: #fbd4d4;
  --token-color-focus-action-internal: #0c56e9;
  --token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #c00005;
  --token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #0c0c0e;
  --token-color-foreground-primary: #3b3d45;
  --token-color-foreground-faint: #656a76;
  --token-color-foreground-high-contrast: #ffffff;
  --token-color-foreground-disabled: #8c909c;
  --token-color-foreground-action: #1060ff;
  --token-color-foreground-action-hover: #0c56e9;
  --token-color-foreground-action-active: #0046d1;
  --token-color-foreground-highlight: #a737ff;
  --token-color-foreground-highlight-on-surface: #911ced;
  --token-color-foreground-highlight-high-contrast: #42215b;
  --token-color-foreground-success: #008a22;
  --token-color-foreground-success-on-surface: #00781e;
  --token-color-foreground-success-high-contrast: #054220;
  --token-color-foreground-warning: #bb5a00;
  --token-color-foreground-warning-on-surface: #9e4b00;
  --token-color-foreground-warning-high-contrast: #542800;
  --token-color-foreground-critical: #e52228;
  --token-color-foreground-critical-on-surface: #c00005;
  --token-color-foreground-critical-high-contrast: #51130a;
  --token-color-page-primary: #ffffff;
  --token-color-page-faint: #ffffff;
  --token-color-surface-primary: #ffffff;
  --token-color-surface-faint: #fafafa;
  --token-color-surface-strong: #f1f2f3;
  --token-color-surface-interactive: #ffffff;
  --token-color-surface-interactive-hover: #f1f2f3;
  --token-color-surface-interactive-active: #dedfe3;
  --token-color-surface-interactive-disabled: #fafafa;
  --token-color-surface-action: #f2f8ff;
  --token-color-surface-highlight: #f9f2ff;
  --token-color-surface-success: #f2fbf6;
  --token-color-surface-warning: #fff9e8;
  --token-color-surface-critical: #fff5f5;
  --token-badge-count-padding-horizontal-small: 8px;
  --token-badge-count-padding-horizontal-medium: 12px;
  --token-badge-count-padding-horizontal-large: 14px;
  --token-badge-padding-horizontal-small: 6px;
  --token-badge-padding-horizontal-medium: 8px;
  --token-badge-padding-horizontal-large: 8px;
  --token-badge-gap-small: 4px;
  --token-badge-gap-medium: 4px;
  --token-badge-gap-large: 6px;
  --token-badge-typography-font-size-small: 0.8125rem;
  --token-badge-typography-font-size-medium: 0.8125rem;
  --token-badge-typography-font-size-large: 1rem;
  --token-badge-typography-line-height-large: 1.5; /** 24px = 1.5 */
  --token-badge-foreground-color-neutral-filled: #3b3d45;
  --token-badge-foreground-color-neutral-inverted: #ffffff; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
  --token-badge-foreground-color-neutral-outlined: #3b3d45;
  --token-badge-foreground-color-neutral-dark-mode-inverted: #3b3d45;
  --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff;
  --token-badge-foreground-color-highlight-filled: #7b00db; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-highlight-inverted: #ffffff;
  --token-badge-foreground-color-highlight-outlined: #3b3d45;
  --token-badge-foreground-color-success-filled: #006619; /** we don't use `success-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-success-inverted: #ffffff;
  --token-badge-foreground-color-success-outlined: #008a22;
  --token-badge-foreground-color-warning-filled: #803d00; /** we don't use `warning-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-warning-inverted: #ffffff;
  --token-badge-foreground-color-warning-outlined: #bb5a00;
  --token-badge-foreground-color-critical-filled: #940004; /** we don't use `critical-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-critical-inverted: #ffffff;
  --token-badge-foreground-color-critical-outlined: #e52228;
  --token-badge-surface-color-neutral-filled: #dedfe3;
  --token-badge-surface-color-neutral-dark-mode-inverted: #fafafa;
  --token-badge-surface-color-highlight-filled: #ead2fe; /** we don't use `surface-highlight` for accessibility (better contrast) */
  --token-badge-surface-color-highlight-inverted: #a737ff;
  --token-badge-surface-color-success-filled: #cceeda; /** we don't use `surface-success` for accessibility (better contrast) */
  --token-badge-surface-color-success-inverted: #008a22;
  --token-badge-surface-color-warning-filled: #fbeabf; /** we don't use `surface-warning` for accessibility (better contrast) */
  --token-badge-surface-color-warning-inverted: #bb5a00;
  --token-badge-surface-color-critical-filled: #fbd4d4; /** we don't use `surface-critical` for accessibility (better contrast) */
  --token-badge-surface-color-critical-inverted: #e52228;
  --token-badge-border-radius-small: 5px;
  --token-badge-border-radius-medium: 5px;
  --token-badge-border-radius-large: 5px;
  --token-button-height-small: 28px;
  --token-button-height-medium: 36px;
  --token-button-height-large: 48px;
  --token-button-padding-horizontal-small: 11px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-large: 19px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-medium: 9px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-large: 11px; /** here we're taking into account the 1px border */
  --token-button-gap: 6px;
  --token-button-typography-font-size-small: 0.8125rem;
  --token-button-typography-font-size-medium: 0.875rem;
  --token-button-typography-font-size-large: 1rem;
  --token-button-typography-line-height-small: 0.9286; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
  --token-button-typography-line-height-medium: 1.1429; /** 14px ~ 1.1429 */
  --token-button-typography-line-height-large: 1.5; /** 24px = 1.5 */
  --token-button-foreground-color-primary-default: #ffffff;
  --token-button-foreground-color-primary-hover: #ffffff;
  --token-button-foreground-color-primary-focus: #ffffff;
  --token-button-foreground-color-primary-active: #ffffff;
  --token-button-foreground-color-secondary-default: #3b3d45;
  --token-button-foreground-color-secondary-hover: #3b3d45;
  --token-button-foreground-color-secondary-focus: #3b3d45;
  --token-button-foreground-color-secondary-active: #3b3d45;
  --token-button-foreground-color-tertiary-default: #1060ff;
  --token-button-foreground-color-tertiary-hover: #1060ff;
  --token-button-foreground-color-tertiary-focus: #1060ff;
  --token-button-foreground-color-tertiary-active: #1060ff;
  --token-button-foreground-color-critical-default: #c00005;
  --token-button-foreground-color-critical-hover: #ffffff;
  --token-button-foreground-color-critical-focus: #c00005;
  --token-button-foreground-color-critical-active: #ffffff;
  --token-button-foreground-color-disabled: #8c909c;
  --token-button-surface-color-primary-default: #1060ff;
  --token-button-surface-color-primary-hover: #0c56e9;
  --token-button-surface-color-primary-focus: #1060ff;
  --token-button-surface-color-primary-active: #0046d1;
  --token-button-surface-color-secondary-default: #fafafa;
  --token-button-surface-color-secondary-hover: #ffffff;
  --token-button-surface-color-secondary-focus: #fafafa;
  --token-button-surface-color-secondary-active: #dedfe3;
  --token-button-surface-color-tertiary-hover: #ffffff;
  --token-button-surface-color-tertiary-focus: #ffffff;
  --token-button-surface-color-tertiary-active: #dedfe3;
  --token-button-surface-color-critical-default: #fff5f5;
  --token-button-surface-color-critical-hover: #c00005;
  --token-button-surface-color-critical-focus: #fff5f5;
  --token-button-surface-color-critical-active: #940004;
  --token-button-surface-color-disabled: #fafafa;
  --token-button-border-radius: 5px;
  --token-button-border-color-primary-default: #0c56e9;
  --token-button-border-color-primary-hover: #0c56e9;
  --token-button-border-color-primary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-primary-focus-external: #5990ff;
  --token-button-border-color-primary-active: #0046d1;
  --token-button-border-color-secondary-default: #3b3d4566;
  --token-button-border-color-secondary-hover: #3b3d4566;
  --token-button-border-color-secondary-focus-internal: #0c56e9; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-secondary-focus-external: #5990ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-secondary-active: #3b3d4566;
  --token-button-border-color-critical-default: #c00005;
  --token-button-border-color-critical-hover: #940004;
  --token-button-border-color-critical-focus-internal: #c00005; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-critical-focus-external: #dd7578; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-critical-active: #940004;
  --token-button-icon-size-small: 12px;
  --token-button-icon-size-medium: 16px;
  --token-button-icon-size-large: 24px;
  --token-typography-font-stack-display:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-font-stack-text:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 500;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 700;
  --token-typography-display-500-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-500-font-size: 1.875rem; /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.2666; /** 38px */
  --token-typography-display-500-letter-spacing: -0.5px; /** this is `tracking` */
  --token-typography-display-400-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-400-font-size: 1.5rem; /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.3333; /** 32px */
  --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-300-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-300-font-size: 1.125rem; /** 18px/1.125rem */
  --token-typography-display-300-line-height: 1.3333; /** 24px */
  --token-typography-display-300-letter-spacing: -0.5px; /** this is `tracking` */
  --token-typography-display-200-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /** 24px */
  --token-typography-display-200-letter-spacing: -0.5px; /** this is `tracking` */
  --token-typography-display-100-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-100-font-size: 0.8125rem; /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.3846; /** 18px */
  --token-typography-display-100-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-body-300-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-body-300-line-height: 1.4286; /** 24px */
  --token-typography-body-200-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-body-200-line-height: 1.4286; /** 20px */
  --token-typography-body-100-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-100-font-size: 0.8125rem; /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.3846; /** 18px */
  --token-typography-code-300-font-family:
    ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-code-300-line-height: 1.25; /** 20px */
  --token-typography-code-200-font-family:
    ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-code-200-line-height: 1.125; /** 18px */
  --token-typography-code-100-font-family:
    ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-100-font-size: 0.8125rem; /** 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.23; /** 16px */
}

@media (prefers-color-scheme: light) {
  .hds-theme-system {
    --token-color-palette-blue-500: #001141;
    --token-color-palette-blue-400: #002d9c;
    --token-color-palette-blue-300: #0043ce;
    --token-color-palette-blue-200: #0f62fe;
    --token-color-palette-blue-100: #d0e2ff;
    --token-color-palette-blue-50: #edf5ff;
    --token-color-palette-purple-500: #31135e;
    --token-color-palette-purple-400: #6929c4;
    --token-color-palette-purple-300: #8a3ffc;
    --token-color-palette-purple-200: #a56eff;
    --token-color-palette-purple-100: #e8daff;
    --token-color-palette-purple-50: #f6f2ff;
    --token-color-palette-green-500: #044317;
    --token-color-palette-green-400: #0e6027;
    --token-color-palette-green-300: #198038;
    --token-color-palette-green-200: #24a148;
    --token-color-palette-green-100: #a7f0ba;
    --token-color-palette-green-50: #defbe6;
    --token-color-palette-amber-500: #302400;
    --token-color-palette-amber-400: #483700;
    --token-color-palette-amber-300: #8e6a00;
    --token-color-palette-amber-200: #d2a106;
    --token-color-palette-amber-100: #fddc69;
    --token-color-palette-amber-50: #fcf4d6;
    --token-color-palette-red-500: #520408;
    --token-color-palette-red-400: #750e13;
    --token-color-palette-red-300: #a2191f;
    --token-color-palette-red-200: #da1e28;
    --token-color-palette-red-100: #ffd7d9;
    --token-color-palette-red-50: #fff1f1;
    --token-color-palette-neutral-700: #161616;
    --token-color-palette-neutral-600: #393939;
    --token-color-palette-neutral-500: #525252;
    --token-color-palette-neutral-400: #8d8d8d;
    --token-color-palette-neutral-300: #a8a8a8;
    --token-color-palette-neutral-200: #c6c6c6;
    --token-color-palette-neutral-100: #e0e0e0;
    --token-color-palette-neutral-50: #f4f4f4;
    --token-color-palette-neutral-0: #ffffff;
    --token-color-border-primary: #c6c6c6;
    --token-color-border-faint: #e0e0e0;
    --token-color-border-strong: #8d8d8d;
    --token-color-border-action: #0f62fe;
    --token-color-border-highlight: #be95ff;
    --token-color-border-success: #42be65;
    --token-color-border-warning: #ff832b;
    --token-color-border-critical: #ff8389;
    --token-color-focus-action-internal: #ffffff;
    --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
    --token-color-focus-critical-internal: #ffffff;
    --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
    --token-color-foreground-strong: #161616;
    --token-color-foreground-primary: #161616;
    --token-color-foreground-faint: #161616;
    --token-color-foreground-high-contrast: #ffffff;
    --token-color-foreground-disabled: rgba(22, 22, 22, 0.25);
    --token-color-foreground-action: #0f62fe;
    --token-color-foreground-action-hover: #0043ce;
    --token-color-foreground-action-active: #0043ce;
    --token-color-foreground-highlight: #8a3ffc;
    --token-color-foreground-highlight-on-surface: #6929c4;
    --token-color-foreground-highlight-high-contrast: #491d8b;
    --token-color-foreground-success: #198038;
    --token-color-foreground-success-on-surface: #0e6027;
    --token-color-foreground-success-high-contrast: #044317;
    --token-color-foreground-warning: #ba4e00;
    --token-color-foreground-warning-on-surface: #8a3800;
    --token-color-foreground-warning-high-contrast: #5e2900;
    --token-color-foreground-critical: #da1e28;
    --token-color-foreground-critical-on-surface: #a2191f;
    --token-color-foreground-critical-high-contrast: #750e13;
    --token-color-page-primary: #ffffff;
    --token-color-page-faint: #ffffff;
    --token-color-surface-primary: #f4f4f4;
    --token-color-surface-faint: #f4f4f4;
    --token-color-surface-strong: #f4f4f4;
    --token-color-surface-interactive: #f4f4f4;
    --token-color-surface-interactive-hover: #e8e8e8;
    --token-color-surface-interactive-active: #c6c6c6;
    --token-color-surface-interactive-disabled: #c6c6c6;
    --token-color-surface-action: #d0e2ff;
    --token-color-surface-highlight: #e8daff;
    --token-color-surface-success: #a7f0ba;
    --token-color-surface-warning: #ffd9be;
    --token-color-surface-critical: #ffd7d9;
    --token-badge-count-padding-horizontal-small: 8px;
    --token-badge-count-padding-horizontal-medium: 8px;
    --token-badge-count-padding-horizontal-large: 12px;
    --token-badge-padding-horizontal-small: 8px;
    --token-badge-padding-horizontal-medium: 8px;
    --token-badge-padding-horizontal-large: 12px;
    --token-badge-gap-small: 4px;
    --token-badge-gap-medium: 4px;
    --token-badge-gap-large: 4px;
    --token-badge-typography-font-size-small: 0.75rem;
    --token-badge-typography-font-size-medium: 0.75rem;
    --token-badge-typography-font-size-large: 0.75rem;
    --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
    --token-badge-foreground-color-neutral-filled: #161616;
    --token-badge-foreground-color-neutral-inverted: #ffffff; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
    --token-badge-foreground-color-neutral-outlined: #161616;
    --token-badge-foreground-color-neutral-dark-mode-inverted: #161616;
    --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff;
    --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-highlight-inverted: #ffffff;
    --token-badge-foreground-color-highlight-outlined: #6929c4;
    --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-success-inverted: #ffffff;
    --token-badge-foreground-color-success-outlined: #0e6027;
    --token-badge-foreground-color-warning-filled: #684e00; /** we don't use `warning-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-warning-inverted: #ffffff;
    --token-badge-foreground-color-warning-outlined: #684e00;
    --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-critical-inverted: #ffffff;
    --token-badge-foreground-color-critical-outlined: #a2191f;
    --token-badge-surface-color-neutral-filled: #e0e0e0;
    --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0;
    --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */
    --token-badge-surface-color-highlight-inverted: #6929c4;
    --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */
    --token-badge-surface-color-success-inverted: #0e6027;
    --token-badge-surface-color-warning-filled: #fddc69; /** we don't use `surface-warning` for accessibility (better contrast) */
    --token-badge-surface-color-warning-inverted: #684e00;
    --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */
    --token-badge-surface-color-critical-inverted: #a2191f;
    --token-badge-border-radius-small: 8px;
    --token-badge-border-radius-medium: 12px;
    --token-badge-border-radius-large: 16px;
    --token-button-height-small: 32px;
    --token-button-height-medium: 40px;
    --token-button-height-large: 48px;
    --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
    --token-button-gap: 32px;
    --token-button-typography-font-size-small: 0.875rem;
    --token-button-typography-font-size-medium: 0.875rem;
    --token-button-typography-font-size-large: 0.875rem;
    --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
    --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
    --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
    --token-button-foreground-color-primary-default: #ffffff;
    --token-button-foreground-color-primary-hover: #ffffff;
    --token-button-foreground-color-primary-focus: #ffffff;
    --token-button-foreground-color-primary-active: #ffffff;
    --token-button-foreground-color-secondary-default: #ffffff;
    --token-button-foreground-color-secondary-hover: #ffffff;
    --token-button-foreground-color-secondary-focus: #ffffff;
    --token-button-foreground-color-secondary-active: #ffffff;
    --token-button-foreground-color-tertiary-default: #0f62fe;
    --token-button-foreground-color-tertiary-hover: #ffffff;
    --token-button-foreground-color-tertiary-focus: #ffffff;
    --token-button-foreground-color-tertiary-active: #ffffff;
    --token-button-foreground-color-critical-default: #ffffff;
    --token-button-foreground-color-critical-hover: #ffffff;
    --token-button-foreground-color-critical-focus: #ffffff;
    --token-button-foreground-color-critical-active: #ffffff;
    --token-button-foreground-color-disabled: #8d8d8d;
    --token-button-surface-color-primary-default: #0f62fe;
    --token-button-surface-color-primary-hover: #0050e6;
    --token-button-surface-color-primary-focus: #0f62fe;
    --token-button-surface-color-primary-active: #002d9c;
    --token-button-surface-color-secondary-default: #393939;
    --token-button-surface-color-secondary-hover: #474747;
    --token-button-surface-color-secondary-focus: #393939;
    --token-button-surface-color-secondary-active: #6f6f6f;
    --token-button-surface-color-tertiary-hover: #0050e6;
    --token-button-surface-color-tertiary-focus: #0050e6;
    --token-button-surface-color-tertiary-active: #002d9c;
    --token-button-surface-color-critical-default: #da1e28;
    --token-button-surface-color-critical-hover: #b81921;
    --token-button-surface-color-critical-focus: #da1e28;
    --token-button-surface-color-critical-active: #750e13;
    --token-button-surface-color-disabled: #c6c6c6;
    --token-button-border-radius: 0px;
    --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
    --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-primary-focus-external: #ff00ff;
    --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
    --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
    --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
    --token-button-icon-size-small: 16px;
    --token-button-icon-size-medium: 16px;
    --token-button-icon-size-large: 16px;
    --token-typography-font-stack-display:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-font-stack-text:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-font-stack-code:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-font-weight-regular: 400;
    --token-typography-font-weight-medium: 400;
    --token-typography-font-weight-semibold: 600;
    --token-typography-font-weight-bold: 600;
    --token-typography-display-500-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
    --token-typography-display-500-line-height: 1.25; /** 38px */
    --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-400-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
    --token-typography-display-400-line-height: 1.28572; /** 32px */
    --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-300-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
    --token-typography-display-300-line-height: 1.4; /** 24px */
    --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-200-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
    --token-typography-display-200-line-height: 1.5; /** 24px */
    --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-100-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-display-100-line-height: 1.42857; /** 18px */
    --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
    --token-typography-body-300-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
    --token-typography-body-300-line-height: 1.5; /** 24px */
    --token-typography-body-200-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
    --token-typography-body-200-line-height: 1.42857; /** 20px */
    --token-typography-body-100-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-body-100-line-height: 1.28572; /** 18px */
    --token-typography-code-300-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
    --token-typography-code-300-line-height: 1.42857; /** 20px */
    --token-typography-code-200-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
    --token-typography-code-200-line-height: 1.42857; /** 18px */
    --token-typography-code-100-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-code-100-line-height: 1.33333; /** 16px */
  }
}

@media (prefers-color-scheme: dark) {
  .hds-theme-system {
    --token-color-palette-blue-500: #001141;
    --token-color-palette-blue-400: #002d9c;
    --token-color-palette-blue-300: #0043ce;
    --token-color-palette-blue-200: #0f62fe;
    --token-color-palette-blue-100: #d0e2ff;
    --token-color-palette-blue-50: #edf5ff;
    --token-color-palette-purple-500: #31135e;
    --token-color-palette-purple-400: #6929c4;
    --token-color-palette-purple-300: #8a3ffc;
    --token-color-palette-purple-200: #a56eff;
    --token-color-palette-purple-100: #e8daff;
    --token-color-palette-purple-50: #f6f2ff;
    --token-color-palette-green-500: #044317;
    --token-color-palette-green-400: #0e6027;
    --token-color-palette-green-300: #198038;
    --token-color-palette-green-200: #24a148;
    --token-color-palette-green-100: #a7f0ba;
    --token-color-palette-green-50: #defbe6;
    --token-color-palette-amber-500: #302400;
    --token-color-palette-amber-400: #483700;
    --token-color-palette-amber-300: #8e6a00;
    --token-color-palette-amber-200: #d2a106;
    --token-color-palette-amber-100: #fddc69;
    --token-color-palette-amber-50: #fcf4d6;
    --token-color-palette-red-500: #520408;
    --token-color-palette-red-400: #750e13;
    --token-color-palette-red-300: #a2191f;
    --token-color-palette-red-200: #da1e28;
    --token-color-palette-red-100: #ffd7d9;
    --token-color-palette-red-50: #fff1f1;
    --token-color-palette-neutral-700: #161616;
    --token-color-palette-neutral-600: #393939;
    --token-color-palette-neutral-500: #525252;
    --token-color-palette-neutral-400: #8d8d8d;
    --token-color-palette-neutral-300: #a8a8a8;
    --token-color-palette-neutral-200: #c6c6c6;
    --token-color-palette-neutral-100: #e0e0e0;
    --token-color-palette-neutral-50: #f4f4f4;
    --token-color-palette-neutral-0: #ffffff;
    --token-color-border-primary: #6f6f6f;
    --token-color-border-faint: #393939;
    --token-color-border-strong: #6f6f6f;
    --token-color-border-action: #4589ff;
    --token-color-border-highlight: #a56eff;
    --token-color-border-success: #24a148;
    --token-color-border-warning: #eb6200;
    --token-color-border-critical: #fa4d56;
    --token-color-focus-action-internal: #161616;
    --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
    --token-color-focus-critical-internal: #161616;
    --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
    --token-color-foreground-strong: #f4f4f4;
    --token-color-foreground-primary: #f4f4f4;
    --token-color-foreground-faint: #f4f4f4;
    --token-color-foreground-high-contrast: #161616;
    --token-color-foreground-disabled: rgba(244, 244, 244, 0.25);
    --token-color-foreground-action: #78a9ff;
    --token-color-foreground-action-hover: #a6c8ff;
    --token-color-foreground-action-active: #a6c8ff;
    --token-color-foreground-highlight: #be95ff;
    --token-color-foreground-highlight-on-surface: #d4bbff;
    --token-color-foreground-highlight-high-contrast: #d4bbff;
    --token-color-foreground-success: #42be65;
    --token-color-foreground-success-on-surface: #6fdc8c;
    --token-color-foreground-success-high-contrast: #a7f0ba;
    --token-color-foreground-warning: #ff832b;
    --token-color-foreground-warning-on-surface: #ffb784;
    --token-color-foreground-warning-high-contrast: #ffd9be;
    --token-color-foreground-critical: #ff8389;
    --token-color-foreground-critical-on-surface: #ffb3b8;
    --token-color-foreground-critical-high-contrast: #ffd7d9;
    --token-color-page-primary: #161616;
    --token-color-page-faint: #161616;
    --token-color-surface-primary: #262626;
    --token-color-surface-faint: #262626;
    --token-color-surface-strong: #262626;
    --token-color-surface-interactive: #262626;
    --token-color-surface-interactive-hover: #333333;
    --token-color-surface-interactive-active: #525252;
    --token-color-surface-interactive-disabled: #525252;
    --token-color-surface-action: #0043ce;
    --token-color-surface-highlight: #6929c4;
    --token-color-surface-success: #0e6027;
    --token-color-surface-warning: #8a3800;
    --token-color-surface-critical: #a2191f;
    --token-badge-count-padding-horizontal-small: 8px;
    --token-badge-count-padding-horizontal-medium: 8px;
    --token-badge-count-padding-horizontal-large: 12px;
    --token-badge-padding-horizontal-small: 8px;
    --token-badge-padding-horizontal-medium: 8px;
    --token-badge-padding-horizontal-large: 12px;
    --token-badge-gap-small: 4px;
    --token-badge-gap-medium: 4px;
    --token-badge-gap-large: 4px;
    --token-badge-typography-font-size-small: 0.75rem;
    --token-badge-typography-font-size-medium: 0.75rem;
    --token-badge-typography-font-size-large: 0.75rem;
    --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
    --token-badge-foreground-color-neutral-filled: #f4f4f4;
    --token-badge-foreground-color-neutral-inverted: #161616; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
    --token-badge-foreground-color-neutral-outlined: #f4f4f4;
    --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4;
    --token-badge-foreground-color-neutral-dark-mode-outlined: #161616;
    --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-highlight-inverted: #161616;
    --token-badge-foreground-color-highlight-outlined: #e8daff;
    --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-success-inverted: #161616;
    --token-badge-foreground-color-success-outlined: #a7f0ba;
    --token-badge-foreground-color-warning-filled: #fddc69; /** we don't use `warning-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-warning-inverted: #161616;
    --token-badge-foreground-color-warning-outlined: #fddc69;
    --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */
    --token-badge-foreground-color-critical-inverted: #161616;
    --token-badge-foreground-color-critical-outlined: #ffd7d9;
    --token-badge-surface-color-neutral-filled: #525252;
    --token-badge-surface-color-neutral-dark-mode-inverted: #525252;
    --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */
    --token-badge-surface-color-highlight-inverted: #be95ff;
    --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */
    --token-badge-surface-color-success-inverted: #42be65;
    --token-badge-surface-color-warning-filled: #684e00; /** we don't use `surface-warning` for accessibility (better contrast) */
    --token-badge-surface-color-warning-inverted: #d2a106;
    --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */
    --token-badge-surface-color-critical-inverted: #ff8389;
    --token-badge-border-radius-small: 8px;
    --token-badge-border-radius-medium: 12px;
    --token-badge-border-radius-large: 16px;
    --token-button-height-small: 32px;
    --token-button-height-medium: 40px;
    --token-button-height-large: 48px;
    --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
    --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
    --token-button-gap: 32px;
    --token-button-typography-font-size-small: 0.875rem;
    --token-button-typography-font-size-medium: 0.875rem;
    --token-button-typography-font-size-large: 0.875rem;
    --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
    --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
    --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
    --token-button-foreground-color-primary-default: #ffffff;
    --token-button-foreground-color-primary-hover: #ffffff;
    --token-button-foreground-color-primary-focus: #ffffff;
    --token-button-foreground-color-primary-active: #ffffff;
    --token-button-foreground-color-secondary-default: #ffffff;
    --token-button-foreground-color-secondary-hover: #ffffff;
    --token-button-foreground-color-secondary-focus: #ffffff;
    --token-button-foreground-color-secondary-active: #ffffff;
    --token-button-foreground-color-tertiary-default: #ffffff;
    --token-button-foreground-color-tertiary-hover: #161616;
    --token-button-foreground-color-tertiary-focus: #161616;
    --token-button-foreground-color-tertiary-active: #161616;
    --token-button-foreground-color-critical-default: #ffffff;
    --token-button-foreground-color-critical-hover: #ffffff;
    --token-button-foreground-color-critical-focus: #ffffff;
    --token-button-foreground-color-critical-active: #ffffff;
    --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25);
    --token-button-surface-color-primary-default: #0f62fe;
    --token-button-surface-color-primary-hover: #0050e6;
    --token-button-surface-color-primary-focus: #0f62fe;
    --token-button-surface-color-primary-active: #002d9c;
    --token-button-surface-color-secondary-default: #6f6f6f;
    --token-button-surface-color-secondary-hover: #5e5e5e;
    --token-button-surface-color-secondary-focus: #6f6f6f;
    --token-button-surface-color-secondary-active: #393939;
    --token-button-surface-color-tertiary-hover: #f4f4f4;
    --token-button-surface-color-tertiary-focus: #f4f4f4;
    --token-button-surface-color-tertiary-active: #c6c6c6;
    --token-button-surface-color-critical-default: #da1e28;
    --token-button-surface-color-critical-hover: #b81921;
    --token-button-surface-color-critical-focus: #da1e28;
    --token-button-surface-color-critical-active: #750e13;
    --token-button-surface-color-disabled: #8d8d8d;
    --token-button-border-radius: 0px;
    --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
    --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-primary-focus-external: #ff00ff;
    --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
    --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
    --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
    --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
    --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
    --token-button-icon-size-small: 16px;
    --token-button-icon-size-medium: 16px;
    --token-button-icon-size-large: 16px;
    --token-typography-font-stack-display:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-font-stack-text:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-font-stack-code:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-font-weight-regular: 400;
    --token-typography-font-weight-medium: 400;
    --token-typography-font-weight-semibold: 600;
    --token-typography-font-weight-bold: 600;
    --token-typography-display-500-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
    --token-typography-display-500-line-height: 1.25; /** 38px */
    --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-400-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
    --token-typography-display-400-line-height: 1.28572; /** 32px */
    --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-300-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
    --token-typography-display-300-line-height: 1.4; /** 24px */
    --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-200-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
    --token-typography-display-200-line-height: 1.5; /** 24px */
    --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
    --token-typography-display-100-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-display-100-line-height: 1.42857; /** 18px */
    --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
    --token-typography-body-300-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
    --token-typography-body-300-line-height: 1.5; /** 24px */
    --token-typography-body-200-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
    --token-typography-body-200-line-height: 1.42857; /** 20px */
    --token-typography-body-100-font-family:
      "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
      ".SFNSText-Regular", sans-serif;
    --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-body-100-line-height: 1.28572; /** 18px */
    --token-typography-code-300-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
    --token-typography-code-300-line-height: 1.42857; /** 20px */
    --token-typography-code-200-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
    --token-typography-code-200-line-height: 1.42857; /** 18px */
    --token-typography-code-100-font-family:
      "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
      Courier, monospace;
    --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
    --token-typography-code-100-line-height: 1.33333; /** 16px */
  }
}

.hds-theme-light,
.hds-mode-cds-g0 {
  --token-color-palette-blue-500: #001141;
  --token-color-palette-blue-400: #002d9c;
  --token-color-palette-blue-300: #0043ce;
  --token-color-palette-blue-200: #0f62fe;
  --token-color-palette-blue-100: #d0e2ff;
  --token-color-palette-blue-50: #edf5ff;
  --token-color-palette-purple-500: #31135e;
  --token-color-palette-purple-400: #6929c4;
  --token-color-palette-purple-300: #8a3ffc;
  --token-color-palette-purple-200: #a56eff;
  --token-color-palette-purple-100: #e8daff;
  --token-color-palette-purple-50: #f6f2ff;
  --token-color-palette-green-500: #044317;
  --token-color-palette-green-400: #0e6027;
  --token-color-palette-green-300: #198038;
  --token-color-palette-green-200: #24a148;
  --token-color-palette-green-100: #a7f0ba;
  --token-color-palette-green-50: #defbe6;
  --token-color-palette-amber-500: #302400;
  --token-color-palette-amber-400: #483700;
  --token-color-palette-amber-300: #8e6a00;
  --token-color-palette-amber-200: #d2a106;
  --token-color-palette-amber-100: #fddc69;
  --token-color-palette-amber-50: #fcf4d6;
  --token-color-palette-red-500: #520408;
  --token-color-palette-red-400: #750e13;
  --token-color-palette-red-300: #a2191f;
  --token-color-palette-red-200: #da1e28;
  --token-color-palette-red-100: #ffd7d9;
  --token-color-palette-red-50: #fff1f1;
  --token-color-palette-neutral-700: #161616;
  --token-color-palette-neutral-600: #393939;
  --token-color-palette-neutral-500: #525252;
  --token-color-palette-neutral-400: #8d8d8d;
  --token-color-palette-neutral-300: #a8a8a8;
  --token-color-palette-neutral-200: #c6c6c6;
  --token-color-palette-neutral-100: #e0e0e0;
  --token-color-palette-neutral-50: #f4f4f4;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-border-primary: #c6c6c6;
  --token-color-border-faint: #e0e0e0;
  --token-color-border-strong: #8d8d8d;
  --token-color-border-action: #0f62fe;
  --token-color-border-highlight: #be95ff;
  --token-color-border-success: #42be65;
  --token-color-border-warning: #ff832b;
  --token-color-border-critical: #ff8389;
  --token-color-focus-action-internal: #ffffff;
  --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #ffffff;
  --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #161616;
  --token-color-foreground-primary: #161616;
  --token-color-foreground-faint: #161616;
  --token-color-foreground-high-contrast: #ffffff;
  --token-color-foreground-disabled: rgba(22, 22, 22, 0.25);
  --token-color-foreground-action: #0f62fe;
  --token-color-foreground-action-hover: #0043ce;
  --token-color-foreground-action-active: #0043ce;
  --token-color-foreground-highlight: #8a3ffc;
  --token-color-foreground-highlight-on-surface: #6929c4;
  --token-color-foreground-highlight-high-contrast: #491d8b;
  --token-color-foreground-success: #198038;
  --token-color-foreground-success-on-surface: #0e6027;
  --token-color-foreground-success-high-contrast: #044317;
  --token-color-foreground-warning: #ba4e00;
  --token-color-foreground-warning-on-surface: #8a3800;
  --token-color-foreground-warning-high-contrast: #5e2900;
  --token-color-foreground-critical: #da1e28;
  --token-color-foreground-critical-on-surface: #a2191f;
  --token-color-foreground-critical-high-contrast: #750e13;
  --token-color-page-primary: #ffffff;
  --token-color-page-faint: #ffffff;
  --token-color-surface-primary: #f4f4f4;
  --token-color-surface-faint: #f4f4f4;
  --token-color-surface-strong: #f4f4f4;
  --token-color-surface-interactive: #f4f4f4;
  --token-color-surface-interactive-hover: #e8e8e8;
  --token-color-surface-interactive-active: #c6c6c6;
  --token-color-surface-interactive-disabled: #c6c6c6;
  --token-color-surface-action: #d0e2ff;
  --token-color-surface-highlight: #e8daff;
  --token-color-surface-success: #a7f0ba;
  --token-color-surface-warning: #ffd9be;
  --token-color-surface-critical: #ffd7d9;
  --token-badge-count-padding-horizontal-small: 8px;
  --token-badge-count-padding-horizontal-medium: 8px;
  --token-badge-count-padding-horizontal-large: 12px;
  --token-badge-padding-horizontal-small: 8px;
  --token-badge-padding-horizontal-medium: 8px;
  --token-badge-padding-horizontal-large: 12px;
  --token-badge-gap-small: 4px;
  --token-badge-gap-medium: 4px;
  --token-badge-gap-large: 4px;
  --token-badge-typography-font-size-small: 0.75rem;
  --token-badge-typography-font-size-medium: 0.75rem;
  --token-badge-typography-font-size-large: 0.75rem;
  --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
  --token-badge-foreground-color-neutral-filled: #161616;
  --token-badge-foreground-color-neutral-inverted: #ffffff; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
  --token-badge-foreground-color-neutral-outlined: #161616;
  --token-badge-foreground-color-neutral-dark-mode-inverted: #161616;
  --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff;
  --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-highlight-inverted: #ffffff;
  --token-badge-foreground-color-highlight-outlined: #6929c4;
  --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-success-inverted: #ffffff;
  --token-badge-foreground-color-success-outlined: #0e6027;
  --token-badge-foreground-color-warning-filled: #684e00; /** we don't use `warning-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-warning-inverted: #ffffff;
  --token-badge-foreground-color-warning-outlined: #684e00;
  --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-critical-inverted: #ffffff;
  --token-badge-foreground-color-critical-outlined: #a2191f;
  --token-badge-surface-color-neutral-filled: #e0e0e0;
  --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0;
  --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */
  --token-badge-surface-color-highlight-inverted: #6929c4;
  --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */
  --token-badge-surface-color-success-inverted: #0e6027;
  --token-badge-surface-color-warning-filled: #fddc69; /** we don't use `surface-warning` for accessibility (better contrast) */
  --token-badge-surface-color-warning-inverted: #684e00;
  --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */
  --token-badge-surface-color-critical-inverted: #a2191f;
  --token-badge-border-radius-small: 8px;
  --token-badge-border-radius-medium: 12px;
  --token-badge-border-radius-large: 16px;
  --token-button-height-small: 32px;
  --token-button-height-medium: 40px;
  --token-button-height-large: 48px;
  --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
  --token-button-gap: 32px;
  --token-button-typography-font-size-small: 0.875rem;
  --token-button-typography-font-size-medium: 0.875rem;
  --token-button-typography-font-size-large: 0.875rem;
  --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
  --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
  --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
  --token-button-foreground-color-primary-default: #ffffff;
  --token-button-foreground-color-primary-hover: #ffffff;
  --token-button-foreground-color-primary-focus: #ffffff;
  --token-button-foreground-color-primary-active: #ffffff;
  --token-button-foreground-color-secondary-default: #ffffff;
  --token-button-foreground-color-secondary-hover: #ffffff;
  --token-button-foreground-color-secondary-focus: #ffffff;
  --token-button-foreground-color-secondary-active: #ffffff;
  --token-button-foreground-color-tertiary-default: #0f62fe;
  --token-button-foreground-color-tertiary-hover: #ffffff;
  --token-button-foreground-color-tertiary-focus: #ffffff;
  --token-button-foreground-color-tertiary-active: #ffffff;
  --token-button-foreground-color-critical-default: #ffffff;
  --token-button-foreground-color-critical-hover: #ffffff;
  --token-button-foreground-color-critical-focus: #ffffff;
  --token-button-foreground-color-critical-active: #ffffff;
  --token-button-foreground-color-disabled: #8d8d8d;
  --token-button-surface-color-primary-default: #0f62fe;
  --token-button-surface-color-primary-hover: #0050e6;
  --token-button-surface-color-primary-focus: #0f62fe;
  --token-button-surface-color-primary-active: #002d9c;
  --token-button-surface-color-secondary-default: #393939;
  --token-button-surface-color-secondary-hover: #474747;
  --token-button-surface-color-secondary-focus: #393939;
  --token-button-surface-color-secondary-active: #6f6f6f;
  --token-button-surface-color-tertiary-hover: #0050e6;
  --token-button-surface-color-tertiary-focus: #0050e6;
  --token-button-surface-color-tertiary-active: #002d9c;
  --token-button-surface-color-critical-default: #da1e28;
  --token-button-surface-color-critical-hover: #b81921;
  --token-button-surface-color-critical-focus: #da1e28;
  --token-button-surface-color-critical-active: #750e13;
  --token-button-surface-color-disabled: #c6c6c6;
  --token-button-border-radius: 0px;
  --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-primary-focus-external: #ff00ff;
  --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
  --token-button-icon-size-small: 16px;
  --token-button-icon-size-medium: 16px;
  --token-button-icon-size-large: 16px;
  --token-typography-font-stack-display:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-text:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-code:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  --token-typography-display-500-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.25; /** 38px */
  --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-400-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.28572; /** 32px */
  --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
  --token-typography-display-300-line-height: 1.4; /** 24px */
  --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /** 24px */
  --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.42857; /** 18px */
  --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
  --token-typography-body-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-body-300-line-height: 1.5; /** 24px */
  --token-typography-body-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-body-200-line-height: 1.42857; /** 20px */
  --token-typography-body-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.28572; /** 18px */
  --token-typography-code-300-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
  --token-typography-code-300-line-height: 1.42857; /** 20px */
  --token-typography-code-200-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-code-200-line-height: 1.42857; /** 18px */
  --token-typography-code-100-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.33333; /** 16px */
}

.hds-theme-dark,
.hds-mode-cds-g100 {
  --token-color-palette-blue-500: #001141;
  --token-color-palette-blue-400: #002d9c;
  --token-color-palette-blue-300: #0043ce;
  --token-color-palette-blue-200: #0f62fe;
  --token-color-palette-blue-100: #d0e2ff;
  --token-color-palette-blue-50: #edf5ff;
  --token-color-palette-purple-500: #31135e;
  --token-color-palette-purple-400: #6929c4;
  --token-color-palette-purple-300: #8a3ffc;
  --token-color-palette-purple-200: #a56eff;
  --token-color-palette-purple-100: #e8daff;
  --token-color-palette-purple-50: #f6f2ff;
  --token-color-palette-green-500: #044317;
  --token-color-palette-green-400: #0e6027;
  --token-color-palette-green-300: #198038;
  --token-color-palette-green-200: #24a148;
  --token-color-palette-green-100: #a7f0ba;
  --token-color-palette-green-50: #defbe6;
  --token-color-palette-amber-500: #302400;
  --token-color-palette-amber-400: #483700;
  --token-color-palette-amber-300: #8e6a00;
  --token-color-palette-amber-200: #d2a106;
  --token-color-palette-amber-100: #fddc69;
  --token-color-palette-amber-50: #fcf4d6;
  --token-color-palette-red-500: #520408;
  --token-color-palette-red-400: #750e13;
  --token-color-palette-red-300: #a2191f;
  --token-color-palette-red-200: #da1e28;
  --token-color-palette-red-100: #ffd7d9;
  --token-color-palette-red-50: #fff1f1;
  --token-color-palette-neutral-700: #161616;
  --token-color-palette-neutral-600: #393939;
  --token-color-palette-neutral-500: #525252;
  --token-color-palette-neutral-400: #8d8d8d;
  --token-color-palette-neutral-300: #a8a8a8;
  --token-color-palette-neutral-200: #c6c6c6;
  --token-color-palette-neutral-100: #e0e0e0;
  --token-color-palette-neutral-50: #f4f4f4;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-border-primary: #6f6f6f;
  --token-color-border-faint: #393939;
  --token-color-border-strong: #6f6f6f;
  --token-color-border-action: #4589ff;
  --token-color-border-highlight: #a56eff;
  --token-color-border-success: #24a148;
  --token-color-border-warning: #eb6200;
  --token-color-border-critical: #fa4d56;
  --token-color-focus-action-internal: #161616;
  --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #161616;
  --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #f4f4f4;
  --token-color-foreground-primary: #f4f4f4;
  --token-color-foreground-faint: #f4f4f4;
  --token-color-foreground-high-contrast: #161616;
  --token-color-foreground-disabled: rgba(244, 244, 244, 0.25);
  --token-color-foreground-action: #78a9ff;
  --token-color-foreground-action-hover: #a6c8ff;
  --token-color-foreground-action-active: #a6c8ff;
  --token-color-foreground-highlight: #be95ff;
  --token-color-foreground-highlight-on-surface: #d4bbff;
  --token-color-foreground-highlight-high-contrast: #d4bbff;
  --token-color-foreground-success: #42be65;
  --token-color-foreground-success-on-surface: #6fdc8c;
  --token-color-foreground-success-high-contrast: #a7f0ba;
  --token-color-foreground-warning: #ff832b;
  --token-color-foreground-warning-on-surface: #ffb784;
  --token-color-foreground-warning-high-contrast: #ffd9be;
  --token-color-foreground-critical: #ff8389;
  --token-color-foreground-critical-on-surface: #ffb3b8;
  --token-color-foreground-critical-high-contrast: #ffd7d9;
  --token-color-page-primary: #161616;
  --token-color-page-faint: #161616;
  --token-color-surface-primary: #262626;
  --token-color-surface-faint: #262626;
  --token-color-surface-strong: #262626;
  --token-color-surface-interactive: #262626;
  --token-color-surface-interactive-hover: #333333;
  --token-color-surface-interactive-active: #525252;
  --token-color-surface-interactive-disabled: #525252;
  --token-color-surface-action: #0043ce;
  --token-color-surface-highlight: #6929c4;
  --token-color-surface-success: #0e6027;
  --token-color-surface-warning: #8a3800;
  --token-color-surface-critical: #a2191f;
  --token-badge-count-padding-horizontal-small: 8px;
  --token-badge-count-padding-horizontal-medium: 8px;
  --token-badge-count-padding-horizontal-large: 12px;
  --token-badge-padding-horizontal-small: 8px;
  --token-badge-padding-horizontal-medium: 8px;
  --token-badge-padding-horizontal-large: 12px;
  --token-badge-gap-small: 4px;
  --token-badge-gap-medium: 4px;
  --token-badge-gap-large: 4px;
  --token-badge-typography-font-size-small: 0.75rem;
  --token-badge-typography-font-size-medium: 0.75rem;
  --token-badge-typography-font-size-large: 0.75rem;
  --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
  --token-badge-foreground-color-neutral-filled: #f4f4f4;
  --token-badge-foreground-color-neutral-inverted: #161616; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
  --token-badge-foreground-color-neutral-outlined: #f4f4f4;
  --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4;
  --token-badge-foreground-color-neutral-dark-mode-outlined: #161616;
  --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-highlight-inverted: #161616;
  --token-badge-foreground-color-highlight-outlined: #e8daff;
  --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-success-inverted: #161616;
  --token-badge-foreground-color-success-outlined: #a7f0ba;
  --token-badge-foreground-color-warning-filled: #fddc69; /** we don't use `warning-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-warning-inverted: #161616;
  --token-badge-foreground-color-warning-outlined: #fddc69;
  --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-critical-inverted: #161616;
  --token-badge-foreground-color-critical-outlined: #ffd7d9;
  --token-badge-surface-color-neutral-filled: #525252;
  --token-badge-surface-color-neutral-dark-mode-inverted: #525252;
  --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */
  --token-badge-surface-color-highlight-inverted: #be95ff;
  --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */
  --token-badge-surface-color-success-inverted: #42be65;
  --token-badge-surface-color-warning-filled: #684e00; /** we don't use `surface-warning` for accessibility (better contrast) */
  --token-badge-surface-color-warning-inverted: #d2a106;
  --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */
  --token-badge-surface-color-critical-inverted: #ff8389;
  --token-badge-border-radius-small: 8px;
  --token-badge-border-radius-medium: 12px;
  --token-badge-border-radius-large: 16px;
  --token-button-height-small: 32px;
  --token-button-height-medium: 40px;
  --token-button-height-large: 48px;
  --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
  --token-button-gap: 32px;
  --token-button-typography-font-size-small: 0.875rem;
  --token-button-typography-font-size-medium: 0.875rem;
  --token-button-typography-font-size-large: 0.875rem;
  --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
  --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
  --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
  --token-button-foreground-color-primary-default: #ffffff;
  --token-button-foreground-color-primary-hover: #ffffff;
  --token-button-foreground-color-primary-focus: #ffffff;
  --token-button-foreground-color-primary-active: #ffffff;
  --token-button-foreground-color-secondary-default: #ffffff;
  --token-button-foreground-color-secondary-hover: #ffffff;
  --token-button-foreground-color-secondary-focus: #ffffff;
  --token-button-foreground-color-secondary-active: #ffffff;
  --token-button-foreground-color-tertiary-default: #ffffff;
  --token-button-foreground-color-tertiary-hover: #161616;
  --token-button-foreground-color-tertiary-focus: #161616;
  --token-button-foreground-color-tertiary-active: #161616;
  --token-button-foreground-color-critical-default: #ffffff;
  --token-button-foreground-color-critical-hover: #ffffff;
  --token-button-foreground-color-critical-focus: #ffffff;
  --token-button-foreground-color-critical-active: #ffffff;
  --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25);
  --token-button-surface-color-primary-default: #0f62fe;
  --token-button-surface-color-primary-hover: #0050e6;
  --token-button-surface-color-primary-focus: #0f62fe;
  --token-button-surface-color-primary-active: #002d9c;
  --token-button-surface-color-secondary-default: #6f6f6f;
  --token-button-surface-color-secondary-hover: #5e5e5e;
  --token-button-surface-color-secondary-focus: #6f6f6f;
  --token-button-surface-color-secondary-active: #393939;
  --token-button-surface-color-tertiary-hover: #f4f4f4;
  --token-button-surface-color-tertiary-focus: #f4f4f4;
  --token-button-surface-color-tertiary-active: #c6c6c6;
  --token-button-surface-color-critical-default: #da1e28;
  --token-button-surface-color-critical-hover: #b81921;
  --token-button-surface-color-critical-focus: #da1e28;
  --token-button-surface-color-critical-active: #750e13;
  --token-button-surface-color-disabled: #8d8d8d;
  --token-button-border-radius: 0px;
  --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-primary-focus-external: #ff00ff;
  --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
  --token-button-icon-size-small: 16px;
  --token-button-icon-size-medium: 16px;
  --token-button-icon-size-large: 16px;
  --token-typography-font-stack-display:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-text:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-code:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  --token-typography-display-500-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.25; /** 38px */
  --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-400-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.28572; /** 32px */
  --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
  --token-typography-display-300-line-height: 1.4; /** 24px */
  --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /** 24px */
  --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.42857; /** 18px */
  --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
  --token-typography-body-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-body-300-line-height: 1.5; /** 24px */
  --token-typography-body-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-body-200-line-height: 1.42857; /** 20px */
  --token-typography-body-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.28572; /** 18px */
  --token-typography-code-300-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
  --token-typography-code-300-line-height: 1.42857; /** 20px */
  --token-typography-code-200-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-code-200-line-height: 1.42857; /** 18px */
  --token-typography-code-100-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.33333; /** 16px */
}

.hds-mode-cds-g10 {
  --token-color-palette-blue-500: #001141;
  --token-color-palette-blue-400: #002d9c;
  --token-color-palette-blue-300: #0043ce;
  --token-color-palette-blue-200: #0f62fe;
  --token-color-palette-blue-100: #d0e2ff;
  --token-color-palette-blue-50: #edf5ff;
  --token-color-palette-purple-500: #31135e;
  --token-color-palette-purple-400: #6929c4;
  --token-color-palette-purple-300: #8a3ffc;
  --token-color-palette-purple-200: #a56eff;
  --token-color-palette-purple-100: #e8daff;
  --token-color-palette-purple-50: #f6f2ff;
  --token-color-palette-green-500: #044317;
  --token-color-palette-green-400: #0e6027;
  --token-color-palette-green-300: #198038;
  --token-color-palette-green-200: #24a148;
  --token-color-palette-green-100: #a7f0ba;
  --token-color-palette-green-50: #defbe6;
  --token-color-palette-amber-500: #302400;
  --token-color-palette-amber-400: #483700;
  --token-color-palette-amber-300: #8e6a00;
  --token-color-palette-amber-200: #d2a106;
  --token-color-palette-amber-100: #fddc69;
  --token-color-palette-amber-50: #fcf4d6;
  --token-color-palette-red-500: #520408;
  --token-color-palette-red-400: #750e13;
  --token-color-palette-red-300: #a2191f;
  --token-color-palette-red-200: #da1e28;
  --token-color-palette-red-100: #ffd7d9;
  --token-color-palette-red-50: #fff1f1;
  --token-color-palette-neutral-700: #161616;
  --token-color-palette-neutral-600: #393939;
  --token-color-palette-neutral-500: #525252;
  --token-color-palette-neutral-400: #8d8d8d;
  --token-color-palette-neutral-300: #a8a8a8;
  --token-color-palette-neutral-200: #c6c6c6;
  --token-color-palette-neutral-100: #e0e0e0;
  --token-color-palette-neutral-50: #f4f4f4;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-border-primary: #e0e0e0;
  --token-color-border-faint: #c6c6c6;
  --token-color-border-strong: #8d8d8d;
  --token-color-border-action: #0f62fe;
  --token-color-border-highlight: #be95ff;
  --token-color-border-success: #42be65;
  --token-color-border-warning: #ff832b;
  --token-color-border-critical: #ff8389;
  --token-color-focus-action-internal: #ffffff;
  --token-color-focus-action-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #ffffff;
  --token-color-focus-critical-external: #0f62fe; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #161616;
  --token-color-foreground-primary: #161616;
  --token-color-foreground-faint: #161616;
  --token-color-foreground-high-contrast: #ffffff;
  --token-color-foreground-disabled: rgba(22, 22, 22, 0.25);
  --token-color-foreground-action: #0f62fe;
  --token-color-foreground-action-hover: #0043ce;
  --token-color-foreground-action-active: #0043ce;
  --token-color-foreground-highlight: #8a3ffc;
  --token-color-foreground-highlight-on-surface: #6929c4;
  --token-color-foreground-highlight-high-contrast: #491d8b;
  --token-color-foreground-success: #198038;
  --token-color-foreground-success-on-surface: #0e6027;
  --token-color-foreground-success-high-contrast: #044317;
  --token-color-foreground-warning: #ba4e00;
  --token-color-foreground-warning-on-surface: #8a3800;
  --token-color-foreground-warning-high-contrast: #5e2900;
  --token-color-foreground-critical: #da1e28;
  --token-color-foreground-critical-on-surface: #a2191f;
  --token-color-foreground-critical-high-contrast: #750e13;
  --token-color-page-primary: #f4f4f4;
  --token-color-page-faint: #f4f4f4;
  --token-color-surface-primary: #ffffff;
  --token-color-surface-faint: #ffffff;
  --token-color-surface-strong: #ffffff;
  --token-color-surface-interactive: #ffffff;
  --token-color-surface-interactive-hover: #e8e8e8;
  --token-color-surface-interactive-active: #c6c6c6;
  --token-color-surface-interactive-disabled: #c6c6c6;
  --token-color-surface-action: #d0e2ff;
  --token-color-surface-highlight: #e8daff;
  --token-color-surface-success: #a7f0ba;
  --token-color-surface-warning: #ffd9be;
  --token-color-surface-critical: #ffd7d9;
  --token-badge-count-padding-horizontal-small: 8px;
  --token-badge-count-padding-horizontal-medium: 8px;
  --token-badge-count-padding-horizontal-large: 12px;
  --token-badge-padding-horizontal-small: 8px;
  --token-badge-padding-horizontal-medium: 8px;
  --token-badge-padding-horizontal-large: 12px;
  --token-badge-gap-small: 4px;
  --token-badge-gap-medium: 4px;
  --token-badge-gap-large: 4px;
  --token-badge-typography-font-size-small: 0.75rem;
  --token-badge-typography-font-size-medium: 0.75rem;
  --token-badge-typography-font-size-large: 0.75rem;
  --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
  --token-badge-foreground-color-neutral-filled: #161616;
  --token-badge-foreground-color-neutral-inverted: #ffffff; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
  --token-badge-foreground-color-neutral-outlined: #161616;
  --token-badge-foreground-color-neutral-dark-mode-inverted: #161616;
  --token-badge-foreground-color-neutral-dark-mode-outlined: #ffffff;
  --token-badge-foreground-color-highlight-filled: #6929c4; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-highlight-inverted: #ffffff;
  --token-badge-foreground-color-highlight-outlined: #6929c4;
  --token-badge-foreground-color-success-filled: #0e6027; /** we don't use `success-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-success-inverted: #ffffff;
  --token-badge-foreground-color-success-outlined: #0e6027;
  --token-badge-foreground-color-warning-filled: #684e00; /** we don't use `warning-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-warning-inverted: #ffffff;
  --token-badge-foreground-color-warning-outlined: #684e00;
  --token-badge-foreground-color-critical-filled: #a2191f; /** we don't use `critical-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-critical-inverted: #ffffff;
  --token-badge-foreground-color-critical-outlined: #a2191f;
  --token-badge-surface-color-neutral-filled: #e0e0e0;
  --token-badge-surface-color-neutral-dark-mode-inverted: #e0e0e0;
  --token-badge-surface-color-highlight-filled: #e8daff; /** we don't use `surface-highlight` for accessibility (better contrast) */
  --token-badge-surface-color-highlight-inverted: #6929c4;
  --token-badge-surface-color-success-filled: #a7f0ba; /** we don't use `surface-success` for accessibility (better contrast) */
  --token-badge-surface-color-success-inverted: #0e6027;
  --token-badge-surface-color-warning-filled: #fddc69; /** we don't use `surface-warning` for accessibility (better contrast) */
  --token-badge-surface-color-warning-inverted: #684e00;
  --token-badge-surface-color-critical-filled: #ffd7d9; /** we don't use `surface-critical` for accessibility (better contrast) */
  --token-badge-surface-color-critical-inverted: #a2191f;
  --token-badge-border-radius-small: 8px;
  --token-badge-border-radius-medium: 12px;
  --token-badge-border-radius-large: 16px;
  --token-button-height-small: 32px;
  --token-button-height-medium: 40px;
  --token-button-height-large: 48px;
  --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
  --token-button-gap: 32px;
  --token-button-typography-font-size-small: 0.875rem;
  --token-button-typography-font-size-medium: 0.875rem;
  --token-button-typography-font-size-large: 0.875rem;
  --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
  --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
  --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
  --token-button-foreground-color-primary-default: #ffffff;
  --token-button-foreground-color-primary-hover: #ffffff;
  --token-button-foreground-color-primary-focus: #ffffff;
  --token-button-foreground-color-primary-active: #ffffff;
  --token-button-foreground-color-secondary-default: #ffffff;
  --token-button-foreground-color-secondary-hover: #ffffff;
  --token-button-foreground-color-secondary-focus: #ffffff;
  --token-button-foreground-color-secondary-active: #ffffff;
  --token-button-foreground-color-tertiary-default: #0f62fe;
  --token-button-foreground-color-tertiary-hover: #ffffff;
  --token-button-foreground-color-tertiary-focus: #ffffff;
  --token-button-foreground-color-tertiary-active: #ffffff;
  --token-button-foreground-color-critical-default: #ffffff;
  --token-button-foreground-color-critical-hover: #ffffff;
  --token-button-foreground-color-critical-focus: #ffffff;
  --token-button-foreground-color-critical-active: #ffffff;
  --token-button-foreground-color-disabled: #8d8d8d;
  --token-button-surface-color-primary-default: #0f62fe;
  --token-button-surface-color-primary-hover: #0050e6;
  --token-button-surface-color-primary-focus: #0f62fe;
  --token-button-surface-color-primary-active: #002d9c;
  --token-button-surface-color-secondary-default: #393939;
  --token-button-surface-color-secondary-hover: #474747;
  --token-button-surface-color-secondary-focus: #393939;
  --token-button-surface-color-secondary-active: #6f6f6f;
  --token-button-surface-color-tertiary-hover: #0050e6;
  --token-button-surface-color-tertiary-focus: #0050e6;
  --token-button-surface-color-tertiary-active: #002d9c;
  --token-button-surface-color-critical-default: #da1e28;
  --token-button-surface-color-critical-hover: #b81921;
  --token-button-surface-color-critical-focus: #da1e28;
  --token-button-surface-color-critical-active: #750e13;
  --token-button-surface-color-disabled: #c6c6c6;
  --token-button-border-radius: 0px;
  --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-primary-focus-external: #ff00ff;
  --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
  --token-button-icon-size-small: 16px;
  --token-button-icon-size-medium: 16px;
  --token-button-icon-size-large: 16px;
  --token-typography-font-stack-display:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-text:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-code:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  --token-typography-display-500-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.25; /** 38px */
  --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-400-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.28572; /** 32px */
  --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
  --token-typography-display-300-line-height: 1.4; /** 24px */
  --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /** 24px */
  --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.42857; /** 18px */
  --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
  --token-typography-body-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-body-300-line-height: 1.5; /** 24px */
  --token-typography-body-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-body-200-line-height: 1.42857; /** 20px */
  --token-typography-body-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.28572; /** 18px */
  --token-typography-code-300-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
  --token-typography-code-300-line-height: 1.42857; /** 20px */
  --token-typography-code-200-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-code-200-line-height: 1.42857; /** 18px */
  --token-typography-code-100-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.33333; /** 16px */
}

.hds-mode-cds-g90 {
  --token-color-palette-blue-500: #001141;
  --token-color-palette-blue-400: #002d9c;
  --token-color-palette-blue-300: #0043ce;
  --token-color-palette-blue-200: #0f62fe;
  --token-color-palette-blue-100: #d0e2ff;
  --token-color-palette-blue-50: #edf5ff;
  --token-color-palette-purple-500: #31135e;
  --token-color-palette-purple-400: #6929c4;
  --token-color-palette-purple-300: #8a3ffc;
  --token-color-palette-purple-200: #a56eff;
  --token-color-palette-purple-100: #e8daff;
  --token-color-palette-purple-50: #f6f2ff;
  --token-color-palette-green-500: #044317;
  --token-color-palette-green-400: #0e6027;
  --token-color-palette-green-300: #198038;
  --token-color-palette-green-200: #24a148;
  --token-color-palette-green-100: #a7f0ba;
  --token-color-palette-green-50: #defbe6;
  --token-color-palette-amber-500: #302400;
  --token-color-palette-amber-400: #483700;
  --token-color-palette-amber-300: #8e6a00;
  --token-color-palette-amber-200: #d2a106;
  --token-color-palette-amber-100: #fddc69;
  --token-color-palette-amber-50: #fcf4d6;
  --token-color-palette-red-500: #520408;
  --token-color-palette-red-400: #750e13;
  --token-color-palette-red-300: #a2191f;
  --token-color-palette-red-200: #da1e28;
  --token-color-palette-red-100: #ffd7d9;
  --token-color-palette-red-50: #fff1f1;
  --token-color-palette-neutral-700: #161616;
  --token-color-palette-neutral-600: #393939;
  --token-color-palette-neutral-500: #525252;
  --token-color-palette-neutral-400: #8d8d8d;
  --token-color-palette-neutral-300: #a8a8a8;
  --token-color-palette-neutral-200: #c6c6c6;
  --token-color-palette-neutral-100: #e0e0e0;
  --token-color-palette-neutral-50: #f4f4f4;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-border-primary: #8d8d8d;
  --token-color-border-faint: #525252;
  --token-color-border-strong: #8d8d8d;
  --token-color-border-action: #4589ff;
  --token-color-border-highlight: #a56eff;
  --token-color-border-success: #24a148;
  --token-color-border-warning: #eb6200;
  --token-color-border-critical: #fa4d56;
  --token-color-focus-action-internal: #161616;
  --token-color-focus-action-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #161616;
  --token-color-focus-critical-external: #ffffff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #f4f4f4;
  --token-color-foreground-primary: #f4f4f4;
  --token-color-foreground-faint: #f4f4f4;
  --token-color-foreground-high-contrast: #161616;
  --token-color-foreground-disabled: rgba(244, 244, 244, 0.25);
  --token-color-foreground-action: #78a9ff;
  --token-color-foreground-action-hover: #a6c8ff;
  --token-color-foreground-action-active: #a6c8ff;
  --token-color-foreground-highlight: #be95ff;
  --token-color-foreground-highlight-on-surface: #d4bbff;
  --token-color-foreground-highlight-high-contrast: #e8daff;
  --token-color-foreground-success: #42be65;
  --token-color-foreground-success-on-surface: #6fdc8c;
  --token-color-foreground-success-high-contrast: #a7f0ba;
  --token-color-foreground-warning: #ff832b;
  --token-color-foreground-warning-on-surface: #ffb784;
  --token-color-foreground-warning-high-contrast: #ffd9be;
  --token-color-foreground-critical: #ff8389;
  --token-color-foreground-critical-on-surface: #ffb3b8;
  --token-color-foreground-critical-high-contrast: #ffd7d9;
  --token-color-page-primary: #262626;
  --token-color-page-faint: #262626;
  --token-color-surface-primary: #393939;
  --token-color-surface-faint: #393939;
  --token-color-surface-strong: #393939;
  --token-color-surface-interactive: #393939;
  --token-color-surface-interactive-hover: #474747;
  --token-color-surface-interactive-active: #6f6f6f;
  --token-color-surface-interactive-disabled: #525252;
  --token-color-surface-action: #0043ce;
  --token-color-surface-highlight: #6929c4;
  --token-color-surface-success: #0e6027;
  --token-color-surface-warning: #8a3800;
  --token-color-surface-critical: #a2191f;
  --token-badge-count-padding-horizontal-small: 8px;
  --token-badge-count-padding-horizontal-medium: 8px;
  --token-badge-count-padding-horizontal-large: 12px;
  --token-badge-padding-horizontal-small: 8px;
  --token-badge-padding-horizontal-medium: 8px;
  --token-badge-padding-horizontal-large: 12px;
  --token-badge-gap-small: 4px;
  --token-badge-gap-medium: 4px;
  --token-badge-gap-large: 4px;
  --token-badge-typography-font-size-small: 0.75rem;
  --token-badge-typography-font-size-medium: 0.75rem;
  --token-badge-typography-font-size-large: 0.75rem;
  --token-badge-typography-line-height-large: 1; /** 24px = 1.5 */
  --token-badge-foreground-color-neutral-filled: #f4f4f4;
  --token-badge-foreground-color-neutral-inverted: #161616; /** TODO validate if this is `TextInverse` or should be `TextOnColor (ask Carbon team too?) */
  --token-badge-foreground-color-neutral-outlined: #f4f4f4;
  --token-badge-foreground-color-neutral-dark-mode-inverted: #f4f4f4;
  --token-badge-foreground-color-neutral-dark-mode-outlined: #161616;
  --token-badge-foreground-color-highlight-filled: #e8daff; /** we don't use `highlight-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-highlight-inverted: #161616;
  --token-badge-foreground-color-highlight-outlined: #e8daff;
  --token-badge-foreground-color-success-filled: #a7f0ba; /** we don't use `success-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-success-inverted: #161616;
  --token-badge-foreground-color-success-outlined: #a7f0ba;
  --token-badge-foreground-color-warning-filled: #fddc69; /** we don't use `warning-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-warning-inverted: #161616;
  --token-badge-foreground-color-warning-outlined: #fddc69;
  --token-badge-foreground-color-critical-filled: #ffd7d9; /** we don't use `critical-on-surface` for accessibility (better contrast) */
  --token-badge-foreground-color-critical-inverted: #161616;
  --token-badge-foreground-color-critical-outlined: #ffd7d9;
  --token-badge-surface-color-neutral-filled: #525252;
  --token-badge-surface-color-neutral-dark-mode-inverted: #525252;
  --token-badge-surface-color-highlight-filled: #6929c4; /** we don't use `surface-highlight` for accessibility (better contrast) */
  --token-badge-surface-color-highlight-inverted: #be95ff;
  --token-badge-surface-color-success-filled: #0e6027; /** we don't use `surface-success` for accessibility (better contrast) */
  --token-badge-surface-color-success-inverted: #42be65;
  --token-badge-surface-color-warning-filled: #684e00; /** we don't use `surface-warning` for accessibility (better contrast) */
  --token-badge-surface-color-warning-inverted: #d2a106;
  --token-badge-surface-color-critical-filled: #a2191f; /** we don't use `surface-critical` for accessibility (better contrast) */
  --token-badge-surface-color-critical-inverted: #ff8389;
  --token-badge-border-radius-small: 8px;
  --token-badge-border-radius-medium: 12px;
  --token-badge-border-radius-large: 16px;
  --token-button-height-small: 32px;
  --token-button-height-medium: 40px;
  --token-button-height-large: 48px;
  --token-button-padding-horizontal-small: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-medium: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-horizontal-large: 15px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-small: 6px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-medium: 10px; /** here we're taking into account the 1px border */
  --token-button-padding-vertical-large: 14px; /** here we're taking into account the 1px border */
  --token-button-gap: 32px;
  --token-button-typography-font-size-small: 0.875rem;
  --token-button-typography-font-size-medium: 0.875rem;
  --token-button-typography-font-size-large: 0.875rem;
  --token-button-typography-line-height-small: 1.2858; /** 14px ~ 0.9286 - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants) */
  --token-button-typography-line-height-medium: 1.2858; /** 14px ~ 1.1429 */
  --token-button-typography-line-height-large: 1.2858; /** 24px = 1.5 */
  --token-button-foreground-color-primary-default: #ffffff;
  --token-button-foreground-color-primary-hover: #ffffff;
  --token-button-foreground-color-primary-focus: #ffffff;
  --token-button-foreground-color-primary-active: #ffffff;
  --token-button-foreground-color-secondary-default: #ffffff;
  --token-button-foreground-color-secondary-hover: #ffffff;
  --token-button-foreground-color-secondary-focus: #ffffff;
  --token-button-foreground-color-secondary-active: #ffffff;
  --token-button-foreground-color-tertiary-default: #ffffff;
  --token-button-foreground-color-tertiary-hover: #161616;
  --token-button-foreground-color-tertiary-focus: #161616;
  --token-button-foreground-color-tertiary-active: #161616;
  --token-button-foreground-color-critical-default: #ffffff;
  --token-button-foreground-color-critical-hover: #ffffff;
  --token-button-foreground-color-critical-focus: #ffffff;
  --token-button-foreground-color-critical-active: #ffffff;
  --token-button-foreground-color-disabled: rgba(255, 255, 255, 0.25);
  --token-button-surface-color-primary-default: #0f62fe;
  --token-button-surface-color-primary-hover: #0050e6;
  --token-button-surface-color-primary-focus: #0f62fe;
  --token-button-surface-color-primary-active: #002d9c;
  --token-button-surface-color-secondary-default: #6f6f6f;
  --token-button-surface-color-secondary-hover: #5e5e5e;
  --token-button-surface-color-secondary-focus: #6f6f6f;
  --token-button-surface-color-secondary-active: #393939;
  --token-button-surface-color-tertiary-hover: #f4f4f4;
  --token-button-surface-color-tertiary-focus: #f4f4f4;
  --token-button-surface-color-tertiary-active: #c6c6c6;
  --token-button-surface-color-critical-default: #da1e28;
  --token-button-surface-color-critical-hover: #b81921;
  --token-button-surface-color-critical-focus: #da1e28;
  --token-button-surface-color-critical-active: #750e13;
  --token-button-surface-color-disabled: #8d8d8d;
  --token-button-border-radius: 0px;
  --token-button-border-color-primary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-primary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-primary-focus-external: #ff00ff;
  --token-button-border-color-primary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-secondary-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-secondary-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-secondary-active: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-default: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-hover: rgba(0, 0, 0, 0);
  --token-button-border-color-critical-focus-internal: #ffc0cb; /** TODO - replace the `pink` values with the correct ones */
  --token-button-border-color-critical-focus-external: #ff00ff; /** TODO - replace the `magenta` values with the correct ones */
  --token-button-border-color-critical-active: rgba(0, 0, 0, 0);
  --token-button-icon-size-small: 16px;
  --token-button-icon-size-medium: 16px;
  --token-button-icon-size-large: 16px;
  --token-typography-font-stack-display:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-text:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-font-stack-code:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  --token-typography-display-500-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-500-font-size: 2rem; /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.25; /** 38px */
  --token-typography-display-500-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-400-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-400-font-size: 1.75rem; /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.28572; /** 32px */
  --token-typography-display-400-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-300-font-size: 1.25rem; /** 18px/1.125rem */
  --token-typography-display-300-line-height: 1.4; /** 24px */
  --token-typography-display-300-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-200-font-size: 1rem; /** 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /** 24px */
  --token-typography-display-200-letter-spacing: 0px; /** this is `tracking` */
  --token-typography-display-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-display-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.42857; /** 18px */
  --token-typography-display-100-letter-spacing: 0.16px; /** this is `tracking` */
  --token-typography-body-300-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-300-font-size: 1rem; /** 16px/1rem */
  --token-typography-body-300-line-height: 1.5; /** 24px */
  --token-typography-body-200-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-body-200-line-height: 1.42857; /** 20px */
  --token-typography-body-100-font-family:
    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont,
    ".SFNSText-Regular", sans-serif;
  --token-typography-body-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.28572; /** 18px */
  --token-typography-code-300-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-300-font-size: 0.875rem; /** 16px/1rem */
  --token-typography-code-300-line-height: 1.42857; /** 20px */
  --token-typography-code-200-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-200-font-size: 0.875rem; /** 14px/0.875rem */
  --token-typography-code-200-line-height: 1.42857; /** 18px */
  --token-typography-code-100-font-family:
    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    Courier, monospace;
  --token-typography-code-100-font-size: 0.875rem; /** 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.33333; /** 16px */
}

/*

WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE?

CSS custom properties (variables) inherit from parent to child, but when a variable is defined
as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed
at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`).

This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these
"computed" variables at `:root` level, their values do not update in themed blocks that override
the "source" variables (e.g., `--source-value`) at a lower scope.
This results in _stale_ variables, where the computed value is always stuck on the `:root` value,
even inside a themed block where the source variable is assigned.

To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values,
we redeclare each "computed" variable in every theme scope where its "source" variable is overridden.

*/

:root,
.hds-theme-default,
.hds-theme-system,
.hds-theme-light,
.hds-theme-dark,
.hds-mode-cds-g0,
.hds-mode-cds-g10,
.hds-mode-cds-g90,
.hds-mode-cds-g100 {
  --token-border-radius-x-small: 3px;
  --token-border-radius-small: 5px;
  --token-border-radius-medium: 6px;
  --token-border-radius-large: 8px;
  --token-color-palette-alpha-300: #3b3d4566;
  --token-color-palette-alpha-200: #656a7633;
  --token-color-palette-alpha-100: #656a761a;
  --token-color-hashicorp-brand: #000000;
  --token-color-boundary-brand: #f24c53;
  --token-color-boundary-foreground: #cf2d32;
  --token-color-boundary-surface: #ffecec;
  --token-color-boundary-border: #fbd7d8;
  --token-color-boundary-gradient-primary-start: #f97076;
  --token-color-boundary-gradient-primary-stop: #db363b;
  --token-color-boundary-gradient-faint-start: #fffafa; /** this is the 'boundary-50' value at 25% opacity on white */
  --token-color-boundary-gradient-faint-stop: #ffecec;
  --token-color-consul-brand: #e03875;
  --token-color-consul-foreground: #d01c5b;
  --token-color-consul-surface: #ffe9f1;
  --token-color-consul-border: #ffcede;
  --token-color-consul-gradient-primary-start: #ff99be;
  --token-color-consul-gradient-primary-stop: #da306e;
  --token-color-consul-gradient-faint-start: #fff9fb; /** this is the 'consul-50' value at 25% opacity on white */
  --token-color-consul-gradient-faint-stop: #ffe9f1;
  --token-color-hcp-brand: #000000;
  --token-color-nomad-brand: #06d092;
  --token-color-nomad-foreground: #008661;
  --token-color-nomad-surface: #d3fdeb;
  --token-color-nomad-border: #bff3dd;
  --token-color-nomad-gradient-primary-start: #bff3dd;
  --token-color-nomad-gradient-primary-stop: #60dea9;
  --token-color-nomad-gradient-faint-start: #f3fff9; /** this is the 'nomad-50' value at 25% opacity on white */
  --token-color-nomad-gradient-faint-stop: #d3fdeb;
  --token-color-packer-brand: #02a8ef;
  --token-color-packer-foreground: #007eb4;
  --token-color-packer-surface: #d4f2ff;
  --token-color-packer-border: #b4e4ff;
  --token-color-packer-gradient-primary-start: #b4e4ff;
  --token-color-packer-gradient-primary-stop: #63d0ff;
  --token-color-packer-gradient-faint-start: #f3fcff; /** this is the 'packer-50' value at 25% opacity on white */
  --token-color-packer-gradient-faint-stop: #d4f2ff;
  --token-color-terraform-brand: #7b42bc;
  --token-color-terraform-brand-on-dark: #a067da; /** this is an alternative brand color meant to be used on dark backgrounds */
  --token-color-terraform-foreground: #773cb4;
  --token-color-terraform-surface: #f4ecff;
  --token-color-terraform-border: #ebdbfc;
  --token-color-terraform-gradient-primary-start: #bb8deb;
  --token-color-terraform-gradient-primary-stop: #844fba;
  --token-color-terraform-gradient-faint-start: #fcfaff; /** this is the 'terraform-50' value at 25% opacity on white */
  --token-color-terraform-gradient-faint-stop: #f4ecff;
  --token-color-vagrant-brand: #1868f2;
  --token-color-vagrant-foreground: #1c61d8;
  --token-color-vagrant-surface: #d6ebff;
  --token-color-vagrant-border: #c7dbfc;
  --token-color-vagrant-gradient-primary-start: #639cff;
  --token-color-vagrant-gradient-primary-stop: #2e71e5;
  --token-color-vagrant-gradient-faint-start: #f4faff; /** this is the 'vagrant-50' value at 25% opacity on white */
  --token-color-vagrant-gradient-faint-stop: #d6ebff;
  --token-color-vault-radar-brand: #ffcf25;
  --token-color-vault-radar-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */
  --token-color-vault-radar-foreground: #9a6f00;
  --token-color-vault-radar-surface: #fff9cf;
  --token-color-vault-radar-border: #feec7b;
  --token-color-vault-radar-gradient-primary-start: #feec7b;
  --token-color-vault-radar-gradient-primary-stop: #ffe543;
  --token-color-vault-radar-gradient-faint-start: #fffdf2; /** this is the 'vault-radar-50' value at 25% opacity on white */
  --token-color-vault-radar-gradient-faint-stop: #fff9cf;
  --token-color-vault-secrets-brand: #ffcf25;
  --token-color-vault-secrets-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
  --token-color-vault-secrets-foreground: #9a6f00;
  --token-color-vault-secrets-surface: #fff9cf;
  --token-color-vault-secrets-border: #feec7b;
  --token-color-vault-secrets-gradient-primary-start: #feec7b;
  --token-color-vault-secrets-gradient-primary-stop: #ffe543;
  --token-color-vault-secrets-gradient-faint-start: #fffdf2; /** this is the 'vault-secrets-50' value at 25% opacity on white */
  --token-color-vault-secrets-gradient-faint-stop: #fff9cf;
  --token-color-vault-brand: #ffcf25;
  --token-color-vault-brand-alt: #000000; /** this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
  --token-color-vault-foreground: #9a6f00;
  --token-color-vault-surface: #fff9cf;
  --token-color-vault-border: #feec7b;
  --token-color-vault-gradient-primary-start: #feec7b;
  --token-color-vault-gradient-primary-stop: #ffe543;
  --token-color-vault-gradient-faint-start: #fffdf2; /** this is the 'vault-50' value at 25% opacity on white */
  --token-color-vault-gradient-faint-stop: #fff9cf;
  --token-color-waypoint-brand: #14c6cb;
  --token-color-waypoint-foreground: #008196;
  --token-color-waypoint-surface: #e0fcff;
  --token-color-waypoint-border: #cbf1f3;
  --token-color-waypoint-gradient-primary-start: #cbf1f3;
  --token-color-waypoint-gradient-primary-stop: #62d4dc;
  --token-color-waypoint-gradient-faint-start: #f6feff; /** this is the 'waypoint-50' value at 25% opacity on white */
  --token-color-waypoint-gradient-faint-stop: #e0fcff;
  --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
  --token-elevation-low-box-shadow:
    0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
  --token-elevation-mid-box-shadow:
    0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
  --token-elevation-high-box-shadow:
    0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
  --token-elevation-higher-box-shadow:
    0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
  --token-elevation-overlay-box-shadow:
    0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
  --token-surface-inset-box-shadow:
    inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
  --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
  --token-surface-low-box-shadow:
    0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
  --token-surface-mid-box-shadow:
    0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
  --token-surface-high-box-shadow:
    0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626,
    0px 16px 16px -10px #656a7633;
  --token-surface-higher-box-shadow:
    0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
  --token-surface-overlay-box-shadow:
    0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
  --token-focus-ring-action-box-shadow:
    inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
  --token-focus-ring-critical-box-shadow:
    inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
  --token-app-header-height: 60px;
  --token-app-header-home-link-size: 36px;
  --token-app-header-logo-size: 28px;
  --token-app-side-nav-wrapper-border-width: 1px;
  --token-app-side-nav-wrapper-border-color: var(
    --token-color-palette-neutral-200
  );
  --token-app-side-nav-wrapper-padding-horizontal: 16px;
  --token-app-side-nav-wrapper-padding-vertical: 16px;
  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
  --token-app-side-nav-toggle-button-border-radius: 5px;
  --token-app-side-nav-header-home-link-padding: 4px;
  --token-app-side-nav-header-home-link-logo-size: 48px;
  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
  --token-app-side-nav-header-actions-spacing: 8px;
  --token-app-side-nav-body-list-margin-vertical: 24px;
  --token-app-side-nav-body-list-item-height: 36px;
  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
  --token-app-side-nav-body-list-item-padding-vertical: 4px;
  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
  --token-app-side-nav-body-list-item-border-radius: 5px;
  --token-app-side-nav-color-foreground-primary: var(
    --token-color-foreground-primary
  );
  --token-app-side-nav-color-foreground-strong: var(
    --token-color-foreground-primary
  );
  --token-app-side-nav-color-foreground-faint: var(
    --token-color-foreground-faint
  );
  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
  --token-app-side-nav-color-surface-interactive-hover: var(
    --token-color-surface-interactive-hover
  );
  --token-app-side-nav-color-surface-interactive-active: var(
    --token-color-palette-neutral-300
  );
  --token-badge-height-small: 20px;
  --token-badge-height-medium: 24px;
  --token-badge-height-large: 32px;
  --token-badge-padding-vertical-small: 2px;
  --token-badge-padding-vertical-medium: 4px;
  --token-badge-padding-vertical-large: 4px;
  --token-badge-typography-line-height-small: 1.2308; /** 16px = 1.2308 */
  --token-badge-typography-line-height-medium: 1.2308; /** 16px = 1.2308 */
  --token-badge-foreground-color-neutral-dark-mode-filled: #ffffff;
  --token-badge-surface-color-neutral-inverted: #656a76; /** TODO - cristiano to ask Carbon team what to do because there is no equivalent color in code for the Tag inverted */
  --token-badge-surface-color-neutral-dark-mode-filled: #656a76; /** TODO - cristiano to ask Carbon team what to do because there is no high-contrast color in the theme colors for the tag (in code) */
  --token-badge-border-width: 1px;
  --token-badge-icon-size-small: 12px;
  --token-badge-icon-size-medium: 16px;
  --token-badge-icon-size-large: 16px;
  --token-button-surface-color-tertiary-default: rgba(0, 0, 0, 0);
  --token-button-border-width: 1px;
  --token-button-border-color-tertiary-default: rgba(0, 0, 0, 0);
  --token-button-border-color-tertiary-hover: #3b3d4566;
  --token-button-border-color-tertiary-focus-internal: #0c56e9;
  --token-button-border-color-tertiary-focus-external: #5990ff;
  --token-button-border-color-tertiary-active: #3b3d4566;
  --token-button-border-color-disabled: #656a7633;
  --token-button-focus-border-width: 3px;
  --token-form-label-color: #0c0c0e;
  --token-form-legend-color: #0c0c0e;
  --token-form-helper-text-color: #656a76;
  --token-form-indicator-optional-color: #656a76;
  --token-form-error-color: #c00005;
  --token-form-error-icon-size: 14px;
  --token-form-checkbox-size: 16px;
  --token-form-checkbox-border-radius: 3px;
  --token-form-checkbox-border-width: 1px;
  --token-form-checkbox-background-image-size: 12px;
  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dash' color is hardcoded here! */
  --token-form-control-base-foreground-value-color: #0c0c0e;
  --token-form-control-base-foreground-placeholder-color: #656a76;
  --token-form-control-base-surface-color-default: #ffffff;
  --token-form-control-base-surface-color-hover: #f1f2f3;
  --token-form-control-base-border-color-default: #8c909c;
  --token-form-control-base-border-color-hover: #656a76;
  --token-form-control-checked-foreground-color: #ffffff;
  --token-form-control-checked-surface-color-default: #1060ff;
  --token-form-control-checked-surface-color-hover: #0c56e9;
  --token-form-control-checked-border-color-default: #0c56e9;
  --token-form-control-checked-border-color-hover: #0046d1;
  --token-form-control-invalid-border-color-default: #c00005;
  --token-form-control-invalid-border-color-hover: #940004;
  --token-form-control-readonly-foreground-color: #3b3d45;
  --token-form-control-readonly-surface-color: #f1f2f3;
  --token-form-control-readonly-border-color: #656a761a;
  --token-form-control-disabled-foreground-color: #8c909c;
  --token-form-control-disabled-surface-color: #fafafa;
  --token-form-control-disabled-border-color: #656a7633;
  --token-form-control-padding: 7px; /** Notice: we have to take in account the border, so it's 1px less than in Figma. */
  --token-form-control-border-radius: 5px;
  --token-form-control-border-width: 1px;
  --token-form-radio-size: 16px;
  --token-form-radio-border-width: 1px;
  --token-form-radio-background-image-size: 12px;
  --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */
  --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'dot' color is hardcoded here! */
  --token-form-radiocard-group-gap: 16px;
  --token-form-radiocard-border-width: 1px;
  --token-form-radiocard-border-radius: 6px;
  --token-form-radiocard-content-padding: 24px;
  --token-form-radiocard-control-padding: 8px;
  --token-form-radiocard-transition-duration: 0.2s;
  --token-form-select-background-image-size: 16px;
  --token-form-select-background-image-position-right-x: 7px;
  --token-form-select-background-image-position-top-y: 9px;
  --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */
  --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /** notice: the 'caret' color is hardcoded here! */
  --token-form-text-input-background-image-size: 16px;
  --token-form-text-input-background-image-position-x: 7px;
  --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /** notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /** notice: the icon color and animation are hardcoded here! */
  --token-form-toggle-width: 32px;
  --token-form-toggle-height: 16px;
  --token-form-toggle-base-surface-color-default: #f1f2f3; /** the toggle has a different base surface color, compared to the other controls */
  --token-form-toggle-border-radius: 3px;
  --token-form-toggle-border-width: 1px;
  --token-form-toggle-background-image-size: 12px;
  --token-form-toggle-background-image-position-x: 2px;
  --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
  --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /** notice: the 'tick' color is hardcoded here! */
  --token-form-toggle-transition-duration: 0.2s;
  --token-form-toggle-transition-timing-function: cubic-bezier(
    0.68,
    -0.2,
    0.265,
    1.15
  );
  --token-form-toggle-thumb-size: 16px;
  --token-pagination-nav-control-height: 36px;
  --token-pagination-nav-control-padding-horizontal: 12px;
  --token-pagination-nav-control-focus-inset: 4px;
  --token-pagination-nav-control-icon-spacing: 6px;
  --token-pagination-nav-indicator-height: 2px;
  --token-pagination-nav-indicator-spacing: 6px;
  --token-pagination-child-spacing-vertical: 8px;
  --token-pagination-child-spacing-horizontal: 20px;
  --token-side-nav-wrapper-border-width: 1px;
  --token-side-nav-wrapper-border-color: #656a76;
  --token-side-nav-wrapper-padding-horizontal: 16px;
  --token-side-nav-wrapper-padding-vertical: 16px;
  --token-side-nav-wrapper-padding-horizontal-minimized: 8px;
  --token-side-nav-wrapper-padding-vertical-minimized: 22px;
  --token-side-nav-toggle-button-border-radius: 5px;
  --token-side-nav-header-home-link-padding: 4px;
  --token-side-nav-header-home-link-logo-size: 48px;
  --token-side-nav-header-home-link-logo-size-minimized: 32px;
  --token-side-nav-header-actions-spacing: 8px;
  --token-side-nav-body-list-margin-vertical: 24px;
  --token-side-nav-body-list-item-height: 36px;
  --token-side-nav-body-list-item-padding-horizontal: 8px;
  --token-side-nav-body-list-item-padding-vertical: 4px;
  --token-side-nav-body-list-item-spacing-vertical: 2px;
  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
  --token-side-nav-body-list-item-border-radius: 5px;
  --token-side-nav-color-foreground-primary: #dedfe3;
  --token-side-nav-color-foreground-strong: #ffffff;
  --token-side-nav-color-foreground-faint: #8c909c;
  --token-side-nav-color-surface-primary: #0c0c0e;
  --token-side-nav-color-surface-interactive-hover: #3b3d45;
  --token-side-nav-color-surface-interactive-active: #656a76;
  --token-tabs-tab-height-medium: 36px;
  --token-tabs-tab-height-large: 48px;
  --token-tabs-tab-padding-horizontal-medium: 12px;
  --token-tabs-tab-padding-horizontal-large: 20px;
  --token-tabs-tab-padding-vertical: 0px;
  --token-tabs-tab-border-radius: 5px;
  --token-tabs-tab-focus-inset: 6px;
  --token-tabs-tab-gutter: 6px;
  --token-tabs-indicator-height: 3px;
  --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1);
  --token-tabs-indicator-transition-duration: 0.6s;
  --token-tabs-divider-height: 1px;
  --token-tooltip-border-radius: 5px;
  --token-tooltip-color-foreground-primary: var(
    --token-color-foreground-high-contrast
  );
  --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700);
  --token-tooltip-focus-offset: -2px;
  --token-tooltip-max-width: 280px;
  --token-tooltip-padding-horizontal: 12px;
  --token-tooltip-padding-vertical: 8px;
  --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}