@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  --color-carbon-black: #1a1a1a;
  --color-coffee-bean: #6b4f3a;
  --color-faded-copper: #a67f5b;
  --color-pale-oak: #d4c2a8;
  --color-parchment: #f3f0eb;
  --content-max-width: 75rem;
  --font-primary: 'Inter', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-title: 'Plus Jakarta Sans', sans-serif;

  /* ---- Type scale ---------------------------------------------------------
     Minor-third (1.20) modular ramp on a 16px base. Static steps drive body
     and UI; fluid clamp() steps drive display headings. Every size on the site
     maps to one of these — no ad-hoc values. */
  --font-size-2x-small:  0.75rem;    /* 12 — micro: fine print, tiny labels */
  --font-size-extra-small:   0.875rem;   /* 14 — secondary: descriptions, captions, meta */
  --font-size-base: 1rem;       /* 16 — body */
  --font-size-medium:   1.1875rem;  /* 19 — emphasis: nav, lead text, prices, labels */
  --font-size-large:   1.4375rem;  /* 23 — item titles, small card headings */
  --font-size-extra-large:   1.75rem;    /* 28 — h3 / sub-headings */
  --font-size-2x-large:  2.0625rem;  /* 33 — large sub-headings, mobile nav items */
  --font-size-3x-large:  2.5rem;     /* 40 — h2, combo price badge */
  --font-size-4x-large:  3rem;       /* 48 — h1 fallback / large display */
  --font-size-fluid-large:   clamp(1.4375rem, 1.05rem + 1.7vw, 1.75rem); /* story / menu-image headings */
  --font-size-display-small: clamp(1.75rem, 1.25rem + 2.4vw, 2.5rem);    /* hero tagline */
  --font-size-display:    clamp(2.0625rem, 1.4rem + 3vw, 3rem);       /* section titles, page h1 */
  --font-size-banner:     clamp(2.5rem, 1rem + 7vw, 5rem);            /* menu page banner h1 */
  --font-size-hero:       clamp(3rem, 1rem + 9vw, 7rem);              /* home hero logotype */

  --line-height-base: 1.6;
  --line-height-tight: 1.25;

  /* ---- Radius ------------------------------------------------------------
     Three steps. Pills use --radius-pill. Nothing else should invent a value. */
  --radius-small: 0.5rem;    /* chips, small inline surfaces */
  --radius-medium: 1rem;      /* cards, panels, images */
  --radius-large: 1.5rem;    /* large feature panels */
  --radius-pill: 999px;   /* pills, round buttons */

  /* ---- Elevation ---------------------------------------------------------
     Three steps, one shadow colour. Higher step = further off the page. */
  --elevation-1: 0 0.125rem 0.375rem rgba(26, 26, 26, 0.08);  /* resting surfaces */
  --elevation-2: 0 0.25rem 0.75rem rgba(26, 26, 26, 0.15);    /* cards, sticky bars */
  --elevation-3: 0 0.75rem 2rem rgba(26, 26, 26, 0.2);        /* overlays, hover lift */

  /* ---- Spacing -----------------------------------------------------------
     4px base. Component padding and gaps come from here. */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 3rem;
  --spacing-8: 4rem;
  --section-spacing: 6rem;
  --space-unit: 1rem;

  /* ---- Stack (vertical gaps) ---------------------------------------------
     The gaps BETWEEN blocks in a vertical stack, as opposed to --spacing-*
     above, which is for space INSIDE a component. Reach for these rather than
     inventing a margin or padding value. Migration is not finished — some
     sections still fall back to --spacing-7 — so treat these as the target, not
     as a description of every gap currently on the site.

     ONE RULE, and the reason these exist: a gap is owned by exactly one side.
     Either the block above sets margin-bottom/padding-bottom or the block below
     sets margin-top — never both. Two owners add up, so the rendered gap
     silently stops matching the token. That is how the banner gap became 80px
     (a 2rem image margin plus a 3rem container margin) while every other gap on
     the page was 64px.

     Watch specificity when the owner is a class: the global
     `section:last-of-type { padding-bottom: 0 }` (0,1,1) outranks a bare class
     (0,1,0) and will silently zero the gap you thought you owned.

       --stack-gap       between stacked blocks in a single column; also the
                         whole mobile scale, where every gap is this one value
       --stack-heading   above AND below a section heading, kept symmetric so
                         the heading sits evenly between the group it closes
                         and the group it opens
       --section-spacing major page breaks at multi-column widths (above) */
  --stack-gap: 1.5rem;      /* 24 */
  --stack-heading: 2.5rem;  /* 40 */

  /* ---- Breakpoints (documented; media queries can't read custom properties)
     Use these four values only:
       --breakpoint-small        37.5rem / 600px   phones
       --breakpoint-medium       47.5rem / 760px   tablet & mobile-nav boundary
       --breakpoint-large        65rem   / 1040px  content column
       --breakpoint-extra-large  81rem   / 1296px  wide desktop                       */

  /* ---- Focus ------------------------------------------------------------- */
  --focus-ring: 0.1875rem solid var(--color-coffee-bean);
  --focus-offset: 0.1875rem;
}

/* ==========================================================================
   1. Base Text Styles
   ========================================================================== */

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: var(--color-carbon-black);
  font-family: var(--font-primary);
  line-height: var(--line-height-base);
}

p {
  margin-bottom: var(--stack-gap);
}

/* Inline Elements */
.highlight {
  color: var(--color-faded-copper);
  font-weight: 600;
}

.small-text {
  font-size: var(--font-size-extra-small);
  opacity: 0.8;
}

/* ==========================================================================
   2. Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-carbon-black);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--line-height-tight);
  margin-bottom: var(--stack-gap);
  margin-top: 0;
  text-align: center;
}

h1 {
  font-size: var(--font-size-4x-large);
}

h2 {
  font-size: var(--font-size-3x-large);
  letter-spacing: -0.02em;
}

@media (max-width: 47.5rem) {
  h2 {
    font-size: var(--font-size-2x-large);
  }
}

h3 {
  font-size: var(--font-size-extra-large);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   3. Main Content Layout (Wrappers)
   ========================================================================== */

.content-wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 65rem;
  padding: 0 var(--spacing-6);
  width: 100%;
}

/* Responsive adjustments for the wrapper */
@media (max-width: 47.5rem) {
  .content-wrapper {
    padding: 0 var(--spacing-5);
  }
}