/* BRASA — design tokens.
   Palette, type scale, rhythm and motion timing live here and nowhere else.

   The page runs a single colour journey: golden hour at the top, warm black at
   the bottom. Sections declare a chapter class (.is-cream, .is-night, .is-wine)
   and inherit the role variables below; --page-bg is interpolated by
   nightfall.js across the whole scroll. */

:root {
  /* --- palette -------------------------------------------------------- */
  --char:   #15110F;   /* charcoal, the structural dark */
  --black:  #0B0908;   /* deep warm black, the end of the night */
  --burnt:  #E94F1D;   /* burnt orange */
  --ember:  #FF6A24;   /* ember orange — the brightest thing on the page */
  --cream:  #F4E8D5;   /* warm cream, the structural light */
  --sand:   #D7B98E;   /* sand, secondary light */
  --wine:   #5B1F1B;   /* deep wine */
  --lime:   #B8D547;   /* tropical accent, used once or twice */

  --cream-72: rgba(244, 232, 213, .72);
  --cream-52: rgba(244, 232, 213, .52);
  --cream-30: rgba(244, 232, 213, .30);
  --cream-14: rgba(244, 232, 213, .14);
  --char-72: rgba(21, 17, 15, .72);
  --char-52: rgba(21, 17, 15, .52);
  --char-14: rgba(21, 17, 15, .14);
  --black-70: rgba(11, 9, 8, .70);

  /* the scroll-driven page ground: golden-hour charcoal -> warm black */
  --page-bg: #1B1512;

  /* section-local roles, flipped by the chapter classes */
  --bg: transparent;
  --fg: var(--cream);
  --muted: var(--cream-72);
  --rule: var(--cream-14);
  --accent: var(--ember);

  /* --- typography ------------------------------------------------------ */
  --font-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  /* display scale — oversized on purpose, clamped per viewport */
  --t-mega:  clamp(3.6rem, min(16vw, 27vh), 16rem);  /* hero, type breaks */
  --t-huge:  clamp(2.9rem, 9vw, 8.5rem);             /* section headlines */
  --t-big:   clamp(2.1rem, 5.6vw, 4.6rem);           /* sub headlines */
  --t-mid:   clamp(1.35rem, 2.6vw, 2.1rem);          /* dish names, cards */
  --t-lede:  clamp(1.05rem, 1.35vw, 1.35rem);
  --t-body:  clamp(.95rem, 1.05vw, 1.06rem);
  --t-small: .875rem;
  --t-label: .7rem;                                   /* uppercase micro labels */

  --track-mega: -.02em;    /* Anton is already tight; do not crush it */
  --track-huge: -.015em;
  --track-label: .26em;
  /* Anton's capitals are .859 of the font size tall, so a leading of .86–.88
     left the lines of a headline touching — nothing between THIS IS and
     NOT JUST. The leading is now the cap height plus a fixed 3px: the same
     hairline between lines at every size, a phone's 48px or a desktop's 136px.
     em resolves where the token is used, i.e. against each headline's own size. */
  --lh-mega: calc(.86em + 3px);
  --lh-huge: calc(.86em + 3px);

  /* --- rhythm ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1480px;
  --maxw-text: 60ch;
  --sect-y: clamp(5rem, 11vh, 9.5rem);
  --gap: clamp(1rem, 2vw, 2rem);

  /* --- imagery ---------------------------------------------------------
     Photography is framed with the smallest radius that still reads as
     deliberate. Nothing here should look like a rounded product card. */
  --r-lg: clamp(10px, .9vw, 16px);
  --r-md: clamp(8px, .7vw, 12px);
  --r-sm: 6px;
  --r-btn: 999px;

  --img-zoom: 1.03;        /* the brief caps image hover at ~1.03 */
  --img-shadow: 0 30px 70px -34px rgba(0, 0, 0, .85);

  /* --- motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: .28s;
  --dur: .6s;
  --dur-slow: 1.1s;
  --dur-mask: .45s;        /* the menu/teaser image reveal, 350-500ms */
  --dur-image: .9s;

  --header-h: 76px;
  --z-cursor: 90;
  --z-modal: 80;
  --z-header: 60;
  --z-float: 50;
}

/* Cream chapters: the page takes a breath (sharing, sides). */
.is-cream {
  --bg: var(--cream);
  --fg: var(--char);
  --muted: var(--char-72);
  --rule: var(--char-14);
  --accent: var(--burnt);
}

/* Night chapters: the bar, the last CTA, the footer. */
.is-night {
  --bg: var(--black);
  --fg: var(--cream);
  --muted: var(--cream-72);
  --rule: var(--cream-14);
  --accent: var(--ember);
}

/* Dessert chapter on /menu: chocolate and deep wine. */
.is-wine {
  --bg: #2A100D;
  --fg: var(--cream);
  --muted: var(--cream-72);
  --rule: rgba(244, 232, 213, .16);
  --accent: var(--sand);
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    --img-zoom: 1.02;
  }
}