/* Design tokens: Yogelo website and menu (private demo).
   Faithful to Yogelo's own brand, as posted on their Facebook page (profile image: the logo on a pastel blur; cover: branded
   cups on a magenta wall) and their Uber Eats store (gelato tubs on marble). Colours are medians of solid areas in those
   images, not picked by eye (sampled 2026-10-17).
   - Yo pink (--yo-pink) #ee9bd8: "YO", the soft-serve swirl and the script line in the logo.
   - Gel blue (--gel-blue) #97d8f6: "GEL" and the cup.
   - O! yellow (--o-yellow) #ffd064: "O!", the spoon and the cup rims.
   - Wall magenta (--wall) #d677b1: the wall behind the cups on their cover photo.
   The three pastels are too light for text on white (2.0, 1.6 and 1.5:1), so they are fills, panels and big shapes only,
   always with dark ink on top (7.6, 9.9 and 10.6:1).
   - Berry (--brand) #b23f8c: OURS, not theirs. A deeper step of their pink for buttons, links and small text (white on it
     5.3:1, it on white 5.3:1). Show it to the owner.
   - Ink #2b2130: near-black pulled toward their pink, so text sits with the pastels instead of looking grey. 15.4:1 on white.
   - Page white #ffffff: their cups and the centre of their logo blur are white; the pastels carry the colour.
   Fonts (compared with the logo; ask the owner for their real font names):
   - League Gothic (--font-display): tall condensed capitals, the closest free match to "YO GELO!". Headings, prices on the
     home page and big numbers. Always in capitals, as on the logo. The logo itself is a traced SVG, so it never depends
     on this font loading.
   - Nunito (--font-body): rounded, friendly and very readable on a phone; its round terminals sit well beside the
     drawn cup. Everything people read.
   Brand colours are also set from cafe.json "colours" at runtime (shared.js); keep the two in step. */
:root {
  --font-display: "League Gothic", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-wordmark: var(--font-display);
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* their palette */
  --yo-pink: #ee9bd8;
  --gel-blue: #97d8f6;
  --o-yellow: #ffd064;
  --wall: #d677b1;
  --pink-soft: #fde6f5;    /* a pale wash of Yo pink for panels; berry on it 4.5:1, ink 13:1 */
  --blue-soft: #e3f4fc;
  --yellow-soft: #fff4d6;

  /* roles (names shared with the Docklands Den code, so the menu, owner and edit screens restyle from here) */
  --brand: #b23f8c;        /* berry: buttons, links, small accent text. White on it 5.3:1 */
  --brand-ink: #ffffff;
  --brand-deep: #93306f;   /* hover and pressed; white on it 7.3:1 */
  --signal: var(--o-yellow);  /* O! yellow as a fill, ink on it 10.6:1 */
  --signal-ink: #2b2130;
  --signal-on-brand: #fff1cc; /* light yellow for small text on berry */
  --signal-text: #7a5600;  /* yellow darkened for small text on white, 6.6:1 */
  --sage: var(--gel-blue); /* the panel colour behind section titles in the shared code */
  --sage-ink-2: #3f4a55;   /* quieter text on blue, 5.8:1 */
  --bg: #ffffff;
  --surface: #f6f2f7;      /* wells and placeholder plates: the centre of their logo blur, one step darker */
  --surface-2: #ece5ee;
  --ink: #2b2130;          /* 15.4:1 on white */
  --ink-2: #5a4d5c;        /* 7.9:1 on white */
  --ink-3: #6e6271;        /* 5.8:1 on white, 5.2:1 on surface */
  --line: #ece5ee;
  --danger: #b3261e;
  --ok: #1f6f4a;
  --focus: #1a73e8;

  /* type scale: 1.25 from 16 for reading text; display sizes jump further because League Gothic is so narrow */
  --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 23px; --t-2xl: 28px; --t-3xl: 36px; --t-4xl: 52px;
  --t-5xl: 72px; --t-6xl: 104px;

  /* 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;
  --s-16: 64px; --s-20: 80px;

  /* radii: soft like their cups and tubs. Buttons are fully round (like a scoop), photos 18px, controls 10px */
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-sheet: 22px; --r-pill: 999px;
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(43, 33, 48, .08);
  --shadow-sheet: 0 -12px 40px rgba(43, 33, 48, .2);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tap: 48px;
  --page: 640px;
  --wide: 1160px;
}