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

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

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

    /********************
	    Typos
	********************/
    --typo-primary                              : Montserrat, sans-serif;
    --typo-secondary                              : Montserrat, sans-serif;
    /*--typo-secondary                            : 'Space Age';*/
    --typo-tertiary                             : 'Russo One';

    /********************
	    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-150                             : calc(var(--font-size-base) + (var(--font-size-multiplier-in-px) / 2.5));
    --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
	********************/
    --color-primary-base                        : 0, 0%;
    --color-primary-base-lightness              : 12%;
    --color-primary                             : hsl(var(--color-primary-base), var(--color-primary-base-lightness));


    --color-secondary-base-hue                  : 356;
    --color-secondary-base-saturation           : 82%;
    --color-secondary-base-lightness            : 51%;
    --color-secondary                           : hsl(var(--color-secondary-base-hue), var(--color-secondary-base-saturation), var(--color-secondary-base-lightness));
    --color-secondary-camaieu-primary           : hsl(var(--color-secondary-base-hue), calc(var(--color-secondary-base-saturation) - 17%), var(--color-secondary-base-lightness));
    --color-secondary-camaieu-secondary         : hsl(var(--color-secondary-base-hue), calc(var(--color-secondary-base-saturation) - 41%), var(--color-secondary-base-lightness));

    --color-secondary-associated-base           : 0, 0%;
    --color-secondary-associated-base-lightness : 100%;
    --color-secondary-associated                : hsl(var(--color-secondary-associated-base), var(--color-secondary-associated-base-lightness));


    --color-tertiary-base                       : 34, 100%;
    --color-tertiary-base-lightness             : 59%;
    --color-tertiary                            : hsl(var(--color-tertiary-base), var(--color-tertiary-base-lightness));

    --color-black-default                       : #111;
    --color-grey-default                        : #222222;
    --color-white-default                       : #fff;
    --color-grey-header                         : #1b1b1b;


    --color-grey-font-default                   : #5f5f5f;

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

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


    /*--btn-secondary-color                       : var(--color-white-default);*/
    --btn-secondary-color                       : var(--color-secondary-associated, var(--color-white-default));
    --btn-secondary-color--is-hover             : var(--color-secondary);

    --btn-secondary-bg-color                    : var(--color-secondary);
    --btn-secondary-bg-color--is-hover          : var(--color-secondary-associated, var(--color-white-default));

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

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

    /********************
	    Links
	********************/
    --link-color-on-hover                       : grey;

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

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

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

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

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

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

@media screen and (min-width : 1500px) {
    :root {
        /********************
			Containers
		********************/
        --container-margin-tertiary : 17.1%;
    }
}