.design-completvvs {

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

    /* Brand color */
   --color-brand-50: #f6eae9;
   --color-brand-100: #edd5d3;
   --color-brand-150: #e3c0bd;
   --color-brand-200: #daaba7;
   --color-brand-300: #c8807a;
   --color-brand-400: #b5564e;
   --color-brand-450: #F84334; /* monochromatic */
   --color-brand-500: #a32c22; /* base */
   --color-brand-600: #82231b;
   --color-brand-700: #621a14;
   --color-brand-800: #41120e;
   --color-brand-850: #310d0a;
   --color-brand-900: #210907;
   --color-brand-950: #100403;

   /* 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-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: #e6ebef;
   --color-secondary-100: #ccd7df;
   --color-secondary-150: #b3c4d0;
   --color-secondary-200: #99b0c0;
   --color-secondary-300: #6688a0;
   --color-secondary-400: #336181;
   --color-secondary-500: #003961; /* base */
   --color-secondary-600: #002e4e;
   --color-secondary-700: #00223a;
   --color-secondary-800: #001727;
   --color-secondary-850: #00111d;
   --color-secondary-900: #000b13;
   --color-secondary-950: #00060a;

    /* Basic colors */
    --color-white: #FFF;
    --color-dark: var(--color-grey-700);
    --color-black: var(--color-grey-900);
    --color-blue-500: var(--color-secondary-500);
    --color-blue-100: var(--color-secondary-100);
    --color-green-500: #357A38;
    --color-green-100: #edf7ee;
    --color-red-500: #9E3239;
    --color-red-100: #F6C8CB;
    --color-yellow-500: #FFDA00;
    --color-yellow-100: #FFF4B3;

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

   /* 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-white);
    --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-white);
    --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-brand-500);
    --color-menu-border: var(--color-grey-200);
    --color-menu-burger: var(--color-brand-500);

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


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

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

    /*Colors*/
    --brand-color: var(--color-brand-500);
    --hover-of-brand-color: var(--color-brand-600);
    --primary-color: var(--brand-color);
    --hover-of-primary-color: var(--color-brand-600);
    --secondary-color: var(--color-secondary-500);
    --campaign-color: var(--brand-color);
    --offset-of-brand-color: var(--color-brand-600);
    --offset-of-brand-color-darker: var(--color-brand-700);
    --offset-of-brand-color-lighter: #e24851;
    --product-price-color: var(--brand-color);
    --discount-color: var(--product-price-color);
    --standard-text-color: var(--dark);
    --muted: var(--color-grey-300);
    --subdued-color: var(--color-grey-400);
    --primary-grey: var(--color-grey-200);
    --secondary-grey: #d5d5d5;
    --dark: #2b2b2b;
    --white: var(--color-white);
    --color-on-brand-color: var(--white);
    --color-on-primary-color: var(--white);
    --color-on-secondary-color: var(--white);
    --color-on-campaign-color: var(--white);
    --color-on-highligted-background-color: var(--white);
    --success-color: var(--color-green-500);
    --color-error: #e24851;
    --attention-color: var(--secondary-color);
    --cta-color: var(--secondary-color);
    --cta-hover-color: #002E4E;
    --color-on-cta-color: var(--white);
    --color-on-cta-hover-color: var(--white);
    --before-price: var(--subdued-color);
    --disabled-input: var(--color-green-100);

    /*Opacity*/
    --primary-background-color-opacity: #e9eae8e6;

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

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

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

    /*Background-color*/
    --white-background-color: var(--white);
    --primary-background-color: var(--white);
    --primary-background-color-grey: var(--secondary-background-color);
    --secondary-background-color: #e9eae8;
    --tertiary-background-color: var(--color-grey-150);
    --highligted-background-color: var(--cta-color);
    --hover-of-highligted-background-color: var(--cta-hover-color);

    /*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, #f1f1f1, black 3%);
    --product-background-color2: color-mix(in srgb, #f1f1f1, black 6%);
    --product-background-color3: color-mix(in srgb, #f1f1f1, black 9%);
    --product-background-color4: color-mix(in srgb, #f1f1f1, black 12%);


    /*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 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 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: 400 18px var(--brand-font);
    --megamenu-height: 41px;

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

    /*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: rgba(226, 72, 81, 0.8);
    --fomo-shadow: 0 0 15px 0 rgba(226, 72, 81, 0.8);

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

    /*Icons*/
    --check-icon: var(--white);
    --chevron-icon: var(--brand-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: initial;
    --font-weight-on-splash-notification: 400;
    --rounded-corners-text-splash: 0;
    --rounded-corners-text-splash-sm: 0;

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

}