:root {
    /*! General */
    --color-base-text: 23 23 23;
    --color-base-highlight: 213 188 141;
    --color-base-background: 255 255 255;
    --color-base-button: 213 188 141;
    --color-base-button-gradient: #d5bc8d;
    --color-base-button-text: 255 255 255;
    --color-keyboard-focus: 135 173 245;
    --color-shadow: 249 249 249;
    --color-price: 23 23 23;
    --color-sale-price: 215 44 13;
    --color-sale-tag: 215 44 13;
    --color-sale-tag-text: 255 255 255;
    --color-rating: 255 181 3;
    --color-placeholder: 255 255 255;
    --color-success-text: 77 124 15;
    --color-success-background: 247 254 231;
    --color-error-text: 190 18 60;
    --color-error-background: 255 241 242;
    --color-info-text: 180 83 9;
    --color-info-background: 255 251 235;
    
    /*! Menu and drawers */
    --color-drawer-text: 23 23 23;
    --color-drawer-background: 255 255 255;
    --color-drawer-button-background: 23 23 23;
    --color-drawer-button-gradient: #171717;
    --color-drawer-button-text: 255 255 255;
    --color-drawer-overlay: 23 23 23;

    /*! Product card */
    --card-radius: var(--rounded-card);
    --card-border-width: 0.0rem;
    --card-border-opacity: 0.0;
    --card-shadow-opacity: 0.1;
    --card-shadow-horizontal-offset: 0.0rem;
    --card-shadow-vertical-offset: 0.0rem;

    /*! Buttons */
    --buttons-radius: var(--rounded-button);
    --buttons-border-width: 2px;
    --buttons-border-opacity: 1.0;
    --buttons-shadow-opacity: 0.0;
    --buttons-shadow-horizontal-offset: 2px;
    --buttons-shadow-vertical-offset: 2px;

    /*! Inputs */
    --inputs-radius: var(--rounded-input);
    --inputs-border-width: 0px;
    --inputs-border-opacity: 0.65;

    /*! Spacing */
    --sp-0d5: 0.125rem;
    --sp-1: 0.25rem;
    --sp-1d5: 0.375rem;
    --sp-2: 0.5rem;
    --sp-2d5: 0.625rem;
    --sp-3: 0.75rem;
    --sp-3d5: 0.875rem;
    --sp-4: 1rem;
    --sp-4d5: 1.125rem;
    --sp-5: 1.25rem;
    --sp-5d5: 1.375rem;
    --sp-6: 1.5rem;
    --sp-6d5: 1.625rem;
    --sp-7: 1.75rem;
    --sp-7d5: 1.875rem;
    --sp-8: 2rem;
    --sp-8d5: 2.125rem;
    --sp-9: 2.25rem;
    --sp-9d5: 2.375rem;
    --sp-10: 2.5rem;
    --sp-10d5: 2.625rem;
    --sp-11: 2.75rem;
    --sp-12: 3rem;
    --sp-13: 3.25rem;
    --sp-14: 3.5rem;
    --sp-15: 3.875rem;
    --sp-16: 4rem;
    --sp-18: 4.5rem;
    --sp-20: 5rem;
    --sp-23: 5.625rem;
    --sp-24: 6rem;
    --sp-28: 7rem;
    --sp-32: 8rem;
    --sp-36: 9rem;
    --sp-40: 10rem;
    --sp-44: 11rem;
    --sp-48: 12rem;
    --sp-52: 13rem;
    --sp-56: 14rem;
    --sp-60: 15rem;
    --sp-64: 16rem;
    --sp-68: 17rem;
    --sp-72: 18rem;
    --sp-80: 20rem;
    --sp-96: 24rem;
    --sp-100: 32rem;

    /*! Font family */
    --font-heading-family: Montserrat, sans-serif;
    --font-heading-style: normal;
    --font-heading-weight: 600;
    --font-heading-line-height: 0.9;
    --font-heading-letter-spacing: -0.03em;
    

    --font-body-family: Montserrat, sans-serif;
    --font-body-style: normal;
    --font-body-weight: 400;
    --font-body-line-height: 1.2;
    --font-body-letter-spacing: 0.0em;

    --font-navigation-family: var(--font-body-family);
    --font-navigation-size: clamp(0.875rem, 0.748rem + 0.3174vw, 1.125rem);
    --font-navigation-weight: 500;
    

    --font-button-family: var(--font-body-family);
    --font-button-size: clamp(0.75rem, 0.8115rem + 0.1587vw, 0.875rem);
    --font-button-weight: 500;
    

    --font-product-family: var(--font-body-family);
    --font-product-size: clamp(1.0rem, 0.873rem + 0.3175vw, 1.25rem);
    --font-product-weight: 500;
    

    /*! Font size */
    --text-3xs: 0.625rem;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-2sm: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1.0rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3.0rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6.0rem;

    /*! Layout */
    --page-width: 1900px;
    --gap-padding: clamp(var(--sp-5), 2.526vw, var(--sp-12));
    --grid-gap: clamp(40px, 20vw, 60px);
    --page-padding: var(--sp-5);
    --page-container: min(calc(100vw - var(--page-padding) * 2), var(--page-width));
    --rounded-button: 3.75rem;
    --rounded-input: 0.375rem;
    --rounded-card: clamp(var(--sp-2d5), 1.053vw, var(--sp-5));
    --rounded-block: clamp(var(--sp-2d5), 1.053vw, var(--sp-5));

    /*! Other */
    --icon-weight: 1.5px;
  }

  @media screen and (min-width: 1024px) {
    :root {
      --page-padding: var(--sp-9);
    }
  }

  @media screen and (min-width: 1280px) {
    :root {
      --gap-padding: var(--sp-12);
      --page-padding: var(--sp-12);
      --page-container: min(calc(100vw - var(--page-padding) * 2), max(var(--page-width), 1280px));
    }
  }

  @media screen and (min-width: 1536px) {
    :root {
      --page-padding: max(var(--sp-12), 50vw - var(--page-width)/2);
    }
  }