:root {
  /* font-family CSS variables are defined dynamically in layouts/theme.liquid
     (see the {% style %} block that outputs --ff-body / --ff-heading /
     --ff-accent / --ff-italic / --ff-handwriting from the theme settings).
     Do NOT hardcode them here — static values would shadow merchant selections. */
  --fw-body: 400;

  /* §2b: Desktop font sizes (base — spec defaults). Static fallbacks only;
     layouts/theme.liquid overrides these from theme settings. */
  --fs-h1-desktop: 64px;
  --fs-h2-desktop: 48px;
  --fs-h3-desktop: 36px;
  --fs-h4-desktop: 24px;
  --fs-h5-desktop: 20px;
  --fs-h6-desktop: 16px;
  --fs-body-large-desktop: 20px;

  /* §2b: Tablet font sizes (×0.80), floored at 14px */
  --fs-h1-tablet: 51px;
  --fs-h2-tablet: 38px;
  --fs-h3-tablet: 29px;
  --fs-h4-tablet: 19px;
  --fs-h5-tablet: 16px;
  --fs-h6-tablet: 14px;
  --fs-body-large-tablet: 16px;

  /* §2b: Mobile font sizes (×0.65), floored at 14px */
  --fs-h1-mobile: 42px;
  --fs-h2-mobile: 31px;
  --fs-h3-mobile: 23px;
  --fs-h4-mobile: 16px;
  --fs-h5-mobile: 14px;
  --fs-h6-mobile: 14px;
  --fs-body-large-mobile: 14px;

  /* Active scaling sizes — default to desktop */
  --fs-h1: var(--fs-h1-desktop);
  --fs-h2: var(--fs-h2-desktop);
  --fs-h3: var(--fs-h3-desktop);
  --fs-h4: var(--fs-h4-desktop);
  --fs-h5: var(--fs-h5-desktop);
  --fs-h6: var(--fs-h6-desktop);
  --fs-body-large: var(--fs-body-large-desktop);

  /* §2b: Body-level sizes are FLAT — one value at every breakpoint, no overrides. */
  --fs-body: 16px;
  --fs-body-alt: 16px;
  --fs-body-small: 13px;
  --fs-caption: 13px;

  --fs-sm: var(--fs-body-small);
  --fs-md: var(--fs-body-alt);
  --fs-lg: var(--fs-body-large);
  --fs-3xl: 40px;

  /* Text sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 40px;

  /* Theme template color setting */
  --clr-body: #2B2721;
  --clr-primary: #1B3B32;
  --clr-secondary: #F2EBE0;
  --clr-accent: #C4663F;
  --clr-black: #0A0A09;
  --clr-black-400: #3A352D;
  --clr-gray: #E4DBCC;
  --clr-light: #FAF7F2;
  --clr-muted: #78715F;
  --clr-dark: #12241F;
  --clr-white: #ffffff;
  --clr-white-400: rgba(244, 239, 231, 0.45);
  --shadow-drodpown: 0px 153px 61px rgba(0, 0, 0, 0.01), 0px 86px 52px rgba(0, 0, 0, 0.05), 0px 38px 38px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1);

  /* §4: Default page background */
  --page-bg: #FAF7F2;

  /* §5: Media container default radius */
  --media-radius: 0px;

  /* border radius */
  --rounded: 4px;
  --rounded-full: 100%;
  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-xl: 20px;
  --rounded-2xl: 24px;
  --rounded-3xl: 28px;
  --rounded-4xl: 32px;
  --rounded-5xl: 36px;
}

/* §6a: Tablet breakpoint — 768px–1023px */
@media (max-width: 1023px) {
  :root {
    --fs-h1: var(--fs-h1-tablet);
    --fs-h2: var(--fs-h2-tablet);
    --fs-h3: var(--fs-h3-tablet);
    --fs-h4: var(--fs-h4-tablet);
    --fs-h5: var(--fs-h5-tablet);
    --fs-h6: var(--fs-h6-tablet);
    --fs-body-large: var(--fs-body-large-tablet);
  }
}

/* §2b: Mobile breakpoint — ≤767px */
@media (max-width: 767px) {
  :root {
    --fs-h1: var(--fs-h1-mobile);
    --fs-h2: var(--fs-h2-mobile);
    --fs-h3: var(--fs-h3-mobile);
    --fs-h4: var(--fs-h4-mobile);
    --fs-h5: var(--fs-h5-mobile);
    --fs-h6: var(--fs-h6-mobile);
    --fs-body-large: var(--fs-body-large-mobile);
  }
}