/* SWK Shop Theme Overrides */
html {
  /* SWK Red scale (from Tailwind config) */
  --color-red-50: #FFF4F6;
  --color-red-100: #FFEBEF;
  --color-red-200: #FDCDD5;
  --color-red-300: #FA707E;
  --color-red-400: #D3072A;
  --color-red-500: #B70624;
  --color-red-600: #A20520;
  --color-red-700: #620412;

/* SWK Dark scale */
  --color-neutral-50: #F5F5F5;
  --color-neutral-100: #EFEFEF;
  --color-neutral-200: #D6D6D6;
  --color-neutral-300: #BDBDBD;
  --color-neutral-500: #707070;
  --color-neutral-800: #333333;

/* SWK delivery status scale */
  --color-purple-50: #FCF8FA;
  --color-purple-100: #f9f1f6;
  --color-purple-400: #A01B84;

  --color-green-50: #F6FBF6;
  --color-green-100: #EEF8EE;
  --color-green-400: #36AA32;

  --color-orange-50: #FFFAF5;
  --color-orange-100: #fbf2df;
  --color-orange-400: #d06518;

  --font-script: "SW Script", cursive;
  --font-serif: "Sorts Mill Goudy", serif;
  --font-sans: "Roboto", sans-serif;

  --font-headline: var(--font-script);
  --font-display: var(--font-serif);

  --font-weight-light: 400;
  --font-weight-heading: 500;
  --font-weight-button: 500;

  --color-content-on-light: var(--color-neutral-800);
  --color-content-on-light-faded: var(--color-neutral-500);
  --color-content-on-light-accent: var(--color-red-600);


  --color-content-on-dark: #FFFEFE;
  --color-header-text: var(--color-dark-800);

  --color-header-bg: var(--color-surface);
  --color-homepage-header-bg: var(--color-surface-light);
  --color-homepage-header-text: var(--color-dark-800);

  --color-surface-light: #FFFEFE;
  --color-surface-light-high: #FAF6F4;
  --color-surface-light-highest: var(--color-neutral-200);

  --color-surface-dark: var(--color-brand-primary);

  --color-brand-primary: var(--color-red-400);
  --color-primary-100: #f4d4d9;

  --color-header-text: var(--color-neutral-800);

  --color-header-bg: var(--color-surface);
  --color-homepage-header-bg: var(--color-surface-light);
  --color-homepage-header-text: var(--color-neutral-800);

  --color-base-text: var(--color-neutral-800);

  --color-dropdown-border: var(--color-pepper-100);

  --color-delivery-past-50: var(--color-purple-50);
  --color-delivery-past: var(--color-purple-100);
  --color-delivery-upcoming-50: var(--color-orange-50);
  --color-delivery-upcoming: var(--color-orange-100);
  --color-delivery-current-50: var(--color-green-50);
  --color-delivery-current: var(--color-green-100);
  --color-delivery-skipped-50: var(--color-neutral-50);
  --color-delivery-skipped: var(--color-neutral-100);

  /* Button styles */
  --color-button-primary: #d3072a;
  --color-button-primary-hover: #aa0521;
  --color-button-primary-disabled: #e9e9e9;
  --color-button-primary-disabled-text: #888;

  --color-button-secondary: var(--color-brand-primary);
  --color-button-secondary-hover: var(--color-red-600);
  --color-button-secondary-disabled: #e9e9e9;
  --color-button-secondary-disabled-text: #888;

  --color-form-border: var(--color-neutral-500);

  --radius-button: 1rem;
  --button-border-width: 1px;

  --container-width-wide: 80rem;
  --spacing-x-pad: 1rem;

  --spacing-logo-height: 4.8rem;

  --color-system-negative: var(--color-red-400);

  --dialog-backdrop-filter: none;
  --dialog-backdrop-bg: color-mix(in srgb, var(--color-neutral-500) 75%, transparent);

  /* Typography scale: line heights */
  --leading-display: 1.1;
  --leading-standout: 1.2;
  --leading-body: 1.5;
  --leading-note: 1.4;

  /* SWK line heights for reference
  --leading-serif-tight: 1.15;
  --leading-serif-normal: 1.3;
  --leading-serif-relaxed: 1.7;

  --leading-sans-tight: 1.3;
  --leading-sans-normal: 1.5;
  --leading-sans-relaxed: 1.7;

  --leading-script-tight: .8;
  --leading-script-normal: .8;
  --leading-script-relaxed: .8; */

  /* Script scale  */
  /* @link https://utopia.fyi/type/calculator?c=360,32,1.067,1240,32,1.125,10,2,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --text-script-xs: clamp(1.5802rem, 1.8289rem + -0.3208vw, 1.7567rem);
  --text-script-sm: clamp(1.7778rem, 1.9139rem + -0.1757vw, 1.8744rem);
  --text-script-base: clamp(2rem, 2rem + 0vw, 2rem); /* 32px < 32px */
  --text-script-lg: clamp(2.134rem, 2.0865rem + 0.2109vw, 2.25rem);
  --text-script-xl: clamp(2.277rem, 2.173rem + 0.4623vw, 2.5313rem);
  --text-script-2xl: clamp(2.4295rem, 2.2585rem + 0.7602vw, 2.8477rem);
  --text-script-3xl: clamp(2.5923rem, 2.3422rem + 1.1115vw, 3.2036rem);
  --text-script-4xl: clamp(2.766rem, 2.4232rem + 1.5238vw, 3.6041rem);
  --text-script-5xl: clamp(2.9513rem, 2.5rem + 2.0059vw, 4.0546rem);
  --text-script-6xl: clamp(3.1491rem, 2.5713rem + 2.5679vw, 4.5614rem);
  --text-script-7xl: clamp(3.36rem, 2.6353rem + 3.2209vw, 5.1316rem);
  --text-script-8xl: clamp(3.5852rem, 2.6901rem + 3.9779vw, 5.773rem);
  --text-script-9xl: clamp(3.8254rem, 2.7334rem + 4.8532vw, 6.4946rem);
  --text-script-10xl: clamp(4.0817rem, 2.7625rem + 5.8633vw, 7.3065rem);
  --text-script-11xl: clamp(4.3551rem, 2.7741rem + 7.0267vw, 8.2198rem);
  --text-script-12xl: clamp(4.647rem, 2.7651rem + 8.3642vw, 9.2473rem);

  /* Serif scale  */
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.067,1240,18,1.125,10,2,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --text-serif-xs: clamp(0.8889rem, 1.0288rem + -0.1805vw, 0.9882rem);
  --text-serif-sm: clamp(1rem, 1.0766rem + -0.0988vw, 1.0544rem);
  --text-serif-base: clamp(1.125rem, 1.125rem + 0vw, 1.125rem); /* 18px < 18px */
  --text-serif-lg: clamp(1.2rem, 1.1872rem + 0.0568vw, 1.2313rem);
  --text-serif-xl: clamp(1.2813rem, 1.2514rem + 0.1272vw, 1.35rem);
  --text-serif-2xl: clamp(1.3625rem, 1.3139rem + 0.2159vw, 1.4813rem);
  --text-serif-3xl: clamp(1.4563rem, 1.388rem + 0.3034vw, 1.6231rem);
  --text-serif-4xl: clamp(1.5563rem, 1.4655rem + 0.4034vw, 1.7781rem);
  --text-serif-5xl: clamp(1.6625rem, 1.5449rem + 0.5227vw, 1.95rem);
  --text-serif-6xl: clamp(1.775rem, 1.6267rem + 0.6591vw, 2.1375rem);
  --text-serif-7xl: clamp(1.89rem, 1.7044rem + 0.825vw, 2.3438rem);
  --text-serif-8xl: clamp(2.0188rem, 1.7945rem + 0.9966vw, 2.5669rem);
  --text-serif-9xl: clamp(2.15rem, 1.8785rem + 1.2068vw, 2.8138rem);

  /* Sans scale  */
  /* @link https://utopia.fyi/type/calculator?c=360,16,1.067,1240,16,1.125,10,2,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --text-sans-xs: clamp(0.7901rem, 0.9145rem + -0.1604vw, 0.8784rem);
  --text-sans-sm: clamp(0.8889rem, 0.957rem + -0.0879vw, 0.9372rem);
  --text-sans-base: clamp(1rem, 1rem + 0vw, 1rem); /* 16px < 16px */
  --text-sans-lg: clamp(1.067rem, 1.0433rem + 0.1055vw, 1.125rem);
  --text-sans-xl: clamp(1.1385rem, 1.0865rem + 0.2312vw, 1.2656rem);
  --text-sans-2xl: clamp(1.2148rem, 1.1292rem + 0.3801vw, 1.4238rem);
  --text-sans-3xl: clamp(1.2962rem, 1.1711rem + 0.5557vw, 1.6018rem);
  --text-sans-4xl: clamp(1.383rem, 1.2116rem + 0.7619vw, 1.802rem);
  --text-sans-5xl: clamp(1.4757rem, 1.25rem + 1.003vw, 2.0273rem);
  --text-sans-6xl: clamp(1.5745rem, 1.2856rem + 1.2839vw, 2.2807rem);
  --text-sans-7xl: clamp(1.68rem, 1.3177rem + 1.6105vw, 2.5658rem);
  --text-sans-8xl: clamp(1.7926rem, 1.3451rem + 1.989vw, 2.8865rem);
  --text-sans-9xl: clamp(1.9127rem, 1.3667rem + 2.4266vw, 3.2473rem);
}

/* Element defaults in @layer base so Tailwind utilities can override them */
@layer base {
  body {
    font-size: var(--text-sans-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
}