/**
 * 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 {
  --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 {
  --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 */
}

/*

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 {
  --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);
}