:root[data-theme=light] {
    --background-white: var(--color-neutral-0);
    --background-block-primary: var(--color-neutral-0);
    --background-block-secondary: var(--color-neutral-50);
    --background-overlay-image: rgb(0, 0, 0, 0.55);
    --background-overlay-page: rgb(0, 0, 0, 0.6);
    --background-overlay-transparent: rgb(246, 246, 246, 0);
    --background-page: var(--color-neutral-50);
    --background-neutral-disabled: var(--color-neutral-200);
    --background-neutral-primary: var(--color-neutral-1000);
    --background-neutral-secondary: var(--color-neutral-700);
    --background-neutral-subtle: var(--color-neutral-100);
    --background-neutral-subtlest: var(--color-neutral-50);
    --background-neutral-white: var(--color-neutral-0);
    --background-primary: var(--color-primary-600);
    --background-primary-subtle: var(--color-primary-100);
    --background-primary-subtlest: var(--color-primary-50);
    --background-secondary: var(--color-secondary-600);
    --background-secondary-subtle: var(--color-secondary-200);
    --background-secondary-subtlest: var(--color-secondary-50);
    --background-status-error: var(--status-error);
    --background-status-error-subtle: var(--color-error-100);
    --background-status-error-subtlest: var(--color-error-50);
    --background-status-success: var(--status-success);
    --background-status-success-subtle: var(--color-success-100);
    --background-status-success-subtlest: var(--color-success-50);
    --background-status-warning: var(--status-warning);
    --background-status-warning-subtle: var(--color-warning-100);
    --background-status-warning-subtlest: var(--color-warning-50);
    --border-error: var(--color-error-600);
    --border-neutral: var(--color-neutral-700);
    --border-primary: var(--color-primary-600);
    --border-secondary: var(--color-secondary-600);
    --border-subtle: var(--color-neutral-300);
    --border-subtlest: var(--color-neutral-100);
    --border-success: var(--color-success-600);
    --border-warning: var(--color-warning-600);
    --border-disabled: var(--color-neutral-200);
    --button-outlined-error: var(--color-error-50);
    --button-outlined-error-active: var(--color-error-300);
    --button-outlined-error-hover: var(--color-error-200);
    --button-outlined-neutral: var(--color-neutral-50);
    --button-outlined-neutral-active: var(--color-neutral-300);
    --button-outlined-neutral-hover: var(--color-neutral-200);
    --button-outlined-primary: var(--color-primary-50);
    --button-outlined-primary-active: var(--color-primary-300);
    --button-outlined-primary-hover: var(--color-primary-200);
    --button-outlined-secondary: var(--color-secondary-50);
    --button-outlined-secondary-active: var(--color-secondary-300);
    --button-outlined-secondary-hover: var(--color-secondary-200);
    --button-outlined-success: var(--color-success-50);
    --button-outlined-success-active: var(--color-success-300);
    --button-outlined-success-hover: var(--color-success-200);
    --button-outlined-warning: var(--color-warning-50);
    --button-outlined-warning-active: var(--color-secondary-300);
    --button-outlined-warning-hover: var(--color-warning-200);
    --button-solid-disabled: var(--color-neutral-200);
    --button-solid-error: var(--color-error-600);
    --button-solid-error-active: var(--color-error-800);
    --button-solid-error-hover: var(--color-error-700);
    --button-solid-neutral: var(--color-neutral-600);
    --button-solid-neutral-active: var(--color-neutral-800);
    --button-solid-neutral-hover: var(--color-neutral-700);
    --button-solid-primary: var(--color-primary-600);
    --button-solid-primary-active: var(--color-primary-800);
    --button-solid-primary-hover: var(--color-primary-700);
    --button-solid-secondary: var(--color-secondary-600);
    --button-solid-secondary-active: var(--color-secondary-300);
    --button-solid-secondary-hover: var(--color-secondary-400);
    --button-solid-success: var(--color-success-600);
    --button-solid-success-active: var(--color-success-800);
    --button-solid-success-hover: var(--color-success-700);
    --button-solid-warning: var(--color-warning-500);
    --button-solid-warning-active: var(--color-warning-300);
    --button-solid-warning-hover: var(--color-warning-400);
    --icon-default: var(--color-neutral-900);
    --icon-disabled: var(--color-neutral-300);
    --icon-error: var(--status-error);
    --icon-neutral: var(--color-neutral-600);
    --icon-secondary: var(--color-secondary-700);
    --icon-success: var(--status-success);
    --icon-warning: var(--color-warning-700);
    --icon-on-bold-black: var(--color-neutral-1000);
    --icon-on-bold-white: var(--color-neutral-0);
    --icon-on-subtle: var(--color-primary-600);
    --interactive-active: var(--color-primary-600);
    --interactive-disabled: var(--color-neutral-200);
    --interactive-error: var(--color-error-600);
    --interactive-inactive: var(--color-neutral-300);
    --interactive-timer-error-solid: var(--color-error-800);
    --interactive-timer-error-subtle: var(--color-error-200);
    --interactive-timer-neutral-solid: var(--color-neutral-800);
    --interactive-timer-neutral-subtle: var(--color-neutral-200);
    --interactive-timer-primary-solid: var(--color-primary-800);
    --interactive-timer-primary-subtle: var(--color-primary-200);
    --interactive-timer-success-solid: var(--color-success-800);
    --interactive-timer-success-subtle: var(--color-success-200);
    --interactive-timer-warning-solid: var(--color-warning-500);
    --interactive-timer-warning-subtle: var(--color-warning-200);
    --status-error: var(--color-error-600);
    --status-focus: var(--color-focus-600);
    --status-success: var(--color-success-600);
    --status-visited: var(--color-visited-600);
    --status-warning: var(--color-warning-400);
    --text-primary-color: var(--color-primary-700);
    --text-secondary-color: var(--color-secondary-800);
    --text-black-fixed: var(--color-neutral-1000);
    --text-disabled: var(--color-neutral-300);
    --text-placeholder: var(--color-neutral-500);
    --text-primary: var(--color-neutral-950);
    --text-secondary: var(--color-neutral-700);
    --text-tertiary: var(--color-neutral-500);
    --text-white: var(--color-neutral-0);
    --text-white-fixed: var(--color-neutral-0);
    --text-status-error: var(--color-error-700);
    --text-status-info: var(--color-primary-600);
    --text-status-success: var(--color-success-700);
    --text-status-warning: var(--color-warning-900)
}

@media(prefers-color-scheme: light) {

    html:not([data-theme]),
    html[data-theme=auto] {
        --background-white: var(--color-neutral-0);
        --background-block-primary: var(--color-neutral-0);
        --background-block-secondary: var(--color-neutral-50);
        --background-overlay-image: rgb(0, 0, 0, 0.55);
        --background-overlay-page: rgb(0, 0, 0, 0.6);
        --background-overlay-transparent: rgb(246, 246, 246, 0);
        --background-page: var(--color-neutral-50);
        --background-neutral-disabled: var(--color-neutral-200);
        --background-neutral-primary: var(--color-neutral-1000);
        --background-neutral-secondary: var(--color-neutral-700);
        --background-neutral-subtle: var(--color-neutral-100);
        --background-neutral-subtlest: var(--color-neutral-50);
        --background-neutral-white: var(--color-neutral-0);
        --background-primary: var(--color-primary-600);
        --background-primary-subtle: var(--color-primary-100);
        --background-primary-subtlest: var(--color-primary-50);
        --background-secondary: var(--color-secondary-600);
        --background-secondary-subtle: var(--color-secondary-200);
        --background-secondary-subtlest: var(--color-secondary-50);
        --background-status-error: var(--status-error);
        --background-status-error-subtle: var(--color-error-100);
        --background-status-error-subtlest: var(--color-error-50);
        --background-status-success: var(--status-success);
        --background-status-success-subtle: var(--color-success-100);
        --background-status-success-subtlest: var(--color-success-50);
        --background-status-warning: var(--status-warning);
        --background-status-warning-subtle: var(--color-warning-100);
        --background-status-warning-subtlest: var(--color-warning-50);
        --border-error: var(--color-error-600);
        --border-neutral: var(--color-neutral-700);
        --border-primary: var(--color-primary-600);
        --border-secondary: var(--color-secondary-600);
        --border-subtle: var(--color-neutral-300);
        --border-subtlest: var(--color-neutral-100);
        --border-success: var(--color-success-600);
        --border-warning: var(--color-warning-600);
        --border-disabled: var(--color-neutral-200);
        --button-outlined-error: var(--color-error-50);
        --button-outlined-error-active: var(--color-error-300);
        --button-outlined-error-hover: var(--color-error-200);
        --button-outlined-neutral: var(--color-neutral-50);
        --button-outlined-neutral-active: var(--color-neutral-300);
        --button-outlined-neutral-hover: var(--color-neutral-200);
        --button-outlined-primary: var(--color-primary-50);
        --button-outlined-primary-active: var(--color-primary-300);
        --button-outlined-primary-hover: var(--color-primary-200);
        --button-outlined-secondary: var(--color-secondary-50);
        --button-outlined-secondary-active: var(--color-secondary-300);
        --button-outlined-secondary-hover: var(--color-secondary-200);
        --button-outlined-success: var(--color-success-50);
        --button-outlined-success-active: var(--color-success-300);
        --button-outlined-success-hover: var(--color-success-200);
        --button-outlined-warning: var(--color-warning-50);
        --button-outlined-warning-active: var(--color-secondary-300);
        --button-outlined-warning-hover: var(--color-warning-200);
        --button-solid-disabled: var(--color-neutral-200);
        --button-solid-error: var(--color-error-600);
        --button-solid-error-active: var(--color-error-800);
        --button-solid-error-hover: var(--color-error-700);
        --button-solid-neutral: var(--color-neutral-600);
        --button-solid-neutral-active: var(--color-neutral-800);
        --button-solid-neutral-hover: var(--color-neutral-700);
        --button-solid-primary: var(--color-primary-600);
        --button-solid-primary-active: var(--color-primary-800);
        --button-solid-primary-hover: var(--color-primary-700);
        --button-solid-secondary: var(--color-secondary-600);
        --button-solid-secondary-active: var(--color-secondary-300);
        --button-solid-secondary-hover: var(--color-secondary-400);
        --button-solid-success: var(--color-success-600);
        --button-solid-success-active: var(--color-success-800);
        --button-solid-success-hover: var(--color-success-700);
        --button-solid-warning: var(--color-warning-500);
        --button-solid-warning-active: var(--color-warning-300);
        --button-solid-warning-hover: var(--color-warning-400);
        --icon-default: var(--color-neutral-900);
        --icon-disabled: var(--color-neutral-300);
        --icon-error: var(--status-error);
        --icon-neutral: var(--color-neutral-600);
        --icon-secondary: var(--color-secondary-700);
        --icon-success: var(--status-success);
        --icon-warning: var(--color-warning-700);
        --icon-on-bold-black: var(--color-neutral-1000);
        --icon-on-bold-white: var(--color-neutral-0);
        --icon-on-subtle: var(--color-primary-600);
        --interactive-active: var(--color-primary-600);
        --interactive-disabled: var(--color-neutral-200);
        --interactive-error: var(--color-error-600);
        --interactive-inactive: var(--color-neutral-300);
        --interactive-timer-error-solid: var(--color-error-800);
        --interactive-timer-error-subtle: var(--color-error-200);
        --interactive-timer-neutral-solid: var(--color-neutral-800);
        --interactive-timer-neutral-subtle: var(--color-neutral-200);
        --interactive-timer-primary-solid: var(--color-primary-800);
        --interactive-timer-primary-subtle: var(--color-primary-200);
        --interactive-timer-success-solid: var(--color-success-800);
        --interactive-timer-success-subtle: var(--color-success-200);
        --interactive-timer-warning-solid: var(--color-warning-500);
        --interactive-timer-warning-subtle: var(--color-warning-200);
        --status-error: var(--color-error-600);
        --status-focus: var(--color-focus-600);
        --status-success: var(--color-success-600);
        --status-visited: var(--color-visited-600);
        --status-warning: var(--color-warning-400);
        --text-primary-color: var(--color-primary-700);
        --text-secondary-color: var(--color-secondary-800);
        --text-black-fixed: var(--color-neutral-1000);
        --text-disabled: var(--color-neutral-300);
        --text-placeholder: var(--color-neutral-500);
        --text-primary: var(--color-neutral-950);
        --text-secondary: var(--color-neutral-700);
        --text-tertiary: var(--color-neutral-500);
        --text-white: var(--color-neutral-0);
        --text-white-fixed: var(--color-neutral-0);
        --text-status-error: var(--color-error-700);
        --text-status-info: var(--color-primary-600);
        --text-status-success: var(--color-success-700);
        --text-status-warning: var(--color-warning-900)
    }
}

:root[data-theme=dark] {
    --background-white: var(--color-neutral-1000);
    --background-block-primary: var(--color-neutral-950);
    --background-block-secondary: var(--color-neutral-800);
    --background-overlay-image: rgb(5, 5, 5, 0.7);
    --background-overlay-page: rgb(0, 0, 0, 0.8);
    --background-overlay-transparent: rgb(1, 4, 9, 0);
    --background-page: var(--color-primary-1050);
    --background-neutral-disabled: var(--color-neutral-900);
    --background-neutral-primary: var(--color-neutral-900);
    --background-neutral-secondary: var(--color-neutral-1000);
    --background-neutral-subtle: var(--color-neutral-900);
    --background-neutral-subtlest: var(--color-neutral-950);
    --background-neutral-white: var(--color-neutral-1000);
    --background-primary: var(--color-primary-600);
    --background-primary-subtle: var(--color-primary-950);
    --background-primary-subtlest: var(--color-primary-900);
    --background-secondary: var(--color-secondary-600);
    --background-secondary-subtle: var(--color-secondary-900);
    --background-secondary-subtlest: var(--color-secondary-900);
    --background-status-error: var(--status-error);
    --background-status-error-subtle: var(--color-error-950);
    --background-status-error-subtlest: var(--color-error-950);
    --background-status-success: var(--status-success);
    --background-status-success-subtle: var(--color-success-950);
    --background-status-success-subtlest: var(--color-success-950);
    --background-status-warning: var(--status-warning);
    --background-status-warning-subtle: var(--color-warning-950);
    --background-status-warning-subtlest: var(--color-warning-950);
    --border-error: var(--color-error-600);
    --border-neutral: var(--color-neutral-200);
    --border-primary: var(--color-primary-600);
    --border-secondary: var(--color-secondary-600);
    --border-subtle: var(--color-neutral-600);
    --border-subtlest: var(--color-neutral-900);
    --border-success: var(--color-success-600);
    --border-warning: var(--color-warning-600);
    --border-disabled: var(--color-neutral-900);
    --button-outlined-error: var(--color-error-800);
    --button-outlined-error-active: var(--color-error-900);
    --button-outlined-error-hover: var(--color-error-950);
    --button-outlined-neutral: var(--color-neutral-800);
    --button-outlined-neutral-active: var(--color-neutral-900);
    --button-outlined-neutral-hover: var(--color-neutral-950);
    --button-outlined-primary: var(--color-primary-800);
    --button-outlined-primary-active: var(--color-primary-900);
    --button-outlined-primary-hover: var(--color-primary-950);
    --button-outlined-secondary: var(--color-secondary-800);
    --button-outlined-secondary-active: var(--color-secondary-900);
    --button-outlined-secondary-hover: var(--color-secondary-950);
    --button-outlined-success: var(--color-success-800);
    --button-outlined-success-active: var(--color-success-900);
    --button-outlined-success-hover: var(--color-success-950);
    --button-outlined-warning: var(--color-warning-800);
    --button-outlined-warning-active: var(--color-warning-900);
    --button-outlined-warning-hover: var(--color-warning-950);
    --button-solid-disabled: var(--color-neutral-950);
    --button-solid-error: var(--color-error-600);
    --button-solid-error-active: var(--color-error-700);
    --button-solid-error-hover: var(--color-error-500);
    --button-solid-neutral: var(--color-neutral-600);
    --button-solid-neutral-active: var(--color-neutral-700);
    --button-solid-neutral-hover: var(--color-neutral-500);
    --button-solid-primary: var(--color-primary-600);
    --button-solid-primary-active: var(--color-primary-700);
    --button-solid-primary-hover: var(--color-primary-500);
    --button-solid-secondary: var(--color-secondary-600);
    --button-solid-secondary-active: var(--color-secondary-700);
    --button-solid-secondary-hover: var(--color-secondary-500);
    --button-solid-success: var(--color-success-600);
    --button-solid-success-active: var(--color-success-700);
    --button-solid-success-hover: var(--color-success-500);
    --button-solid-warning: var(--color-warning-600);
    --button-solid-warning-active: var(--color-warning-700);
    --button-solid-warning-hover: var(--color-warning-500);
    --icon-default: var(--color-neutral-0);
    --icon-disabled: var(--color-neutral-900);
    --icon-error: var(--color-error-400);
    --icon-neutral: var(--color-neutral-200);
    --icon-secondary: var(--color-secondary-400);
    --icon-success: var(--color-success-400);
    --icon-warning: var(--color-warning-400);
    --icon-on-bold-black: var(--color-neutral-1000);
    --icon-on-bold-white: var(--color-neutral-0);
    --icon-on-subtle: var(--color-primary-100);
    --interactive-active: var(--color-primary-600);
    --interactive-disabled: var(--color-neutral-800);
    --interactive-error: var(--color-error-600);
    --interactive-inactive: var(--color-neutral-600);
    --interactive-timer-error-solid: var(--color-error-800);
    --interactive-timer-error-subtle: var(--color-error-900);
    --interactive-timer-neutral-solid: var(--color-neutral-600);
    --interactive-timer-neutral-subtle: var(--color-neutral-500);
    --interactive-timer-primary-solid: var(--color-primary-800);
    --interactive-timer-primary-subtle: var(--color-primary-800);
    --interactive-timer-success-solid: var(--color-success-800);
    --interactive-timer-success-subtle: var(--color-success-800);
    --interactive-timer-warning-solid: var(--color-warning-400);
    --interactive-timer-warning-subtle: var(--color-warning-900);
    --status-error: var(--color-error-600);
    --status-focus: var(--color-focus-300);
    --status-success: var(--color-success-600);
    --status-visited: var(--color-visited-300);
    --status-warning: var(--color-warning-300);
    --text-primary-color: var(--color-primary-100);
    --text-secondary-color: var(--color-secondary-600);
    --text-black-fixed: var(--color-neutral-1000);
    --text-disabled: var(--color-neutral-500);
    --text-placeholder: var(--color-neutral-300);
    --text-primary: var(--color-neutral-0);
    --text-secondary: var(--color-neutral-100);
    --text-tertiary: var(--color-neutral-300);
    --text-white: var(--color-neutral-1000);
    --text-white-fixed: var(--color-neutral-0);
    --text-status-error: var(--color-error-400);
    --text-status-info: var(--color-primary-400);
    --text-status-success: var(--color-success-400);
    --text-status-warning: var(--color-warning-400)
}

@media(prefers-color-scheme: dark) {

    html:not([data-theme]),
    html[data-theme=auto] {
        --background-white: var(--color-neutral-1000);
        --background-block-primary: var(--color-neutral-950);
        --background-block-secondary: var(--color-neutral-800);
        --background-overlay-image: rgb(5, 5, 5, 0.7);
        --background-overlay-page: rgb(0, 0, 0, 0.8);
        --background-overlay-transparent: rgb(1, 4, 9, 0);
        --background-page: var(--color-primary-1050);
        --background-neutral-disabled: var(--color-neutral-900);
        --background-neutral-primary: var(--color-neutral-900);
        --background-neutral-secondary: var(--color-neutral-1000);
        --background-neutral-subtle: var(--color-neutral-900);
        --background-neutral-subtlest: var(--color-neutral-950);
        --background-neutral-white: var(--color-neutral-1000);
        --background-primary: var(--color-primary-600);
        --background-primary-subtle: var(--color-primary-950);
        --background-primary-subtlest: var(--color-primary-900);
        --background-secondary: var(--color-secondary-600);
        --background-secondary-subtle: var(--color-secondary-900);
        --background-secondary-subtlest: var(--color-secondary-900);
        --background-status-error: var(--status-error);
        --background-status-error-subtle: var(--color-error-950);
        --background-status-error-subtlest: var(--color-error-950);
        --background-status-success: var(--status-success);
        --background-status-success-subtle: var(--color-success-950);
        --background-status-success-subtlest: var(--color-success-950);
        --background-status-warning: var(--status-warning);
        --background-status-warning-subtle: var(--color-warning-950);
        --background-status-warning-subtlest: var(--color-warning-950);
        --border-error: var(--color-error-600);
        --border-neutral: var(--color-neutral-200);
        --border-primary: var(--color-primary-600);
        --border-secondary: var(--color-secondary-600);
        --border-subtle: var(--color-neutral-600);
        --border-subtlest: var(--color-neutral-900);
        --border-success: var(--color-success-600);
        --border-warning: var(--color-warning-600);
        --border-disabled: var(--color-neutral-900);
        --button-outlined-error: var(--color-error-800);
        --button-outlined-error-active: var(--color-error-900);
        --button-outlined-error-hover: var(--color-error-950);
        --button-outlined-neutral: var(--color-neutral-800);
        --button-outlined-neutral-active: var(--color-neutral-900);
        --button-outlined-neutral-hover: var(--color-neutral-950);
        --button-outlined-primary: var(--color-primary-800);
        --button-outlined-primary-active: var(--color-primary-900);
        --button-outlined-primary-hover: var(--color-primary-950);
        --button-outlined-secondary: var(--color-secondary-800);
        --button-outlined-secondary-active: var(--color-secondary-900);
        --button-outlined-secondary-hover: var(--color-secondary-950);
        --button-outlined-success: var(--color-success-800);
        --button-outlined-success-active: var(--color-success-900);
        --button-outlined-success-hover: var(--color-success-950);
        --button-outlined-warning: var(--color-warning-800);
        --button-outlined-warning-active: var(--color-warning-900);
        --button-outlined-warning-hover: var(--color-warning-950);
        --button-solid-disabled: var(--color-neutral-950);
        --button-solid-error: var(--color-error-600);
        --button-solid-error-active: var(--color-error-700);
        --button-solid-error-hover: var(--color-error-500);
        --button-solid-neutral: var(--color-neutral-600);
        --button-solid-neutral-active: var(--color-neutral-700);
        --button-solid-neutral-hover: var(--color-neutral-500);
        --button-solid-primary: var(--color-primary-600);
        --button-solid-primary-active: var(--color-primary-700);
        --button-solid-primary-hover: var(--color-primary-500);
        --button-solid-secondary: var(--color-secondary-600);
        --button-solid-secondary-active: var(--color-secondary-700);
        --button-solid-secondary-hover: var(--color-secondary-500);
        --button-solid-success: var(--color-success-600);
        --button-solid-success-active: var(--color-success-700);
        --button-solid-success-hover: var(--color-success-500);
        --button-solid-warning: var(--color-warning-600);
        --button-solid-warning-active: var(--color-warning-700);
        --button-solid-warning-hover: var(--color-warning-500);
        --icon-default: var(--color-neutral-0);
        --icon-disabled: var(--color-neutral-900);
        --icon-error: var(--color-error-400);
        --icon-neutral: var(--color-neutral-200);
        --icon-secondary: var(--color-secondary-400);
        --icon-success: var(--color-success-400);
        --icon-warning: var(--color-warning-400);
        --icon-on-bold-black: var(--color-neutral-1000);
        --icon-on-bold-white: var(--color-neutral-0);
        --icon-on-subtle: var(--color-primary-100);
        --interactive-active: var(--color-primary-600);
        --interactive-disabled: var(--color-neutral-800);
        --interactive-error: var(--color-error-600);
        --interactive-inactive: var(--color-neutral-600);
        --interactive-timer-error-solid: var(--color-error-800);
        --interactive-timer-error-subtle: var(--color-error-900);
        --interactive-timer-neutral-solid: var(--color-neutral-600);
        --interactive-timer-neutral-subtle: var(--color-neutral-500);
        --interactive-timer-primary-solid: var(--color-primary-800);
        --interactive-timer-primary-subtle: var(--color-primary-800);
        --interactive-timer-success-solid: var(--color-success-800);
        --interactive-timer-success-subtle: var(--color-success-800);
        --interactive-timer-warning-solid: var(--color-warning-400);
        --interactive-timer-warning-subtle: var(--color-warning-900);
        --status-error: var(--color-error-600);
        --status-focus: var(--color-focus-300);
        --status-success: var(--color-success-600);
        --status-visited: var(--color-visited-300);
        --status-warning: var(--color-warning-300);
        --text-primary-color: var(--color-primary-100);
        --text-secondary-color: var(--color-secondary-600);
        --text-black-fixed: var(--color-neutral-1000);
        --text-disabled: var(--color-neutral-500);
        --text-placeholder: var(--color-neutral-300);
        --text-primary: var(--color-neutral-0);
        --text-secondary: var(--color-neutral-100);
        --text-tertiary: var(--color-neutral-300);
        --text-white: var(--color-neutral-1000);
        --text-white-fixed: var(--color-neutral-0);
        --text-status-error: var(--color-error-400);
        --text-status-info: var(--color-primary-400);
        --text-status-success: var(--color-success-400);
        --text-status-warning: var(--color-warning-400)
    }
}

@media(max-width: 29.99em) {
    :root {
        --corner-radius-none: 0rem;
        --corner-radius-2xs: 0.125rem;
        --corner-radius-xs: 0.25rem;
        --corner-radius-xs-nudge: 0.375rem;
        --corner-radius-s: 0.5rem;
        --corner-radius-s-nudge: 0.75rem;
        --corner-radius-m: 1rem;
        --corner-radius-m-nudge: 1.25rem;
        --corner-radius-l: 1.5rem;
        --corner-radius-xl: 2rem;
        --corner-radius-2xl: 2.5rem;
        --font-size-body-xs: 0.75rem;
        --font-size-body-s: 0.875rem;
        --font-size-body-m: 1rem;
        --font-size-headline-xs: 1rem;
        --font-size-body-l: 1.125rem;
        --font-size-headline-s: 1.125rem;
        --font-size-body-xl: 1.25rem;
        --font-size-headline-m: 1.375rem;
        --font-size-headline-l: 1.875rem;
        --font-size-display-s: 2.25rem;
        --font-size-headline-xl: 2.375rem;
        --font-size-display-m: 2.75rem;
        --font-size-display-l: 3.375rem;
        --height-2xs: 0.125rem;
        --height-xs: 0.25rem;
        --height-xs-nudge: 0.375rem;
        --height-s: 0.5rem;
        --height-s-nudge: 0.75rem;
        --height-m: 1rem;
        --height-m-nudge: 1.25rem;
        --height-l: 1.5rem;
        --height-xl: 2rem;
        --height-2xl: 2.5rem;
        --height-3xl: 3rem;
        --height-4xl: 3.5rem;
        --height-5xl: 4rem;
        --height-6xl: 4.5rem;
        --height-7xl: 5rem;
        --height-8xl: 7.5rem;
        --height-component-xs: 1.5rem;
        --height-component-s: 2rem;
        --height-component-m: 2.5rem;
        --height-component-l: 3rem;
        --height-component-xl: 3.5rem;
        --height-line-xs: 1.125rem;
        --height-line-s: 1.3125rem;
        --height-line-m: 1.5rem;
        --height-line-l: 1.6875rem;
        --height-line-xl: 1.875rem;
        --height-line-2xl: 2.25rem;
        --height-line-3xl: 3rem;
        --icon-size-xs: 0.75rem;
        --icon-size-s: 0.875rem;
        --icon-size-m: 1rem;
        --icon-size-l: 1.125rem;
        --icon-size-xl: 1.25rem;
        --icon-size-2xl: 1.5rem;
        --icon-size-3xl: 2rem;
        --icon-size-4xl: 2.5rem;
        --icon-size-5xl: 3rem;
        --spacing-none: 0rem;
        --spacing-2xs: 0.125rem;
        --spacing-xs: 0.25rem;
        --spacing-xs-nudge: 0.375rem;
        --spacing-s: 0.5rem;
        --spacing-s-nudge: 0.75rem;
        --spacing-m: 1rem;
        --spacing-m-nudge: 1.25rem;
        --spacing-l: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 2.5rem;
        --spacing-3xl: 3rem;
        --spacing-4xl: 3.5rem;
        --spacing-5xl: 4rem;
        --spacing-6xl: 4.5rem;
        --spacing-7xl: 5rem;
        --spacing-8xl: 7.5rem;
        --spacing-multiline-vertical-padding-xs: 0.1875rem;
        --spacing-multiline-vertical-padding-s: 0.3125rem;
        --spacing-multiline-vertical-padding-m: 0.5rem;
        --spacing-multiline-vertical-padding-l: 0.625rem;
        --spacing-multiline-vertical-padding-xl: 0.8125rem
    }
}

@media(min-width: 30em)and (max-width: 63.99em) {
    :root {
        --corner-radius-none: 0rem;
        --corner-radius-2xs: 0.125rem;
        --corner-radius-xs: 0.25rem;
        --corner-radius-xs-nudge: 0.375rem;
        --corner-radius-s: 0.5rem;
        --corner-radius-s-nudge: 0.75rem;
        --corner-radius-m: 1rem;
        --corner-radius-m-nudge: 1.25rem;
        --corner-radius-l: 1.5rem;
        --corner-radius-xl: 2rem;
        --corner-radius-2xl: 2.5rem;
        --font-size-body-xs: 0.75rem;
        --font-size-body-s: 0.875rem;
        --font-size-body-m: 1rem;
        --font-size-body-l: 1.125rem;
        --font-size-headline-xs: 1.125rem;
        --font-size-body-xl: 1.25rem;
        --font-size-headline-s: 1.25rem;
        --font-size-headline-m: 1.5rem;
        --font-size-headline-l: 2rem;
        --font-size-display-s: 2.5rem;
        --font-size-headline-xl: 2.5rem;
        --font-size-display-m: 3rem;
        --font-size-display-l: 3.5rem;
        --height-2xs: 0.125rem;
        --height-xs: 0.25rem;
        --height-xs-nudge: 0.375rem;
        --height-s: 0.5rem;
        --height-s-nudge: 0.75rem;
        --height-m: 1rem;
        --height-m-nudge: 1.25rem;
        --height-l: 1.5rem;
        --height-xl: 2rem;
        --height-2xl: 2.5rem;
        --height-3xl: 3rem;
        --height-4xl: 3.5rem;
        --height-5xl: 4rem;
        --height-6xl: 4.5rem;
        --height-7xl: 5rem;
        --height-8xl: 7.5rem;
        --height-component-xs: 1.5rem;
        --height-component-s: 2rem;
        --height-component-m: 2.5rem;
        --height-component-l: 3rem;
        --height-component-xl: 3.5rem;
        --height-line-xs: 1.125rem;
        --height-line-s: 1.3125rem;
        --height-line-m: 1.5rem;
        --height-line-l: 1.6875rem;
        --height-line-xl: 1.875rem;
        --height-line-2xl: 2.25rem;
        --height-line-3xl: 3rem;
        --icon-size-xs: 0.75rem;
        --icon-size-s: 0.875rem;
        --icon-size-m: 1rem;
        --icon-size-l: 1.125rem;
        --icon-size-xl: 1.25rem;
        --icon-size-2xl: 1.5rem;
        --icon-size-3xl: 2rem;
        --icon-size-4xl: 2.5rem;
        --icon-size-5xl: 3rem;
        --spacing-none: 0rem;
        --spacing-2xs: 0.125rem;
        --spacing-xs: 0.25rem;
        --spacing-xs-nudge: 0.375rem;
        --spacing-s: 0.5rem;
        --spacing-s-nudge: 0.75rem;
        --spacing-m: 1rem;
        --spacing-m-nudge: 1.25rem;
        --spacing-l: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 2.5rem;
        --spacing-3xl: 3rem;
        --spacing-4xl: 3.5rem;
        --spacing-5xl: 4rem;
        --spacing-6xl: 4.5rem;
        --spacing-7xl: 5rem;
        --spacing-8xl: 7.5rem;
        --spacing-multiline-vertical-padding-xs: 0.1875rem;
        --spacing-multiline-vertical-padding-s: 0.3125rem;
        --spacing-multiline-vertical-padding-m: 0.5rem;
        --spacing-multiline-vertical-padding-l: 0.625rem;
        --spacing-multiline-vertical-padding-xl: 0.8125rem
    }
}

@media(min-width: 64em) {
    :root {
        --corner-radius-none: 0rem;
        --corner-radius-2xs: 0.125rem;
        --corner-radius-xs: 0.25rem;
        --corner-radius-xs-nudge: 0.375rem;
        --corner-radius-s: 0.5rem;
        --corner-radius-s-nudge: 0.75rem;
        --corner-radius-m: 1rem;
        --corner-radius-m-nudge: 1.25rem;
        --corner-radius-l: 1.5rem;
        --corner-radius-xl: 2rem;
        --corner-radius-2xl: 2.5rem;
        --font-size-body-xs: 0.75rem;
        --font-size-body-s: 0.875rem;
        --font-size-body-m: 1rem;
        --font-size-body-l: 1.125rem;
        --font-size-headline-xs: 1.125rem;
        --font-size-body-xl: 1.25rem;
        --font-size-headline-s: 1.25rem;
        --font-size-headline-m: 1.5rem;
        --font-size-headline-l: 2rem;
        --font-size-display-s: 2.5rem;
        --font-size-headline-xl: 2.5rem;
        --font-size-display-m: 3rem;
        --font-size-display-l: 3.5rem;
        --height-2xs: 0.125rem;
        --height-xs: 0.25rem;
        --height-xs-nudge: 0.375rem;
        --height-s: 0.5rem;
        --height-s-nudge: 0.75rem;
        --height-m: 1rem;
        --height-m-nudge: 1.25rem;
        --height-l: 1.5rem;
        --height-xl: 2rem;
        --height-2xl: 2.5rem;
        --height-3xl: 3rem;
        --height-4xl: 3.5rem;
        --height-5xl: 4rem;
        --height-6xl: 4.5rem;
        --height-7xl: 5rem;
        --height-8xl: 7.5rem;
        --height-component-xs: 1.5rem;
        --height-component-s: 2rem;
        --height-component-m: 2.5rem;
        --height-component-l: 3rem;
        --height-component-xl: 3.5rem;
        --height-line-xs: 1.125rem;
        --height-line-s: 1.3125rem;
        --height-line-m: 1.5rem;
        --height-line-l: 1.6875rem;
        --height-line-xl: 1.875rem;
        --height-line-2xl: 2.25rem;
        --height-line-3xl: 3rem;
        --icon-size-xs: 0.75rem;
        --icon-size-s: 0.875rem;
        --icon-size-m: 1rem;
        --icon-size-l: 1.125rem;
        --icon-size-xl: 1.25rem;
        --icon-size-2xl: 1.5rem;
        --icon-size-3xl: 2rem;
        --icon-size-4xl: 2.5rem;
        --icon-size-5xl: 3rem;
        --spacing-none: 0rem;
        --spacing-2xs: 0.125rem;
        --spacing-xs: 0.25rem;
        --spacing-xs-nudge: 0.375rem;
        --spacing-s: 0.5rem;
        --spacing-s-nudge: 0.75rem;
        --spacing-m: 1rem;
        --spacing-m-nudge: 1.25rem;
        --spacing-l: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 2.5rem;
        --spacing-3xl: 3rem;
        --spacing-4xl: 3.5rem;
        --spacing-5xl: 4rem;
        --spacing-6xl: 4.5rem;
        --spacing-7xl: 5rem;
        --spacing-8xl: 7.5rem;
        --spacing-multiline-vertical-padding-xs: 0.1875rem;
        --spacing-multiline-vertical-padding-s: 0.3125rem;
        --spacing-multiline-vertical-padding-m: 0.5rem;
        --spacing-multiline-vertical-padding-l: 0.625rem;
        --spacing-multiline-vertical-padding-xl: 0.8125rem
    }
}

:root {
    --font-family: Roboto, sans-serif;
    --color-primary-50: rgb(243, 247, 252);
    --color-primary-100: rgb(229, 238, 249);
    --color-primary-200: rgb(197, 219, 242);
    --color-primary-300: rgb(147, 189, 230);
    --color-primary-400: rgb(89, 155, 215);
    --color-primary-500: rgb(51, 127, 196);
    --color-primary-600: rgb(35, 98, 162);
    --color-primary-700: rgb(30, 80, 134);
    --color-primary-800: rgb(29, 69, 111);
    --color-primary-900: rgb(29, 60, 93);
    --color-primary-950: rgb(19, 38, 62);
    --color-primary-1000: rgb(15, 31, 51);
    --color-primary-1050: rgb(1, 4, 9);
    --color-secondary-50: rgb(255, 249, 233);
    --color-secondary-100: rgb(255, 246, 225);
    --color-secondary-200: rgb(254, 240, 208);
    --color-secondary-300: rgb(253, 225, 161);
    --color-secondary-400: rgb(255, 207, 116);
    --color-secondary-500: rgb(251, 195, 66);
    --color-secondary-600: rgb(250, 180, 19);
    --color-secondary-700: rgb(200, 144, 15);
    --color-secondary-800: rgb(175, 122, 0);
    --color-secondary-900: rgb(74, 52, 3);
    --color-secondary-950: rgb(61, 43, 0);
    --color-secondary-1000: rgb(36, 27, 4);
    --color-neutral-0: rgb(255, 255, 255);
    --color-neutral-50: rgb(246, 246, 246);
    --color-neutral-100: rgb(231, 231, 231);
    --color-neutral-200: rgb(209, 209, 209);
    --color-neutral-300: rgb(176, 176, 176);
    --color-neutral-400: rgb(136, 136, 136);
    --color-neutral-500: rgb(109, 109, 109);
    --color-neutral-600: rgb(93, 93, 93);
    --color-neutral-700: rgb(79, 79, 79);
    --color-neutral-800: rgb(69, 69, 69);
    --color-neutral-900: rgb(59, 59, 59);
    --color-neutral-950: rgb(38, 38, 38);
    --color-neutral-1000: rgb(0, 0, 0);
    --color-neutral-transparent: rgba(255, 255, 255, 0);
    --color-error-50: rgb(254, 242, 242);
    --color-error-100: rgb(253, 227, 227);
    --color-error-200: rgb(252, 204, 204);
    --color-error-300: rgb(248, 169, 169);
    --color-error-400: rgb(243, 118, 118);
    --color-error-500: rgb(232, 75, 75);
    --color-error-600: rgb(198, 40, 40);
    --color-error-700: rgb(179, 34, 34);
    --color-error-800: rgb(126, 20, 20);
    --color-error-900: rgb(73, 12, 12);
    --color-error-950: rgb(48, 6, 6);
    --color-error-1000: rgb(36, 3, 3);
    --color-success-50: rgb(243, 250, 243);
    --color-success-100: rgb(226, 246, 227);
    --color-success-200: rgb(199, 235, 201);
    --color-success-300: rgb(155, 218, 158);
    --color-success-400: rgb(103, 193, 107);
    --color-success-500: rgb(66, 165, 71);
    --color-success-600: rgb(46, 125, 50);
    --color-success-700: rgb(42, 107, 45);
    --color-success-800: rgb(38, 85, 41);
    --color-success-900: rgb(32, 71, 36);
    --color-success-950: rgb(13, 38, 15);
    --color-success-1000: rgb(6, 27, 8);
    --color-warning-50: rgb(254, 251, 232);
    --color-warning-100: rgb(254, 247, 195);
    --color-warning-200: rgb(254, 237, 138);
    --color-warning-300: rgb(253, 216, 53);
    --color-warning-400: rgb(250, 198, 21);
    --color-warning-500: rgb(234, 173, 8);
    --color-warning-600: rgb(202, 133, 4);
    --color-warning-700: rgb(228, 148, 0);
    --color-warning-800: rgb(190, 125, 2);
    --color-warning-900: rgb(107, 74, 13);
    --color-warning-950: rgb(67, 46, 6);
    --color-warning-1000: rgb(42, 27, 0);
    --color-focus-300: rgb(108, 174, 244);
    --color-focus-600: rgb(0, 123, 255);
    --color-visited-300: rgb(196, 167, 230);
    --color-visited-600: rgb(103, 50, 158);
    --color-visited-700: rgb(96, 48, 107)
}
:root {
    --layout-gap: var(--templates-margin-l);
    --container-width: var(--templates-layout-page-limit-max);
    --container-padding-horizontal: var(--templates-margin-l);
    --container-padding-top: var(--templates-margin-l);
    --container-padding-bottom: var(--templates-margin-8xl)
}

@media(max-width: 29.99em) {
    :root {
        --templates-layout-image-highlighted-height: 17.5rem;
        --templates-layout-image-small-height: 17.5rem;
        --templates-layout-page-limit-max: 40rem;
        --templates-margin-none: 0rem;
        --templates-margin-s: 0.375rem;
        --templates-margin-m: 0.75rem;
        --templates-margin-l: 1rem;
        --templates-margin-xl: 1.75rem;
        --templates-margin-2xl: 2.25rem;
        --templates-margin-3xl: 2.625rem;
        --templates-margin-4xl: 3rem;
        --templates-margin-5xl: 3.625rem;
        --templates-margin-6xl: 4rem;
        --templates-margin-7xl: 4.5rem;
        --templates-margin-8xl: 6.25rem;
        --templates-margin-9xl: 9.25rem;
        --templates-viewport-min: 18.75rem;
        --templates-viewport-default: 22.5rem;
        --templates-viewport-max: 50rem;
        --templates-width-max-xs: 50rem;
        --templates-width-max-s: 50rem;
        --templates-width-max-m: 50rem;
        --templates-width-max-l: 50rem;
        --templates-width-max-xl: 50rem;
        --templates-width-max-2xl: 50rem;
        --templates-width-max-3xl: 50rem;
        --templates-width-max-4xl: 50rem;
        --templates-width-max-5xl: 50rem;
        --templates-width-max-6xl: 50rem;
        --templates-width-max-7xl: 50rem;
        --templates-width-max-8xl: 50rem;
        --templates-width-min-xs: 6.25rem;
        --templates-width-min-s: 12.5rem;
        --templates-width-min-m: 18.75rem;
        --templates-width-min-l: 18.75rem;
        --templates-width-min-2xl: 18.75rem;
        --templates-width-min-3xl: 18.75rem;
        --templates-width-min-4xl: 18.75rem;
        --templates-width-min-5xl: 18.75rem;
        --templates-width-min-6xl: 18.75rem;
        --templates-width-min-7xl: 18.75rem;
        --templates-width-min-8xl: 18.75rem
    }
}

@media(min-width: 30em)and (max-width: 63.99em) {
    :root {
        --templates-layout-image-small-height: 11.75rem;
        --templates-layout-image-highlighted-height: 35.75rem;
        --templates-layout-page-limit-max: 75rem;
        --templates-margin-none: 0rem;
        --templates-margin-s: 0.5rem;
        --templates-margin-m: 1rem;
        --templates-margin-l: 1.5rem;
        --templates-margin-xl: 2rem;
        --templates-margin-2xl: 2.5rem;
        --templates-margin-3xl: 3rem;
        --templates-margin-4xl: 3.5rem;
        --templates-margin-5xl: 4rem;
        --templates-margin-6xl: 4.5rem;
        --templates-margin-7xl: 5rem;
        --templates-margin-8xl: 7.5rem;
        --templates-margin-9xl: 10rem;
        --templates-viewport-min: 40rem;
        --templates-viewport-default: 64rem;
        --templates-viewport-max: 90rem;
        --templates-width-max-xs: 6.25rem;
        --templates-width-max-s: 12.5rem;
        --templates-width-max-m: 18.75rem;
        --templates-width-max-l: 25rem;
        --templates-width-max-xl: 31.25rem;
        --templates-width-max-2xl: 37.5rem;
        --templates-width-max-3xl: 43.75rem;
        --templates-width-max-4xl: 50rem;
        --templates-width-max-5xl: 56.25rem;
        --templates-width-max-6xl: 62.5rem;
        --templates-width-max-7xl: 68.75rem;
        --templates-width-max-8xl: 75rem;
        --templates-width-min-xs: 6.25rem;
        --templates-width-min-s: 12.5rem;
        --templates-width-min-m: 18.75rem;
        --templates-width-min-l: 25rem;
        --templates-width-min-xl: 31.25rem;
        --templates-width-min-2xl: 37.5rem;
        --templates-width-min-3xl: 43.75rem;
        --templates-width-min-4xl: 50rem;
        --templates-width-min-5xl: 56.25rem;
        --templates-width-min-6xl: 62.5rem;
        --templates-width-min-7xl: 68.75rem
    }
}

@media(min-width: 64em) {
    :root {
        --templates-layout-image-small-height: 11.75rem;
        --templates-layout-image-highlighted-height: 35.75rem;
        --templates-layout-page-limit-max: 75rem;
        --templates-margin-none: 0rem;
        --templates-margin-s: 0.5rem;
        --templates-margin-m: 1rem;
        --templates-margin-l: 1.5rem;
        --templates-margin-xl: 2rem;
        --templates-margin-2xl: 2.5rem;
        --templates-margin-3xl: 3rem;
        --templates-margin-4xl: 3.5rem;
        --templates-margin-5xl: 4rem;
        --templates-margin-6xl: 4.5rem;
        --templates-margin-7xl: 5rem;
        --templates-margin-8xl: 7.5rem;
        --templates-margin-9xl: 10rem;
        --templates-viewport-min: 50rem;
        --templates-viewport-default: 90rem;
        --templates-viewport-max: 128.75rem;
        --templates-width-max-xs: 6.25rem;
        --templates-width-max-s: 12.5rem;
        --templates-width-max-m: 18.75rem;
        --templates-width-max-l: 25rem;
        --templates-width-max-xl: 31.25rem;
        --templates-width-max-2xl: 37.5rem;
        --templates-width-max-3xl: 43.75rem;
        --templates-width-max-4xl: 50rem;
        --templates-width-max-5xl: 56.25rem;
        --templates-width-max-6xl: 62.5rem;
        --templates-width-max-7xl: 68.75rem;
        --templates-width-max-8xl: 75rem;
        --templates-width-min-xs: 6.25rem;
        --templates-width-min-s: 12.5rem;
        --templates-width-min-m: 18.75rem;
        --templates-width-min-l: 25rem;
        --templates-width-min-xl: 31.25rem;
        --templates-width-min-2xl: 37.5rem;
        --templates-width-min-3xl: 43.75rem;
        --templates-width-min-4xl: 50rem;
        --templates-width-min-5xl: 56.25rem;
        --templates-width-min-6xl: 62.5rem;
        --templates-width-min-7xl: 68.75rem
    }
}

:root[data-theme=light] {
    --component-footer-background: var(--color-primary-900);
    --component-footer-separator: var(--color-primary-600);
    --component-footer-text-link: var(--color-primary-200);
    --component-footer-text-primary: var(--color-neutral-0);
    --component-footer-text-secondary: var(--color-neutral-200);
    --component-nav-background: var(--color-neutral-0);
    --component-nav-separator: var(--color-primary-200);
    --component-nav-text-link: var(--color-primary-900);
    --component-nav-text-primary: var(--color-primary-800);
    --component-nav-text-secondary: var(--color-neutral-900)
}

@media(prefers-color-scheme: light) {
    html:not([data-theme]),html[data-theme=auto] {
        --component-footer-background: var(--color-primary-900);
        --component-footer-separator: var(--color-primary-600);
        --component-footer-text-link: var(--color-primary-200);
        --component-footer-text-primary: var(--color-neutral-0);
        --component-footer-text-secondary: var(--color-neutral-200);
        --component-nav-background: var(--color-neutral-0);
        --component-nav-separator: var(--color-primary-200);
        --component-nav-text-link: var(--color-primary-900);
        --component-nav-text-primary: var(--color-primary-800);
        --component-nav-text-secondary: var(--color-neutral-900)
    }
}

:root[data-theme=dark] {
    --component-footer-background: var(--color-neutral-950);
    --component-footer-separator: var(--color-neutral-600);
    --component-footer-text-link: var(--color-primary-100);
    --component-footer-text-primary: var(--color-neutral-50);
    --component-footer-text-secondary: var(--color-neutral-200);
    --component-nav-background: var(--color-neutral-950);
    --component-nav-separator: var(--color-neutral-600);
    --component-nav-text-link: var(--color-neutral-0);
    --component-nav-text-primary: var(--color-neutral-0);
    --component-nav-text-secondary: var(--color-neutral-100)
}

@media(prefers-color-scheme: dark) {
    html:not([data-theme]),html[data-theme=auto] {
        --component-footer-background: var(--color-neutral-950);
        --component-footer-separator: var(--color-neutral-600);
        --component-footer-text-link: var(--color-primary-100);
        --component-footer-text-primary: var(--color-neutral-50);
        --component-footer-text-secondary: var(--color-neutral-200);
        --component-nav-background: var(--color-neutral-950);
        --component-nav-separator: var(--color-neutral-600);
        --component-nav-text-link: var(--color-neutral-0);
        --component-nav-text-primary: var(--color-neutral-0);
        --component-nav-text-secondary: var(--color-neutral-100)
    }
}