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

  /* Brand color */
  --color-brand-50: #fffbe6;
  --color-brand-100: #fff6cc;
  --color-brand-150: #fff2b3;
  --color-brand-200: #fe9;
  --color-brand-300: #ffe567;
  --color-brand-400: #ffdd34;
  --color-brand-450: #fff11e; /* monochromatic */
  --color-brand-500: #ffd401; /* base */
  --color-brand-600: #e6bf01;
  --color-brand-700: #ccaa01;
  --color-brand-800: #b39401;
  --color-brand-850: #997f01;
  --color-brand-900: #806a01;
  --color-brand-950: #650;


  /* 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-300: #e4b299;
  --color-red-100: #f7e8e0;
  --color-yellow-500: var(--color-brand-500);
  --color-yellow-100: var(--color-brand-150);

  /* Grey colors */
  --color-grey-50: #f5f5f5;
  --color-grey-100: #eee;
  --color-grey-150: #e1e1e1;
  --color-grey-200: #dedede; /* borders */
  --color-grey-250: #aaa;
  --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);
  --color-box-emphasized-bg: var(--secondary-background-color);
  --color-box-emphasized-bg-inverted: var(--secondary-background-color);

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

  /* Footer */
  --color-footer-bottom: var(--primary-color);

  /* Gradient */
  --color-gradient-brand-start: var(--color-green-500);
  --color-gradient-brand-end: var(--color-blue-500);
  --color-gradient-brand: linear-gradient(135deg in srgb, var(--primary-color) 25%, var(--campaign-color) 100%);
  --color-gradient-brand-alt: linear-gradient(0deg in srgb, var(--primary-color) 45%, var(--campaign-color) 100%);
  --color-gradient-brand-fg: var(--color-on-primary-color);

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

  /* Menu */
  --color-menu-item-highligted: var(--highligted-background-color);
  --color-menu-item-highligted-fg: var(--color-on-highligted-background-color);
  --color-menu-item-highligted-hover: var(--hover-of-highligted-background-color);

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

  /* Popup */
  --color-popup-fg: var(--primary-color);
  --color-popup-bg: var(--color-white);
  --color-popup-label-fg: var(--color-on-primary-color);
  --color-popup-label-bg: var(--primary-color);

  /* Progress bar */
  --color-progress-fg: var(--primary-color);
  --color-progress-bg: var(--color-primary-50);

  /* Splash messages */
  --color-splash-info-bg: var(--brand-color);
  --color-splash-info-fg:var(--color-on-brand-color);
  --color-splash-discount-bg: var(--discount-color);
  --color-splash-discount-fg:var(--color-white);
  --color-splash-link-bg: var(--brand-color);
  --color-splash-link-fg:var(--color-on-brand-color);
  --color-splash-link-inverted-bg: var(--brand-color);
  --color-splash-link-inverted-fg:var(--color-on-brand-color);

  /* Campaign splashes */
  --color-theme-svg-bg-1: var(--campaign-color);
  --color-theme-svg-bg-2: var(--campaign-color);
  --color-theme-svg-bg-3: var(--campaign-color);
  --color-theme-svg-bg-4: var(--campaign-color);
  --color-theme-svg-fg: var(--color-on-campaign-color);

  /* Bubbles */
  --color-bubble-bg: var(--primary-color);
  --color-bubble-fg: var(--color-on-primary-color);

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

  /* Text length */
  --width-body-text: 852px;

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

  /* 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: var(--color-brand-600);
  --offset-of-brand-color-lighter: var(--color-brand-150);
  --product-price-color: var(--primary-color);
  --discount-color: var(--color-red-500);
  --standard-text-color: var(--color-text-body);
  --muted: var(--color-text-muted);
  --subdued-color: var(--color-text-subdued);
  --primary-grey: var(--color-grey-200);
  --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: var(--color-red-500);
  --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-color-opacity-90: #1a1a1ae6;

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

  /* Splash */
  --splash-color: var(--primary-color);
  --color-on-splash: var(--color-on-primary-color);
  --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(--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), #000 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), #000 3%);
  --product-background-color2: color-mix(in srgb, var(--offset-of-brand-color-lighter), #000 6%);
  --product-background-color3: color-mix(in srgb, var(--offset-of-brand-color-lighter), #000 9%);
  --product-background-color4: color-mix(in srgb, var(--offset-of-brand-color-lighter), #000 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);

  /* 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 15px/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: var(--color-grey-200);

  /* 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 rgb(0 0 0 / 40%);
  --standard-box-shadow-sm: 0 4px 10px -4px rgb(0 0 0 / 40%);
  --focused-box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
  --focused-box-shadow-sm: 0 5px 20px rgb(0 0 0 / 30%);
  --standard-box-shadow-flipped: 0 4px 15px 4px rgb(0 0 0 / 40%);
  --standard-faded-overlay: rgb(0 0 0 / 70%);
  --modal-shadow: 0 5px 30px rgb(0 0 0 / 80%);

  /* Fomo */
  --fomo-color: rgb(232 78 0 / 80%);
  --fomo-shadow: 0 0 15px 0 rgb(232 78 0 / 80%);

  /* 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);
  --bounce-transition: 1s linear(0, 0.015 4.4%, 0.03 7.8%, 0.047 10.6%, 0.069 13.1%, 0.096 15.4%, 0.129 17.6%, 0.168 19.6%, 0.216 21.6%, 0.272 23.5%, 0.337 25.4%, 0.413 27.3%, 0.5 29.2%, 0.703 33%, 1 37.8%, 0.701 42.6%, 0.603 44.4%, 0.527 46%, 0.466 47.6%, 0.423 49.1%, 0.407 49.9%, 0.396 50.6%, 0.39 51.3%, 0.388 52%, 0.39 52.7%, 0.396 53.4%, 0.407 54.1%, 0.421 54.8%, 0.462 56.2%, 0.518 57.6%, 0.582 58.9%, 0.668 60.4%, 0.998 65.5%, 0.856 67.9%, 0.762 70%, 0.73 71%, 0.707 72%, 0.694 72.9%, 0.69 73.4%, 0.689 73.9%, 0.692 74.8%, 0.703 75.7%, 0.72 76.6%, 0.746 77.6%, 0.799 79.2%, 0.94 82.8%, 1 84.5%, 0.962 85.9%, 0.938 87.1%, 0.924 88.3%, 0.92 88.9%, 0.919 89.6%, 0.921 90.6%, 0.93 91.8%, 0.975 95.5%, 0.99 97%, 0.998 98.4%, 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);
}