@amsterdam/design-system-tokens/dist/index.theme.css

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

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

.ams-theme {
  --ams-aspect-ratio-9-16: 9 / 16;
  --ams-aspect-ratio-3-4: 3 / 4;
  --ams-aspect-ratio-1-1: 1 / 1;
  --ams-aspect-ratio-4-3: 4 / 3;
  --ams-aspect-ratio-16-9: 16 / 9;
  --ams-aspect-ratio-16-5: 16 / 5;
  --ams-border-width-s: 0.0625rem;
  --ams-border-width-m: 0.125rem;
  --ams-border-width-l: 0.1875rem;
  --ams-border-width-xl: 0.25rem;
  --ams-color-background: #ffffff;
  --ams-color-feedback-error: #ec0000;
  --ams-color-feedback-info: #009de6;
  --ams-color-feedback-success: #00a03c;
  --ams-color-feedback-warning: #ff9100;
  --ams-color-highlight-azure: #009de6;
  --ams-color-highlight-green: #00a03c;
  --ams-color-highlight-lime: #bed200;
  --ams-color-highlight-magenta: #e50082;
  --ams-color-highlight-orange: #ff9100;
  --ams-color-highlight-purple: #a00078;
  --ams-color-highlight-yellow: #ffe600;
  --ams-color-interactive-contrast: #000000;
  --ams-color-interactive: #004699;
  --ams-color-interactive-disabled: #767676;
  --ams-color-interactive-hover: #003677;
  --ams-color-interactive-invalid: #ec0000;
  --ams-color-interactive-invalid-hover: #b70000;
  --ams-color-interactive-inverse: #ffffff;
  --ams-color-interactive-secondary: #181818;
  --ams-color-separator: #d1d1d1;
  --ams-color-text: #181818;
  --ams-color-text-inverse: #ffffff;
  --ams-color-text-secondary: #767676;
  --ams-cursor-disabled: not-allowed;
  --ams-cursor-interactive: pointer;
  --ams-focus-outline-offset: 0.125rem;
  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
  --ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
  --ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
  --ams-space-l: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
  --ams-space-xl: clamp(2.25rem, 1.9375rem + 1.5625vw, 3.5rem);
  --ams-space-2xl: clamp(2.8125rem, 2.2031rem + 3.0469vw, 5.25rem);
  --ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
  --ams-typography-hyphenate-limit-chars: 12 8 4;
  --ams-typography-body-text-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
  --ams-typography-body-text-font-weight: 400;
  --ams-typography-body-text-line-height: 1.6667;
  --ams-typography-body-text-bold-font-weight: 800;
  --ams-typography-body-text-small-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
  --ams-typography-body-text-small-line-height: 1.5152;
  --ams-typography-body-text-large-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
  --ams-typography-body-text-large-line-height: 1.5152;
  --ams-typography-body-text-x-large-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
  --ams-typography-body-text-x-large-line-height: 1.3776;
  --ams-typography-heading-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
  --ams-typography-heading-0-line-height: 1.1386;
  --ams-typography-heading-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
  --ams-typography-heading-1-line-height: 1.1754;
  --ams-typography-heading-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
  --ams-typography-heading-2-line-height: 1.2133;
  --ams-typography-heading-3-line-height: 1.2524;
  --ams-typography-heading-4-line-height: 1.2928;
  --ams-typography-heading-5-line-height: 1.3345;
  --ams-typography-heading-6-line-height: 1.3776;
  --ams-typography-heading-font-weight: 800;
  --ams-links-text-underline-offset: 0.3333em;
  --ams-links-hover-text-underline-offset: 0.2778em;
  --ams-links-subtle-text-decoration-line: none;
  --ams-links-subtle-hover-text-decoration-line: underline;
  --ams-accordion-button-padding-inline: 0;
  --ams-accordion-panel-padding-block: 0;
  --ams-accordion-panel-padding-inline: 0;
  --ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
  --ams-breadcrumb-separator-block-size: 1ex;
  --ams-breadcrumb-separator-inline-size: 1ex;
  --ams-button-tertiary-background-color: transparent;
  --ams-button-tertiary-disabled-background-color: transparent;
  --ams-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
  --ams-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
  --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
  --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
  --ams-description-list-narrow-grid-template-columns: 1fr 4fr;
  --ams-description-list-medium-grid-template-columns: 1fr 2fr;
  --ams-description-list-wide-grid-template-columns: 1fr 1fr;
  --ams-dialog-max-inline-size: 48rem;
  --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
  --ams-dialog-body-padding-block: 0;
  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
  --ams-footer-spotlight-background-color: #004699;
  --ams-grid-column-count: 4;
  --ams-grid-medium-column-count: 8;
  --ams-grid-wide-column-count: 12;
  --ams-icon-button-hover-background-color: rgb(0 70 153 / 12.5%);
  --ams-icon-button-contrast-hover-background-color: rgb(0 0 0 / 12.5%);
  --ams-image-slider-thumbnails-thumbnail-background-color: transparent;
  --ams-image-slider-thumbnails-thumbnail-opacity: 40%;
  --ams-image-slider-thumbnails-thumbnail-in-view-opacity: 100%;
  --ams-image-slider-thumbnails-thumbnail-hover-opacity: 100%;
  --ams-link-inline-font-family: inherit;
  --ams-link-inline-font-size: inherit;
  --ams-link-inline-line-height: inherit;
  --ams-logo-min-block-size: 2.5rem;
  --ams-logo-emblem-color: #ec0000;
  --ams-logo-title-color: #ec0000;
  --ams-mega-menu-list-category-column-width: 20rem;
  --ams-ordered-list-list-style-type: decimal;
  --ams-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
  --ams-ordered-list-item-padding-inline-start: 0.25rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
  --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
  --ams-ordered-list-ordered-list-padding-block-end: 0;
  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
  --ams-radio-hover-indicator-stroke-width: 3px;
  --ams-radio-circle-stroke-width: 2px;
  --ams-radio-icon-container-inline-size: 1.5rem;
  --ams-screen-wide-max-inline-size: 100rem;
  --ams-screen-x-wide-max-inline-size: 132rem;
  --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
  --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
  --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
  --ams-switch-background-color: #767676;
  --ams-switch-inline-size: 3.5rem;
  --ams-switch-thumb-inline-size: 1.75rem;
  --ams-switch-thumb-block-size: 1.75rem;
  --ams-tabs-button-outline-offset: -0.25rem;
  --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
  --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
  --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
  --ams-unordered-list-list-style-type: '\2022';
  --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
  --ams-unordered-list-item-padding-inline-start: 0.875rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
  --ams-unordered-list-unordered-list-list-style-type: '\2013';
  --ams-unordered-list-unordered-list-padding-block-end: 0;
  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-x-large-font-size);
  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-large-font-size);
  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-font-size);
  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-links-color: var(--ams-color-interactive);
  --ams-links-text-decoration-thickness: var(--ams-border-width-m);
  --ams-links-hover-color: var(--ams-color-interactive-hover);
  --ams-links-hover-text-decoration-thickness: var(--ams-border-width-l);
  --ams-links-contrast-color: var(--ams-color-interactive-contrast);
  --ams-links-contrast-hover-color: var(--ams-color-interactive-contrast);
  --ams-links-inverse-color: var(--ams-color-interactive-inverse);
  --ams-links-inverse-hover-color: var(--ams-color-interactive-inverse);
  --ams-accordion-gap: var(--ams-space-m);
  --ams-accordion-button-color: var(--ams-color-interactive);
  --ams-accordion-button-cursor: var(--ams-cursor-interactive);
  --ams-accordion-button-font-family: var(--ams-typography-font-family);
  --ams-accordion-button-font-weight: var(--ams-typography-heading-font-weight);
  --ams-accordion-button-gap: var(--ams-space-s);
  --ams-accordion-button-line-height: var(--ams-typography-heading-4-line-height);
  --ams-accordion-button-outline-offset: var(--ams-focus-outline-offset);
  --ams-accordion-button-padding-block: var(--ams-space-s);
  --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
  --ams-action-group-gap: var(--ams-space-m);
  --ams-alert-background-color: var(--ams-color-background);
  --ams-alert-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-info);
  --ams-alert-forced-colors-border-width: var(--ams-border-width-xl);
  --ams-alert-severity-indicator-background-color: var(--ams-color-feedback-info);
  --ams-alert-severity-indicator-padding-block: var(--ams-space-m);
  --ams-alert-severity-indicator-padding-inline: var(--ams-space-xs);
  --ams-alert-content-gap: var(--ams-space-s);
  --ams-alert-content-padding-block: var(--ams-space-m);
  --ams-alert-content-padding-inline: var(--ams-space-m);
  --ams-alert-error-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-error);
  --ams-alert-error-severity-indicator-background-color: var(--ams-color-feedback-error);
  --ams-alert-success-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-success);
  --ams-alert-success-severity-indicator-background-color: var(--ams-color-feedback-success);
  --ams-alert-warning-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-warning);
  --ams-alert-warning-severity-indicator-background-color: var(--ams-color-feedback-warning);
  --ams-avatar-aspect-ratio: var(--ams-aspect-ratio-1-1);
  --ams-avatar-background-color: var(--ams-color-highlight-purple);
  --ams-avatar-color: var(--ams-color-text-inverse);
  --ams-avatar-font-family: var(--ams-typography-font-family);
  --ams-avatar-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-avatar-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-avatar-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-avatar-padding-block: var(--ams-space-xs);
  --ams-avatar-padding-inline: var(--ams-space-xs);
  --ams-avatar-forced-colors-border-width: var(--ams-border-width-m);
  --ams-avatar-azure-background-color: var(--ams-color-highlight-azure);
  --ams-avatar-azure-color: var(--ams-color-text);
  --ams-avatar-green-background-color: var(--ams-color-highlight-green);
  --ams-avatar-green-color: var(--ams-color-text-inverse);
  --ams-avatar-lime-background-color: var(--ams-color-highlight-lime);
  --ams-avatar-lime-color: var(--ams-color-text);
  --ams-avatar-magenta-background-color: var(--ams-color-highlight-magenta);
  --ams-avatar-magenta-color: var(--ams-color-text-inverse);
  --ams-avatar-orange-background-color: var(--ams-color-highlight-orange);
  --ams-avatar-orange-color: var(--ams-color-text);
  --ams-avatar-yellow-background-color: var(--ams-color-highlight-yellow);
  --ams-avatar-yellow-color: var(--ams-color-text);
  --ams-badge-background-color: var(--ams-color-feedback-success);
  --ams-badge-color: var(--ams-color-text-inverse);
  --ams-badge-font-family: var(--ams-typography-font-family);
  --ams-badge-font-size: var(--ams-typography-body-text-font-size);
  --ams-badge-font-weight: var(--ams-typography-body-text-bold-font-weight);
  --ams-badge-line-height: var(--ams-typography-body-text-line-height);
  --ams-badge-padding-inline: var(--ams-space-xs);
  --ams-badge-azure-background-color: var(--ams-color-feedback-info);
  --ams-badge-azure-color: var(--ams-color-text);
  --ams-badge-lime-background-color: var(--ams-color-highlight-lime);
  --ams-badge-lime-color: var(--ams-color-text);
  --ams-badge-magenta-background-color: var(--ams-color-highlight-magenta);
  --ams-badge-magenta-color: var(--ams-color-text-inverse);
  --ams-badge-orange-background-color: var(--ams-color-feedback-warning);
  --ams-badge-orange-color: var(--ams-color-text);
  --ams-badge-purple-background-color: var(--ams-color-highlight-purple);
  --ams-badge-purple-color: var(--ams-color-text-inverse);
  --ams-badge-red-background-color: var(--ams-color-feedback-error);
  --ams-badge-red-color: var(--ams-color-text-inverse);
  --ams-badge-yellow-background-color: var(--ams-color-highlight-yellow);
  --ams-badge-yellow-color: var(--ams-color-text);
  --ams-blockquote-color: var(--ams-color-text);
  --ams-blockquote-font-family: var(--ams-typography-font-family);
  --ams-blockquote-font-size: var(--ams-typography-body-text-x-large-font-size);
  --ams-blockquote-font-weight: var(--ams-typography-body-text-bold-font-weight);
  --ams-blockquote-line-height: var(--ams-typography-body-text-x-large-line-height);
  --ams-blockquote-inverse-color: var(--ams-color-text-inverse);
  --ams-breadcrumb-font-family: var(--ams-typography-font-family);
  --ams-breadcrumb-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-breadcrumb-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-breadcrumb-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-breadcrumb-separator-margin-inline: var(--ams-space-xs);
  --ams-breadcrumb-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-breadcrumb-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-breadcrumb-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-button-cursor: var(--ams-cursor-interactive);
  --ams-button-font-family: var(--ams-typography-font-family);
  --ams-button-font-size: var(--ams-typography-body-text-font-size);
  --ams-button-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-button-line-height: var(--ams-typography-body-text-line-height);
  --ams-button-gap: var(--ams-space-s);
  --ams-button-outline-offset: var(--ams-focus-outline-offset);
  --ams-button-padding-block: var(--ams-space-s);
  --ams-button-padding-inline: var(--ams-space-m);
  --ams-button-disabled-cursor: var(--ams-cursor-disabled);
  --ams-button-forced-color-mode-border: var(--ams-border-width-m) solid;
  --ams-button-primary-background-color: var(--ams-color-interactive);
  --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
  --ams-button-primary-color: var(--ams-color-text-inverse);
  --ams-button-primary-disabled-background-color: var(--ams-color-interactive-disabled);
  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
  --ams-button-primary-hover-background-color: var(--ams-color-interactive-hover);
  --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
  --ams-button-secondary-background-color: var(--ams-color-background);
  --ams-button-secondary-color: var(--ams-color-interactive);
  --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
  --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
  --ams-button-secondary-disabled-background-color: var(--ams-color-background);
  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
  --ams-button-tertiary-color: var(--ams-color-interactive);
  --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
  --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
  --ams-button-icon-only-padding-block: var(--ams-space-s);
  --ams-button-icon-only-padding-inline: var(--ams-space-s);
  --ams-card-gap: var(--ams-space-s);
  --ams-card-heading-group-gap: var(--ams-space-s);
  --ams-card-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-card-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-card-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-card-outline-offset: var(--ams-focus-outline-offset);
  --ams-character-count-color: var(--ams-color-text);
  --ams-character-count-font-family: var(--ams-typography-font-family);
  --ams-character-count-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-character-count-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-character-count-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-character-count-error-color: var(--ams-color-feedback-error);
  --ams-checkbox-color: var(--ams-color-text);
  --ams-checkbox-cursor: var(--ams-cursor-interactive);
  --ams-checkbox-font-family: var(--ams-typography-font-family);
  --ams-checkbox-font-size: var(--ams-typography-body-text-font-size);
  --ams-checkbox-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-checkbox-gap: var(--ams-space-s);
  --ams-checkbox-line-height: var(--ams-typography-body-text-line-height);
  --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
  --ams-checkbox-checkmark-border-color: var(--ams-color-interactive);
  --ams-checkbox-checkmark-border-width: var(--ams-border-width-m);
  --ams-checkbox-checkmark-checked-background-color: var(--ams-color-interactive);
  --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-interactive-hover);
  --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-m);
  --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-checkmark-hover-border-color: var(--ams-color-interactive-hover);
  --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-l);
  --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-interactive-invalid);
  --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-interactive-invalid);
  --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-interactive-invalid-hover);
  --ams-checkbox-checkmark-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
  --ams-checkbox-checkmark-invalid-indeterminate-background-color: var(--ams-color-interactive-invalid);
  --ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--ams-color-interactive-invalid-hover);
  --ams-checkbox-checkmark-indeterminate-background-color: var(--ams-color-interactive);
  --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-interactive-hover);
  --ams-checkbox-disabled-cursor: var(--ams-cursor-disabled);
  --ams-checkbox-disabled-color: var(--ams-color-interactive-disabled);
  --ams-checkbox-hover-color: var(--ams-color-interactive-hover);
  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-m);
  --ams-column-gap-x-small: var(--ams-space-xs);
  --ams-column-gap-small: var(--ams-space-s);
  --ams-column-gap-medium: var(--ams-space-m);
  --ams-column-gap-large: var(--ams-space-l);
  --ams-column-gap-x-large: var(--ams-space-xl);
  --ams-date-input-background-color: var(--ams-color-background);
  --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
  --ams-date-input-color: var(--ams-color-text);
  --ams-date-input-font-family: var(--ams-typography-font-family);
  --ams-date-input-font-size: var(--ams-typography-body-text-font-size);
  --ams-date-input-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-date-input-line-height: var(--ams-typography-body-text-line-height);
  --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
  --ams-date-input-padding-block: var(--ams-space-s);
  --ams-date-input-padding-inline: var(--ams-space-m);
  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
  --ams-date-input-disabled-background-color: var(--ams-color-background);
  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
  --ams-date-input-disabled-color: var(--ams-color-interactive-disabled);
  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
  --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
  --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
  --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
  --ams-description-list-color: var(--ams-color-text);
  --ams-description-list-column-gap: var(--ams-space-l);
  --ams-description-list-font-family: var(--ams-typography-font-family);
  --ams-description-list-font-size: var(--ams-typography-body-text-font-size);
  --ams-description-list-line-height: var(--ams-typography-body-text-line-height);
  --ams-description-list-row-gap: var(--ams-space-s);
  --ams-description-list-inverse-color: var(--ams-color-text-inverse);
  --ams-description-list-term-font-weight: var(--ams-typography-body-text-bold-font-weight);
  --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-description-list-description-padding-inline-start: var(--ams-space-l);
  --ams-dialog-background-color: var(--ams-color-background);
  --ams-dialog-border: var(--ams-border-width-m) solid var(--ams-dialog-background-color);
  --ams-dialog-gap: var(--ams-space-m);
  --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-xl));
  --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
  --ams-dialog-header-gap: var(--ams-space-m);
  --ams-dialog-header-padding-block: var(--ams-space-xl) 0;
  --ams-dialog-header-padding-inline: var(--ams-space-2xl);
  --ams-dialog-body-padding-inline: var(--ams-space-2xl);
  --ams-dialog-footer-padding-block: 0 var(--ams-space-xl);
  --ams-dialog-footer-padding-inline: var(--ams-space-2xl);
  --ams-error-message-color: var(--ams-color-feedback-error);
  --ams-error-message-font-family: var(--ams-typography-font-family);
  --ams-error-message-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-error-message-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-error-message-gap: var(--ams-space-xs);
  --ams-error-message-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
  --ams-field-set-legend-color: var(--ams-color-text);
  --ams-field-set-legend-font-family: var(--ams-typography-font-family);
  --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
  --ams-field-set-legend-line-height: var(--ams-typography-heading-4-line-height);
  --ams-field-set-legend-margin-block-end: var(--ams-space-m);
  --ams-field-gap: var(--ams-space-s);
  --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
  --ams-field-invalid-padding-inline-start: var(--ams-space-m);
  --ams-figure-gap: var(--ams-space-s);
  --ams-figure-caption-color: var(--ams-color-text);
  --ams-figure-caption-font-family: var(--ams-typography-font-family);
  --ams-figure-caption-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-figure-caption-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-figure-caption-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-figure-caption-inverse-color: var(--ams-color-text-inverse);
  --ams-file-input-background-color: var(--ams-color-background);
  --ams-file-input-border: var(--ams-border-width-s) dashed var(--ams-color-interactive-secondary);
  --ams-file-input-color: var(--ams-color-text);
  --ams-file-input-cursor: var(--ams-cursor-interactive);
  --ams-file-input-font-family: var(--ams-typography-font-family);
  --ams-file-input-font-size: var(--ams-typography-body-text-font-size);
  --ams-file-input-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-file-input-line-height: var(--ams-typography-body-text-line-height);
  --ams-file-input-outline-offset: calc(var(--ams-focus-outline-offset) * 2); /* Compensate for the dashed border */
  --ams-file-input-padding-block: var(--ams-space-m);
  --ams-file-input-padding-inline: var(--ams-space-m);
  --ams-file-input-disabled-color: var(--ams-color-interactive-disabled);
  --ams-file-input-disabled-cursor: var(--ams-cursor-disabled);
  --ams-file-input-file-selector-button-background-color: var(--ams-color-background);
  --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
  --ams-file-input-file-selector-button-color: var(--ams-color-interactive);
  --ams-file-input-file-selector-button-cursor: var(--ams-cursor-interactive);
  --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-m);
  --ams-file-input-file-selector-button-padding-block: var(--ams-space-s);
  --ams-file-input-file-selector-button-padding-inline: var(--ams-space-m);
  --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
  --ams-file-input-file-selector-button-hover-color: var(--ams-color-interactive-hover);
  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-interactive-disabled);
  --ams-file-input-file-selector-button-disabled-cursor: var(--ams-cursor-disabled);
  --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-m) solid;
  --ams-file-list-gap: var(--ams-space-m);
  --ams-file-list-padding-block: var(--ams-space-m);
  --ams-file-list-file-font-family: var(--ams-typography-font-family);
  --ams-file-list-file-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-file-list-file-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-file-list-file-gap: var(--ams-space-s);
  --ams-file-list-file-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-file-list-file-details-color: var(--ams-color-text-secondary);
  --ams-footer-menu-column-gap: var(--ams-space-l);
  --ams-footer-menu-padding-block: var(--ams-space-l);
  --ams-footer-menu-row-gap: var(--ams-space-xs);
  --ams-footer-menu-link-font-family: var(--ams-typography-font-family);
  --ams-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-grid-column-gap: var(--ams-space-xl);
  --ams-grid-padding-block-s: var(--ams-space-l);
  --ams-grid-padding-block-m: var(--ams-space-xl);
  --ams-grid-padding-block-l: var(--ams-space-2xl);
  --ams-grid-padding-inline: var(--ams-space-l);
  --ams-grid-row-gap-s: var(--ams-space-l);
  --ams-grid-row-gap-m: var(--ams-space-xl);
  --ams-grid-row-gap-l: var(--ams-space-2xl);
  --ams-grid-medium-padding-inline: var(--ams-space-xl);
  --ams-grid-wide-padding-inline: var(--ams-space-2xl);
  --ams-header-font-family: var(--ams-typography-font-family);
  --ams-header-padding-block: var(--ams-space-l);
  --ams-header-logo-link-column-gap: var(--ams-space-m);
  --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-header-brand-name-color: var(--ams-color-text);
  --ams-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
  --ams-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
  --ams-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
  --ams-header-menu-column-gap: var(--ams-space-l);
  --ams-header-menu-row-gap: var(--ams-space-xs);
  --ams-header-menu-item-column-gap: var(--ams-space-xs);
  --ams-header-menu-item-font-family: var(--ams-typography-font-family);
  --ams-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
  --ams-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
  --ams-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
  --ams-header-menu-item-padding-block: var(--ams-space-xs);
  --ams-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-header-navigation-column-gap: var(--ams-space-l);
  --ams-header-navigation-row-gap: var(--ams-space-s);
  --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
  --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
  --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
  --ams-heading-2-line-height: var(--ams-typography-heading-2-line-height);
  --ams-heading-3-line-height: var(--ams-typography-heading-3-line-height);
  --ams-heading-4-line-height: var(--ams-typography-heading-4-line-height);
  --ams-heading-5-line-height: var(--ams-typography-heading-5-line-height);
  --ams-heading-6-line-height: var(--ams-typography-heading-6-line-height);
  --ams-heading-color: var(--ams-color-text);
  --ams-heading-font-family: var(--ams-typography-font-family);
  --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
  --ams-heading-inverse-color: var(--ams-color-text-inverse);
  --ams-hint-color: var(--ams-color-text-secondary);
  --ams-icon-button-color: var(--ams-color-interactive);
  --ams-icon-button-cursor: var(--ams-cursor-interactive);
  --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
  --ams-icon-button-hover-color: var(--ams-color-interactive-hover);
  --ams-icon-button-disabled-color: var(--ams-color-interactive-disabled);
  --ams-icon-button-disabled-cursor: var(--ams-cursor-disabled);
  --ams-icon-button-contrast-color: var(--ams-color-interactive-contrast);
  --ams-icon-button-contrast-hover-color: var(--ams-color-interactive-contrast);
  --ams-icon-button-contrast-disabled-color: var(--ams-color-interactive-disabled);
  --ams-icon-button-inverse-background-color: var(--ams-color-interactive);
  --ams-icon-button-inverse-color: var(--ams-color-interactive-inverse);
  --ams-icon-button-inverse-hover-background-color: var(--ams-color-interactive-hover);
  --ams-icon-button-inverse-hover-color: var(--ams-color-interactive-inverse);
  --ams-icon-button-inverse-disabled-color: var(--ams-color-interactive-inverse);
  --ams-icon-button-inverse-disabled-background-color: var(--ams-color-interactive-disabled);
  --ams-icon-font-size: var(--ams-typography-body-text-font-size);
  --ams-icon-line-height: var(--ams-typography-body-text-line-height);
  --ams-icon-small-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-icon-small-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-icon-large-font-size: var(--ams-typography-body-text-large-font-size);
  --ams-icon-large-line-height: var(--ams-typography-body-text-large-line-height);
  --ams-icon-heading-3-line-height: var(--ams-typography-heading-3-line-height);
  --ams-icon-heading-4-line-height: var(--ams-typography-heading-4-line-height);
  --ams-icon-heading-5-line-height: var(--ams-typography-heading-5-line-height);
  --ams-icon-heading-6-line-height: var(--ams-typography-heading-6-line-height);
  --ams-icon-inverse-color: var(--ams-color-text-inverse);
  --ams-image-slider-gap: var(--ams-space-xs);
  --ams-image-slider-scroller-gap: var(--ams-space-xs);
  --ams-image-slider-scroller-outline-offset: var(--ams-focus-outline-offset);
  --ams-image-slider-thumbnails-gap: var(--ams-space-xs);
  --ams-image-slider-thumbnails-thumbnail-cursor: var(--ams-cursor-interactive);
  --ams-image-slider-thumbnails-thumbnail-outline-offset: var(--ams-focus-outline-offset);
  --ams-image-aspect-ratio: var(--ams-aspect-ratio-16-9);
  --ams-invalid-form-alert-outline-offset: var(--ams-focus-outline-offset);
  --ams-label-color: var(--ams-color-text);
  --ams-label-font-family: var(--ams-typography-font-family);
  --ams-label-font-weight: var(--ams-typography-heading-font-weight);
  --ams-label-line-height: var(--ams-typography-heading-4-line-height);
  --ams-link-list-gap: var(--ams-space-s);
  --ams-link-list-link-font-family: var(--ams-typography-font-family);
  --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
  --ams-link-list-link-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-link-list-link-gap: var(--ams-space-s);
  --ams-link-list-link-line-height: var(--ams-typography-body-text-line-height);
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-link-list-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-link-list-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-link-list-link-small-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-link-list-link-small-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-link-list-link-large-font-size: var(--ams-typography-body-text-large-font-size);
  --ams-link-list-link-large-line-height: var(--ams-typography-body-text-large-line-height);
  --ams-link-list-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-link-font-family: var(--ams-typography-font-family);
  --ams-link-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-link-inline-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-link-inline-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
  --ams-link-standalone-font-size: var(--ams-typography-body-text-font-size);
  --ams-link-standalone-line-height: var(--ams-typography-body-text-line-height);
  --ams-link-standalone-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-link-standalone-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
  --ams-logo-block-size: var(--ams-space-xl);
  --ams-logo-subsite-color: var(--ams-color-text);
  --ams-mark-background-color: var(--ams-color-highlight-yellow);
  --ams-mega-menu-list-category-column-gap: var(--ams-space-xl); /* Must have the same value as `ams.grid.column-gap`. */
  --ams-mega-menu-list-category-padding-block-start: var(--ams-space-m);
  --ams-mega-menu-list-category-padding-block-end: var(--ams-space-xl); /* Must have the same value as `ams.grid.row-gap.md`. */
  --ams-ordered-list-color: var(--ams-color-text);
  --ams-ordered-list-font-family: var(--ams-typography-font-family);
  --ams-ordered-list-font-size: var(--ams-typography-body-text-font-size);
  --ams-ordered-list-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-ordered-list-gap: var(--ams-space-m);
  --ams-ordered-list-line-height: var(--ams-typography-body-text-line-height);
  --ams-ordered-list-small-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-ordered-list-small-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-ordered-list-inverse-color: var(--ams-color-text-inverse);
  --ams-ordered-list-ordered-list-gap: var(--ams-space-s);
  --ams-ordered-list-ordered-list-padding-block-start: var(--ams-space-s);
  --ams-page-heading-color: var(--ams-color-text);
  --ams-page-heading-font-family: var(--ams-typography-font-family);
  --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
  --ams-page-heading-font-weight: var(--ams-typography-heading-font-weight);
  --ams-page-heading-line-height: var(--ams-typography-heading-0-line-height);
  --ams-page-heading-inverse-color: var(--ams-color-text-inverse);
  --ams-page-menu-column-gap: var(--ams-space-xl);
  --ams-page-menu-row-gap: var(--ams-space-m);
  --ams-page-menu-item-font-family: var(--ams-typography-font-family);
  --ams-page-menu-item-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-page-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-page-menu-item-gap: var(--ams-space-s);
  --ams-page-menu-item-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
  --ams-page-menu-item-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-page-menu-item-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-page-menu-item-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-pagination-font-family: var(--ams-typography-font-family);
  --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
  --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-pagination-line-height: var(--ams-typography-body-text-line-height);
  --ams-pagination-link-gap: var(--ams-space-xs);
  --ams-pagination-link-outline-offset: var(--ams-focus-outline-offset);
  --ams-pagination-link-padding-inline: var(--ams-space-s);
  --ams-pagination-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
  --ams-pagination-link-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
  --ams-pagination-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-paragraph-color: var(--ams-color-text);
  --ams-paragraph-font-family: var(--ams-typography-font-family);
  --ams-paragraph-font-size: var(--ams-typography-body-text-font-size);
  --ams-paragraph-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-paragraph-line-height: var(--ams-typography-body-text-line-height);
  --ams-paragraph-inverse-color: var(--ams-color-text-inverse);
  --ams-paragraph-small-font-size: var(--ams-typography-body-text-small-font-size);
  --ams-paragraph-small-line-height: var(--ams-typography-body-text-small-line-height);
  --ams-paragraph-large-font-size: var(--ams-typography-body-text-large-font-size);
  --ams-paragraph-large-line-height: var(--ams-typography-body-text-large-line-height);
  --ams-password-input-background-color: var(--ams-color-background);
  --ams-password-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
  --ams-password-input-color: var(--ams-color-text);
  --ams-password-input-font-family: var(--ams-typography-font-family);
  --ams-password-input-font-size: var(--ams-typography-body-text-font-size);
  --ams-password-input-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-password-input-line-height: var(--ams-typography-body-text-line-height);
  --ams-password-input-outline-offset: var(--ams-focus-outline-offset);
  --ams-password-input-padding-block: var(--ams-space-s);
  --ams-password-input-padding-inline: var(--ams-space-m);
  --ams-password-input-disabled-background-color: var(--ams-color-background);
  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
  --ams-password-input-disabled-color: var(--ams-color-interactive-disabled);
  --ams-password-input-disabled-cursor: var(--ams-cursor-disabled);
  --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
  --ams-password-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
  --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
  --ams-password-input-placeholder-color: var(--ams-color-text-secondary);
  --ams-radio-color: var(--ams-color-text);
  --ams-radio-cursor: var(--ams-cursor-interactive);
  --ams-radio-font-family: var(--ams-typography-font-family);
  --ams-radio-font-size: var(--ams-typography-body-text-font-size);
  --ams-radio-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-radio-gap: var(--ams-space-s);
  --ams-radio-line-height: var(--ams-typography-body-text-line-height);
  --ams-radio-outline-offset: var(--ams-focus-outline-offset);
  --ams-radio-text-underline-offset: var(--ams-links-text-underline-offset);
  --ams-radio-checked-indicator-fill: var(--ams-color-interactive);
  --ams-radio-checked-indicator-disabled-fill: var(--ams-color-interactive-disabled);
  --ams-radio-checked-indicator-disabled-invalid-fill: var(--ams-color-interactive-disabled);
  --ams-radio-checked-indicator-disabled-invalid-hover-fill: var(--ams-color-interactive-disabled);
  --ams-radio-checked-indicator-hover-fill: var(--ams-color-interactive-hover);
  --ams-radio-checked-indicator-invalid-fill: var(--ams-color-interactive-invalid);
  --ams-radio-checked-indicator-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
  --ams-radio-hover-indicator-hover-stroke: var(--ams-color-interactive-hover);
  --ams-radio-hover-indicator-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
  --ams-radio-circle-fill: var(--ams-color-background);
  --ams-radio-circle-stroke: var(--ams-color-interactive);
  --ams-radio-circle-disabled-stroke: var(--ams-color-interactive-disabled);
  --ams-radio-circle-disabled-invalid-stroke: var(--ams-color-interactive-disabled);
  --ams-radio-circle-disabled-invalid-hover-stroke: var(--ams-color-interactive-disabled);
  --ams-radio-circle-hover-stroke: var(--ams-color-interactive-hover);
  --ams-radio-circle-invalid-stroke: var(--ams-color-interactive-invalid);
  --ams-radio-circle-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
  --ams-radio-disabled-color: var(--ams-color-interactive-disabled);
  --ams-radio-disabled-cursor: var(--ams-cursor-disabled);
  --ams-radio-hover-color: var(--ams-color-interactive-hover);
  --ams-radio-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
  --ams-row-gap-x-small: var(--ams-space-xs);
  --ams-row-gap-small: var(--ams-space-s);
  --ams-row-gap-medium: var(--ams-space-m);
  --ams-row-gap-large: var(--ams-space-l);
  --ams-row-gap-x-large: var(--ams-space-xl);
  --ams-screen-background-color: var(--ams-color-background);
  --ams-search-field-input-background-color: var(--ams-color-background);
  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
  --ams-search-field-input-color: var(--ams-color-text);
  --ams-search-field-input-font-family: var(--ams-typography-font-family);
  --ams-search-field-input-font-size: var(--ams-typography-body-text-font-size);
  --ams-search-field-input-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-search-field-input-line-height: var(--ams-typography-body-text-line-height);
  --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
  --ams-search-field-input-padding-block: var(--ams-space-s);
  --ams-search-field-input-padding-inline: var(--ams-space-m);
  --ams-search-field-input-cancel-button-block-size: var(--ams-typography-body-text-font-size);
  --ams-search-field-input-cancel-button-color: var(--ams-color-interactive);
  --ams-search-field-input-cancel-button-cursor: var(--ams-cursor-interactive);
  --ams-search-field-input-cancel-button-inline-size: var(--ams-typography-body-text-font-size);
  --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
  --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
  --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
  --ams-search-field-input-placeholder-color: var(--ams-color-text-secondary);
  --ams-select-background-color: var(--ams-color-background);
  --ams-select-background-position: right var(--ams-space-m) center;
  --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
  --ams-select-color: var(--ams-color-text);
  --ams-select-font-family: var(--ams-typography-font-family);
  --ams-select-font-size: var(--ams-typography-body-text-font-size);
  --ams-select-font-weight: var(--ams-typography-body-text-font-weight);
  --ams-select-line-height: var(--ams-typography-body-text-line-height);
  --ams-select-outline-offset: var(--ams-focus-outline-offset);
  --ams-select-padding-block: var(--ams-space-s);
  --ams-select-padding-inline: var(--ams-spac