.design-lavpris {

/* -------------------- PRIMITIVE TOKENS -------------------- */

    /* Brand color */
    --color-brand-50: #fffbe6;
    --color-brand-100: #fff6cc;
    --color-brand-150: #fff2b3;
    --color-brand-200: #ffee99;
    --color-brand-300: #ffe567;
    --color-brand-400: #ffdd34;
    --color-brand-450: #FFF11E; /* monochromatic */
    --color-brand-500: #FFD401; /* base */
    --color-brand-600: #ccaa01;
    --color-brand-700: #997f01;
    --color-brand-800: #665500;
    --color-brand-850: #4c4000;
    --color-brand-900: #332a00;
    --color-brand-950: #191500;

    /* Primary color */
    --color-primary-50: #e8e8e8;
    --color-primary-100: #d1d1d1;
    --color-primary-150: #bababa;
    --color-primary-200 :#a3a3a3;
    --color-primary-300: #767676;
    --color-primary-400: #484848;
    --color-primary-500: #1a1a1a; /* base */
    --color-primary-600: #151515;
    --color-primary-700: #101010;
    --color-primary-800: #0a0a0a;
    --color-primary-850: #080808;
    --color-primary-900: #050505;
    --color-primary-950: #030303;

    /* Secondary color */
    --color-secondary-50: var(--color-brand-50);
    --color-secondary-100: var(--color-brand-100);
    --color-secondary-150: var(--color-brand-150);
    --color-secondary-200: var(--color-brand-200);
    --color-secondary-300: var(--color-brand-300);
    --color-secondary-400: var(--color-brand-400);
    --color-secondary-500: var(--color-brand-500); /* base */
    --color-secondary-600: var(--color-brand-600);
    --color-secondary-700: var(--color-brand-700);
    --color-secondary-800: var(--color-brand-800);
    --color-secondary-850: var(--color-brand-850);
    --color-secondary-900: var(--color-brand-900);
    --color-secondary-950: var(--color-brand-950);

    /* Basic colors */
    --color-white: #FFF;
    --color-dark: var(--color-primary-500);
    --color-black: var(--color-primary-700);
    --color-blue-500: #2363a7;
    --color-blue-100: #D4E2F1;
    --color-green-500: #1A790B;
    --color-green-100: #D4F2D0;
    --color-red-500: #BC3F00;
    --color-red-100: #F5E4DB;
    --color-yellow-500: var(--color-brand-500);
    --color-yellow-100: var(--color-brand-150);

    /* 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: var(--color-primary-500);
    --color-grey-850: #101010;
    --color-grey-900: #0B0B0B;
    --color-grey-950: #050505;

/* -------------------- SEMANTIC TOKENS -------------------- */


    /* Amount */
    --color-amount-bg: var(--color-red-500);
    --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);

    /* Box */
    --color-box-bg: var(--color-brand-brighter-2);
    --color-box-fg: var(--color-text-headers);

    /* 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);

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

    /* Headers */
    --heading-3: normal normal bold var(--font-size-heading-3)/1.5 var(--brand-font);

    /* Icon */
    --color-icon-fg: var(--color-primary-500);
    --color-icon-bg: var(--color-brand-500);

    /* Mobile menu */
    --color-menu-fg: var(--color-dark);
    --color-menu-fg-hover: var(--color-white);
    --color-menu-bg: transparent;
    --color-menu-bg-hover: var(--color-dark);
    --color-menu-border: var(--color-dark);
    --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-500);
    --color-text-headers: var(--color-grey-700);
    --color-text-white: var(--color-white);

    /* Amount */
    --color-amount-bg: var(--color-red-500);
    --color-amount-fg: var(--color-white);

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

    /*Font*/
    --brand-font: "Roboto Condensed", sans-serif;
    --default-font: Arial, sans-serif;
    --button-font: Caveat, "Roboto Condensed", sans-serif;

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

    /*Opacity*/
    --primary-background-color-opacity: #1a1a1ae6;

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

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

    /*Stock status*/
    --in-stock: #29bf12;
    --not-in-stock: var(--color-grey-300);
    --variant-in-stock-color: var(--brand-color);

    /*Background-color*/
    --white-background-color: var(--white);
    --primary-background-color: var(--white);
    --primary-background-color-grey: var(--secondary-background-color);
    --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;
    --word-spacing: 0;
    --letter-spacing-sm: 0;
    --word-spacing-sm: 0;
    --letter-spacing-xs: 0;
    --word-spacing-xs: 0;

    /*Productbox*/
    --product-background-default: var(--white);
    --product-background-color1: color-mix(in srgb, var(--offset-of-brand-color-lighter), black 3%);
    --product-background-color2: color-mix(in srgb, var(--offset-of-brand-color-lighter), black 6%);
    --product-background-color3: color-mix(in srgb, var(--offset-of-brand-color-lighter), black 9%);
    --product-background-color4: color-mix(in srgb, var(--offset-of-brand-color-lighter), black 12%);


    /*Title and headers*/
    --title-color: var(--primary-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 13px/19px var(--default-font);
    --title-sm-mobile: normal normal bold 12px/18px 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 normal 18px/26px var(--brand-font);
    --title-productbox-lg-mobile: normal normal normal 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 12px/18px var(--default-font);
    --minor-header-mobile: normal normal bold 11px/16px var(--default-font);
    --minor-header-mobile-sm: normal normal bold 10px/14px var(--default-font);
    --minor-header-mobile-xs: normal normal bold 9px/12px var(--default-font);
    --minor-header-uppercase: uppercase;

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

    /*Font-weight*/
    --title-font-weight: 700;
    --title-productbox-font-weight: 700;
    --font-weight-bold: 700;
    --font-weight-regular: 400;
    --font-weight-price: 700;
    --before-price-font-weight: 400;
    --brand-font-weight: 700;
    --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 15px/25px var(--default-font);
    --summery-values-mobile: normal normal normal 14px/24px var(--default-font);

    /*Rounded corners*/
    --rounded-corners: 0;
    --rounded-corners-lg: 0;
    --rounded-corners-md: 0;
    --rounded-corners-ms: 0;
    --rounded-corners-sm: 0;
    --rounded-corners-counter: 0;
    --rounded-corners-counter-sm: 0;
    --rounded-corners-only-top: 0;
    --rounded-corners-only-bottom: 0;
    --rounded-corners-only-right: 0;
    --rounded-corners-only-left: 0;
    --rounded-corners-lefttop-and-rightbottom: 0;
    --button-rounded-corners-md: 0;
    --button-rounded-corners-sm: 0;
    --button-rounded-corners-xs: 0;
    --rounded-corners-circle-or-square: 0;
    --quantity-circle-or-square: 0;
    --rounded-corners-checkbox: 0;
    --rounded-corners-switch: 0;

    /*Borders*/
    --border: var(--color-grey-200);
    --border-brand-specific: var(--color-grey-200);
    --border-framing: 1px solid;
    --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: rgb(232, 78, 0, 0.8);
    --fomo-shadow: 0 0 15px 0 rgba(232, 78, 0, 0.8);

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

    /*Icons*/
    --check-icon: var(--primary-color);
    --chevron-icon: var(--primary-color);
    --check-icon-on-primary-color: var(--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: uppercase;
    --font-weight-on-splash-notification: 700;
    --rounded-corners-text-splash: 0;
    --rounded-corners-text-splash-sm: 0;

    /* Prices */
    --price-productbox-xxl: normal normal bold 24px/34px var(--brand-font);
    --price-productbox-xl: normal normal bold 20px/28px var(--brand-font);
    --price-productbox-lg: normal normal bold 18px/24px var(--brand-font);
    --price-productbox-md: normal normal bold 16px/22px var(--brand-font);
    --price-productbox-sm: normal normal bold 14px/20px var(--brand-font);
}