:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Colors */
  --th-c-white: #FFF;
  --th-c-smokywhite: #FAFAFA;
  --th-c-light: #e4e4e4;
  --th-c-gray: #e0e0e0;
  --th-c-greysLightestGrey: #F2F2F2;
  --th-c-greysLightGrey: #aaa;
  --th-c-greysMediumLightGrey: #BDBDBD;
  --th-c-greysMediumDarkGrey: #828282;
  --th-c-greysDarkGrey: #4F4F4F;
  --th-c-dark: #242424;
  --th-c-black: #000;
  --th-c-charcoal: #464646;
  --th-c-nearBlack: #020202;
  --th-c-nearWhite: #fafafa;
  --th-c-mediumGrey: #666;
  --th-c-shadowGrey: #d3d2d2;
  --th-c-svgIconGrey: #73777A;
  --th-c-starRatingGold: gold;
  --th-c-blackDisabledText: #262b3073;
  --th-c-vibrantBlue: #007bff;
  --th-c-lavendarIndigoLight: #646cff;
  --th-c-fuchsia: #E600B4;
  --th-c-paleYellow: #FFF8E1;

  --th-c-greysDisabledGrey: var(--th-c-greysMediumLightGrey, #BDBDBD);
  --th-c-black-Blur: rgba(0, 0, 0, 0.14);
  --th-c-blackLight-Blur: rgba(0, 0, 0, 0.2);
  --th-c-blackLightest-Blur: rgba(0, 0, 0, 0.12);
  --th-c-greysMediumDarkGrey-Blur: rgba(130,130,130, .25);
  --th-c-greysDarkGrey-Blur: rgba(79, 79, 79, 0.6);
  --th-c-blackModal-Blur: rgba(0, 0, 0, 0.33);
  --th-c-blackDropdown-Blur: rgba(0, 0, 0, 0.1);
  --th-c-blackBorder-Blur: rgba(0, 0, 0, 0.25);

  --th-c-alertWrongPrimary: #B71C1C;
  --th-c-alertWrongTint: #FFE0E3;
  --th-c-alertSuccessPrimary: #1B5E20;
  --th-c-alertSuccessTint: #E3FAE4;
  --th-c-alertWarningPrimary: #BA8808;
  --th-c-alertWarningTint: #FFF1CC;

  /* font-size scale */
  --th-font-size-xs: 10px;
  --th-font-size-xs-alt: 0.8rem;
  --th-font-size-sm: 12px;
  --th-font-size-sm-alt: .875rem;
  --th-font-size-md: 15px;
  --th-font-size-base: 16px;
  --th-font-size-xl: 24px;

  /* z-index scale */
  --th-z-index-dropdown: 1000;
  --th-z-index-overlay: 9999;
  --th-z-index-user-container: 200010;
  --th-z-index-modal: 2000000;
  --th-z-index-modal-overlay: 2000001;
  --th-z-index-tooltip: 2000000000;

  /* style variables */
  --th-color-scheme: light dark;
  --th-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --th-font-weight: 400;
  --th-line-height: 1.5;
  --th-border-color: var(--th-c-greysMediumLightGrey, #BDBDBD);
  --th-border-form: 1px solid var(--th-border-color, #BDBDBD);
  --th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey, #4F4F4F);
  --th-border-radius: 4px;
  --th-header-dividers: 1px solid var(--th-c-greysLightestGrey, #F2F2F2);
  --th-account-dividers: 1px solid var(--th-c-gray, #e0e0e0);

  --th-checkout-breadcrumb-completed: var(--th-c-brandPrimaryColor, var(--th-c-dark, #242424));
  --th-checkout-breadcrumb-inactive: var(--th-c-greysDisabledGrey, #BDBDBD);

  --th-c-cart-message-bg: var(--th-c-greysLightestGrey, #F2F2F2);
  --th-c-cart-message-text-color: var(--th-c-alertWarningPrimary, #BA8808);

  --th-checkout-bg: var(--th-c-smokywhite, #fafafa);  /* .th-checkout */
  --th-checkout-container-bg: var(--th-checkout-bg, #FAFAFA); /* .th-checkout-section--container */
  --th-checkout-container-text-color: var(--th-c-dark, #242424);
  --th-checkout-container-box-shadow: 0 0 #00000000, 0 0 #00000000, 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --th-checkout-form-bg: var(--th-c-white, #FFF);
  --th-checkout-input-bg: var(--th-c-white, #FFF);
  --th-checkout-input-disabled-bg: var(--th-c-greysLightestGrey, #F2F2F2);
  --th-checkout-button-disabled-bg: var(--th-c-greysLightestGrey, #F2F2F2);
  --th-checkout-card-bg: var(--th-checkout-form-bg, #FFF);
  --th-checkout-border: var(--th-border-form, 1px solid #BDBDBD);
  --th-checkout-border-radius: var(--th-border-radius, 4px);
  --th-checkout-text-color: var(--th-c-dark, #242424);

  --th-checkout-payment-border: var(--th-checkout-border, 1px solid #BDBDBD);
  --th-checkout-payment-border-radius: var(--th-checkout-border-radius, 4px);
  --th-checkout-payment-background-color: var(--th-checkout-form-bg, #FFF);
  --th-checkout-payment-text-color: var(--th-checkout-text-color, #242424);
  --th-checkout-payment-header-color: var(--th-checkout-payment-text-color, #242424);
  --th-checkout-payment-input-border: var(--th-border-form, 1px solid #BDBDBD);
  --th-checkout-payment-input-bg: var(--th-checkout-input-bg, #FFF);
  --th-checkout-payment-input-text-color: var(--th-c-black, #000);
  --th-checkout-payment-placeholder-text-color: var(--th-c-greysMediumDarkGrey, #828282);
  --th-checkout-payment-input-focus-outline: var(--th-input-focus-outline, 2px solid #4F4F4F);

  /*
  variables that are undefined by default, but can be used to override other settings
  --th-c-header-icon: sets iconColor in CartNav & UserNav
  --th-c-header-icon-count: sets countColor in CartNav & UserNav
  */
}