/* Typography (heading) */

      :root {
        --heading-color: 22, 22, 22;
        --text-color: 22, 22, 22;
        --background: 255, 255, 255;
        --secondary-background: 245, 245, 245;
        --border-color: 220, 220, 220;
        --border-color-darker: 162, 162, 162;
        --success-color: 46, 158, 123;
        --success-background: 213, 236, 229;
        --error-color: 158, 31, 45;
        --error-background: 248, 239, 240;
        --primary-button-background: 248, 178, 180;
        --primary-button-text-color: 255, 255, 255;
        --secondary-button-background: 248, 178, 180;
        --secondary-button-text-color: 22, 22, 22;
        --product-star-rating: 248, 178, 180;
        --product-on-sale-accent: 248, 178, 180;
        --product-sold-out-accent: 158, 31, 45;
        --product-custom-label-background: 64, 93, 230;
        --product-custom-label-text-color: 255, 255, 255;
        --product-custom-label-2-background: 248, 178, 180;
        --product-custom-label-2-text-color: 0, 0, 0;
        --product-low-stock-text-color: 158, 31, 45;
        --product-in-stock-text-color: 46, 158, 123;
        --loading-bar-background: 22, 22, 22;

        /* We duplicate some "base" colors as root colors, which is useful to use on drawer elements or popover without. Those should not be overridden to avoid issues */
        --root-heading-color: 22, 22, 22;
        --root-text-color: 22, 22, 22;
        --root-background: 255, 255, 255;
        --root-border-color: 220, 220, 220;
        --root-primary-button-background: 248, 178, 180;
        --root-primary-button-text-color: 255, 255, 255;

        --base-font-size: 16px;
        --heading-font-family: Rubik, sans-serif;
        --heading-font-weight: 600;
        --heading-font-style: normal;
        --heading-text-transform: normal;
        --text-font-family: Manrope, sans-serif;
        --text-font-weight: 400;
        --text-font-style: normal;
        --text-font-bold-weight: 600;

        /* Typography (font size) */
        --heading-xxsmall-font-size: 11px;
        --heading-xsmall-font-size: 11px;
        --heading-small-font-size: 12px;
        --heading-large-font-size: 36px;
        --heading-h1-font-size: 36px;
        --heading-h2-font-size: 30px;
        --heading-h3-font-size: 26px;
        --heading-h4-font-size: 24px;
        --heading-h5-font-size: 20px;
        --heading-h6-font-size: 16px;

        /* Control the look and feel of the theme by changing radius of various elements */
        --button-border-radius: 14px;
        --block-border-radius: 8px;
        --block-border-radius-reduced: 4px;
        --color-swatch-border-radius: 100%;

        /* Button size */
        --button-height: 48px;
        --button-small-height: 40px;

        /* Form related */
        --form-input-field-height: 48px;
        --form-input-gap: 16px;
        --form-submit-margin: 24px;

        /* Product listing related variables */
        --product-list-block-spacing: 32px;

        /* Video related */
        --play-button-background: 255, 255, 255;
        --play-button-arrow: 22, 22, 22;

        /* RTL support */
        --transform-logical-flip: 1;
        --transform-origin-start: left;
        --transform-origin-end: right;

        /* Other */
        --zoom-cursor-svg-url: url(//luxe-cosmetics.us/cdn/shop/t/26/assets/zoom-cursor.svg?v=32699263533102933811752489591);
        --arrow-right-svg-url: url(//luxe-cosmetics.us/cdn/shop/t/26/assets/arrow-right.svg?v=90121827806562223641752489591);
        --arrow-left-svg-url: url(//luxe-cosmetics.us/cdn/shop/t/26/assets/arrow-left.svg?v=130349636023349833111752489591);

        /* Some useful variables that we can reuse in our CSS. Some explanation are needed for some of them:
       - container-max-width-minus-gutters: represents the container max width without the edge gutters
       - container-outer-width: considering the screen width, represent all the space outside the container
       - container-outer-margin: same as container-outer-width but get set to 0 inside a container
       - container-inner-width: the effective space inside the container (minus gutters)
       - grid-column-width: represents the width of a single column of the grid
       - vertical-breather: this is a variable that defines the global "spacing" between sections, and inside the section
                            to create some "breath" and minimum spacing
     */
        --container-max-width: 1600px;
        --container-gutter: 24px;
        --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
        --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
        --container-outer-margin: var(--container-outer-width);
        --container-inner-width: calc(100vw - var(--container-outer-width) * 2);

        --grid-column-count: 10;
        --grid-gap: 24px;
        --grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count));

        --vertical-breather: 28px;
        --vertical-breather-tight: 28px;

        /* Shopify related variables */
        --payment-terms-background-color: #ffffff;
      }

      @media screen and (min-width: 741px) {
        :root {
          --container-gutter: 40px;
          --grid-column-count: 20;
          --vertical-breather: 40px;
          --vertical-breather-tight: 40px;

          /* Typography (font size) */
          --heading-xsmall-font-size: 12px;
          --heading-small-font-size: 13px;
          --heading-large-font-size: 52px;
          --heading-h1-font-size: 48px;
          --heading-h2-font-size: 38px;
          --heading-h3-font-size: 32px;
          --heading-h4-font-size: 24px;
          --heading-h5-font-size: 20px;
          --heading-h6-font-size: 18px;

          /* Form related */
          --form-input-field-height: 52px;
          --form-submit-margin: 32px;

          /* Button size */
          --button-height: 52px;
          --button-small-height: 44px;
        }
      }

      @media screen and (min-width: 1200px) {
        :root {
          --vertical-breather: 48px;
          --vertical-breather-tight: 48px;
          --product-list-block-spacing: 48px;

          /* Typography */
          --heading-large-font-size: 64px;
          --heading-h1-font-size: 56px;
          --heading-h2-font-size: 48px;
          --heading-h3-font-size: 36px;
          --heading-h4-font-size: 30px;
          --heading-h5-font-size: 24px;
          --heading-h6-font-size: 18px;
        }
      }

      @media screen and (min-width: 1600px) {
        :root {
          --vertical-breather: 48px;
          --vertical-breather-tight: 48px;
        }
      }