:root {
    /*-- import from figma --*/
    --color-primary-500: #001E50;
    --color-primary-400: #334B73;
    --color-primary-300: #4D6285;
    --color-primary-200: #97A3B7;
    --color-primary-100: #DFE4E8;
    --color-secondary-500: #00526F;
    --color-secondary-400: #00B0F0;
    --color-secondary-300: #4CC7F4;
    --color-secondary-200: #7ED6F6;
    --color-secondary-100: #BCECFE;
    --color-neutral-white: #FFFFFF;
    --color-neutral-100: #F2F2F2;
    --color-neutral-200: #E5E5E5;
    --color-neutral-300: #CECECE;
    --color-neutral-400: #A6A6A6;
    --color-neutral-500: #777777;
    --color-neutral-600: #4D4D4D;
    --color-neutral-black: #000000;
    --color-success-500: #04581E;
    --color-success-400: #00872B;
    --color-success-300: #61BA7D;
    --color-success-200: #CAEFD6;
    --color-success-100: #E2F4E8;
    --color-error-500: #810C23;
    --color-error-400: #E4002C;
    --color-error-300: #D46B80;
    --color-error-200: #F0CED5;
    --color-error-100: #F6EBED;
    --color-warning-500: #6D3602;
    --color-warning-400: #FFD100;
    --color-warning-300: #F2D557;
    --color-warning-200: #FAE9A2;
    --color-warning-100: #FFF5CD;
    --type-link-color: var(--color-primary-400);
    --type-link-hover-color: var(--color-primary-500);
    --type-heading-color: var(--color-primary-500);
    --type-body-color: var(--color-neutral-black);
    --type-label-color: var(--color-neutral-500);
    --color-info-500: #042F6E;
    --color-info-400: #3971C3;
    --color-info-300: #6999E0;
    --color-info-200: #D1DFF5;
    --color-info-100: #DFE8F7;
    --border-radius-small: 0;
    --border-radius-base: 0;
    --border-radius-large: 0;
    --border-line-color: var(--color-neutral-200);
    --icon-fill-color: var(--color-primary-400);
    --icon-badge-background-color: var(--color-primary-500);
    --icon-badge-color: var(--color-neutral-white);
    --button-border-width: 2px;
    --button-border-radius: 24px;
    --button-padding-horizontal: 20px;
    --button-padding-horizontal-small: 16px;
    --button-primary-background-color: var(--color-primary-500);
    --button-primary-background-hover-color: var(--color-primary-400);
    --button-primary-border-color: var(--color-primary-500);
    --button-primary-border-hover-color: var(--color-primary-400);
    --button-primary-color: var(--color-neutral-white);
    --button-primary-color-hover: var(--color-neutral-white);
    --button-secondary-background-color: #FFFFFF00;
    --button-secondary-background-hover-color: #FFFFFF00;
    --button-secondary-color: var(--color-primary-400);
    --button-secondary-border-color: var(--color-primary-400);
    --button-secondary-color-hover: var(--color-primary-500);
    --button-secondary-border-hover-color: var(--color-primary-500);
    --button-disabled-background-color: var(--color-neutral-200);
    --button-disabled-border-color: var(--color-neutral-200);
    --button-disabled-color: var(--color-neutral-600);
    --button-dark-secondary-color: var(--color-neutral-200);
    --button-dark-secondary-border-color: var(--color-neutral-200);
    --button-dark-secondary-color-hover: var(--color-neutral-white);
    --button-dark-secondary-border-color-hover: var(--color-neutral-white);
    --button-link-color: var(--color-primary-400);
    --button-link-hover-color: var(--color-primary-500);
    --button-dark-primary-color: var(--color-primary-400);
    --button-dark-primary-background-color: var(--color-neutral-white);
    --button-dark-primary-hover-color: var(--color-primary-500);
    --button-dark-primary-background-hover-color: var(--color-neutral-white);
    --input-checked-background-color: var(--color-neutral-white);
    --input-checked-border-color: var(--color-primary-500);
    --input-checked-icon-color: var(--color-primary-500);
    --theme: "Volkswagen";
    --input-checkbox-background-color: var(--color-neutral-white);
    --input-checkbox-border-color: var(--color-neutral-300);
    --input-checkbox-border-width: 1px;
    --stepper-active-color: var(--color-primary-400);
    --stepper-checked-background-color: var(--color-success-500);
    --stepper-checked-color: var(--color-success-200);
    --stepper-active-dark-color: var(--color-neutral-white);
    --stepper-checked-dark-background-color: var(--color-success-300);
    --stepper-checked-dark-color: var(--color-neutral-white);
    --tabs-item-active-background-color: var(--color-primary-500);
    --tabs-item-active-label-color: var(--color-neutral-white);
    --tabs-item-label-color: var(--color-neutral-600);
    --tabs-background-color: #FFFFFF00;
    --tabs-border-color: var(--color-primary-500);
    --tabs-border-width: 2px;
    --tabs-border-radius: 24px;
    --tabs-item-border-radius: 24px;
    --progress-bar-color: var(--color-secondary-400);
    --alert-success-color: var(--color-success-500);
    --alert-success-border-color: var(--color-success-200);
    --alert-success-background-color: var(--color-success-200);
    --alert-info-color: var(--color-info-500);
    --alert-info-border-color: var(--color-info-200);
    --alert-info-background-color: var(--color-info-200);
    --alert-warning-color: var(--color-warning-500);
    --alert-warning-border-color: var(--color-warning-200);
    --alert-warning-background-color: var(--color-warning-200);
    --alert-error-color: var(--color-error-500);
    --alert-error-border-color: var(--color-error-100);
    --alert-error-background-color: var(--color-error-100);
    --alert-neutral-color: var(--color-neutral-600);
    --alert-neutral-border-color: var(--color-neutral-200);
    --alert-neutral-background-color: var(--color-neutral-200);
    --body-background-color: var(--color-neutral-100);
    --tooltip-background-color: var(--color-primary-500);
    --tooltip-color: var(--color-neutral-white);
    --footer-background-color: var(--color-primary-500);
    --footer-color: var(--color-neutral-white);
    --footer-link-color: var(--color-neutral-white);
    --footer-link-hover-color: var(--color-neutral-200);
    --headernav-active-border-color: var(--color-secondary-400);
    --headernav-nav-dropdown-text: var(--color-primary-500);
    --headernav-nav-dropdown-background-hover: var(--color-primary-100);
    /*-- fonts --*/
    --type-heading-font-family:  'VW Head', sans-serif;
    --type-heading-font-weight: 700;
    --type-base-font-family: 'VW Text', sans-serif;
}