/* Design tokens: Docklands Den QR menu (private demo).
   The restaurant has no website or logo we can use, so the look comes from its place and its food:
   - Harbour navy (--brand): the water of Victoria Harbour at night, a few hundred metres from Rakaia Way.
   - Smoked chilli (--signal): their own smoked chilli mayo goes in half the menu. Used sparingly: table number,
     order count, the active language. Never for body text.
   Fonts:
   - Big Shoulders Stencil (wordmark only): stencilled shipping-crate lettering for a place named after the docks.
     It stands in for a logo until Fahad gives us one.
   - Big Shoulders (display: headings, numbers, prices on the docket): condensed and industrial like wharf-shed signs,
     and narrow enough that long English dish names fit on one line at 390 px.
   - Noto Sans (body): chosen because 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 per restaurant from cafe.json at runtime (shared.js). */
:root {
  --font-wordmark: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
  --font-display: "Big Shoulders", "Arial Narrow", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans Devanagari", "Noto Sans KR", 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: #143049;        /* harbour navy */
  --brand-ink: #ffffff;
  --brand-deep: #0b2236;
  --signal: #ff8b5e;       /* smoked chilli, on navy 5.0:1 */
  --signal-ink: #1d1410;
  --signal-text: #b43c18;  /* chilli for small text on white, 5.4:1 */
  --bg: #ffffff;
  --surface: #f2f4f6;      /* wells, illustration plates: cool, like concrete wharf */
  --surface-2: #e5e9ed;
  --ink: #121c26;
  --ink-2: #4a5663;        /* 7.3:1 on white */
  --ink-3: #6b7783;        /* 4.6:1 on white */
  --line: #dde2e7;
  --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;

  /* 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;
}