:root {
  /* Warm off-white "paper" + soft ink instead of #fff/#000 -- pure white
     at full brightness reads as glare, and the slight warmth pairs with
     the brand green instead of fighting it. */
  --color-bg-base: #f7f7f3;
  --color-bg-subtle: #eeeee8;
  --color-fg-base: #16181d;
  --color-fg-subtle: #5c6068;
  --color-fg-on-card: #1c1e23;
  --color-border-base: rgba(22, 24, 29, 0.09);
  --color-interactive: #3b82f6;

  --radius-large: 8px;
  --radius-full: 9999px;

  --shadow-card-rest: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0),
    0 -1px 0 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgb(39, 39, 42), 0 1px 2px 0 rgba(0, 0, 0, 0.32), 0 2px 4px 0 rgba(0, 0, 0, 0.32);

  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Ubuntu, sans-serif;

  --text-xsmall-regular-size: 10px;
  --text-xsmall-regular-line: 16px;
  --text-small-regular-size: 12px;
  --text-small-regular-line: 20px;
  --text-small-semi-size: 12px;
  --text-small-semi-line: 20px;
  --text-base-regular-size: 14px;
  --text-base-regular-line: 24px;
  --text-base-semi-size: 14px;
  --text-base-semi-line: 24px;
  --text-large-regular-size: 16px;
  --text-large-regular-line: 24px;
  --text-large-semi-size: 16px;
  --text-large-semi-line: 24px;
  --text-xl-regular-size: 24px;
  --text-xl-regular-line: 36px;
  --text-xl-semi-size: 24px;
  --text-xl-semi-line: 36px;
  --text-2xl-regular-size: 30px;
  --text-2xl-regular-line: 48px;
  --text-2xl-semi-size: 30px;
  --text-2xl-semi-line: 48px;
  --text-3xl-regular-size: 32px;
  --text-3xl-regular-line: 44px;
  --text-3xl-semi-size: 32px;
  --text-3xl-semi-line: 44px;

  --breakpoint-2xsmall: 320px;
  --breakpoint-xsmall: 512px;
  --breakpoint-small: 1024px;
  --breakpoint-medium: 1280px;
  --breakpoint-large: 1440px;
  --breakpoint-xlarge: 1680px;
  --breakpoint-2xlarge: 1920px;

  --content-container-max-width: 1440px;
  --content-container-padding-inline: 16px;
  --nav-height: 64px;
}

/* Phone type scale + shorter header -- desktop headings at 30-32px take
   two or three lines on a 375px screen and push content below the fold. */
@media (max-width: 639px) {
  :root {
    --nav-height: 56px;
    --text-xl-regular-size: 20px;
    --text-xl-regular-line: 28px;
    --text-xl-semi-size: 20px;
    --text-xl-semi-line: 28px;
    --text-2xl-regular-size: 24px;
    --text-2xl-regular-line: 32px;
    --text-2xl-semi-size: 24px;
    --text-2xl-semi-line: 32px;
    --text-3xl-regular-size: 26px;
    --text-3xl-regular-line: 34px;
    --text-3xl-semi-size: 26px;
    --text-3xl-semi-line: 34px;
  }
}

@media (min-width: 512px) {
  :root {
    --content-container-padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --content-container-padding-inline: 64px;
  }
}

html.dark {
  /* Deep cool near-black, not flat gray -- Linear/Vercel/Raycast-style.
     --color-bg-subtle is deliberately lighter than base (elevated
     surfaces read as "closer" in dark mode) -- the old scheme had it
     the other way around. */
  --color-bg-base: #0a0a0f;
  --color-bg-subtle: #16161d;
  --color-fg-base: #ffffff;
  --color-fg-subtle: #a1a1aa;
  --color-fg-on-card: #f4f4f5;
  --color-border-base: rgba(255, 255, 255, 0.08);
}

/* "Already in your cart" accent: the brand green, lifted in dark mode so
   it keeps contrast on the near-black background. */
:root {
  --color-in-cart: #2e7d32;
  --color-in-cart-soft: rgba(46, 125, 50, 0.1);
  --color-in-cart-hover: rgba(46, 125, 50, 0.18);
}

html.dark {
  --color-in-cart: #6fcf75;
  --color-in-cart-soft: rgba(111, 207, 117, 0.12);
  --color-in-cart-hover: rgba(111, 207, 117, 0.22);
}