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

  --container-secondary-margin              : calc(var(--container-secondary-margins) / 2);
  --container-secondary-margins             : calc(100% - var(--container-secondary-max-width));
  --container-secondary-max-width           : 1260px;

  --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                            : 'Poppins', 'Arial', sans-serif;
  --typo-secondary                          : Arial, sans-serif;
  --typo-tertiary                           : Arial, sans-serif;

  /********************
    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
********************/
  --color-primary-base                      : 0, 0%;
  --color-primary-base-lightness            : 0%;
  --color-primary                           : hsl(var(--color-primary-base), var(--color-primary-base-lightness));

  --color-secondary-base                    : 358, 82% ;
  --color-secondary-base-lightness          : 30% ;
  --color-secondary                         : #1E4347;

  --color-tertiary-base                     : 0, 0% ;
  --color-tertiary-base-lightness           : 0%;
  --color-tertiary                          : hsl(var(--color-tertiary-base), var(--color-tertiary-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%);

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

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

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

  /********************
    product price
********************/
  --price-color                             : var(--color-primary);
  --price-discount-color                    : white;
  --price-discount-color-bg                 : #e58439;

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

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

  /********************
    footer links
********************/
  --footer-links-color                      : var(--color-white-default);
  --footer-subline-and-social-color         : var(--color-primary);

  /********************
   banner color
********************/
  --banner-card-bg-color                    : var(--color-secondary);
  --banner-card-titles-color                : var(--color-primary);
  --banner-card-description-color           : var(--color-white-default);
  --banner-card-button-bg-color             : var(--color-primary);
  --banner-card-button-bg-hover-color       : var(--color-primary-60);
  --banner-card-button-text-color           : var(--color-secondary);
  --banner-dot-bg-color                     : var(--color-white-default);

  /*******************
   search color
******************/
  --color-bg-search                         : #F2F1EF;
  --color-border-focus-search               : var(--color-primary);

  /*******************
   menu color
******************/
  --color-text-menu                         : var(--color-primary);
  --color-text-menu-hover                   : var(--color-secondary);

  /*******************
    filtres color
******************/
  --color-title-filtres                     : var(--color-primary);
  --color-valeur-filtres                    : var(--color-black-default);
  --color-curseur-prix                      : var(--color-secondary);

  /*******************
   highlighted banner color
******************/
  --highlighted-banner-subtitle-color       : var(--color-secondary);
  --highlighted-banner-title-color          : var(--color-secondary);
  --highlighted-banner-description-color    : var(--color-secondary);

  /*******************
   categories banner color
******************/
  --color-titles-categories                 : var(--color-white-default);
  --color-background-if-no-image-categories : var(--color-secondary);


  /*******************
   Quotes
******************/

  --color-quote-btn-txt                     : var(--btn-primary-bg-color);
  --color-quote-btn-background              : white;


  /*******************
   Bannières header
******************/
  --color-first-top-banner-background        : var(--color-secondary);
  --color-first-top-banner-txt-color         : white;
  --color-first-top-banner-details-background: var(--color-primary);
  --color-first-top-banner-details-txt-color : white;
  --color-first-top-banner-details-link-color: var(--color-secondary);
  --color-second-top-banner-background       : var(--color-primary);
  --color-second-top-banner-txt-color        : white;
}

@media screen and (max-width : 1299px) {
  :root {
    /********************
  Containers
********************/
    --container-primary-max-width : calc(100% - 50px);
    --container-secondary-max-width : calc(100% - 50px);
    --container-tertiary-margin  : 8.5%;
  }

}

@media screen and (max-width : 767px) {
  :root {
    /********************
  Containers
********************/
    --container-primary-max-width : calc(100% - 30px);
    --container-secondary-max-width : calc(100% - 30px);
    --container-tertiary-margin  : 8.5%;
  }
}

@media screen and (max-width : 449px) {
  :root {
    /********************
  Containers
********************/
    --container-primary-max-width   : calc(100% - 20px);
    --container-secondary-max-width : calc(100% - 20px);
    --container-tertiary-margin  : 8.5%;
  }
}