: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-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-greysDisabledGrey: var(--th-c-greysMediumLightGrey);
  --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-alertWrongPrimary: #B71C1C;
  --th-c-alertWrongTint: #FFE0E3;
  --th-c-alertSuccessPrimary: #1B5E20;
  --th-c-alertSuccessTint: #E3FAE4;
  --th-c-alertWarningPrimary: #BA8808;
  --th-c-alertWarningTint: #FFF1CC;

  --th-c-lavendarIndigoLight: #646cff;
  --th-c-fuchsia: #E600B4;
  --th-c-paleYellow: #FFF8E1;

  /* 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);
  --th-border-form: 1px solid var(--th-border-color);
  --th-input-focus-outline: 2px solid var(--th-c-greysDarkGrey);
  --th-border-radius: 4px;
  --th-header-dividers: 1px solid var(--th-c-greysLightestGrey);
  --th-account-dividers: 1px solid var(--th-c-gray);

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

  --th-c-cart-message-bg: var(--th-c-greysLightestGrey);
  --th-c-cart-message-text-color: var(--th-c-alertWarningPrimary);

  --th-checkout-bg: var(--th-c-smokywhite, #fafafa);  /* .th-checkout */
  --th-checkout-container-bg: var(--th-checkout-bg); /* .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);
  --th-checkout-input-bg: var(--th-c-white);
  --th-checkout-input-disabled-bg: var(--th-c-greysLightestGrey);
  --th-checkout-button-disabled-bg: var(--th-c-greysLightestGrey);
  --th-checkout-card-bg: var(--th-checkout-form-bg);
  --th-checkout-border: var(--th-border-form);
  --th-checkout-border-radius: var(--th-border-radius);
  --th-checkout-text-color: var(--th-c-dark);

  --th-checkout-payment-border: var(--th-checkout-border);
  --th-checkout-payment-border-radius: var(--th-checkout-border-radius);
  --th-checkout-payment-background-color: var(--th-checkout-form-bg);
  --th-checkout-payment-text-color: var(--th-checkout-text-color);
  --th-checkout-payment-header-color: var(--th-checkout-payment-text-color);
  --th-checkout-payment-input-border: var(--th-border-form);
  --th-checkout-payment-input-bg: var(--th-checkout-input-bg);
  --th-checkout-payment-input-text-color: var(--th-c-black);
  --th-checkout-payment-placeholder-text-color: var(--th-c-greysMediumDarkGrey);
  --th-checkout-payment-input-focus-outline: var(--th-input-focus-outline);

  /*
  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 
  */
}
