/* ============================================================
   Bake & Bite — Shared Brand Tokens
   Color system extracted from the Bake & Bite menu PDF.
   Imported by every landing page so all variants stay on-brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Parisienne&family=Rye&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Serif+Hentaigana:wght@200..900&family=Noto+Serif:wght@400;500;600;700&display=swap');

:root {
  /* ── Parchment Family — 羊皮纸色系 ── */
  --color-parchment-100: #f4dfc0;
  --color-parchment-200: #e6d2ad;   /* base */
  --color-parchment-300: #d4bf98;
  --color-parchment-400: #c0aa82;
  --color-parchment-500: #ac946e;

  /* ── Kopi Amber Family — 咖啡琥珀色系 ── */
  --color-amber-100: #f0d280;
  --color-amber-300: #dca03c;
  --color-amber-500: #be7828;        /* base / brand */
  --color-amber-700: #965a28;
  --color-amber-900: #783c14;

  /* ── Terracotta Family — 陶土橙色系 ── */
  --color-terra-100: #f0c0a8;
  --color-terra-300: #d28264;
  --color-terra-500: #c86e50;        /* base */
  --color-terra-700: #b45a46;
  --color-terra-900: #8c3c28;

  /* ── Forest Neutral — 森色中性 ── */
  --color-neutral-200: #b4b4a0;
  --color-neutral-400: #8c826e;
  --color-neutral-600: #5a5046;
  --color-neutral-800: #3c4632;
  --color-neutral-900: #303024;

  /* ── Accent Extras ── */
  --color-slate: #647882;
  --color-sage:  #8c968c;

  /* ── Semantic tokens ── */
  --bg-page:    var(--color-parchment-100);
  --bg-surface: var(--color-parchment-200);
  --bg-subtle:  var(--color-parchment-300);
  --bg-inverse: var(--color-neutral-900);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-muted:     var(--color-neutral-400);
  --text-on-dark:   var(--color-parchment-200);

  --brand-primary: var(--color-amber-500);
  --brand-light:   var(--color-amber-300);
  --brand-dark:    var(--color-amber-700);

  --accent:        var(--color-terra-500);
  --accent-forest: var(--color-neutral-800);
  --accent-slate:  var(--color-slate);

  --border-default: #dcd2b4;
  --border-brand:   rgba(190, 120, 40, 0.25);

  --ink-deep: #1e2a26;   /* deepest navy-forest used for headings on the poster */

  /* ── Logo wordmark — sampled directly from the BAKE AND BITE artwork ── */
  --logo-navy:    #2e454c;   /* avg/median stroke colour of the lettering */
  --logo-navy-dk: #233840;   /* deeper stroke cores */
  --logo-navy-lt: #5e7a80;   /* faded letterpress edges */

  --font-serif:  'Playfair Display', serif;
  --font-sans:   'DM Sans', 'Noto Sans SC', sans-serif;
  --font-mono:   'DM Mono', monospace;
  --font-script: 'Parisienne', cursive;
  --font-cn:     'Noto Sans SC', sans-serif;
  --font-logo:   'Rye', 'Playfair Display', serif;   /* Western Tuscan slab, closest match to artwork */
  --font-title:  'Noto Serif Hentaigana', 'Noto Serif', serif;

  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Peranakan tile motif — recreated in pure SVG, on-palette.
   Used as a decorative vertical border like the menu poster.
   ============================================================ */
.bnb-tile {
  background-color: var(--color-parchment-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f4dfc0'/%3E%3Cpath d='M32 4 L60 32 L32 60 L4 32 Z' fill='none' stroke='%23647882' stroke-width='1.6'/%3E%3Cpath d='M32 14 L50 32 L32 50 L14 32 Z' fill='none' stroke='%23965a28' stroke-width='1'/%3E%3Cg fill='%23c86e50'%3E%3Ccircle cx='32' cy='20' r='5'/%3E%3Ccircle cx='32' cy='44' r='5'/%3E%3Ccircle cx='20' cy='32' r='5'/%3E%3Ccircle cx='44' cy='32' r='5'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='6' fill='%23dca03c'/%3E%3Ccircle cx='32' cy='32' r='2.4' fill='%233c4632'/%3E%3Cg fill='%23647882'%3E%3Cpath d='M0 0 L14 0 A14 14 0 0 1 0 14 Z'/%3E%3Cpath d='M64 0 L50 0 A14 14 0 0 0 64 14 Z'/%3E%3Cpath d='M0 64 L14 64 A14 14 0 0 0 0 50 Z'/%3E%3Cpath d='M64 64 L50 64 A14 14 0 0 1 64 50 Z'/%3E%3C/g%3E%3Cg fill='%23dca03c'%3E%3Ccircle cx='4' cy='4' r='2.4'/%3E%3Ccircle cx='60' cy='4' r='2.4'/%3E%3Ccircle cx='4' cy='60' r='2.4'/%3E%3Ccircle cx='60' cy='60' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
}

/* thin amber rule used between tile border and content, like the poster frame */
.bnb-tile-edge { box-shadow: inset 3px 0 0 var(--color-amber-700), inset -3px 0 0 var(--color-amber-700); }

/* ── Shared decorative leaf/floral divider ── */
.bnb-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: var(--brand-dark);
}
.bnb-divider::before,
.bnb-divider::after {
  content: '';
  height: 1px;
  width: clamp(40px, 12vw, 120px);
  background: currentColor;
  opacity: .45;
}
.bnb-divider span { font-size: 1.1rem; }

/* ============================================================
   BRAND LOGO
   Two interchangeable treatments, both on-brand:
   (A) .bnb-logo-text  — recreated with the Rye web font + the
       navy sampled from the artwork. Scales crisply, recolours
       for dark backgrounds, fully selectable text / accessible.
   (B) .bnb-logo-img   — the original BAKE AND BITE artwork
       (cropped from the menu). Carries the hand-drawn serifs,
       letterpress texture and floral flourish, but is a raster
       on a parchment ground (best on light surfaces).
   ============================================================ */

/* (A) font wordmark */
.bnb-logo-text {
  font-family: var(--font-logo);
  font-weight: 400;
  color: var(--logo-navy);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
}
.bnb-logo-text .and {
  font-size: .52em;
  letter-spacing: .04em;
  transform: translateY(-.06em);
}
/* light-on-dark variant for dark surfaces */
.bnb-logo-text.on-dark { color: var(--color-parchment-100); }
.bnb-logo-text.amber   { color: var(--brand-light); }

/* optional floral rule under the wordmark (echoes the artwork) */
.bnb-logo-flourish {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--accent); margin-top: .35rem; font-size: .9rem;
}
.bnb-logo-flourish::before, .bnb-logo-flourish::after {
  content: ''; height: 1px; flex: 0 0 auto; width: clamp(28px, 8vw, 70px);
  background: var(--color-sage);
}

/* (B) image logo */
.bnb-logo-img { height: 44px; width: auto; }
.bnb-logo-img.lg { height: clamp(90px, 16vw, 150px); }
/* let the parchment ground blend into light brand surfaces */
.bnb-logo-img.blend { mix-blend-mode: multiply; }