:root {
  /* Brand colors */
  --color-teal: #578087;
  --color-teal-dark: #466a70;
  --color-cream: #ece8dc;
  --color-cream-light: #f5f2ea;
  --color-white: #ffffff;
  --color-black: #1a1a1a;
  --color-overlay: rgba(26, 26, 26, 0.45);

  /* Typography */
  --font-sans: "Jost", system-ui, sans-serif;
  --font-serif: "Abril Text", Georgia, serif;
  --font-script: "Dastie", cursive;

  /* Type scale (rem — tied to html font-size in base.css) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.5625rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.875rem;
  --text-4xl: 3.625rem;
  --text-section-heading: 3.125rem;
  --text-hero-title: 4.75rem;
  --nav-edge-inset: 20px;
  /* Fixed px inset for framed photos (hero, cakes, gelato cart, visit map) */
  --image-frame-inset: 20px;
  /* Showcase carousels (cakes, gelato cart): cover + clamped focal point — avoids empty bands */
  --showcase-image-fit: cover;
  --showcase-focal-y: 50%;
  --showcase-focal-y-min: 30%;
  --showcase-focal-y-max: 70%;
  /* Distance from bottom of section imagery to the section divider */
  --section-edge-inset: var(--image-frame-inset);
  /* Text-led block padding above imagery within a section */
  --section-intro-pad-y: var(--space-section);
  /* Compact bands (reviews, promos) — label / CTA vertical rhythm */
  --section-band-label-pad-top: 1.15rem;
  --section-band-pad-y: 0.85rem;
  --hero-frame-weight: var(--image-frame-inset);
  --hero-aspect-desktop: 16 / 9;
  --hero-aspect-mobile: 3 / 4;
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-section: 2.5rem;

  /*
   * Readable line lengths — CMS content tiers (Gelato Cart intro = reference).
   * Sanity hard max (chars): sectionSubheading 140, aboutSubheading 80,
   * promoText 60, reviewQuote 220.
   */
  --copy-measure-intro: 38ch;
  /* Our Story tagline — one line on desktop; wraps at intro measure on mobile */
  --copy-measure-about: 72ch;
  --copy-measure-promo: 24ch;
  --copy-measure-review: 30ch;
  --section-intro-pad-inline: var(--gutter);

  /* Layout */
  --max-width: 1280px;
  --gutter: 2rem;
  --header-height: 72px;
  --ticker-height: 36px;

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.6s;
  /* Hero + showcase fade carousels — shared crossfade and ken burns */
  --carousel-crossfade-duration: 0.6s;
  --carousel-crossfade-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --carousel-ken-burns-duration: 20s;
  --carousel-ken-burns-duration-desktop: 24s;
  --carousel-ken-burns-easing: ease-in-out;

  /* Breakpoints (for reference in media queries) */
  /* mobile: max 767px, tablet/desktop: 768px+ */
}

@media (max-width: 767px) {
  :root {
    --text-section-heading: 2.375rem;
    --text-hero-title: 2.625rem;
    --nav-edge-inset: 16px;
    --gutter: 1.25rem;
    --section-band-label-pad-top: 1rem;
    /* Mobile vertical stack — heading → subheading → CTA → next block (cakes, gelato cart, visit, etc.) */
    --mobile-stack-heading-after: 0.35rem;
    --mobile-stack-gap-sm: 0.65rem;
    --mobile-stack-gap-md: 0.85rem;
    --mobile-stack-gap-lg: 1.25rem;
    --mobile-section-pad-y: 1.5rem;
    /* Distance from section top border to first section-heading (matches Our Story) */
    --mobile-section-pad-top: var(--section-intro-pad-y);
    /* Hero + social script word — space to line above / to CTA below */
    --mobile-script-after-heading: 0.75rem;
    --mobile-script-to-btn: 1.35rem;
  }
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dastie";
  src: url("../assets/fonts/Dastie.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Abril Text";
  src: url("../assets/fonts/AbrilText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}