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

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

  --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                         : 'Montserrat', 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) * (.6px + (1 - .6) * ((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                   : 210, 90%;
  --color-primary-base-lightness         : 45%;
  --color-primary                        : hsl(var(--color-primary-base), var(--color-primary-base-lightness));

  --color-secondary-base                 : 213, 70%;
  --color-secondary-base-lightness       : 15%;
  --color-secondary                      : hsl(var(--color-secondary-base), var(--color-secondary-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                  : #091C34;
  --color-grey-default                   : #F3F5F7;
  --color-grey-light                     : #FBFCFD;
  --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%);

  /********************
    Border Radius
********************/
  --radius-sm                            : 4px;
  --radius-md                            : 5px;
  --radius-lg                            : 8px;
  --radius-xl                            : 12px;
  --radius-full                          : 50px;

  /********************
    Buttons
********************/
  --btn-radius                           : var(--radius-md);
  --btn-font-size                        : 0.875rem;
  --btn-font-weight                      : 600;
  --btn-padding-x                        : 1.25rem;
  --btn-padding-y                        : 0.75rem;
  --btn-transition                       : all 0.2s ease;

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

  --btn-secondary-color                  : var(--color-white-default);
  --btn-secondary-color--is-hover        : var(--color-white-default);
  --btn-secondary-bg-color               : var(--color-secondary);
  --btn-secondary-bg-color--is-hover     : var(--color-secondary-30);
  --btn-secondary-border-color           : var(--color-secondary);
  --btn-secondary-border-color--is-hover : var(--color-secondary-30);

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

  /********************
    Inputs
********************/
  --input-radius                         : var(--radius-md);
  --input-padding-x                      : 1rem;
  --input-padding-y                      : 0.75rem;
  --input-font-size                      : 0.9375rem;
  --input-border-color                   : #d1d5db;
  --input-border-color--focus            : var(--color-tertiary);
  --input-bg-color                       : var(--color-white-default);
  --input-focus-shadow                   : 0 0 0 3px rgba(var(--color-tertiary-base), 0.15);
  --input-focus-color                    : var(--color-tertiary);

  /********************
    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   : 10%;
    --container-secondary-margin : 12%;
    --container-tertiary-margin  : 14%;
  }
}

@media screen and (max-width : 1299px) {
  :root {
    --container-primary-max-width : calc(100% - 100px);
    --container-secondary-max-width: calc(100% - 120px);
  }
}

@media screen and (max-width : 967px) {
  :root {
    --container-primary-max-width : calc(100% - 70px);
    --container-secondary-max-width: calc(100% - 90px);
  }
}

@media screen and (max-width : 767px) {
  :root {
    --container-primary-max-width : calc(100% - 40px);
    --container-secondary-max-width: calc(100% - 60px);
  }
}