@lux-design-system/design-tokens 2.0.0 → 2.1.0

package/dist/nldoc/dark/sm-theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 Jan 2025 11:07:44 GMT
+ * Generated on Wed, 21 May 2025 07:28:16 GMT
  */
 
 .lux-theme--nldoc-dark {
@@ -19,9 +19,10 @@
   --figma-rijkslint-variant: default;
   --figma-size-icon-wrapper-height: 1.5rem;
   --figma-focus-outline-radius: 0px;
+  --nl-skip-link-text-underline-offset: 1px;
+  --nl-skip-link-text-decoration-thickness: 1px;
   --todo-link-list-item-text-decoration: None;
   --todo-checkbox-indeterminate-focus-border-width: 2px;
-  --todo-checkbox-indeterminate-hover-border-color: transparent;
   --todo-checkbox-indeterminate-hover-border-width: 2px;
   --todo-checkbox-indeterminate-active-border-width: 1.5px;
   --todo-checkbox-checked-active-border-width: 1.5px;
@@ -31,6 +32,7 @@
   --utrecht-textarea-max-inline-size: 400px;
   --utrecht-textbox-max-inline-size: 400px;
   --utrecht-select-max-inline-size: 400px;
+  --utrecht-select-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2.459 4.51c.5-.502 1.151-.702 1.651-.151l3.854 3.857 3.904-3.907c.5-.501 1.152-.35 1.652.15.5.501.7 1.152.15 1.653L8.865 10.92c-.5.501-1.301.501-1.802 0L2.31 6.162c-.5-.5-.35-1.152.15-1.653Z' fill='%23282828'/%3E%3C/svg%3E");
   --utrecht-radio-button-checked-focus-border-width: 0.125rem;
   --utrecht-radio-button-checked-hover-border-width: 0.125rem;
   --utrecht-radio-button-focus-border-width: 0.125rem;
@@ -39,8 +41,12 @@
   --utrecht-radio-button-size: 1.125rem;
   --utrecht-radio-button-border-width: 0.094rem;
   --utrecht-page-footer-content-column-width: 12.5rem;
+  --utrecht-link-text-decoration: underline;
+  --utrecht-link-hover-text-decoration: none;
   --utrecht-link-hover-text-decoration-thickness: auto;
+  --utrecht-link-focus-text-decoration: none;
   --utrecht-link-focus-text-decoration-thickness: auto;
+  --utrecht-link-active-text-decoration: none;
   --utrecht-link-text-underline-offset: auto;
   --utrecht-link-text-decoration-thickness: auto;
   --utrecht-form-field-error-message-icon-size: 1.5rem;
@@ -48,20 +54,23 @@
   --utrecht-column-layout-column-width: 12.5rem; /* full-size, hoe stel ik dit in?  */
   --utrecht-checkbox-size: 1.125rem;
   --utrecht-checkbox-border-width: 1.5px;
+  --utrecht-alert-icon-size: 1.5rem;
+  --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;
   --ro-font-family-secondary: RijksoverheidSerifWeb, 'Times New Roman', serif;
   --ro-font-family-primary: RijksoverheidSansWebText, Arial, Verdana, sans-serif;
   --no-token: /* */; /* Discussie nodig */
   --lux-icon-inset-block-start: 0.375rem;
+  --lux-button-small-min-block-size: 2rem;
+  --lux-alert-icon-size: 1.5rem;
   --lux-login-link-border-style: solid;
   --lux-login-link-icon-size: 2.5rem;
   --lux-login-link-min-block-size: 48px;
   --lux-login-link-min-inline-size: 48px;
-  --lux-link-focus-text-decoration: none;
-  --lux-link-text-decoration: underline;
-  --lux-link-active-text-decoration: none;
-  --lux-link-hover-text-decoration: none;
-  --lux-button-small-min-block-size: 2rem;
-  --lux-alert-icon-size: 24px;
   --lux-grid-max-inline-size: 82.5rem;
   --lux-grid-margin: 1.5rem;
   --lux-grid-gutter: 1.5rem;
@@ -244,6 +253,10 @@
   --lux-border-radius-default: 0px;
   --lux-border-radius-none: 0px;
   --lux-border-radius-circle: 999px;
+  --viewport-section-padding-inline-end: var(--lux-space-400);
+  --viewport-section-padding-inline-start: var(--lux-space-400);
+  --viewport-section-padding-block-start: var(--lux-space-400);
+  --viewport-section-padding-block-end: var(--lux-space-400);
   --viewport-line-height-body-small: var(--lux-line-height-large-scale-xs);
   --viewport-line-height-body-large: var(--lux-line-height-large-scale-md);
   --viewport-line-height-body-default: var(--lux-line-height-large-scale-sm);
@@ -269,29 +282,34 @@
   --nldoc-color-brand-hover: var(--lux-color-violet-700);
   --nldoc-color-brand-subdued: var(--lux-color-violet-50);
   --nldoc-color-brand-default: var(--lux-color-violet-500);
+  --product-heading-1-font-weight: var(--lux-font-weight-regular);
   --product-button-secondary-background-color: var(--lux-color-none);
-  --todo-select-hover-border-width: var(--lux-border-width-m);
-  --todo-select-focus-border-width: var(--lux-border-width-m);
-  --todo-select-icon-size: var(--lux-size-icon);
+  --nl-skip-link-min-inline-size: var(--lux-size-target);
+  --nl-skip-link-min-block-size: var(--lux-size-target);
+  --nl-skip-link-padding-inline: var(--lux-space-200);
+  --nl-skip-link-padding-block: var(--lux-space-100);
+  --nl-skip-link-font-size: var(--lux-font-size-body-default);
   --todo-link-list-item-column-gap: var(--lux-space-100);
+  --todo-form-field-error-message-border-width: var(--lux-border-width-default);
+  --todo-form-field-error-message-border-radius: var(--lux-border-radius-default); /* todo token */
+  --todo-checkbox-indeterminate-focus-color: var(--lux-color-wit);
+  --todo-checkbox-indeterminate-hover-color: var(--lux-color-wit);
+  --todo-checkbox-indeterminate-active-color: var(--lux-color-wit);
+  --utrecht-textarea-min-block-size: var(--lux-size-target);
   --utrecht-textarea-font-size: var(--lux-font-size-body-default);
   --utrecht-textarea-font-weight: var(--lux-font-weight-regular);
   --utrecht-textarea-border-width: var(--lux-border-width-default);
   --utrecht-textarea-border-radius: var(--lux-border-radius-default);
-  --utrecht-textarea-hover-border-width: var(--lux-border-width-default);
   --utrecht-textarea-read-only-border-color: var(--lux-color-none);
   --utrecht-textarea-read-only-background-color: var(--lux-color-grijs-100);
-  --utrecht-textarea-focus-border-width: var(--lux-border-width-m);
   --utrecht-textarea-invalid-border-width: var(--lux-border-width-default);
   --utrecht-textarea-padding-inline-start: var(--lux-space-200);
   --utrecht-textarea-padding-inline-end: var(--lux-space-200);
   --utrecht-textarea-padding-block-start: var(--lux-space-100);
   --utrecht-textarea-padding-block-end: var(--lux-space-100);
   --utrecht-textbox-min-block-size: var(--lux-size-target);
-  --utrecht-textbox-hover-border-width: var(--lux-border-width-default);
   --utrecht-textbox-read-only-border-color: var(--lux-color-none);
   --utrecht-textbox-read-only-background-color: var(--lux-color-grijs-100);
-  --utrecht-textbox-focus-border-width: var(--lux-border-width-m);
   --utrecht-textbox-border-width: var(--lux-border-width-default);
   --utrecht-textbox-border-block-end-width: var(--lux-border-width-default);
   --utrecht-textbox-invalid-border-width: var(--lux-border-width-default);
@@ -320,8 +338,14 @@
   --utrecht-pre-heading-font-size: var(--lux-font-size-body-default);
   --utrecht-pre-heading-font-weight: var(--lux-font-weight-bold);
   --utrecht-pointer-target-min-size: var(--lux-size-target);
+  --utrecht-paragraph-small-font-weight: var(--lux-font-weight-regular);
+  --utrecht-paragraph-small-font-size: var(--lux-font-size-body-small);
+  --utrecht-paragraph-lead-font-weight: var(--lux-font-weight-regular);
+  --utrecht-paragraph-lead-font-size: var(--lux-font-size-body-large);
   --utrecht-paragraph-margin-block-start: var(--lux-space-0);
   --utrecht-paragraph-margin-block-end: var(--lux-space-0);
+  --utrecht-paragraph-font-weight: var(--lux-font-weight-regular);
+  --utrecht-paragraph-font-size: var(--lux-font-size-body-default);
   --utrecht-page-footer-content-max-inline-size: var(--lux-grid-max-inline-size);
   --utrecht-page-footer-content-row-gap: var(--lux-space-400);
   --utrecht-page-footer-content-column-gap: var(--lux-grid-gutter);
@@ -330,10 +354,11 @@
   --utrecht-page-footer-padding-inline-start: var(--lux-grid-margin);
   --utrecht-page-footer-padding-block-end: var(--lux-space-600);
   --utrecht-page-footer-padding-block-start: var(--lux-space-600);
-  --utrecht-link-text-decoration: var(--lux-link-text-decoration);
-  --utrecht-link-hover-text-decoration: var(--lux-link-hover-text-decoration);
-  --utrecht-link-focus-text-decoration: var(--lux-link-focus-text-decoration);
-  --utrecht-link-active-text-decoration: var(--lux-link-active-text-decoration);
+  --utrecht-link-column-gap: var(--lux-space-50);
+  --utrecht-link-font-size: var(--lux-font-size-body-default);
+  --utrecht-link-icon-size: var(--lux-size-icon);
+  --utrecht-link-font-weight: var(--lux-font-weight-regular);
+  --utrecht-link-focus-background-color: var(--lux-color-none);
   --utrecht-link-list-icon-inset-block-start: var(--lux-icon-inset-block-start);
   --utrecht-link-list-icon-size: var(--lux-size-icon);
   --utrecht-link-list-row-gap: var(--lux-space-100);
@@ -347,7 +372,6 @@
   --utrecht-heading-2-font-size: var(--lux-font-size-heading-level-2);
   --utrecht-heading-2-font-weight: var(--lux-font-weight-bold);
   --utrecht-heading-1-font-size: var(--lux-font-size-heading-level-1);
-  --utrecht-heading-1-font-weight: var(--lux-font-weight-regular);
   --utrecht-form-label-radio-font-weight: var(--lux-font-weight-regular);
   --utrecht-form-label-checked-font-weight: var(--lux-font-weight-regular);
   --utrecht-form-label-checkbox-font-weight: var(--lux-font-weight-regular);
@@ -362,7 +386,6 @@
   --utrecht-form-field-error-message-padding-inline-end: var(--lux-space-0);
   --utrecht-form-field-error-message-padding-block-start: var(--lux-space-0);
   --utrecht-form-field-error-message-padding-block-end: var(--lux-space-0);
-  --utrecht-form-field-error-message-border-radius: var(--lux-border-radius-default); /* todo token */
   --utrecht-form-field-error-message-background-color: var(--lux-color-none);
   --utrecht-form-field-error-message-font-weight: var(--lux-font-weight-regular);
   --utrecht-form-field-error-message-font-size: var(--lux-font-size-body-default);
@@ -389,15 +412,59 @@
   --utrecht-checkbox-active-border-width: var(--utrecht-checkbox-border-width);
   --utrecht-checkbox-icon-size: var(--lux-size-icon);
   --utrecht-checkbox-border-radius: var(--lux-border-radius-default);
+  --utrecht-button-subtle-font-size: var(--product-button-font-size);
+  --utrecht-button-subtle-line-height: var(--lux-line-height-large-scale-sm);
+  --utrecht-button-subtle-pressed-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-focus-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-focus-background-color: var(--lux-color-none);
   --utrecht-button-subtle-hover-scale: var(--no-token);
+  --utrecht-button-subtle-hover-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-disabled-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-active-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-active-background-color: var(--lux-color-none);
+  --utrecht-button-subtle-font-weight: var(--lux-font-weight-bold);
+  --utrecht-button-subtle-border-width: var(--lux-border-width-default);
+  --utrecht-button-subtle-border-color: var(--lux-color-none);
+  --utrecht-button-subtle-background-color: var(--lux-color-none);
+  --utrecht-button-secondary-action-font-size: var(--product-button-font-size);
+  --utrecht-button-secondary-action-line-height: var(--lux-line-height-large-scale-sm);
+  --utrecht-button-secondary-action-focus-background-color: var(--lux-color-none);
   --utrecht-button-secondary-action-hover-scale: var(--no-token);
+  --utrecht-button-secondary-action-disabled-border-color: var(--lux-color-none);
+  --utrecht-button-secondary-action-active-background-color: var(--lux-color-none);
+  --utrecht-button-secondary-action-font-weight: var(--lux-font-weight-bold);
+  --utrecht-button-secondary-action-border-width: var(--lux-border-width-default);
+  --utrecht-button-secondary-action-background-color: var(--lux-color-none);
   --utrecht-button-hover-scale: var(--no-token);
   --utrecht-button-hover-background-color: var(--lux-color-paars-200);
   --utrecht-button-focus-scale: var(--no-token);
+  --utrecht-button-icon-size: var(--lux-size-icon);
   --utrecht-button-text-transform: var(--no-token);
+  --utrecht-button-padding-inline-end: var(--lux-space-200);
+  --utrecht-button-padding-inline-start: var(--lux-space-200);
+  --utrecht-button-padding-block-end: var(--lux-space-100);
+  --utrecht-button-padding-block-start: var(--lux-space-100);
+  --utrecht-button-column-gap: var(--lux-space-100);
+  --utrecht-button-min-inline-size: var(--lux-size-target);
+  --utrecht-button-min-block-size: var(--lux-size-target);
+  --utrecht-button-line-height: var(--lux-line-height-large-scale-sm);
   --utrecht-button-inline-size: var(--no-token); /* Wat is dit voor token? Waarom zit deze in de button?  */
+  --utrecht-button-font-weight: var(--lux-font-weight-bold);
+  --utrecht-button-primary-action-line-height: var(--lux-line-height-large-scale-sm);
+  --utrecht-button-primary-action-pressed-border-color: var(--lux-color-none);
+  --utrecht-button-primary-action-focus-border-color: var(--lux-color-none);
   --utrecht-button-primary-action-hover-scale: var(--no-token);
+  --utrecht-button-primary-action-hover-border-color: var(--lux-color-none);
+  --utrecht-button-primary-action-disabled-border-color: var(--lux-color-none);
+  --utrecht-button-primary-action-active-border-color: var(--lux-color-none);
+  --utrecht-button-primary-action-font-weight: var(--lux-font-weight-bold);
+  --utrecht-button-primary-action-border-width: var(--lux-border-width-default);
+  --utrecht-button-primary-action-border-color: var(--lux-color-none);
+  --utrecht-button-primary-action-font-size: var(--product-button-primary-font-size);
+  --utrecht-button-font-size: var(--product-button-font-size);
   --utrecht-button-color: var(--lux-color-paars-500);
+  --utrecht-button-border-width: var(--lux-border-width-default);
+  --utrecht-button-border-radius: var(--lux-border-radius-default);
   --utrecht-button-border-color: var(--lux-color-paars-500);
   --utrecht-button-background-color: var(--lux-color-paars-100);
   --utrecht-button-group-row-gap: var(--lux-space-100);
@@ -405,25 +472,47 @@
   --utrecht-button-group-padding-block-end: var(--lux-space-0);
   --utrecht-button-group-column-gap: var(--lux-space-200);
   --utrecht-button-group-background-color: var(--lux-color-none);
+  --utrecht-alert-info-border-color: var(--lux-color-none);
+  --utrecht-alert-info-color: var(--lux-color-grijs-700);
   --utrecht-alert-message-row-gap: var(--lux-space-0);
-  --utrecht-alert-icon-size: var(--lux-alert-icon-size);
   --utrecht-alert-icon-inset-block-start: var(--lux-space-25);
   --utrecht-alert-icon-color: var(--lux-color-grijs-700);
+  --utrecht-alert-ok-border-color: var(--lux-color-none);
+  --utrecht-alert-ok-color: var(--lux-color-grijs-700);
+  --utrecht-alert-error-border-color: var(--lux-color-none);
+  --utrecht-alert-error-color: var(--lux-color-grijs-700);
+  --utrecht-alert-warning-border-color: var(--lux-color-none);
+  --utrecht-alert-warning-color: var(--lux-color-grijs-700);
+  --utrecht-alert-padding-inline-end: var(--lux-space-150);
+  --utrecht-alert-padding-inline-start: var(--lux-space-150);
+  --utrecht-alert-padding-block-end: var(--lux-space-150);
+  --utrecht-alert-padding-block-start: var(--lux-space-150);
+  --utrecht-alert-column-gap: var(--lux-space-100);
+  --utrecht-alert-color: var(--lux-color-grijs-700);
+  --utrecht-alert-border-width: var(--lux-border-width-default);
+  --utrecht-alert-border-radius: var(--lux-border-radius-default);
+  --utrecht-alert-border-color: var(--lux-color-none);
+  --lux-textarea-hover-border-width: var(--lux-border-width-m);
+  --lux-textarea-focus-border-width: var(--lux-border-width-m);
+  --lux-textbox-hover-border-width: var(--lux-border-width-m);
+  --lux-textbox-focus-border-width: var(--lux-border-width-m);
+  --lux-select-hover-border-width: var(--lux-border-width-m);
+  --lux-select-focus-border-width: var(--lux-border-width-m);
+  --lux-select-icon-size: var(--lux-size-icon);
   --lux-checkbox-checked-active-color: var(--lux-color-wit);
   --lux-checkbox-checked-hover-color: var(--lux-color-wit);
+  --lux-checkbox-checked-focus-color: var(--lux-color-wit);
+  --lux-button-small-padding-block-start: var(--lux-space-25);
+  --lux-button-small-padding-block-end: var(--lux-space-25);
+  --lux-alert-heading-font-size: var(--lux-font-size-heading-level-4);
+  --lux-alert-heading-font-weight: var(--lux-font-weight-bold);
+  --lux-alert-icon-inset-block-start: var(--lux-space-25);
+  --lux-alert-color: var(--lux-color-grijs-700);
   --lux-section-border-radius: var(--lux-border-radius-default);
   --lux-section-row-gap: var(--lux-space-400);
-  --lux-section-padding-inline-end: var(--lux-space-400);
-  --lux-section-padding-inline-start: var(--lux-space-400);
-  --lux-section-padding-block-start: var(--lux-space-400);
-  --lux-section-padding-block-end: var(--lux-space-400);
   --lux-radio-group-row-gap: var(--lux-space-100);
   --lux-radio-group-padding-block-end: var(--lux-space-0);
   --lux-radio-group-padding-block-start: var(--lux-space-0);
-  --lux-paragraph-small-font-size: var(--lux-font-size-body-small);
-  --lux-paragraph-lead-font-size: var(--lux-font-size-body-large);
-  --lux-paragraph-font-weight: var(--lux-font-weight-regular);
-  --lux-paragraph-default-font-size: var(--lux-font-size-body-default);
   --lux-login-link-font-weight: var(--lux-font-weight-regular);
   --lux-login-link-line-height: var(--lux-line-height-large-scale-sm);
   --lux-login-link-border-width: var(--lux-border-width-default);
@@ -434,60 +523,12 @@
   --lux-login-link-font-size: var(--lux-font-size-large-scale-sm);
   --lux-login-link-padding-block-end: var(--lux-space-50);
   --lux-login-link-padding-block-start: var(--lux-space-50);
-  --lux-link-focus-background-color: var(--lux-color-none);
-  --lux-link-font-size: var(--lux-font-size-body-default);
-  --lux-link-font-weight: var(--lux-font-weight-regular);
-  --lux-link-icon-size: var(--lux-size-icon);
-  --lux-link-column-gap: var(--lux-space-50);
   --lux-icon-logo-digid-border-color: var(--mode-icon-logo-digid-border-color);
   --lux-icon-logo-eidas-background-color: var(--mode-icon-logo-eidas-background-color);
   --lux-icon-logo-eidas-lines-color: var(--mode-icon-logo-eidas-lines-color);
   --lux-icon-logo-eidas-lock-color: var(--mode-icon-logo-eidas-lock-color);
   --lux-icon-logo-eidas-stars-color: var(--mode-icon-logo-eidas-stars-color);
   --lux-icon-logo-eherkenning-e-color: var(--mode-icon-logo-eherkenning-e-color);
-  --lux-button-small-padding-block-start: var(--lux-space-25);
-  --lux-button-small-padding-block-end: var(--lux-space-25);
-  --lux-button-font-weight: var(--lux-font-weight-bold);
-  --lux-button-tertiary-disabled-border-color: var(--lux-color-none);
-  --lux-button-tertiary-active-border-color: var(--lux-color-none);
-  --lux-button-tertiary-active-background-color: var(--lux-color-none);
-  --lux-button-tertiary-hover-border-color: var(--lux-color-none);
-  --lux-button-tertiary-border-color: var(--lux-color-none);
-  --lux-button-tertiary-background-color: var(--lux-color-none);
-  --lux-button-secondary-disabled-border-color: var(--lux-color-none);
-  --lux-button-secondary-active-background-color: var(--lux-color-none);
-  --lux-button-secondary-background-color: var(--lux-color-none);
-  --lux-button-icon-size: var(--lux-size-icon);
-  --lux-button-border-width: var(--lux-border-width-default);
-  --lux-button-border-radius: var(--lux-border-radius-default);
-  --lux-button-min-block-size: var(--lux-size-target);
-  --lux-button-min-inline-size: var(--lux-size-target);
-  --lux-button-column-gap: var(--lux-space-100);
-  --lux-button-padding-block-end: var(--lux-space-100);
-  --lux-button-padding-inline-end: var(--lux-space-200);
-  --lux-button-padding-block-start: var(--lux-space-100);
-  --lux-button-padding-inline-start: var(--lux-space-200);
-  --lux-button-line-height: var(--lux-line-height-large-scale-sm);
-  --lux-button-primary-disabled-border-color: var(--lux-color-none);
-  --lux-button-primary-active-border-color: var(--lux-color-none);
-  --lux-button-primary-hover-border-color: var(--lux-color-none);
-  --lux-button-primary-border-color: var(--lux-color-none);
-  --lux-button-primary-font-size: var(--product-button-primary-font-size);
-  --lux-button-font-size: var(--product-button-font-size);
-  --lux-alert-heading-font-size: var(--lux-font-size-heading-level-4);
-  --lux-alert-heading-font-weight: var(--lux-font-weight-bold);
-  --lux-alert-message-row-gap: var(--lux-space-0);
-  --lux-alert-close-button-size: var(--lux-size-icon); /* Mist in utrecht alert, wat gaan we hiermee doen?  */
-  --lux-alert-icon-inset-block-start: var(--lux-space-25);
-  --lux-alert-padding-inline-start: var(--lux-space-150);
-  --lux-alert-padding-inline-end: var(--lux-space-150);
-  --lux-alert-padding-block-start: var(--lux-space-150);
-  --lux-alert-padding-block-end: var(--lux-space-150);
-  --lux-alert-column-gap: var(--lux-space-100);
-  --lux-alert-border-width: var(--lux-border-width-default);
-  --lux-alert-border-radius: var(--lux-border-radius-default);
-  --lux-alert-border-color: var(--lux-color-none);
-  --lux-alert-color: var(--lux-color-grijs-700);
   --lux-focus-outline-offset: var(--lux-space-25);
   --lux-line-height-heading-level-5: var(--lux-font-size-heading-level-5) * 1.5;
   --lux-line-height-heading-level-4: var(--lux-font-size-heading-level-4) * 1.5;
@@ -524,16 +565,19 @@
   --mode-button-tertiary-hover-background-color: var(--lux-color-background-hover);
   --mode-button-tertiary-color: var(--lux-color-foreground-default);
   --nldoc-button-color: var(--nldoc-color-brand-default);
+  --product-heading-3-color: var(--lux-color-foreground-default);
+  --product-heading-1-color: var(--lux-color-foreground-default);
   --product-button-tertiary-hover-background-color: var(--nldoc-color-brand-subdued);
   --product-button-secondary-hover-background-color: var(--nldoc-color-brand-subdued);
   --product-button-secondary-hover-border-color: var(--nldoc-color-brand-hover);
+  --nl-skip-link-line-height: var(--lux-line-height-body-default);
+  --nl-skip-link-color: var(--lux-color-foreground-default);
+  --nl-skip-link-background-color: var(--lux-color-background-default);
   --todo-textbox-hover-color: var(--lux-color-foreground-default);
   --todo-textbox-hover-background-color: var(--lux-color-background-default);
-  --todo-select-hover-color: var(--lux-color-foreground-default);
-  --todo-select-hover-background-color: var(--lux-color-background-default);
-  --todo-select-line-height: var(--lux-line-height-body-default);
-  --todo-checkbox-indeterminate-hover-color: var(--lux-checkbox-checked-hover-color);
-  --todo-checkbox-indeterminate-active-color: var(--lux-checkbox-checked-active-color);
+  --todo-checkbox-indeterminate-disabled-color: var(--lux-color-foreground-subdued);
+  --todo-checkbox-indeterminate-disabled-border-color: var(--lux-color-border-subdued);
+  --todo-checkbox-indeterminate-disabled-background-color: var(--lux-color-background-subdued);
   --utrecht-textarea-line-height: var(--lux-line-height-body-default);
   --utrecht-textarea-hover-color: var(--lux-color-foreground-default);
   --utrecht-textarea-hover-background-color: var(--lux-color-background-default);
@@ -557,20 +601,29 @@
   --utrecht-textbox-focus-background-color: var(--lux-color-background-default);
   --utrecht-textbox-placeholder-color: var(--lux-color-foreground-subdued);
   --utrecht-textbox-invalid-color: var(--lux-color-foreground-default);
+  --utrecht-textbox-invalid-border-color: var(--lux-color-feedback-error-default);
   --utrecht-textbox-invalid-background-color: var(--lux-color-background-default);
   --utrecht-textbox-color: var(--lux-color-foreground-default);
   --utrecht-textbox-background-color: var(--lux-color-background-default);
   --utrecht-textbox-line-height: var(--lux-line-height-body-default);
   --utrecht-select-invalid-border-color: var(--lux-color-feedback-error-default);
-  --utrecht-select-invalid-background-color: var(--lux-color-background-default);
   --utrecht-select-invalid-border-block-end-width: var(--utrecht-select-invalid-border-width);
+  --utrecht-select-invalid-background-color: var(--lux-color-background-default);
+  --utrecht-select-focus-color: var(--lux-color-foreground-default);
+  --utrecht-select-focus-background-color: var(--lux-color-background-default);
+  --utrecht-select-hover-color: var(--lux-color-foreground-default);
+  --utrecht-select-hover-background-color: var(--lux-color-background-default);
   --utrecht-select-disabled-color: var(--lux-color-foreground-subdued);
   --utrecht-select-disabled-border-color: var(--lux-color-border-subdued);
   --utrecht-select-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-select-line-height: var(--lux-line-height-body-default);
   --utrecht-select-font-weight: var(--utrecht-document-font-weight);
   --utrecht-select-color: var(--lux-color-foreground-default);
   --utrecht-select-border-block-end-width: var(--utrecht-select-border-width);
   --utrecht-select-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-checked-focus-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-focus-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-checked-focus-background-color: var(--lux-color-background-default);
   --utrecht-radio-button-checked-active-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-checked-active-border-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-checked-active-background-color: var(--lux-color-background-default);
@@ -580,6 +633,9 @@
   --utrecht-radio-button-checked-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-checked-border-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-checked-background-color: var(--lux-color-background-default);
+  --utrecht-radio-button-focus-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-focus-border-color: var(--lux-color-foreground-default);
+  --utrecht-radio-button-focus-background-color: var(--lux-color-background-default);
   --utrecht-radio-button-disabled-color: var(--lux-color-border-subdued);
   --utrecht-radio-button-disabled-border-color: var(--lux-color-border-subdued);
   --utrecht-radio-button-disabled-background-color: var(--lux-color-canvas);
@@ -588,38 +644,39 @@
   --utrecht-radio-button-hover-border-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-hover-background-color: var(--lux-color-background-default);
   --utrecht-radio-button-invalid-border-color: var(--lux-color-feedback-error-default);
+  --utrecht-radio-button-invalid-background-color: var(--lux-color-feedback-error-default);
   --utrecht-radio-button-border-color: var(--lux-color-foreground-default);
   --utrecht-radio-button-background-color: var(--lux-color-background-default);
   --utrecht-pre-heading-line-height: var(--lux-line-height-body-default);
   --utrecht-pre-heading-color: var(--lux-color-foreground-default);
-  --utrecht-paragraph-small-font-weight: var(--lux-paragraph-font-weight);
-  --utrecht-paragraph-small-font-size: var(--lux-paragraph-small-font-size);
-  --utrecht-paragraph-lead-font-weight: var(--lux-paragraph-font-weight);
-  --utrecht-paragraph-lead-font-size: var(--lux-paragraph-lead-font-size);
-  --utrecht-paragraph-font-weight: var(--lux-paragraph-font-weight);
-  --utrecht-paragraph-font-size: var(--lux-paragraph-default-font-size);
+  --utrecht-paragraph-small-line-height: var(--lux-line-height-body-small);
+  --utrecht-paragraph-small-color: var(--lux-color-foreground-default);
+  --utrecht-paragraph-lead-line-height: var(--lux-line-height-body-large);
+  --utrecht-paragraph-lead-color: var(--lux-color-foreground-default);
+  --utrecht-paragraph-line-height: var(--lux-line-height-body-default);
+  --utrecht-paragraph-color: var(--lux-color-foreground-default);
   --utrecht-page-footer-color: var(--lux-color-foreground-default);
   --utrecht-page-footer-background-color: var(--lux-color-background-default);
-  --utrecht-link-column-gap: var(--lux-link-column-gap);
-  --utrecht-link-font-size: var(--lux-link-font-size);
-  --utrecht-link-icon-size: var(--lux-link-icon-size);
-  --utrecht-link-font-weight: var(--lux-link-font-weight);
-  --utrecht-link-focus-background-color: var(--lux-link-focus-background-color);
+  --utrecht-link-line-height: var(--lux-line-height-body-default);
+  --utrecht-link-visited-color: var(--mode-link-visited-color);
+  --utrecht-link-hover-color: var(--mode-link-hover-color);
+  --utrecht-link-focus-color: var(--lux-color-foreground-link);
+  --utrecht-link-active-color: var(--mode-link-active-color);
+  --utrecht-link-text-decoration-color: var(--lux-color-foreground-link);
+  --utrecht-link-color: var(--lux-color-foreground-link);
   --utrecht-heading-6-line-height: var(--lux-line-height-heading-level-5);
   --utrecht-heading-5-line-height: var(--lux-line-height-heading-level-5);
   --utrecht-heading-4-line-height: var(--lux-line-height-heading-level-4);
   --utrecht-heading-3-font-size: var(--viewport-font-size-heading-level-3);
   --utrecht-heading-3-line-height: var(--lux-line-height-heading-level-3);
-  --utrecht-heading-3-color: var(--lux-color-foreground-default);
   --utrecht-heading-2-line-height: var(--lux-line-height-heading-level-2);
   --utrecht-heading-1-line-height: var(--lux-line-height-heading-level-1);
-  --utrecht-heading-1-color: var(--lux-color-foreground-default);
+  --utrecht-heading-1-font-weight: var(--product-heading-1-font-weight);
   --utrecht-form-label-radio-color: var(--lux-color-foreground-default);
   --utrecht-form-label-disabled-color: var(--lux-color-foreground-subdued);
   --utrecht-form-label-checkbox-color: var(--lux-color-foreground-default);
   --utrecht-form-label-color: var(--lux-color-foreground-default);
   --utrecht-form-field-invalid-border-inline-start-color: var(--lux-color-feedback-error-default);
-  --utrecht-form-field-error-message-border-width: var(--lux-alert-border-width);
   --utrecht-form-field-error-message-line-height: var(--lux-line-height-body-default);
   --utrecht-form-field-error-message-color: var(--lux-color-feedback-error-default);
   --utrecht-form-field-error-message-icon-color: var(--lux-color-feedback-error-default);
@@ -645,27 +702,10 @@
   --utrecht-checkbox-disabled-background-color: var(--lux-color-background-subdued);
   --utrecht-checkbox-active-background-color: var(--lux-color-background-default);
   --utrecht-checkbox-background-color: var(--lux-color-background-default);
-  --utrecht-button-subtle-font-size: var(--lux-button-font-size);
-  --utrecht-button-subtle-line-height: var(--lux-button-line-height);
-  --utrecht-button-subtle-pressed-border-color: var(--lux-button-tertiary-hover-border-color);
-  --utrecht-button-subtle-focus-border-color: var(--lux-button-tertiary-border-color);
-  --utrecht-button-subtle-focus-background-color: var(--lux-button-tertiary-background-color);
-  --utrecht-button-subtle-hover-border-color: var(--lux-button-tertiary-hover-border-color);
-  --utrecht-button-subtle-disabled-border-color: var(--lux-button-tertiary-disabled-border-color);
-  --utrecht-button-subtle-active-border-color: var(--lux-button-tertiary-active-border-color);
-  --utrecht-button-subtle-active-background-color: var(--lux-button-tertiary-active-background-color);
-  --utrecht-button-subtle-font-weight: var(--lux-button-font-weight);
-  --utrecht-button-subtle-border-width: var(--lux-button-border-width);
-  --utrecht-button-subtle-border-color: var(--lux-button-tertiary-border-color);
-  --utrecht-button-subtle-background-color: var(--lux-button-tertiary-background-color);
-  --utrecht-button-secondary-action-font-size: var(--lux-button-font-size);
-  --utrecht-button-secondary-action-line-height: var(--lux-button-line-height);
-  --utrecht-button-secondary-action-focus-background-color: var(--lux-button-secondary-background-color);
-  --utrecht-button-secondary-action-disabled-border-color: var(--lux-button-secondary-disabled-border-color);
-  --utrecht-button-secondary-action-active-background-color: var(--lux-button-secondary-active-background-color);
-  --utrecht-button-secondary-action-font-weight: var(--lux-button-font-weight);
-  --utrecht-button-secondary-action-border-width: var(--lux-button-border-width);
-  --utrecht-button-secondary-action-background-color: var(--lux-button-secondary-background-color);
+  --utrecht-button-subtle-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-button-subtle-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-button-secondary-action-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-button-secondary-action-disabled-background-color: var(--lux-color-background-subdued);
   --utrecht-button-pressed-color: var(--utrecht-button-color);
   --utrecht-button-pressed-border-color: var(--utrecht-button-border-color);
   --utrecht-button-pressed-background-color: var(--utrecht-button-background-color);
@@ -677,64 +717,36 @@
   --utrecht-button-disabled-color: var(--utrecht-button-color);
   --utrecht-button-disabled-border-color: var(--utrecht-button-border-color);
   --utrecht-button-disabled-background-color: var(--utrecht-button-background-color);
-  --utrecht-button-icon-size: var(--lux-button-icon-size);
+  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
   --utrecht-button-active-color: var(--utrecht-button-color);
   --utrecht-button-active-border-color: var(--utrecht-button-border-color);
   --utrecht-button-active-background-color: var(--utrecht-button-background-color);
-  --utrecht-button-padding-inline-end: var(--lux-button-padding-inline-end);
-  --utrecht-button-padding-inline-start: var(--lux-button-padding-inline-start);
-  --utrecht-button-padding-block-end: var(--lux-button-padding-block-end);
-  --utrecht-button-padding-block-start: var(--lux-button-padding-block-start);
-  --utrecht-button-column-gap: var(--lux-button-column-gap);
-  --utrecht-button-min-inline-size: var(--lux-button-min-inline-size);
-  --utrecht-button-min-block-size: var(--lux-button-min-block-size);
-  --utrecht-button-line-height: var(--lux-button-line-height);
-  --utrecht-button-font-weight: var(--lux-button-font-weight);
-  --utrecht-button-primary-action-line-height: var(--lux-button-line-height);
-  --utrecht-button-primary-action-pressed-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-focus-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-hover-border-color: var(--lux-button-primary-hover-border-color);
-  --utrecht-button-primary-action-disabled-border-color: var(--lux-button-primary-disabled-border-color);
-  --utrecht-button-primary-action-active-border-color: var(--lux-button-primary-active-border-color);
-  --utrecht-button-primary-action-font-weight: var(--lux-button-font-weight);
-  --utrecht-button-primary-action-border-width: var(--lux-button-border-width);
-  --utrecht-button-primary-action-border-color: var(--lux-button-primary-border-color);
-  --utrecht-button-primary-action-font-size: var(--lux-button-primary-font-size);
-  --utrecht-button-font-size: var(--lux-button-font-size);
-  --utrecht-button-border-width: var(--lux-button-border-width);
-  --utrecht-button-border-radius: var(--lux-button-border-radius);
-  --utrecht-alert-info-border-color: var(--lux-alert-border-color);
-  --utrecht-alert-info-color: var(--lux-alert-color);
+  --utrecht-button-primary-action-pressed-color: var(--lux-color-foreground-on-emphasis);
+  --utrecht-button-primary-action-focus-color: var(--lux-color-foreground-on-emphasis);
+  --utrecht-button-primary-action-hover-color: var(--lux-color-foreground-on-emphasis);
+  --utrecht-button-primary-action-disabled-color: var(--lux-color-foreground-subdued);
+  --utrecht-button-primary-action-disabled-background-color: var(--lux-color-background-subdued);
+  --utrecht-button-primary-action-active-color: var(--lux-color-foreground-on-emphasis);
+  --utrecht-button-primary-action-color: var(--lux-color-foreground-on-emphasis);
+  --utrecht-alert-info-background-color: var(--lux-color-feedback-info-subdued);
   --utrecht-alert-icon-info-color: var(--lux-color-feedback-info-default);
   --utrecht-alert-icon-ok-color: var(--lux-color-feedback-success-default);
   --utrecht-alert-icon-warning-color: var(--lux-color-feedback-warning-default);
   --utrecht-alert-icon-error-color: var(--lux-color-feedback-error-default);
-  --utrecht-alert-ok-border-color: var(--lux-alert-border-color);
-  --utrecht-alert-ok-color: var(--lux-alert-color);
-  --utrecht-alert-error-border-color: var(--lux-alert-border-color);
-  --utrecht-alert-error-color: var(--lux-alert-color);
-  --utrecht-alert-warning-border-color: var(--lux-alert-border-color);
-  --utrecht-alert-warning-color: var(--lux-alert-color);
-  --utrecht-alert-padding-inline-end: var(--lux-alert-padding-inline-end);
-  --utrecht-alert-padding-inline-start: var(--lux-alert-padding-inline-start);
-  --utrecht-alert-padding-block-end: var(--lux-alert-padding-block-end);
-  --utrecht-alert-padding-block-start: var(--lux-alert-padding-block-start);
-  --utrecht-alert-column-gap: var(--lux-alert-column-gap);
-  --utrecht-alert-color: var(--lux-alert-color);
-  --utrecht-alert-border-width: var(--lux-alert-border-width);
-  --utrecht-alert-border-radius: var(--lux-alert-border-radius);
-  --utrecht-alert-border-color: var(--lux-alert-border-color);
+  --utrecht-alert-ok-background-color: var(--lux-color-feedback-success-subdued);
+  --utrecht-alert-error-background-color: var(--lux-color-feedback-error-subdued);
+  --utrecht-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
   --utrecht-alert-background-color: var(--lux-color-background-subdued);
   --lux-font-family-primary: var(--nldoc-font-family-primary);
   --lux-checkbox-checked-disabled-color: var(--lux-color-foreground-subdued);
   --lux-checkbox-checked-disabled-border-color: var(--lux-color-border-subdued);
   --lux-checkbox-checked-disabled-background-color: var(--lux-color-background-subdued);
-  --lux-checkbox-checked-focus-color: var(--utrecht-checkbox-checked-color);
+  --lux-alert-heading-line-height: var(--lux-line-height-heading-level-4);
+  --lux-section-padding-inline-end: var(--viewport-section-padding-inline-end);
+  --lux-section-padding-inline-start: var(--viewport-section-padding-inline-start);
+  --lux-section-padding-block-start: var(--viewport-section-padding-block-start);
+  --lux-section-padding-block-end: var(--viewport-section-padding-block-end);
   --lux-section-background-color: var(--lux-color-background-default);
-  --lux-paragraph-small-line-height: var(--lux-line-height-body-small);
-  --lux-paragraph-lead-line-height: var(--lux-line-height-body-large);
-  --lux-paragraph-default-line-height: var(--lux-line-height-body-default);
-  --lux-paragraph-color: var(--lux-color-foreground-default);
   --lux-login-link-focus-border-color: var(--lux-color-border-default);
   --lux-login-link-focus-background-color: var(--lux-color-background-default);
   --lux-login-link-focus-color: var(--lux-color-foreground-default);
@@ -746,88 +758,53 @@
   --lux-login-link-border-color: var(--lux-color-border-default);
   --lux-login-link-background-color: var(--lux-color-background-default);
   --lux-login-link-color: var(--lux-color-foreground-default);
-  --lux-link-focus-color: var(--lux-color-foreground-link);
-  --lux-link-line-height: var(--lux-line-height-body-default);
-  --lux-link-visited-color: var(--mode-link-visited-color);
-  --lux-link-active-color: var(--mode-link-active-color);
-  --lux-link-hover-color: var(--mode-link-hover-color);
-  --lux-link-color: var(--mode-link-color);
-  --lux-button-tertiary-disabled-color: var(--lux-color-foreground-subdued);
-  --lux-button-tertiary-disabled-background-color: var(--lux-color-background-subdued);
-  --lux-button-secondary-disabled-color: var(--lux-color-foreground-subdued);
-  --lux-button-secondary-disabled-background-color: var(--lux-color-background-subdued);
-  --lux-button-primary-disabled-color: var(--lux-color-foreground-subdued);
-  --lux-button-primary-disabled-background-color: var(--lux-color-background-subdued);
-  --lux-button-primary-active-color: var(--lux-color-foreground-on-emphasis);
-  --lux-button-primary-hover-color: var(--lux-color-foreground-on-emphasis);
-  --lux-button-primary-color: var(--lux-color-foreground-on-emphasis);
-  --lux-alert-heading-line-height: var(--lux-line-height-heading-level-4);
-  --lux-alert-warning-background-color: var(--lux-color-feedback-warning-subdued);
-  --lux-alert-error-background-color: var(--lux-color-feedback-error-subdued);
-  --lux-alert-success-background-color: var(--lux-color-feedback-success-subdued);
-  --lux-alert-info-background-color: var(--lux-color-feedback-info-subdued);
   --lux-color-border-strong: var(--lux-color-foreground-default);
   --lux-color-brand-hover: var(--nldoc-color-brand-hover); /* Hover kleur van het product */
   --lux-color-brand-subdued: var(--nldoc-color-brand-subdued); /* Subtiele kleur van het product */
   --lux-color-brand-default: var(--nldoc-color-brand-default); /* kleur van het product */
+  --product-heading-6-color: var(--lux-color-brand-default);
+  --product-heading-5-color: var(--lux-color-brand-default);
+  --product-heading-4-color: var(--lux-color-brand-default);
+  --product-heading-2-color: var(--lux-color-brand-default);
   --product-button-tertiary-hover-color: var(--nldoc-button-color);
   --product-button-tertiary-color: var(--nldoc-button-color);
   --product-button-secondary-hover-color: var(--nldoc-button-color);
   --product-button-secondary-color: var(--nldoc-button-color);
   --product-button-secondary-border-color: var(--nldoc-button-color);
   --todo-textbox-hover-border-color: var(--lux-color-border-strong);
-  --todo-select-hover-border-color: var(--lux-color-border-strong);
-  --todo-checkbox-indeterminate-disabled-color: var(--lux-checkbox-checked-disabled-color);
-  --todo-checkbox-indeterminate-disabled-border-color: var(--lux-checkbox-checked-disabled-border-color);
-  --todo-checkbox-indeterminate-disabled-background-color: var(--lux-checkbox-checked-disabled-background-color);
-  --todo-checkbox-indeterminate-focus-color: var(--lux-checkbox-checked-focus-color);
+  --todo-checkbox-indeterminate-focus-border-color: var(--lux-color-border-strong);
+  --todo-checkbox-indeterminate-focus-background-color: var(--lux-color-brand-default);
+  --todo-checkbox-indeterminate-hover-border-color: var(--lux-color-border-strong);
+  --todo-checkbox-indeterminate-hover-background-color: var(--lux-color-brand-hover);
+  --todo-checkbox-indeterminate-active-border-color: var(--lux-color-border-strong);
+  --todo-checkbox-indeterminate-active-background-color: var(--lux-color-brand-hover);
   --utrecht-textarea-font-family: var(--lux-font-family-primary);
   --utrecht-textarea-hover-border-color: var(--lux-color-border-strong);
   --utrecht-textarea-focus-border-color: var(--lux-color-border-strong);
   --utrecht-textarea-border-color: var(--lux-color-border-strong);
   --utrecht-textbox-focus-border-color: var(--lux-color-border-strong);
-  --utrecht-textbox-invalid-border-color: var(--lux-color-border-strong);
   --utrecht-textbox-border-color: var(--lux-color-border-strong);
   --utrecht-textbox-font-family: var(--lux-font-family-primary);
-  --utrecht-select-focus-color: var(--utrecht-select-color);
-  --utrecht-select-focus-background-color: var(--utrecht-select-background-color);
+  --utrecht-select-focus-border-color: var(--lux-color-border-strong);
+  --utrecht-select-hover-border-color: var(--lux-color-border-strong);
   --utrecht-select-font-family: var(--lux-font-family-primary);
   --utrecht-select-border-color: var(--lux-color-border-strong);
-  --utrecht-radio-button-checked-focus-color: var(--utrecht-radio-button-checked-color);
-  --utrecht-radio-button-checked-focus-border-color: var(--utrecht-radio-button-checked-border-color);
-  --utrecht-radio-button-checked-focus-background-color: var(--utrecht-radio-button-checked-background-color);
-  --utrecht-radio-button-focus-border-color: var(--utrecht-radio-button-border-color);
-  --utrecht-radio-button-focus-background-color: var(--utrecht-radio-button-background-color);
   --utrecht-radio-button-active-color: var(--utrecht-radio-button-active-border-color);
   --utrecht-radio-button-hover-color: var(--utrecht-radio-button-hover-border-color);
   --utrecht-radio-button-invalid-color: var(--utrecht-radio-button-invalid-border-color);
-  --utrecht-radio-button-invalid-background-color: var(--lux-alert-error-background-color);
   --utrecht-radio-button-color: var(--utrecht-radio-button-border-color);
   --utrecht-pre-heading-font-family: var(--lux-font-family-primary);
-  --utrecht-paragraph-small-line-height: var(--lux-paragraph-small-line-height);
-  --utrecht-paragraph-small-color: var(--lux-paragraph-color);
-  --utrecht-paragraph-lead-line-height: var(--lux-paragraph-lead-line-height);
-  --utrecht-paragraph-lead-color: var(--lux-paragraph-color);
-  --utrecht-paragraph-line-height: var(--lux-paragraph-default-line-height);
-  --utrecht-paragraph-color: var(--lux-paragraph-color);
+  --utrecht-paragraph-font-family: var(--lux-font-family-primary);
   --utrecht-page-footer-border-color: var(--lux-color-brand-default);
-  --utrecht-link-line-height: var(--lux-link-line-height);
-  --utrecht-link-visited-color: var(--lux-link-visited-color);
-  --utrecht-link-hover-color: var(--lux-link-hover-color);
-  --utrecht-link-focus-color: var(--lux-link-focus-color);
-  --utrecht-link-active-color: var(--lux-link-active-color);
-  --utrecht-link-text-decoration-color: var(--lux-link-color);
-  --utrecht-link-color: var(--lux-link-color);
+  --utrecht-link-font-family: var(--lux-font-family-primary);
   --utrecht-heading-6-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-6-color: var(--lux-color-brand-default);
   --utrecht-heading-5-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-5-color: var(--lux-color-brand-default);
   --utrecht-heading-4-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-4-color: var(--lux-color-brand-default);
   --utrecht-heading-3-font-family: var(--lux-font-family-primary);
+  --utrecht-heading-3-color: var(--product-heading-3-color);
   --utrecht-heading-2-font-family: var(--lux-font-family-primary);
-  --utrecht-heading-2-color: var(--lux-color-brand-default);
   --utrecht-heading-1-font-family: var(--lux-font-family-primary);
+  --utrecht-heading-1-color: var(--product-heading-1-color);
   --utrecht-form-field-error-message-font-family: var(--lux-font-family-primary);
   --utrecht-form-field-description-font-family: var(--lux-font-family-primary);
   --utrecht-form-fieldset-invalid-border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
@@ -844,86 +821,48 @@
   --utrecht-checkbox-disabled-color: var(--utrecht-checkbox-disabled-border-color);
   --utrecht-checkbox-active-border-color: var(--lux-color-border-strong);
   --utrecht-checkbox-border-color: var(--lux-color-border-strong);
-  --utrecht-button-subtle-disabled-color: var(--lux-button-tertiary-disabled-color);
-  --utrecht-button-subtle-disabled-background-color: var(--lux-button-tertiary-disabled-background-color);
-  --utrecht-button-secondary-action-disabled-color: var(--lux-button-secondary-disabled-color);
-  --utrecht-button-secondary-action-disabled-background-color: var(--lux-button-secondary-disabled-background-color);
-  --utrecht-button-icon-gap: var(--utrecht-button-column-gap);
-  --utrecht-button-primary-action-pressed-color: var(--lux-button-primary-hover-color);
-  --utrecht-button-primary-action-focus-color: var(--lux-button-primary-color);
-  --utrecht-button-primary-action-hover-color: var(--lux-button-primary-hover-color);
-  --utrecht-button-primary-action-disabled-color: var(--lux-button-primary-disabled-color);
-  --utrecht-button-primary-action-disabled-background-color: var(--lux-button-primary-disabled-background-color);
-  --utrecht-button-primary-action-active-color: var(--lux-button-primary-active-color);
-  --utrecht-button-primary-action-color: var(--lux-button-primary-color);
-  --utrecht-alert-info-background-color: var(--lux-alert-info-background-color);
-  --utrecht-alert-ok-background-color: var(--lux-alert-success-background-color);
-  --utrecht-alert-error-background-color: var(--lux-alert-error-background-color);
-  --utrecht-alert-warning-background-color: var(--lux-alert-warning-background-color);
+  --utrecht-button-subtle-pressed-color: var(--mode-button-tertiary-hover-color);
+  --utrecht-button-subtle-pressed-background-color: var(--mode-button-tertiary-hover-background-color);
+  --utrecht-button-subtle-focus-color: var(--mode-button-tertiary-color);
+  --utrecht-button-subtle-hover-color: var(--mode-button-tertiary-hover-color);
+  --utrecht-button-subtle-hover-background-color: var(--mode-button-tertiary-hover-background-color);
+  --utrecht-button-subtle-active-color: var(--mode-button-tertiary-color);
+  --utrecht-button-subtle-color: var(--mode-button-tertiary-color);
+  --utrecht-button-secondary-action-pressed-color: var(--mode-button-secondary-hover-color);
+  --utrecht-button-secondary-action-pressed-border-color: var(--mode-button-secondary-hover-border-color);
+  --utrecht-button-secondary-action-pressed-background-color: var(--mode-button-secondary-hover-background-color);
+  --utrecht-button-secondary-action-focus-color: var(--mode-button-secondary-color);
+  --utrecht-button-secondary-action-focus-border-color: var(--mode-button-secondary-border-color);
+  --utrecht-button-secondary-action-hover-color: var(--mode-button-secondary-hover-color);
+  --utrecht-button-secondary-action-hover-border-color: var(--mode-button-secondary-hover-border-color);
+  --utrecht-button-secondary-action-hover-background-color: var(--mode-button-secondary-hover-background-color);
+  --utrecht-button-secondary-action-active-color: var(--mode-button-secondary-color);
+  --utrecht-button-secondary-action-active-border-color: var(--mode-button-secondary-border-color);
+  --utrecht-button-secondary-action-color: var(--mode-button-secondary-color);
+  --utrecht-button-secondary-action-border-color: var(--mode-button-secondary-border-color);
+  --utrecht-button-primary-action-pressed-background-color: var(--lux-color-brand-hover);
+  --utrecht-button-primary-action-focus-background-color: var(--lux-color-brand-default);
+  --utrecht-button-primary-action-hover-background-color: var(--lux-color-brand-hover);
+  --utrecht-button-primary-action-active-background-color: var(--lux-color-brand-default);
+  --utrecht-button-primary-action-background-color: var(--lux-color-brand-default);
+  --utrecht-button-font-family: var(--lux-font-family-primary);
   --lux-checkbox-checked-active-border-color: var(--lux-color-border-strong);
   --lux-checkbox-checked-active-background-color: var(--lux-color-brand-hover);
   --lux-checkbox-checked-hover-border-color: var(--lux-color-border-strong);
   --lux-checkbox-checked-hover-background-color: var(--lux-color-brand-hover);
-  --lux-paragraph-font-family: var(--lux-font-family-primary);
+  --lux-checkbox-checked-focus-border-color: var(--lux-color-border-strong);
+  --lux-checkbox-checked-focus-background-color: var(--lux-color-brand-default);
+  --lux-alert-heading-font-family: var(--lux-font-family-primary);
   --lux-login-link-font-family: var(--lux-font-family-primary);
   --lux-login-link-active-border-color: var(--lux-color-border-strong);
-  --lux-link-font-family: var(--lux-font-family-primary);
-  --lux-button-font-family: var(--lux-font-family-primary);
-  --lux-button-tertiary-active-color: var(--mode-button-tertiary-color);
-  --lux-button-tertiary-hover-color: var(--mode-button-tertiary-hover-color);
-  --lux-button-tertiary-hover-background-color: var(--mode-button-tertiary-hover-background-color);
-  --lux-button-tertiary-color: var(--mode-button-tertiary-color);
-  --lux-button-secondary-active-color: var(--mode-button-secondary-color);
-  --lux-button-secondary-active-border-color: var(--mode-button-secondary-border-color);
-  --lux-button-secondary-hover-color: var(--mode-button-secondary-hover-color);
-  --lux-button-secondary-hover-border-color: var(--mode-button-secondary-hover-border-color);
-  --lux-button-secondary-hover-background-color: var(--mode-button-secondary-hover-background-color);
-  --lux-button-secondary-color: var(--mode-button-secondary-color);
-  --lux-button-secondary-border-color: var(--mode-button-secondary-border-color);
-  --lux-button-primary-active-background-color: var(--lux-color-brand-default);
-  --lux-button-primary-hover-background-color: var(--lux-color-brand-hover);
-  --lux-button-primary-background-color: var(--lux-color-brand-default);
-  --lux-alert-heading-font-family: var(--lux-font-family-primary);
   --lux-color-focus-outline: var(--lux-color-border-strong); /* Outline kleur voor de focus state. */
-  --todo-checkbox-indeterminate-hover-background-color: var(--lux-checkbox-checked-hover-background-color);
-  --todo-checkbox-indeterminate-active-border-color: var(--lux-checkbox-checked-active-border-color);
-  --todo-checkbox-indeterminate-active-background-color: var(--lux-checkbox-checked-active-background-color);
-  --utrecht-select-focus-border-color: var(--utrecht-select-border-color);
-  --utrecht-radio-button-focus-color: var(--utrecht-radio-button-focus-border-color);
-  --utrecht-paragraph-font-family: var(--lux-paragraph-font-family);
-  --utrecht-link-font-family: var(--lux-link-font-family);
+  --utrecht-heading-6-color: var(--product-heading-6-color);
+  --utrecht-heading-5-color: var(--product-heading-5-color);
+  --utrecht-heading-4-color: var(--product-heading-4-color);
+  --utrecht-heading-2-color: var(--product-heading-2-color);
   --utrecht-focus-outline-color: var(--lux-color-focus-outline);
   --utrecht-checkbox-focus-color: var(--utrecht-checkbox-focus-border-color);
   --utrecht-checkbox-hover-color: var(--utrecht-checkbox-hover-border-color);
   --utrecht-checkbox-active-color: var(--utrecht-checkbox-active-border-color);
   --utrecht-checkbox-color: var(--utrecht-checkbox-border-color);
-  --utrecht-button-subtle-pressed-color: var(--lux-button-tertiary-hover-color);
-  --utrecht-button-subtle-pressed-background-color: var(--lux-button-tertiary-hover-background-color);
-  --utrecht-button-subtle-focus-color: var(--lux-button-tertiary-color);
-  --utrecht-button-subtle-hover-color: var(--lux-button-tertiary-hover-color);
-  --utrecht-button-subtle-hover-background-color: var(--lux-button-tertiary-hover-background-color);
-  --utrecht-button-subtle-active-color: var(--lux-button-tertiary-active-color);
-  --utrecht-button-subtle-color: var(--lux-button-tertiary-color);
-  --utrecht-button-secondary-action-pressed-color: var(--lux-button-secondary-hover-color);
-  --utrecht-button-secondary-action-pressed-border-color: var(--lux-button-secondary-hover-border-color);
-  --utrecht-button-secondary-action-pressed-background-color: var(--lux-button-secondary-hover-background-color);
-  --utrecht-button-secondary-action-focus-color: var(--lux-button-secondary-color);
-  --utrecht-button-secondary-action-focus-border-color: var(--lux-button-secondary-border-color);
-  --utrecht-button-secondary-action-hover-color: var(--lux-button-secondary-hover-color);
-  --utrecht-button-secondary-action-hover-border-color: var(--lux-button-secondary-hover-border-color);
-  --utrecht-button-secondary-action-hover-background-color: var(--lux-button-secondary-hover-background-color);
-  --utrecht-button-secondary-action-active-color: var(--lux-button-secondary-active-color);
-  --utrecht-button-secondary-action-active-border-color: var(--lux-button-secondary-active-border-color);
-  --utrecht-button-secondary-action-color: var(--lux-button-secondary-color);
-  --utrecht-button-secondary-action-border-color: var(--lux-button-secondary-border-color);
-  --utrecht-button-primary-action-pressed-background-color: var(--lux-button-primary-hover-background-color);
-  --utrecht-button-primary-action-focus-background-color: var(--lux-button-primary-background-color);
-  --utrecht-button-primary-action-hover-background-color: var(--lux-button-primary-hover-background-color);
-  --utrecht-button-primary-action-active-background-color: var(--lux-button-primary-active-background-color);
-  --utrecht-button-primary-action-background-color: var(--lux-button-primary-background-color);
-  --utrecht-button-font-family: var(--lux-button-font-family);
-  --lux-checkbox-checked-focus-border-color: var(--utrecht-checkbox-checked-border-color);
-  --lux-checkbox-checked-focus-background-color: var(--utrecht-checkbox-checked-background-color);
-  --todo-checkbox-indeterminate-focus-border-color: var(--lux-checkbox-checked-focus-border-color);
-  --todo-checkbox-indeterminate-focus-background-color: var(--lux-checkbox-checked-focus-background-color);
 }