:root {
    /********************
	    Containers
	********************/
    --container-primary-margin           : 4%;
    --container-primary-margins          : calc(var(--container-primary-margin) * 2);
    --container-primary-max-width        : calc(100% - var(--container-primary-margins));

    --container-secondary-margin         : 4%;
    --container-secondary-margins        : calc(var(--container-secondary-margin) * 2);
    --container-secondary-max-width      : calc(100% - var(--container-secondary-margins));

    --container-tertiary-margin          : 4%;
    --container-tertiary-margins         : calc(var(--container-tertiary-margin) * 2);
    --container-tertiary-max-width       : calc(100% - var(--container-tertiary-margins));

    /********************
	    Typos
	********************/
    --typo-primary                       : "proxima-soft", sans-serif;
    --typo-secondary                     : "proxima-sera", cursive;
    --typo-tertiary                      : 'Playfair Display', cursive;

    /********************
	    Font Sizes
	********************/
    --font-size-base                     : 0.75rem;
    --font-size-multiplier               : 4;
    --font-size-multiplier-in-px         : calc(var(--font-size-multiplier) * (.8px + (1 - .8) * ((100vw - 320px) / (1920 - 320))));
    --font-size-50                       : calc(var(--font-size-base) - (var(--font-size-multiplier-in-px) / 2));
    --font-size-75                       : calc(var(--font-size-base) - (var(--font-size-multiplier-in-px) / 3));
    --font-size-100                      : var(--font-size-base);
    --font-size-200                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) / 2));
    --font-size-300                      : calc(var(--font-size-base) + var(--font-size-multiplier-in-px));
    --font-size-400                      : calc(var(--font-size-base) + var(--font-size-multiplier-in-px) + (var(--font-size-multiplier-in-px) / 2));
    --font-size-500                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 2));
    --font-size-600                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 3));
    --font-size-700                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 4));
    --font-size-800                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 6));
    --font-size-900                      : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 8));
    --font-size-1000                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 10));
    --font-size-1100                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 12));
    --font-size-1200                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 14));
    --font-size-1300                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 16));
    --font-size-1400                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 18));
    --font-size-1500                     : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) * 20));

    /********************
	    Colors
	********************/

    /*#3f4b34*/
    --color-primary-base                 : 93, 18%;
    --color-primary-base-lightness       : 25%;
    --color-primary                      : hsl(var(--color-primary-base), var(--color-primary-base-lightness));

    /*#929f50*/
    --color-secondary-base               : 70, 33%;
    --color-secondary-base-lightness     : 47%;
    --color-secondary                    : hsl(var(--color-secondary-base), var(--color-secondary-base-lightness));

    /*#596430*/
    --color-tertiary-base                : 72, 35%;
    --color-tertiary-base-lightness      : 29%;
    --color-tertiary                     : hsl(var(--color-tertiary-base), var(--color-tertiary-base-lightness));

    /*#F8F4F0*/
    --color-quaternary-base                : 30, 36%;
    --color-quaternary-base-lightness      : 96%;
    --color-quaternary                     : hsl(var(--color-quaternary-base), var(--color-quaternary-base-lightness));

    --color-black-default                : #111;
    --color-grey-default                 : #f7f7f7;
    --color-white-default                : #fff;

    --color-grey-font-default            : #516765;

    /********************
	    Colors variation
	********************/
    --color-primary-0                    : hsl(var(--color-primary-base), 0);
    --color-primary-10                   : hsl(var(--color-primary-base), 10%);
    --color-primary-20                   : hsl(var(--color-primary-base), 20%);
    --color-primary-30                   : hsl(var(--color-primary-base), 30%);
    --color-primary-40                   : hsl(var(--color-primary-base), 40%);
    --color-primary-50                   : hsl(var(--color-primary-base), 50%);
    --color-primary-60                   : hsl(var(--color-primary-base), 60%);
    --color-primary-70                   : hsl(var(--color-primary-base), 70%);
    --color-primary-80                   : hsl(var(--color-primary-base), 80%);
    --color-primary-90                   : hsl(var(--color-primary-base), 90%);
    --color-primary-100                  : hsl(var(--color-primary-base), 100%);

    --color-secondary-0                  : hsl(var(--color-secondary-base), 0);
    --color-secondary-10                 : hsl(var(--color-secondary-base), 10%);
    --color-secondary-20                 : hsl(var(--color-secondary-base), 20%);
    --color-secondary-30                 : hsl(var(--color-secondary-base), 30%);
    --color-secondary-40                 : hsl(var(--color-secondary-base), 40%);
    --color-secondary-50                 : hsl(var(--color-secondary-base), 50%);
    --color-secondary-60                 : hsl(var(--color-secondary-base), 60%);
    --color-secondary-70                 : hsl(var(--color-secondary-base), 70%);
    --color-secondary-80                 : hsl(var(--color-secondary-base), 80%);
    --color-secondary-90                 : hsl(var(--color-secondary-base), 90%);
    --color-secondary-100                : hsl(var(--color-secondary-base), 100%);

    --color-tertiary-0                   : hsl(var(--color-tertiary-base), 0);
    --color-tertiary-10                  : hsl(var(--color-tertiary-base), 10%);
    --color-tertiary-20                  : hsl(var(--color-tertiary-base), 20%);
    --color-tertiary-30                  : hsl(var(--color-tertiary-base), 30%);
    --color-tertiary-40                  : hsl(var(--color-tertiary-base), 40%);
    --color-tertiary-50                  : hsl(var(--color-tertiary-base), 50%);
    --color-tertiary-60                  : hsl(var(--color-tertiary-base), 60%);
    --color-tertiary-70                  : hsl(var(--color-tertiary-base), 70%);
    --color-tertiary-80                  : hsl(var(--color-tertiary-base), 80%);
    --color-tertiary-90                  : hsl(var(--color-tertiary-base), 90%);
    --color-tertiary-100                 : hsl(var(--color-tertiary-base), 100%);

    --color-quaternary-0                   : hsl(var(--color-quaternary-base), 0);
    --color-quaternary-10                  : hsl(var(--color-quaternary-base), 10%);
    --color-quaternary-20                  : hsl(var(--color-quaternary-base), 20%);
    --color-quaternary-30                  : hsl(var(--color-quaternary-base), 30%);
    --color-quaternary-40                  : hsl(var(--color-quaternary-base), 40%);
    --color-quaternary-50                  : hsl(var(--color-quaternary-base), 50%);
    --color-quaternary-60                  : hsl(var(--color-quaternary-base), 60%);
    --color-quaternary-70                  : hsl(var(--color-quaternary-base), 70%);
    --color-quaternary-80                  : hsl(var(--color-quaternary-base), 80%);
    --color-quaternary-90                  : hsl(var(--color-quaternary-base), 90%);
    --color-quaternary-100                 : hsl(var(--color-quaternary-base), 100%);

    /********************
	    Buttons
	********************/
    --btn-primary-color                  : var(--color-white-default);
    --btn-primary-color--is-hover        : var(--color-primary);

    --btn-primary-bg-color               : var(--color-primary);
    --btn-primary-bg-color--is-hover     : var(--color-white-default);

    --btn-primary-border-color           : var(--color-primary);
    --btn-primary-border-color--is-hover : var(--color-primary);

    /********************
	    Inputs
	********************/
    --input-focus-color                  : var(--color-primary);

    /********************
	    Links
	********************/
    --link-color-on-hover                : var(--color-primary);

    /********************
	    nav
	********************/
    --nav-bg--color                      : var(--color-white-default);

    /********************
	    product price
	********************/
    --price-color                        : var(--color-primary);

    /********************
	    product flags
	********************/
    --product-flag-bg-color              : var(--color-primary);
}

@media screen and (min-width : 768px) {
    :root {
        /********************
			nav
		********************/
        --nav-bg--color : #f7f7f7;
    }
}

@media screen and (min-width : 1024px) {
    :root {
        /********************
			Containers
		********************/
        --container-primary-margin   : 7.5%;
        --container-secondary-margin : 8%;
        --container-tertiary-margin  : 8.5%;
    }
}

@media screen and (min-width : 1200px) {
    :root {
        /********************
			Containers
		********************/
        /*--container-primary-max-width : 80%;*/
        --container-primary-margin   : 5%;
        --container-secondary-margin : 12%;
        --container-tertiary-margin  : 14%;
    }
}

@media screen and (min-width : 1600px) {
    :root {
        /********************
			Containers
		********************/
        /*--container-primary-max-width : 80%;*/
        --container-primary-margin   : 18%;
    }
}