﻿/* Design tokens copied from the reference storefront :root blocks,
   including their media-query overrides (desktop gutter 40px etc.). */

:root {
  --container-max-width: 1600px;
  --heading-color: 40, 40,40;
  --gray1: #F8F9FA;
  --gray2: #EFF1F4;
  --gray3: #DDE2E5;
  --gray4: #ACB5BD;
  --gray5: #495057;
  --gray6: #606871;
  --gray7: #E5E5E5;
  --white-color: #ffffff;
  --black-color: #000000;
  --muted-color: #F8F9FA;
  --default-color: #212429;
  --primary-color: #0032A0;
  --secondary-color: #CABEB5;
  --soft-shell: #CABEB5;
  --morray: #805D24;
  --beige: #EAE5E1;
  --lightblue: #DFE5F1;
  --star: rgb(255, 193, 7);
  --text-color: var(--default-color);
  --background: var(--white-color);
  --primary-background: var(--primary-color);
  --secondary-background: var(--secondary-color);
  --muted-background: var(--muted-color);
  --cart-success: #009806;
  --card-accent: #DFE5F1;
  --bronze: #A06410;
  --silver: #ABABAB;
  --gold: #bf9d70;
  --border-color: 223, 223,223;
  --border-color-darker: 169, 169,169;
  --success-color: 0, 136, 4;
  --success-background: 213, 236,229;
  --error-color: 222, 42,42;
  --error-background: 253, 240,240;
  --default-button-background: 33, 36, 41;
  --default-button-text-color: 255, 255, 255;
  --primary-button-background: 0, 50, 160;
  --primary-button-text-color: 255, 255, 255;
  --secondary-button-background: 202, 190, 181;
  --secondary-button-text-color: 40, 40, 40;
  --highlight-button-background: 184, 38, 45;
  --highlight-button-text-color: 255, 255, 255;
  --highlight-color: #B8262D;
  --product-star-rating: 246, 164,41;
  --product-on-sale-accent: 184, 38, 45;
  --product-sold-out-accent: 33, 36, 41;
  --product-custom-label-background: 64, 93,230;
  --product-custom-label-text-color: 255, 255, 255;
  --product-custom-label-2-background: 243, 255,52;
  --product-custom-label-2-text-color: 0, 0, 0;
  --product-low-stock-text-color: 222, 42,42;
  --product-in-stock-text-color: 46, 158,123;
  --loading-bar-background: 40, 40,40;
  --root-text-color: 40, 40,40;
  --root-background: 255, 255,255;
  --root-border-color: 223, 223,223;
  --root-primary-button-background: red;
  --root-primary-button-text-color: var(--white-color);
  --base-font-size: 16px;
  --heading-font-family: 'Soehne', sans-serif;
  --heading-font-weight: 600;
  --heading-font-style: normal;
  --heading-text-transform: normal;
  --text-font-family: 'Soehne', sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-font-bold-weight: 600;
  --heading-xsmall-font-size: 11px;
  --heading-small-font-size: 13px;
  --heading-large-font-size: 40px;
  --heading-h1-font-size: 45px;
  --heading-h2-font-size: 35px;
  --heading-h3-font-size: 27px;
  --heading-h4-font-size: 22px;
  --heading-h5-font-size: 16px;
  --heading-h6-font-size: 14px;
  --block-border-radius: 0px;
  --block-border-radius-reduced: 0px;
  --color-swatch-border-radius: 100%;
  --button-small-height: 40px;
  --form-input-gap: 16px;
  --form-submit-margin: 24px;
  --play-button-arrow: 40, 40,40;
  --transform-origin-start: left;
  --transform-origin-end: right;
  --arrow-right-svg-url: url(//cdn.shopify.com/s/files/1/0062/5190/5079/t/2322/assets/arrow-right.svg?v=40046868119262634591792135320);
  --arrow-left-svg-url: url(//cdn.shopify.com/s/files/1/0062/5190/5079/t/2322/assets/arrow-left.svg?v=158856395986752206651792135320);
  --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: 48px;
  --vertical-breather-tight: 48px;
}

@media screen and (min-width: 741px) {
  :root {
  --container-max-width: 1600px;
    --container-gutter: 40px;
    --grid-column-count: 20;
    --vertical-breather: 64px;
    --vertical-breather-tight: 64px;
    --heading-small-font-size: 14px;
    --heading-large-font-size: 58px;
    --heading-h1-font-size: 45px;
    --heading-h2-font-size: 35px;
    --heading-h3-font-size: 27px;
    --heading-h4-font-size: 22px;
    --heading-h5-font-size: 16px;
    --heading-h6-font-size: 14px;
    --form-submit-margin: 32px;
    --button-small-height: 44px;
  }
}

@media screen and (min-width: 1200px) {
  :root {
  --container-max-width: 1600px;
    --vertical-breather: 80px;
    --vertical-breather-tight: 64px;
    --product-list-block-spacing: 48px;
    --heading-h1-font-size: 45px;
    --heading-h2-font-size: 35px;
    --heading-h3-font-size: 27px;
    --heading-h4-font-size: 22px;
    --heading-h5-font-size: 16px;
    --heading-h6-font-size: 14px;
  }
}

@media screen and (min-width: 1600px) {
  :root {
  --container-max-width: 1600px;
    --vertical-breather: 90px;
    --vertical-breather-tight: 64px;
  }
}

