:root {

/*-- import from figma --*/    
--color-primary-500: #000000;
--color-primary-400: #333333;
--color-primary-300: #666666;
--color-primary-200: #999999;
--color-primary-100: #D9D9D9;
--color-secondary-500: #B20328;
--color-secondary-400: #F50537;
--color-secondary-300: #FF5477;
--color-secondary-200: #FFB2C2;
--color-secondary-100: #FFEDF1;
--color-neutral-white: #FFFFFF;
--color-neutral-100: #F5F5F5;
--color-neutral-200: #E5E5E5;
--color-neutral-300: #CCCCCC;
--color-neutral-400: #999999;
--color-neutral-500: #666666;
--color-neutral-600: #333333;
--color-neutral-black: #000000;
--color-success-500: #065106;
--color-success-400: #0DA20D;
--color-success-300: #61BA7D;
--color-success-200: #CCF1CC;
--color-success-100: #E8F7E8;
--color-error-500: #820724;
--color-error-400: #EB0D3F;
--color-error-300: #EE9AAE;
--color-error-200: #F3BCC9;
--color-error-100: #F7E6EA;
--color-warning-500: #713F05;
--color-warning-400: #FFAA00;
--color-warning-300: #F1BB4F;
--color-warning-200: #FBDB9C;
--color-warning-100: #FCF2DE;
--type-link-color: var(--color-primary-500);
--type-link-hover-color: var(--color-primary-400);
--type-heading-color: var(--color-primary-500);
--type-body-color: var(--color-neutral-black);
--type-label-color: var(--type-body-color);
--color-info-500: #020266;
--color-info-400: #2526FE;
--color-info-300: #6A7FF2;
--color-info-200: #BFC6EE;
--color-info-100: #E1E5FD;
--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-500);
--icon-badge-background-color: var(--color-primary-500);
--icon-badge-color: var(--color-neutral-white);
--button-border-width: 1px;
--button-border-radius: 0;
--button-padding-horizontal: 16px;
--button-padding-horizontal-small: 12px;
--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-500);
--button-secondary-border-color: var(--color-primary-500);
--button-secondary-color-hover: var(--color-primary-300);
--button-secondary-border-hover-color: var(--color-primary-300);
--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-500);
--button-link-hover-color: var(--color-primary-400);
--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: "Audi";
--input-checkbox-background-color: var(--color-neutral-white);
--input-checkbox-border-color: var(--color-primary-300);
--input-checkbox-border-width: 1px;
--stepper-active-color: var(--color-primary-500);
--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(--type-body-color);
--tabs-background-color: #FFFFFF00;
--tabs-border-color: var(--color-neutral-black);
--tabs-border-width: 2px;
--tabs-border-radius: 0;
--tabs-item-border-radius: 0;
--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-neutral-black);
--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:  'Audi Head', sans-serif;
--type-heading-font-weight: 700;
--type-base-font-family: 'Audi Text', sans-serif;

}