/* Content Autopilot tokens (Docklands Den demo).
   Colours are their own brand (read 2026-10-14 from their menu, Google posts and logo):
   Den green from the "d" mark for the main buttons and the clip inbox, sand from their mains menu as the one accent,
   menu cream for wells. Video frames stay on charcoal so the food reads true.
   Fonts:
   - Shrikhand: their name in the header only (the heavy italic on their own menu titles).
   - Barlow Condensed (600, 700): dish names, headings and the bank number. Condensed like a takeaway menu board,
     and long dish names ("Double Den 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-brand: "Shrikhand", Georgia, serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* colour */
  --bg: #ffffff;
  --surface: #f6f1e7;      /* menu cream: wells, skeletons, the bank panel */
  --surface-2: #ece4d4;
  --ink: #17241e;          /* text, video frames */
  --ink-2: #47524c;        /* secondary text, 8:1 on white */
  --ink-3: #5f6963;        /* tertiary, 5.8:1 on white */
  --line: #e6dfd2;
  --line-2: #d0c7b6;
  --brand: #1d5a47;        /* Den green: main buttons, the clip inbox, switches; white on it 8.1:1 */
  --brand-deep: #143f32;
  --gold: #f4bb84;         /* sand: the one accent (selection, today, bank); on green 4.7:1 */
  --gold-soft: #fcefe1;
  --gold-ink: #9a4d17;     /* sand text on white, 6.1:1 */
  --timber: #5a3822;
  --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;
}