/* OSTERIA MAMMA — design tokens
   The palette is read off the restaurant itself: the red Melrose facade, the
   black plaque with its copper lettering, the warm timber of the wine wall,
   and the near-black ceiling above it. */
:root {
  /* near-black — warm, the ceiling and the plaque */
  --ink: #100f0d;
  --ink-2: #17150f;
  --char: #221e18;

  /* the facade red */
  --red: #b4342a;
  --red-lit: #d0463a;
  --red-deep: #7d211a;

  /* the plaque's copper lettering */
  --copper: #c0703c;
  --copper-lit: #e09a5e;
  --copper-deep: #8a4c24;

  /* the timber of the wine wall */
  --wood: #c08a4e;

  /* paper */
  --cream: #f3ece2;
  --cream-dim: #d8ccbc;

  --text: #f0e8dc;
  --text-soft: #c3b6a5;
  --text-mute: #9a8c7b;

  --line: rgba(192, 112, 60, 0.26);
  --line-soft: rgba(240, 232, 220, 0.12);

  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 1rem + 6vw, 5.5rem);
  --fs-h2: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.97rem + 0.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --track-eyebrow: 0.34em;
  --track-btn: 0.14em;

  --space-section: clamp(5rem, 3.5rem + 7vw, 9.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --content-max: 82rem;
  --measure: 38rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-med: 460ms;

  --nav-h: 4.25rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../../assets/fonts/playfair-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}