/* SC Shop Theme Overrides */
:root {
  --color-surface-light: #f7f6f3;
  --color-surface-light-high: #ebebeb;
  --color-surface-light-highest: #d3d3d3;


  --color-surface-dark: var(--color-pepper-800);
  --color-surface-dark-high: var(--color-pepper-600);

  --color-content-on-light: var(--color-pepper);
  --color-content-on-light-faded: var(--color-pepper-500);

  --color-content-on-dark: var(--color-white);
  --color-content-on-dark-faded: var(--color-pepper-100);
}

html {
  --font-headline: "Montserrat", sans-serif;
  --font-display: "Montserrat", sans-serif;
  --font-sans: "Montserrat", sans-serif;

  --font-weight-heading: var(--font-weight-black);

  --color-primary-100: var(--color-pepper-100);
  --color-base-text: var(--color-pepper);

  --color-dropdown-border: var(--color-surface);

  --color-header-bg: var(--color-surface);
  --color-header-text: var(--color-pepper);

  --color-homepage-header-bg: var(--color-surface);
  --color-homepage-header-text: var(--color-pepper);

  --color-button-primary: var(--color-brand-primary);
  --color-button-primary-hover: color-mix(in oklab,var(--color-brand-primary)85%,white);
  --color-button-primary-disabled: #E9E9E9;
  --color-button-primary-disabled-text: #414042;

  --color-button-secondary: var(--color-brand-primary);
  --color-button-secondary-hover: color-mix(in oklab,var(--color-brand-primary)10%,white);
  --color-button-secondary-disabled: #E9E9E9;
  --color-button-secondary-disabled-text: #414042;

  --color-form-accent: var(--color-brand-primary);
  --color-form-accent-hover-bg: color-mix(in oklab,var(--color-brand-primary)10%,white);
  --color-form-accent-border: color-mix(in oklab,var(--color-brand-primary)30%,white);

  --color-form-border: var(--color-pepper-300);

  --color-delivery-past: #29633B;
  --color-delivery-past-50: #E6D4DD;
  --color-delivery-current: #29633B;
  --color-delivery-current-50: #ECF6EF;
  --color-delivery-upcoming: #BB5D05;
  --color-delivery-upcoming-50: #FDF1E6;
  --color-delivery-skipped: #1B1936;
  --color-delivery-skipped-50: #E9E9EC;

  --spacing-logo-height: calc(var(--spacing)*10);

  --container-width-wide: 96rem;
  --spacing-x-pad: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);

  --font-weight-button: 600;
  --radius-button: 10px;
  --button-border-width: 1px;
}

body {
  font-weight: 400;
}

body > div > header {
  border-bottom: 1px solid #E9E9E9;
}

body > div > header .button {
  font-size: var(--text-base);
}

body > div > header .button[data-type="secondary"] {
  background-color: white;
  border-color: #AAAAAA;
  color: var(--color-pepper);
}