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

:root,
.hds-theme-default {
  --token-color-palette-neutral-0: #ffffff;
  --token-color-foreground-primary: #ffffff;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 500;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 700;
  /* added these to test theming in the showcase */
  --token-color-foreground-strong: #0c0c0e;
  --token-color-foreground-primary: #3b3d45;
  --token-color-surface-strong: #f1f2f3;
  --token-color-surface-primary: #ffffff;
  --token-color-surface-faint: #ffffff;
  --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;
}

@media (prefers-color-scheme: light) {
  .hds-theme-system {
    --token-color-palette-neutral-0: #ffffff;
    --token-color-foreground-primary: #161616;
    --token-typography-font-weight-regular: 400;
    --token-typography-font-weight-medium: 400;
    --token-typography-font-weight-semibold: 600;
    --token-typography-font-weight-bold: 600;
    /* added these to test theming in the showcase */
    --token-color-foreground-strong: #ffffff;
    --token-color-foreground-primary: #f1f2f3;
    --token-color-surface-strong: #3b3d45;
    --token-color-surface-primary: #0c0c0e;
    --token-color-surface-faint: #0c0c0e;
    --token-typography-font-stack-display: Papyrus, fantasy;
    --token-typography-font-stack-text: Papyrus, fantasy;
  }
}

@media (prefers-color-scheme: dark) {
  .hds-theme-system {
    --token-color-palette-neutral-0: #ffffff;
    --token-color-foreground-primary: #f4f4f4;
    --token-typography-font-weight-regular: 400;
    --token-typography-font-weight-medium: 400;
    --token-typography-font-weight-semibold: 600;
    --token-typography-font-weight-bold: 600;
    /* added these to test theming in the showcase */
    --token-color-foreground-strong: #0c0c0e;
    --token-color-foreground-primary: #3b3d45;
    --token-color-surface-strong: #f1f2f3;
    --token-color-surface-primary: #ffffff;
    --token-color-surface-faint: #ffffff;
    --token-typography-font-stack-display: "Brush Script MT", cursive;
    --token-typography-font-stack-text: "Brush Script MT", cursive;
  }
}

.hds-theme-light {
  --token-color-palette-neutral-0: #ffffff;
  --token-color-foreground-primary: #161616;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  /* added these to test theming in the showcase */
  --token-color-foreground-strong: #0c0c0e;
  --token-color-foreground-primary: #3b3d45;
  --token-color-surface-strong: #f1f2f3;
  --token-color-surface-primary: #ffffff;
  --token-color-surface-faint: #ffffff;
  --token-typography-font-stack-display: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  --token-typography-font-stack-text: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.hds-theme-dark {
  --token-color-palette-neutral-0: #ffffff;
  --token-color-foreground-primary: #f4f4f4;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 400;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 600;
  /* added these to test theming in the showcase */
  --token-color-foreground-strong: #ffffff;
  --token-color-foreground-primary: #f1f2f3;
  --token-color-surface-strong: #3b3d45;
  --token-color-surface-primary: #0c0c0e;
  --token-color-surface-faint: #0c0c0e;
  --token-typography-font-stack-display: Impact, "Arial Black", "sans serif";
  --token-typography-font-stack-text: Impact, "Arial Black", "sans serif";
}

/*
  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-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-alpha-300: #3b3d4566;
  --token-color-palette-alpha-200: #656a7633;
  --token-color-palette-alpha-100: #656a761a;
  --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-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: #fafafa;
  /* --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-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-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: #ffffff;
  --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);
  /* --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-display-500-font-family: var(--token-typography-font-stack-display);
  --token-typography-display-500-font-size: 1.875rem;
  /** 30px/1.875rem */
  --token-typography-display-500-line-height: 1.2666;
  /** 38px */
  --token-typography-display-400-font-family: var(--token-typography-font-stack-display);
  --token-typography-display-400-font-size: 1.5rem;
  /** 24px/1.5rem */
  --token-typography-display-400-line-height: 1.3333;
  /** 32px */
  --token-typography-display-300-font-family: var(--token-typography-font-stack-display);
  --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: var(--token-typography-font-stack-display);
  --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: var(--token-typography-font-stack-display);
  --token-typography-display-100-font-size: 0.8125rem;
  /** 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.3846;
  /** 18px */
  --token-typography-body-300-font-family: var(--token-typography-font-stack-text);
  --token-typography-body-300-font-size: 1rem;
  /** 16px/1rem */
  --token-typography-body-300-line-height: 1.5;
  /** 24px */
  --token-typography-body-200-font-family: var(--token-typography-font-stack-text);
  --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: var(--token-typography-font-stack-text);
  --token-typography-body-100-font-size: 0.8125rem;
  /** 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.3846;
  /** 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 */
  --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-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 */
}