/* palette-source: sampled — written by palette.mjs on 2026-09-26 */
/*
  BRAND TOKENS — the only stylesheet the builder edits for colour and type.
  Everything in base.css reads from these variables. Keep every value here
  traceable to the shop's own branding (logo, shopfront, Instagram grid) or to
  the design-system run recorded in company-profile.md.
*/
:root {
  /* Colour — from palette.mjs, sampled from the shop's own photos: interior
     (owner-01, owner-10), food (owner-02) and the cup/wordmark (owner-05,
     tagged --brand), plus the Facebook logo. */
  --color-primary: #1a1a1a;        /* true neutral near-black (equal RGB, no hue): the logo is a monochrome black-ink wordmark on cream, so the brand's own "ink" carries no colour of its own — palette.mjs's sampled darkest brown (#1e180f) was overridden to this neutral so the warmth reads only from the terracotta accent, not from an incidental cast in the primary; see company-profile.md Brand/Decisions */
  --color-on-primary: #f6f5f4;     /* text on primary */
  --color-accent: #b2572a;         /* terracotta default (no second brand hue in the photos), darkened for 4.5:1 link contrast — echoes the copper pendant lights and timber */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f6f5f4;             /* page background, primary hue tinted to L96 */
  --color-surface: #fdfdfc;        /* cards, menu panels */
  --color-ink: #231f1a;            /* body text */
  --color-muted: #766d60;          /* secondary text */
  --color-border: #e7e3da;         /* hairlines */

  /* Type — the takeaway cup (owner-05.jpg) carries a condensed slab wordmark
     with an "EST." line; the Facebook/Instagram badge is a spaced geometric
     sans in a circle. Paired to read as a homely, unhurried village café
     rather than a specialty showroom. */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-transform: none;

  /* Shape and texture */
  --radius: 12px;
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(20, 20, 20, 0.28), rgba(20, 20, 20, 0.66));
  --shadow: 0 10px 30px rgba(26, 26, 26, 0.1);
}