/* Content Autopilot tokens (Dockland's Den demo).
   Colours come from the restaurant's own food photos, since no logo or brand colours were found (ask the owner):
   charcoal of their black plates, crumb gold of the parma and buns, dark timber of their tables.
   Fonts:
   - Barlow Condensed (600, 700): dish names, headings and the bank number. Condensed like a takeaway menu board,
     and long dish names ("Peri Peri Grilled Chicken Burger") still fit on one line on a 320 px phone.
   - Public Sans (400, 500, 600): everything else. Plain, sturdy and very readable at 15 to 16 px for staff reading
     mid-shift; it stays out of the way of the food photos. */
:root {
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* colour */
  --bg: #ffffff;
  --surface: #f4f3f1;      /* wells, skeletons, the bank panel */
  --surface-2: #e9e7e3;
  --ink: #1c1a18;          /* plate charcoal: text and the main button */
  --ink-2: #4b4642;        /* secondary text, 9:1 on white */
  --ink-3: #6b655f;        /* tertiary, 5.6:1 on white */
  --line: #e2dfda;
  --line-2: #cfcac3;
  --gold: #e3a43b;         /* crumb gold: the one accent (selection, today, bank) */
  --gold-soft: #fbf0dc;
  --gold-ink: #8a5408;     /* gold text on white, 5.6:1 */
  --timber: #5a3822;       /* their tables: used for the avatar plate only */
  --danger: #a3271b;
  --focus: #1f5fd1;

  /* 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: 56px;

  /* 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 and thumbs, larger only for sheets and the phone-sized previews */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-bar: 0 -1px 0 var(--line);
  --shadow-sheet: 0 -10px 40px rgba(28, 26, 24, .18);
  --shadow-float: 0 6px 24px rgba(28, 26, 24, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 48px;
  --tabbar: 64px;
}