@utrecht/design-tokens 2.1.0 → 2.2.0

package/dist/index.css

@@ -4,12 +4,10 @@
  * All rights reserved
  */
 /**
- * Do not edit directly
- * Generated on Tue, 01 Oct 2024 19:52:18 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 /**
- * Do not edit directly
- * Generated on Tue, 01 Oct 2024 19:52:16 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 /**
  * @license SEE LICENSE.md
@@ -31,9 +29,8 @@
     --utrecht-paragraph-lead-font-size: 1.25em; /* 20px on desktop min-width-60em */
   }
 }
-.utrecht-theme,
-.utrecht-theme ::backdrop {
-  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+.utrecht-theme {
+  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
   --denhaag-process-steps-sub-step-marker-size: 12px;
   --denhaag-process-steps-step-marker-size: 28px;
   --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -62,8 +59,6 @@
   --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
   --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
   --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
-  --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
-  --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-icon-scale-4xl: 48px;
   --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -128,7 +123,6 @@
   --utrecht-toptask-link-min-inline-size: 15rem;
   --utrecht-toptask-link-min-block-size: 8.25rem;
   --utrecht-toptask-link-line-height: 1.2;
-  --utrecht-toptask-link-font-size: 1rem;
   --utrecht-textbox-border-bottom-width: 3px;
   --utrecht-textarea-border-bottom-width: 3px;
   --utrecht-textarea-border-block-end-width: 3px;
@@ -137,12 +131,11 @@
   --utrecht-table-cell-padding-inline-end: 0.4em;
   --utrecht-table-cell-padding-block-start: 0.5em;
   --utrecht-table-cell-padding-block-end: 0.5em;
-  --utrecht-table-cell-line-height: 24px;
+  --utrecht-table-cell-line-height: 1.5rem;
   --utrecht-table-footer-sticky-border-block-start-width: 2px;
   --utrecht-table-header-sticky-border-block-end-width: 2px;
   --utrecht-table-caption-margin-block-end: 1em;
   --utrecht-table-caption-text-align: start;
-  --utrecht-table-caption-font-size: 1.125em;
   --utrecht-table-margin-block-end: 0;
   --utrecht-separator-block-size: 8px;
   --utrecht-select-border-block-end-width: 3px;
@@ -181,7 +174,6 @@
   --utrecht-pagination-page-link-background-color: transparent;
   --utrecht-pagination-margin-block-end: 1em;
   --utrecht-pagination-margin-block-start: 0;
-  --utrecht-pagination-font-size: 14px;
   --utrecht-page-padding-inline-start: 2em;
   --utrecht-page-padding-block-end: 1em;
   --utrecht-page-padding-inline-end: 2em;
@@ -207,9 +199,9 @@
   --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-topnav-link-focus-text-decoration: none;
   --utrecht-topnav-link-focus-border-type: dotted;
-  --utrecht-mapcontrolbutton-focus-text-decoration: none;
-  --utrecht-mapcontrolbutton-margin-inline-end: 0;
   --utrecht-mapcontrolbutton-margin-inline-start: 0;
+  --utrecht-mapcontrolbutton-margin-inline-end: 0;
+  --utrecht-mapcontrolbutton-focus-text-decoration: none;
   --utrecht-mapcontrolbutton-border-radius: 2px;
   --utrecht-map-marker-icon-size: 30px;
   --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -226,7 +218,7 @@
   --utrecht-link-icon-size: 1.2em;
   --utrecht-link-hover-text-decoration-thickness: 3px;
   --utrecht-link-hover-text-decoration: underline;
-  --utrecht-link-focus-text-decoration: none;
+  --utrecht-link-focus-visible-text-decoration: none;
   --utrecht-link-text-underline-offset: 3px;
   --utrecht-link-text-decoration: underline;
   --utrecht-link-social-hover-transform-scale: 1.1;
@@ -263,10 +255,8 @@
   --utrecht-form-toggle-border-radius: 10em;
   --utrecht-form-toggle-border-style: solid;
   --utrecht-form-toggle-border-color: transparent;
-  --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
+  --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
   --utrecht-form-label-font-size: 1em;
-  --utrecht-form-fieldset-legend-line-height: 1.4;
-  --utrecht-form-fieldset-legend-font-size: 1rem;
   --utrecht-form-field-invalid-border-inline-start-width: 3px;
   --utrecht-form-control-block-size: 42px;
   --utrecht-form-control-read-only-border-color: transparent;
@@ -277,8 +267,6 @@
   --utrecht-form-control-max-inline-size: 28em;
   --utrecht-form-control-border-radius: 0;
   --utrecht-focus-outline-style: dotted;
-  --utrecht-figure-caption-line-height: 20px;
-  --utrecht-figure-caption-font-size: 14px;
   --utrecht-figure-caption-color: #727272;
   --utrecht-drawer-max-inline-size: 320px;
   --utrecht-drawer-max-block-size: 240px;
@@ -341,20 +329,18 @@
   --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
   --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
   --utrecht-pointer-target-min-size: 44px;
-  --utrecht-action-inert-cursor: default;
-  --utrecht-action-activate-cursor: pointer;
   --utrecht-action-submit-cursor: pointer;
   --utrecht-action-navigate-cursor: pointer;
+  --utrecht-action-inert-cursor: default;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
+  --utrecht-action-activate-cursor: pointer;
   --utrecht-column-layout-column-width: 350px;
   --utrecht-column-layout-column-rule-width: 2px;
   --utrecht-code-block-padding-inline-end: 20px;
   --utrecht-code-block-padding-inline-start: 20px;
   --utrecht-code-block-padding-block-end: 20px;
   --utrecht-code-block-padding-block-start: 20px;
-  --utrecht-code-block-line-height: 24px;
-  --utrecht-code-block-font-size: 16px;
   --utrecht-checkbox-margin-block-start: 0;
   --utrecht-checkbox-focus-border-width: 2px;
   --utrecht-checkbox-size: 24px;
@@ -374,7 +360,7 @@
   --utrecht-calendar-table-days-item-day-border-color: transparent;
   --utrecht-calendar-table-days-item-day-border-width: 2px;
   --utrecht-calendar-table-days-item-day-size: 44px;
-  --utrecht-calendar-table-weeks-item-line-height: 24px;
+  --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
   --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
   --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
   --utrecht-calendar-table-weeks-item-width: 44px;
@@ -403,15 +389,13 @@
   --utrecht-breadcrumb-nav-min-block-size: 34px;
   --utrecht-blockquote-margin-block-end: 1.6em;
   --utrecht-blockquote-margin-block-start: 1.6em;
-  --utrecht-blockquote-content-font-size: 1.125rem;
-  --utrecht-blockquote-attribution-font-size: 0.75rem;
   --utrecht-blockquote-margin-inline-end: 1.6em;
   --utrecht-blockquote-margin-inline-start: 1.6em;
   --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
   --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
   --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
   --utrecht-backdrop-reduced-transparency-opacity: 0.98;
-  --utrecht-backdrop-fade-in-animation-duration: 0.4s;
+  --utrecht-backdrop-fade-in-animation-duration: 400ms;
   --utrecht-backdrop-opacity: 0.8;
   --utrecht-article-max-inline-size: 780px;
   --utrecht-alert-icon-inset-block-start: 6px;
@@ -472,6 +456,7 @@
   --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
   --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
   --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
+  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
   --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -490,6 +475,7 @@
   --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
   --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
   --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-surface-color: var(--utrecht-color-grey-10);
@@ -504,7 +490,7 @@
   --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
   --utrecht-spotlight-section-color: var(--utrecht-color-black);
   --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
-  --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
   --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -573,6 +559,7 @@
   --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
   --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
+  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-page-color: var(--utrecht-color-black);
   --utrecht-page-background-color: var(--utrecht-color-white);
   --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -584,7 +571,7 @@
   --utrecht-page-footer-color: var(--utrecht-color-white);
   --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
-  --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
+  --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
   --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
   --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -612,6 +599,12 @@
   --utrecht-nav-bar-background-color: var(--utrecht-color-white);
   --utrecht-mark-color: var(--utrecht-color-black);
   --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
+  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
+  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
+  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
   --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
   --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
   --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
@@ -620,12 +613,6 @@
   --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
-  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
-  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
-  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
   --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
   --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
@@ -641,10 +628,10 @@
   --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
-  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
-  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
   --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
+  --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
+  --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
   --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-listbox-option-active-color: var(--utrecht-color-black);
   --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -706,7 +693,9 @@
   --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
   --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
   --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
+  --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
   --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
   --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
   --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -731,6 +720,8 @@
   --utrecht-focus-outline-width: var(--utrecht-border-width-md);
   --utrecht-focus-outline-color: var(--utrecht-color-black);
   --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
+  --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
   --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
   --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -766,6 +757,8 @@
   --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
   --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
   --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
+  --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
+  --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-code-block-color: var(--utrecht-color-black);
   --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
   --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -869,7 +862,6 @@
   --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-border-color: var(--utrecht-color-grey-80);
   --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
-  --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
   --utrecht-button-active-color: var(--utrecht-color-white);
   --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
   --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -880,6 +872,7 @@
   --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
   --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
   --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
+  --utrecht-button-column-gap: var(--utrecht-space-text-xs);
   --utrecht-button-color: var(--utrecht-color-grey-40);
   --utrecht-button-border-color: var(--utrecht-color-grey-40);
   --utrecht-button-background-color: var(--utrecht-color-white);
@@ -898,6 +891,8 @@
   --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
   --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
+  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
   --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
   --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
   --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -975,7 +970,7 @@
   --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
   --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
   --utrecht-paragraph-lead-color: var(--utrecht-document-color);
-  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
+  --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
   --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
   --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
   --utrecht-link-visited-color: var(--utrecht-link-color);
@@ -1040,9 +1035,7 @@
   --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
 }
 .utrecht-theme utrecht-page-footer,
-.utrecht-theme .utrecht-page-footer,
-.utrecht-theme ::backdrop utrecht-page-footer,
-.utrecht-theme ::backdrop .utrecht-page-footer {
+.utrecht-theme .utrecht-page-footer {
   --utrecht-heading-2-color: var(--utrecht-color-white);
   --utrecht-heading-2-font-size: 1em;
   --utrecht-heading-3-color: var(--utrecht-color-white);
@@ -1052,10 +1045,8 @@
 
 @media (prefers-color-scheme: dark) {
   .utrecht-theme--media-query,
-  .utrecht-theme--media-query ::backdrop,
-  .utrecht-theme--media-query-color-scheme,
-  .utrecht-theme--media-query-color-scheme ::backdrop {
-    --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
+  .utrecht-theme--media-query-color-scheme {
+    --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
     --denhaag-process-steps-sub-step-marker-size: 12px;
     --denhaag-process-steps-step-marker-size: 28px;
     --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -1084,8 +1075,6 @@
     --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
     --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
     --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
-    --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
-    --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
     --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
     --utrecht-icon-scale-4xl: 48px;
     --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -1150,7 +1139,6 @@
     --utrecht-toptask-link-min-inline-size: 15rem;
     --utrecht-toptask-link-min-block-size: 8.25rem;
     --utrecht-toptask-link-line-height: 1.2;
-    --utrecht-toptask-link-font-size: 1rem;
     --utrecht-textbox-border-bottom-width: 3px;
     --utrecht-textarea-border-bottom-width: 3px;
     --utrecht-textarea-border-block-end-width: 3px;
@@ -1159,12 +1147,11 @@
     --utrecht-table-cell-padding-inline-end: 0.4em;
     --utrecht-table-cell-padding-block-start: 0.5em;
     --utrecht-table-cell-padding-block-end: 0.5em;
-    --utrecht-table-cell-line-height: 24px;
+    --utrecht-table-cell-line-height: 1.5rem;
     --utrecht-table-footer-sticky-border-block-start-width: 2px;
     --utrecht-table-header-sticky-border-block-end-width: 2px;
     --utrecht-table-caption-margin-block-end: 1em;
     --utrecht-table-caption-text-align: start;
-    --utrecht-table-caption-font-size: 1.125em;
     --utrecht-table-margin-block-end: 0;
     --utrecht-separator-block-size: 8px;
     --utrecht-select-border-block-end-width: 3px;
@@ -1203,7 +1190,6 @@
     --utrecht-pagination-page-link-background-color: transparent;
     --utrecht-pagination-margin-block-end: 1em;
     --utrecht-pagination-margin-block-start: 0;
-    --utrecht-pagination-font-size: 14px;
     --utrecht-page-padding-inline-start: 2em;
     --utrecht-page-padding-block-end: 1em;
     --utrecht-page-padding-inline-end: 2em;
@@ -1229,9 +1215,9 @@
     --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
     --utrecht-topnav-link-focus-text-decoration: none;
     --utrecht-topnav-link-focus-border-type: dotted;
-    --utrecht-mapcontrolbutton-focus-text-decoration: none;
-    --utrecht-mapcontrolbutton-margin-inline-end: 0;
     --utrecht-mapcontrolbutton-margin-inline-start: 0;
+    --utrecht-mapcontrolbutton-margin-inline-end: 0;
+    --utrecht-mapcontrolbutton-focus-text-decoration: none;
     --utrecht-mapcontrolbutton-border-radius: 2px;
     --utrecht-map-marker-icon-size: 30px;
     --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
@@ -1248,7 +1234,7 @@
     --utrecht-link-icon-size: 1.2em;
     --utrecht-link-hover-text-decoration-thickness: 3px;
     --utrecht-link-hover-text-decoration: underline;
-    --utrecht-link-focus-text-decoration: none;
+    --utrecht-link-focus-visible-text-decoration: none;
     --utrecht-link-text-underline-offset: 3px;
     --utrecht-link-text-decoration: underline;
     --utrecht-link-social-hover-transform-scale: 1.1;
@@ -1286,10 +1272,8 @@
     --utrecht-form-toggle-border-radius: 10em;
     --utrecht-form-toggle-border-style: solid;
     --utrecht-form-toggle-border-color: transparent;
-    --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
+    --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
     --utrecht-form-label-font-size: 1em;
-    --utrecht-form-fieldset-legend-line-height: 1.4;
-    --utrecht-form-fieldset-legend-font-size: 1rem;
     --utrecht-form-field-invalid-border-inline-start-width: 3px;
     --utrecht-form-control-block-size: 42px;
     --utrecht-form-control-read-only-border-color: transparent;
@@ -1300,8 +1284,6 @@
     --utrecht-form-control-max-inline-size: 28em;
     --utrecht-form-control-border-radius: 0;
     --utrecht-focus-outline-style: dotted;
-    --utrecht-figure-caption-line-height: 20px;
-    --utrecht-figure-caption-font-size: 14px;
     --utrecht-figure-caption-color: #727272;
     --utrecht-drawer-max-inline-size: 320px;
     --utrecht-drawer-max-block-size: 240px;
@@ -1364,20 +1346,18 @@
     --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
     --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
     --utrecht-pointer-target-min-size: 44px;
-    --utrecht-action-inert-cursor: default;
-    --utrecht-action-activate-cursor: pointer;
     --utrecht-action-submit-cursor: pointer;
     --utrecht-action-navigate-cursor: pointer;
+    --utrecht-action-inert-cursor: default;
     --utrecht-action-disabled-cursor: not-allowed;
     --utrecht-action-busy-cursor: wait;
+    --utrecht-action-activate-cursor: pointer;
     --utrecht-column-layout-column-width: 350px;
     --utrecht-column-layout-column-rule-width: 2px;
     --utrecht-code-block-padding-inline-end: 20px;
     --utrecht-code-block-padding-inline-start: 20px;
     --utrecht-code-block-padding-block-end: 20px;
     --utrecht-code-block-padding-block-start: 20px;
-    --utrecht-code-block-line-height: 24px;
-    --utrecht-code-block-font-size: 16px;
     --utrecht-checkbox-margin-block-start: 0;
     --utrecht-checkbox-focus-border-width: 2px;
     --utrecht-checkbox-size: 24px;
@@ -1397,7 +1377,7 @@
     --utrecht-calendar-table-days-item-day-border-color: transparent;
     --utrecht-calendar-table-days-item-day-border-width: 2px;
     --utrecht-calendar-table-days-item-day-size: 44px;
-    --utrecht-calendar-table-weeks-item-line-height: 24px;
+    --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
     --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
     --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
     --utrecht-calendar-table-weeks-item-width: 44px;
@@ -1426,15 +1406,13 @@
     --utrecht-breadcrumb-nav-min-block-size: 34px;
     --utrecht-blockquote-margin-block-end: 1.6em;
     --utrecht-blockquote-margin-block-start: 1.6em;
-    --utrecht-blockquote-content-font-size: 1.125rem;
-    --utrecht-blockquote-attribution-font-size: 0.75rem;
     --utrecht-blockquote-margin-inline-end: 1.6em;
     --utrecht-blockquote-margin-inline-start: 1.6em;
     --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
     --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
     --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
     --utrecht-backdrop-reduced-transparency-opacity: 0.98;
-    --utrecht-backdrop-fade-in-animation-duration: 0.4s;
+    --utrecht-backdrop-fade-in-animation-duration: 400ms;
     --utrecht-backdrop-opacity: 0.8;
     --utrecht-article-max-inline-size: 780px;
     --utrecht-alert-icon-inset-block-start: 6px;
@@ -1497,6 +1475,7 @@
     --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
     --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
     --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
+    --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
     --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
     --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -1515,6 +1494,7 @@
     --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
     --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
     --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+    --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
     --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
     --utrecht-surface-color: var(--utrecht-color-grey-95);
@@ -1531,7 +1511,7 @@
     --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
     --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
     --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
-    --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
+    --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
     --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
     --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
     --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
@@ -1600,6 +1580,7 @@
     --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
     --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
+    --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
     --utrecht-page-color: var(--utrecht-color-grey-95);
     --utrecht-page-background-color: var(--utrecht-color-grey-15);
     --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
@@ -1611,7 +1592,7 @@
     --utrecht-page-footer-color: var(--utrecht-color-white);
     --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
-    --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
+    --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
     --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
     --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
     --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -1639,6 +1620,12 @@
     --utrecht-nav-bar-background-color: var(--utrecht-color-white);
     --utrecht-mark-color: var(--utrecht-color-black);
     --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
+    --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
+    --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
+    --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
+    --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
+    --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
+    --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
     --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
     --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
     --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
@@ -1647,12 +1634,6 @@
     --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
     --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
     --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
-    --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
-    --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
-    --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
-    --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
-    --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
-    --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
     --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
     --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
     --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
@@ -1668,10 +1649,10 @@
     --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
-    --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
-    --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
     --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
     --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
+    --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
+    --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
     --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-listbox-option-active-color: var(--utrecht-color-black);
     --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -1732,7 +1713,9 @@
     --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
     --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
     --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
+    --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
     --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+    --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
     --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
     --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
@@ -1757,6 +1740,8 @@
     --utrecht-focus-outline-width: var(--utrecht-border-width-md);
     --utrecht-focus-outline-color: var(--utrecht-color-black);
     --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
+    --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
+    --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
     --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
     --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
     --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
@@ -1792,6 +1777,8 @@
     --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
     --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
     --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
+    --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
+    --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-code-block-color: var(--utrecht-color-black);
     --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
     --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
@@ -1892,7 +1879,6 @@
     --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
     --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
     --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
-    --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
     --utrecht-button-active-color: var(--utrecht-color-white);
     --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
     --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -1903,6 +1889,7 @@
     --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
     --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
     --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
+    --utrecht-button-column-gap: var(--utrecht-space-text-xs);
     --utrecht-button-color: var(--utrecht-color-grey-80);
     --utrecht-button-border-color: var(--utrecht-color-grey-40);
     --utrecht-button-background-color: var(--utrecht-color-grey-30);
@@ -1921,6 +1908,8 @@
     --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
     --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
     --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
+    --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
+    --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
     --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
     --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
     --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
@@ -1998,7 +1987,7 @@
     --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
     --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
     --utrecht-paragraph-lead-color: var(--utrecht-document-color);
-    --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
+    --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
     --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
     --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
     --utrecht-link-visited-color: var(--utrecht-link-color);
@@ -2073,3 +2062,81 @@
     --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
   }
 }
+.utrecht-theme--viewport-scale {
+  /* stylelint-disable number-max-precision */
+  --ams-text-level-6-line-height: 1.6;
+  --ams-text-level-6-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
+  --ams-text-level-5-line-height: 1.6;
+  --ams-text-level-5-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
+  --ams-text-level-4-line-height: 1.5;
+  --ams-text-level-4-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
+  --ams-text-level-3-line-height: 1.3;
+  --ams-text-level-3-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
+  --ams-text-level-2-line-height: 1.25;
+  --ams-text-level-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
+  --ams-text-level-1-line-height: 1.2;
+  --ams-text-level-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
+  --ams-text-level-0-line-height: 1.15;
+  --ams-text-level-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
+  --ams-space-grid-xl: clamp(2rem, calc(0.75rem + 6.25vw), 7rem);
+  --ams-space-grid-lg: clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem);
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem);
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem);
+  --ams-space-xl: clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem);
+  --ams-space-lg: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
+  --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
+  --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
+  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
+  --utrecht-typography-scale-4xl-font-size: var(--ams-text-level-0-font-size);
+  --utrecht-typography-scale-3xl-font-size: var(--ams-text-level-1-font-size);
+  --utrecht-typography-scale-2xl-font-size: var(--ams-text-level-2-font-size);
+  --utrecht-typography-scale-xl-font-size: var(--ams-text-level-3-font-size);
+  --utrecht-typography-scale-lg-font-size: var(--ams-text-level-4-font-size);
+  --utrecht-typography-scale-md-font-size: var(--ams-text-level-5-font-size);
+  --utrecht-typography-scale-sm-font-size: var(--ams-text-level-6-font-size);
+  --utrecht-space-column-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.75);
+  --utrecht-space-column-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.5);
+  --utrecht-space-column-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 1.25);
+  --utrecht-space-column-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-column-scale, 1) * 0.75);
+  --utrecht-space-column-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1));
+  --utrecht-space-column-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 2);
+  --utrecht-space-column-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 4);
+  --utrecht-space-column-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-column-scale, 1) / 8);
+  --utrecht-space-row-5xl: calc(var(--ams-space-grid-xl) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-4xl: calc(var(--ams-space-grid-lg) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-3xl: calc(var(--ams-space-grid-md) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.75);
+  --utrecht-space-row-xl: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.5);
+  --utrecht-space-row-lg: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 1.25);
+  --utrecht-space-row-md: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-sm: calc(var(--ams-space-grid-sm) * var(--utrecht-space-row-scale, 1) * 0.75);
+  --utrecht-space-row-xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1));
+  --utrecht-space-row-2xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 2);
+  --utrecht-space-row-3xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 4);
+  --utrecht-space-row-4xs: calc(var(--ams-space-grid-xs) * var(--utrecht-space-row-scale, 1) / 8);
+  --utrecht-space-inline-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1) * 1.5);
+  --utrecht-space-inline-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-xl: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.33);
+  --utrecht-space-inline-lg: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 1.125);
+  --utrecht-space-inline-md: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.9);
+  --utrecht-space-inline-sm: calc(var(--ams-space-md) * var(--utrecht-space-inline-scale, 1) * 0.75);
+  --utrecht-space-inline-xs: calc(var(--ams-space-sm) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1));
+  --utrecht-space-inline-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-inline-scale, 1) / 2);
+  --utrecht-space-block-4xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1) * 1.5);
+  --utrecht-space-block-3xl: calc(var(--ams-space-xl) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xl: calc(var(--ams-space-lg) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-xl: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.33);
+  --utrecht-space-block-lg: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 1.125);
+  --utrecht-space-block-md: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.9);
+  --utrecht-space-block-sm: calc(var(--ams-space-md) * var(--utrecht-space-block-scale, 1) * 0.75);
+  --utrecht-space-block-xs: calc(var(--ams-space-sm) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-2xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1));
+  --utrecht-space-block-3xs: calc(var(--ams-space-xs) * var(--utrecht-space-block-scale, 1) / 2);
+}