.design-vvskupp {
    /* -------------------- PRIMITIVE TOKENS -------------------- */

    /* Brand color */
    --color-brand-50: #e6edf1;
    --color-brand-100: #ccdbe2;
    --color-brand-150: #b3c9d4;
    --color-brand-200: #99b7c6;
    --color-brand-300: #6693a9;
    --color-brand-400: #336f8d;
    --color-brand-450: #0077a7; /* monochromatic */
    --color-brand-500: #004B70; /* base */
    --color-brand-600: #003c5a;
    --color-brand-700: #002d43;
    --color-brand-800: #001e2d;
    --color-brand-850: #001622;
    --color-brand-900: #000f16;
    --color-brand-950: #00070b;
    
    /* Primary color */
    --color-primary-50: var(--color-brand-50);
    --color-primary-100: var(--color-brand-100);
    --color-primary-150: var(--color-brand-150);
    --color-primary-200: var(--color-brand-200);
    --color-primary-300: var(--color-brand-300);
    --color-primary-400: var(--color-brand-400);
    --color-primary-450: var(--color-brand-450); /* monochromatic */
    --color-primary-500: var(--color-brand-500); /* base */
    --color-primary-600: var(--color-brand-600);
    --color-primary-700: var(--color-brand-700);
    --color-primary-800: var(--color-brand-800);
    --color-primary-850: var(--color-brand-850);
    --color-primary-900: var(--color-brand-900);
    --color-primary-950: var(--color-brand-950);

    /* Secondary color */
    --color-secondary-50: #e6f1f6;
    --color-secondary-100: #cce4ed;
    --color-secondary-150: #b3d6e5;
    --color-secondary-200: #99c9dc;
    --color-secondary-300: #66adca;
    --color-secondary-400: #3392b9;
    --color-secondary-450: var(--color-brand-450); /* monochromatic */
    --color-secondary-500: var(--color-brand-450); /* monochromatic */
    --color-secondary-600: #005f86;
    --color-secondary-700: #004764;
    --color-secondary-800: #003043;
    --color-secondary-850: #002432;
    --color-secondary-900: #001821;
    --color-secondary-950: #000c11;

    /* Basic colors */
    --color-white: #FFF;
    --color-dark: var(--color-brand-850);
    --color-black: var(--color-brand-900);
    --color-blue-500: var(--color-brand-500);
    --color-blue-100: var(--color-brand-50);
    --color-green-500: #3cb991;
    --color-green-100: #d8f1e9;
    --color-red-700: #a73500;
    --color-red-500: #C23D00;
    --color-red-100: #FAECE6;
    --color-yellow-500: #FDD25E;
    --color-yellow-100: #feebb9;
    
    /* Grey colors */
    --color-grey-50: #F5F5F5;
    --color-grey-100: #EEEEEE;
    --color-grey-150: #E1E1E1;
    --color-grey-200: #DEDEDE; /* borders */
    --color-grey-300: #757575; /* muted  */
    --color-grey-400: #5e5e5e; /* subdued  */
    --color-grey-500: #363636;
    --color-grey-600: #313131;
    --color-grey-700: #262626;
    --color-grey-800: #1A1A1A;
    --color-grey-850: #101010;
    --color-grey-900: #0B0B0B;
    --color-grey-950: #050505;
    
/* -------------------- SEMANTIC TOKENS -------------------- */  
    
    /* Amount */
    --color-amount-bg: var(--color-brand-450);
    --color-amount-fg: var(--color-white);

    /* Basic headers */
    --text-header-2xl: normal normal bold var(--font-size-2xl)/1.5 var(--default-font);
    --text-header-xl: normal normal bold var(--font-size-xl)/1.5 var(--default-font);
    --text-header-lg: normal normal bold var(--font-size-lg)/1.5 var(--default-font);
    --text-header-md: normal normal bold var(--font-size-md)/1.5 var(--default-font);
    --text-header-sm: normal normal bold var(--font-size-sm)/1.5 var(--default-font);
    --text-header-xs: normal normal bold var(--font-size-xs)/1.5 var(--default-font);    
    
    /* Brighten brand color */
    --color-brand-brighter-1: var(--color-brand-50);
    --color-brand-brighter-2: var(--color-brand-100);
    --color-brand-brighter-3: var(--color-brand-150);
    --color-brand-brighter-4: var(--color-brand-200);

    /* Box */
    --color-box-bg: var(--color-brand-brighter-1);
    --color-box-fg: var(--color-brand-500);

    /* Checkmark */
    --color-checkmark-fg: var(--color-brand-500);
    --color-checkmark-bg: var( --color-grey-100);

    /* Headers */
    --heading-3: normal normal bold var(--font-size-heading-3)/1.5 var(--brand-font);
    
    /* Mobile menu */
    --color-menu-fg: var(--color-white);
    --color-menu-fg-hover: var(--color-white);
    --color-menu-bg: transparant;
    --color-menu-bg-hover: var(--color-brand-700);
    --color-menu-border: var(--color-brand-700);
    --color-menu-burger: var(--color-menu-fg);
    
    /* Status */
    --color-info: var(--color-blue-500);
    --color-info-fg:var(--color-white);
    --color-info-bg: var(--color-blue-100);
    --color-success: var(--color-green-500);
    --color-success-fg: var(--color-white);
    --color-success-bg: var(--color-green-100);
    --color-warning: var(--color-yellow-500);
    --color-warning-fg: var(--color-black);
    --color-warning-bg: var(--color-yellow-100);
    --color-error: var(--color-red-500);
    --color-error-fg: var(--color-white);
    --color-error-bg: var(--color-red-100);
    --color-urgent: var(--color-red-500);
    
    /* Text color */
    --color-text-muted: var(--color-grey-300);
    --color-text-subdued: var(--color-grey-400);
    --color-text-body: var(--color-grey-700);
    --color-text-headers: var(--color-dark);
    --color-text-white: var(--color-white);



/* ---------------------------------------------------------- */  
       

    /*Font*/
    --brand-font: Outfit, sans-serif;
    --default-font: Arimo, sans-serif;
    --button-font: Arimo, sans-serif;

    /*Colors*/
    --brand-color: var(--color-brand-500);
    --hover-of-brand-color: var(--color-brand-600);
    --primary-color: var(--color-primary-500);
    --hover-of-primary-color: var(--color-primary-600);
    --secondary-color: var(--color-secondary-500);
    --campaign-color: var(--color-red-500);
    --offset-of-brand-color: var(--color-brand-600);
    --offset-of-brand-color-darker: var(--color-brand-700);
    --offset-of-brand-color-lighter: var(--color-brand-450);
    --product-price-color: var(--color-dark);
    --discount-color: var(--color-red-500);
    --standard-text-color: var(--color-text-body);
    --muted: var(--color-grey-300);
    --subdued-color: var(--color-grey-400);
    --primary-grey: var(--color-grey-200);
    --secondary-grey: var(--color-grey-150);
    --dark: var(--color-dark);
    --white: var(--color-white);
    --color-on-brand-color: var(--color-white);
    --color-on-primary-color: var(--color-white);
    --color-on-secondary-color: var(--color-white);
    --color-on-campaign-color: var(--color-white);
    --color-on-highligted-background-color: var(--color-white);
    --success-color: var(--color-green-500);
    --error-color: var(--color-red-500);
    --attention-color: var(--color-green-500);
    --cta-color: var(--color-brand-500);
    --cta-hover-color: var(--color-brand-600);
    --color-on-cta-color: var(--color-white);
    --color-on-cta-hover-color: var(--color-white);
    --before-price: var(--subdued-color);
    --disabled-input: var(--color-grey-200);

    /*Opacity*/
    --primary-background-color-opacity: #004B70e6;

    /*Recommendation stars*/
    --recommendation-stars: var(--color-yellow-500);

    /*Splash*/
    --splash-color: var(--campaign-color);
    --color-on-splash: var(--color-white);
    --font-weight-on-splash: 700;


    /*Stock status*/
    --in-stock: var(--color-green-500);
    --not-in-stock: var(--color-grey-300);
    --variant-in-stock-color: var(--color-yellow-500);

    /*Background-color*/
    --white-background-color: var(--color-white);
    --primary-background-color: var(--color-grey-50);
    --primary-background-color-grey: var(--color-grey-50);
    --secondary-background-color: var(--color-grey-100);
    --tertiary-background-color: var(--color-grey-150);
    --highligted-background-color: var(--campaign-color);
    --hover-of-highligted-background-color: color-mix(in srgb, var(--campaign-color), black 10%);

    /*Letter- and word-spacing*/
    --letter-spacing: 0.04vw;
    --word-spacing: 0.04vw;
    --letter-spacing-sm: 0.02vw;
    --word-spacing-sm: 0.02vw;
    --letter-spacing-xs: 0.01vw;
    --word-spacing-xs: 0.01vw;

    /*Productbox*/
    --product-background-default: var(--color-white);
    --product-background-color1: color-mix(in srgb, var(--brand-color), white 95%);
    --product-background-color2: color-mix(in srgb, var(--brand-color), white 90%);
    --product-background-color3: color-mix(in srgb, var(--brand-color), white 85%);
    --product-background-color4: color-mix(in srgb, var(--brand-color), white 80%);



    /*Title and headers*/
    --title-color: var(--standard-text-color);
    --title-xs: normal normal bold 11px/17px var(--default-font);
    --title-xs-mobile: normal normal bold 10px/16px var(--default-font);
    --title-sm: normal normal bold 16px/26px var(--default-font);
    --title-sm-mobile: normal normal bold 15px/25px var(--default-font);
    --title-md: normal normal bold 17px/25px var(--default-font);
    --title-md-mobile: normal normal bold 16px/22px var(--default-font);
    --title-lg: normal normal bold 20px/28px var(--default-font);
    --title-lg-mobile: normal normal bold 18px/26px var(--default-font);
    --title-productbox-lg: normal normal bold 18px/26px var(--brand-font);
    --title-productbox-lg-mobile: normal normal bold 17px/25px var(--brand-font);
    --title-productbox: normal normal normal 16px/24px var(--brand-font);
    --title-productbox-mobile: normal normal normal 15px/21px var(--brand-font);
    --title-uppercase: initial;
    --minor-header: normal normal bold 14px/24px var(--default-font);
    --minor-header-mobile: normal normal bold 13px/21px var(--default-font);
    --minor-header-mobile-sm: normal normal bold 12px/18px var(--default-font);
    --minor-header-mobile-xs: normal normal bold 11px/17px var(--default-font);
    --minor-header-uppercase: initial;

    /* Mega menu */
    --mega-menu-header-font: 17px var(--brand-font);
    --megamenu-height: 41px;

    /*Font-weight*/
    --title-font-weight: 700;
    --title-productbox-font-weight: 500;
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --font-weight-price: 600;
    --before-price-font-weight: 400;
    --brand-font-weight: 500;
    --button-font-weight: 700;

    /*Forms and text-input*/
    --title-textinput: normal normal normal 11px/19px var(--default-font);
    --title-dropdown: normal normal bold 14px/21px var(--default-font);
    --text-inputfield: normal normal normal 15px/21px var(--default-font);
    --text-inputfield-mobile: normal normal normal 14px/20px var(--default-font);
    --supporting-test-inputfield: normal normal bold 12px/18px var(--default-font);
    --disabled-color: #cbcbcb;

    /*Tables & summaries*/
    --summery-values: normal normal normal 16px/26px var(--default-font);
    --summery-values-mobile: normal normal normal 15px/25px var(--default-font);

    /*Rounded corners*/
    --rounded-corners: 12px;
    --rounded-corners-lg: calc(var(--rounded-corners) * 2);
    --rounded-corners-md: var(--rounded-corners);
    --rounded-corners-ms: calc(var(--rounded-corners) / 1.5);
    --rounded-corners-sm: calc(var(--rounded-corners) / 2);
    --rounded-corners-counter: 32px;
    --rounded-corners-counter-sm: calc(var(--rounded-corners) / 2);
    --rounded-corners-only-top: 12px 12px 0 0;
    --rounded-corners-only-bottom: 0 0 12px 12px;
    --rounded-corners-only-right: 0 12px 12px 0;
    --rounded-corners-only-left: 12px 0 0 12px;
    --rounded-corners-lefttop-and-rightbottom: 12px 0;
    --button-rounded-corners: var(--rounded-corners);
    --button-rounded-corners-md: var(--rounded-corners);
    --button-rounded-corners-sm: calc(var(--rounded-corners) / 1.5);
    --button-rounded-corners-xs: calc(var(--rounded-corners) / 2);
    --rounded-corners-circle-or-square: 100px;
    --quantity-circle-or-square: 100px;
    --rounded-corners-checkbox: 2px;
    --rounded-corners-switch: 7;

    /*Borders*/
    --border: var(--color-grey-200);
    --border-brand-specific: var(--border);
    --border-framing: 0;
    --border-thin: 1px solid;
    --border-medium: 2px solid;
    --border-thick: 3px solid;

    /*Attacted files*/
    --attached-image-width: 200px;
    --attached-image-height: 150px;
    --attached-image-width-mobile: calc(50% - 5px);
    --attached-image-height-mobile: calc(50vw - 60px);

    /*Shadows*/
    --standard-box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.4);
    --standard-box-shadow-sm: 0 4px 10px -4px rgba(0, 0, 0, 0.4);
    --focused-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --focused-box-shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.3);
    --standard-box-shadow-flipped: 0 4px 15px 4px rgba(0, 0, 0, 0.4);
    --standard-faded-overlay: rgba(0, 0, 0, 0.7);
    --modal-shadow: 0 5px 30px rgba(0, 0, 0, 0.8);

    /*Fomo*/
    --fomo-color: rgba(214, 74, 24, 0.7);
    --fomo-shadow: 0 0 15px 0 rgba(214, 74, 24, 0.7);

    /*Hovers*/
    --dropdown-hover: var(--offset-of-brand-color-lighter);

    /*Icons*/
    --check-icon: var(--color-white);
    --chevron-icon: var(--dark);
    --check-icon-on-primary-color: var(--color-white);
    --status-line-complete: var(--brand-color);

    /*Transition*/
    --standard-transition-all: all 0.2s ease-in-out;
    --standard-transition: 0.2s ease-in-out;
    --material-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /*Splash notifications*/
    --text-uppercase-on-splash-notification: none;
    --font-weight-on-splash-notification: 500;
    --rounded-corners-text-splash:  calc(var(--rounded-corners) / 2);
    --rounded-corners-text-splash-sm:  calc(var(--rounded-corners) / 4);

    /* Prices */
    --price-productbox-xxl: normal normal bold 26px/36px var(--brand-font);
    --price-productbox-xl: normal normal bold 24px/32px var(--brand-font);
    --price-productbox-lg: normal normal bold 22px/28px var(--brand-font);
    --price-productbox-md: normal normal bold 20px/26px var(--brand-font);
    --price-productbox-sm: normal normal bold 18px/24px var(--brand-font);


}