/* Design tokens: Docklands Den website and QR menu (private demo).
   Brand matched to their own channels on 2026-10-17: the logo on their Google Business Profile posts, Instagram
   (@docklandsden1) profile picture and printed menus (the menu photos they posted on Google). Colours are sampled
   from those images (median of solid areas), not picked by eye.
   - Den green (--brand) #27604c: the "d" mark and wordmark, the same on the logo, Instagram and both menus.
     White on it is 7.3:1, so it is used exactly as sampled.
   - Sage (--sage) #aac2aa: the panels behind the section titles on their breakfast menu. Ink on it 8.4:1.
   - Tan (--signal) #daa267: the orange shape on their mains menu. Used as a fill with dark ink (7.5:1), and on green
     only for large type (the table number, 3.3:1). Small text on green uses --signal-on-brand #f0cfa4 (5:1), a lighter
     tint of the same tan, because the sampled tan is under 4.5:1 there.
   - Paper (--bg) #f8f2e6: their menu paper and logo background, exact.
   Fonts (each matched to where it appears on their own material):
   - Italiana (--font-wordmark): the closest Google Font to the thin, high-contrast lettering of "DOCKLAND'S DEN" in
     their logo. Always in capitals, as on the logo. The logo itself (logo-full.svg, wordmark.svg) is outlined, so it
     doesn't depend on the font loading.
   - Shrikhand (--font-heading): the heavy italic on their breakfast menu titles ("BREAKFAST MAINS"), black and
     underlined on sage. Section and menu headings only. Latin only: other languages fall back to Noto.
   - League Spartan (--font-display): the geometric capitals of the dish names on their breakfast menu; also prices,
     numbers and the docket, with tabular figures.
   - Noto Sans (--font-body): reading text. The same family covers Arabic, Chinese, Hindi and Korean (Noto Sans
     Arabic, SC, Devanagari, KR, loaded only when picked), so every language has matching weight, height and rhythm.
   Brand colours are also set from cafe.json at runtime (shared.js); keep the two in step. */
:root {
  --font-wordmark: "Italiana", "Didot", Georgia, serif;
  --font-heading: "Shrikhand", "League Spartan", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Devanagari", "Noto Sans KR", system-ui, sans-serif;
  --font-display: "League Spartan", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Devanagari", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Devanagari", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* colour */
  --brand: #27604c;        /* Den green, sampled from their logo; white on it 7.3:1 */
  --brand-ink: #ffffff;
  --brand-deep: #1e4c3c;   /* hover and pressed; white on it 9.8:1 */
  --signal: #daa267;       /* tan, sampled from their mains menu; dark ink on it 7.5:1 */
  --signal-ink: #2a1a0c;
  --signal-on-brand: #f0cfa4; /* small tan text on green, 5:1 */
  --signal-text: #8a5a26;  /* tan darkened for small text on paper, 5.3:1 (4.7:1 on --surface) */
  --sage: #aac2aa;         /* their breakfast menu's title panels; ink on it 8.4:1 */
  --sage-ink-2: #3d4a43;   /* quieter text on sage, 4.9:1 */
  --bg: #f8f2e6;           /* their menu paper, exact */
  --surface: #eee5d3;      /* wells and illustration plates: the paper, one step darker */
  --surface-2: #e2d8c3;
  --ink: #17241e;          /* 14.4:1 on paper */
  --ink-2: #4a5650;        /* 6.9:1 on paper */
  --ink-3: #5c665f;        /* 5.3:1 on paper, 4.8:1 on surface */
  --line: #e0d6c2;
  --danger: #b3261e;
  --ok: #1f6f4a;
  --focus: #1a73e8;

  /* type scale (1.2 from 16) */
  --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 23px; --t-2xl: 28px; --t-3xl: 34px; --t-4xl: 48px;
  --t-5xl: 64px; --t-6xl: 92px;

  /* spacing (4 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* radii: small for controls, larger only for sheets */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-sheet: 20px;
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(18, 28, 38, .08);
  --shadow-sheet: 0 -12px 40px rgba(18, 28, 38, .2);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 48px;
  --page: 640px;
  --wide: 1160px;          /* home page content width on desktop */
  --s-16: 64px; --s-20: 80px;
}