/* Fenzo design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Inter+Tight:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #EEEEEE;            /* paper: every light band */
  --surface: #FFFFFF;       /* cards, menu card, form card, recipe chip */
  --surface-2: #D7D7D7;     /* off-white 2: footer text, hairlines on dark */
  --band: #266433;          /* forest band: menu stage, events, locations */
  --band-2: #003C45;        /* deep teal band: guests, footer */
  --shade: #1D1D1D;         /* photo scrims (multiply) */

  /* ── Text ── */
  --text: #10511D;          /* headings: deep basil (8.2:1 on paper) */
  --text-2: #475B44;        /* body + leads (6.4:1 on paper) */
  --muted: #475B44;
  --on-dark: #FFFFFF;
  --on-dark-2: #D7D7D7;     /* body on teal (8.4:1) */
  --on-photo: #EEEEEE;

  /* ── Lines ── */
  --line: #475B44;          /* form fields, outline pills (hand-drawn ovals) */
  --line-2: #D7D7D7;        /* footer boxes, list rules on green */
  --line-dark: rgba(255, 255, 255, .28);

  /* ── Brand / accent ── */
  --accent: #CC4A1A;        /* terracotta: buttons, prices, active tab (white text 4.6:1) */
  --accent-hi: #E25826;     /* the source's brighter terracotta: stars, quote marks, drag disc, logo mark (decor only, never text) */
  --accent-deep: #B23F14;   /* button hover */
  --accent-soft: #F6E2D8;
  --on-accent: #FFFFFF;
  --zest: #E2DC54;          /* lemon: prices + outline buttons on green/dark photos, the menu squiggle */

  /* ── Data / status (forms only) ── */
  --success: #266433; --warning: #E2DC54; --danger: #B23F14; --info: #003C45;

  /* ── Fonts ── */
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Aboreto", "Cinzel", Georgia, serif;   /* an all-caps display face: never set body copy in it */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii: square by design ── */
  --r-sm: 0; --r: 0; --r-lg: 0; --r-pill: 9999px;  /* pills only on the round arrow buttons, avatars and hand-drawn tab ovals */

  /* ── Spacing / layout ── */
  --container: 1288px;      /* 76px gutters at 1440 */
  --wide: 1352px;           /* header + hero furniture: 44px gutters */
  --gutter: 76px;
  --section: 140px;         /* gap between sections and padding inside bands */
  --head-gap: 60px;         /* section head → content */
  --card-gap: 24px;

  /* ── Shadows: none (depth = overlap, tilt and photo scrims) ── */
  --shadow-1: none; --shadow-2: none;

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s;
  --tilt: -4.5deg;          /* the menu stage tilt */
}
@media (max-width: 1200px) { :root { --gutter: 40px; --section: 112px; } }
@media (max-width: 760px)  { :root { --gutter: 20px; --section: 80px; --head-gap: 40px; --card-gap: 16px; } }

/* ── Type scale (Aboreto is caps-only; tracking −6% on every display size) ── */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6.25vw, 90px); line-height: 1.04; letter-spacing: -.06em; text-transform: uppercase; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 6.25vw, 90px); line-height: 1.04; letter-spacing: -.06em; text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.45vw, 64px); line-height: 1.2; letter-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.06em; text-transform: uppercase; }
.t-h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.2; letter-spacing: -.06em; text-transform: uppercase; }
.t-lead { font-family: var(--font); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.52; }   /* source 20 → 18 (body_px: human designs stay ≤ 18) */
.t-body { font-family: var(--font); font-size: 16px; line-height: 1.52; }
.t-small { font-family: var(--font); font-size: 14px; line-height: 1.5; }
.t-label { font-family: var(--font); font-size: 16px; line-height: 1.52; font-weight: 600; }
.t-eyebrow { font-family: var(--font-display); font-size: clamp(22px, 1.95vw, 28px); line-height: 1.2; letter-spacing: -.06em; text-transform: uppercase; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }