/* Design tokens for the QR order-and-pay demo (Stop 19, a made-up Sydney Road café).
   Brand colours (--brand, --brand-ink, --signal) are overridden per café from cafe.json at runtime.
   Fonts:
   - Archivo (wide, 112-125 width, heavy): the display face. Its expanded cut reads like tram-stop and street signage,
     which is where the table-number plate idea comes from. Used for the café name, numbers and headings only.
   - Figtree: the body face. Open, friendly and very clear at 14-16px on a phone read at arm's length at a sunny table,
     with plain, even numerals for prices (we tried Atkinson Hyperlegible Next first; its slashed zero made $5.20
     look like a code). */
:root {
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* colour */
  --brand: #1c5a45;        /* tram-stop green */
  --brand-ink: #ffffff;    /* text on brand */
  --brand-deep: #123d2f;
  --signal: #f2b33d;       /* signal amber, used sparingly: the table plate number, the order count */
  --signal-ink: #1b1a14;
  --bg: #ffffff;
  --surface: #f3f5f2;      /* wells, illustration plates */
  --surface-2: #e8ece7;
  --ink: #15201b;
  --ink-2: #4f5b55;        /* secondary text, 7:1 on white */
  --ink-3: #6f7a74;        /* tertiary, 4.6:1 on white */
  --line: #dfe4df;
  --danger: #b3261e;
  --ok: #1f7a4d;
  --focus: #1a73e8;

  /* type scale (1.2 minor third 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(21, 32, 27, .08);
  --shadow-sheet: 0 -12px 40px rgba(21, 32, 27, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 48px;
  --page: 640px;
}
