/* MC Shop Theme Overrides */

:root {
  --color-aubergine: #3D2640;
  --color-aubergine-alt: #5F4063;
  --color-oat: #FCF8ED;
  --color-oat-alt: #F0EADB;
  --color-oat-dark: #E4DED0;
  --color-turmeric: #F9D159;
  --color-turmeric-alt: #FFE56D;
  --color-pistachio: #BED68F;
  --color-pistachio-alt: #D2EAA3;
  --color-cornflower: #C1E3F0;
  --color-cornflower-alt: #D5F7FF;
  --color-himalayan-salt: #F1D1E6;
  --color-himalayan-salt-alt: #FFE5FA;
  --color-honey: #FFE6B0;
  --color-honey-alt: #FFFAC4;

  --color-surface-light: var(--color-oat);
  --color-surface-light-high: var(--color-oat-alt);
  --color-surface-light-highest: var(--color-oat-dark);

  --color-surface-dark: var(--color-aubergine);
  --color-surface-dark-high: var(--color-aubergine-alt);

  --color-content-on-light: var(--color-aubergine);
  --color-content-on-light-faded: var(--color-aubergine-alt);
  --color-content-on-light-accent: var(--color-aubergine);

  --color-content-on-dark: var(--color-oat);
  --color-content-on-dark-faded: var(--color-honey);

  --color-system-negative: #9C211C;
  --color-system-white: #FFFFFF;
  --color-system-positive: #315937;
  --color-system-disabled: #CFC8B8;

  --radius-modal: 0px;
  --dialog-backdrop-filter: none;
  --dialog-backdrop-bg: color-mix(in srgb, var(--color-aubergine) 70%, transparent);
}

html {
  --font-headline: "Bourrasque", sans-serif;
  --font-display: "Ostia Antica", sans-serif;
  --font-sans: "Ostia Antica", sans-serif;

  --case-nav: capitalize;

  --color-brand-primary: var(--color-aubergine);
  --color-surface: var(--color-oat);

  --color-toggle-bg: var(--color-oat-alt);
  --color-toggle-border: var(--color-system-disabled);

  --button-border-width: 1px;
  --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: var(--color-system-disabled);
  --color-button-primary-disabled-text: var(--color-brand-primary);

  --color-button-secondary: var(--color-brand-primary);
  --color-button-secondary-hover: color-mix(in oklab,var(--color-brand-primary)10%,white);

  --radius-button: 2px;
  --radius-input: 2px;

  --checkout-color-action: var(--color-aubergine);
  --checkout-color-background: var(--color-oat);
  --checkout-color-border: transparent;
  --checkout-color-primary: var(--color-aubergine);
  --checkout-color-form-background: transparent;
  --checkout-color-form-border: var(--color-aubergine);
  --checkout-border-radius-inner: 2px;
  --checkout-border-radius-outer: 2px;
  --checkout-input-line-height: 32px;
  --checkout-font-family: "Ostia Antica", sans-serif;
  --checkout-label-font-size: var(--text-base);

  --color-delivery-past: var(--color-pistachio);
  --color-delivery-past-50: color-mix(in oklab,var(--color-aubergine)70%,white);
  --color-delivery-current: var(--color-pistachio);
  --color-delivery-current-50: color-mix(in oklab,var(--color-pistachio)70%,white);
  --color-delivery-upcoming: var(--color-turmeric);
  --color-delivery-upcoming-50: color-mix(in oklab,var(--color-turmeric)70%,white);
  --color-delivery-skipped: var(--color-cornflower);
  --color-delivery-skipped-50: color-mix(in oklab,var(--color-cornflower)70%,white);

  --container-width-base: 1440px; /* Default container/most used */
  --container-width-narrow: 1200px; /* Orders/Payment/checkout pages */
  --container-width-narrower: 772px; /* My subscription & Account pages */

  /* https://utopia.fyi/type/calculator/?c=360,16,1.25,1240,16,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --text-xs: clamp(0.875rem, 0.875rem + 0vw, 0.875rem); /* 14px < 14px */
  --text-sm: clamp(0.875rem, 0.875rem + 0vw, 0.875rem); /* 14px < 14px */
  --text-base: clamp(1rem, 1rem + 0vw, 1rem); /* 16px < 16px */
  --text-lg: clamp(1.25rem, 1.25rem + 0vw, 1.25rem); /* 20px < 20px */
  --text-xl: clamp(1.375rem, 1.375rem + 0vw, 1.375rem); /* 22px < 22px */
  --text-2xl: clamp(1.5rem, 1.2443rem + 1.1364vw, 2.125rem); /* 24px < 34px */
  --text-3xl: clamp(2rem, 1.5909rem + 1.8182vw, 3rem); /* 32px < 48px */
  --text-4xl: clamp(2.75rem, 2.2386rem + 2.2727vw, 4rem); /* 44px < 64px */
  --text-5xl: clamp(4rem, 2.7727rem + 5.4545vw, 7rem); /* 64px < 112px */
}

@layer base {
  input:where(:not([type='submit'],[type='checkbox'])), select, textarea {
    font-size: var(--text-base);
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
  }

  h4 {
    font-size: var(--text-lg);
  }

  h5 {
    font-size: var(--text-base);
  }
}