/*
  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.
*/
/* palette-source: sampled from the shop's own owner-attributed Google photos
   (owner-01 shopfront, owner-02 flat white/sausage roll, owner-10 cappuccino/
   bread roll) via scripts/palette.mjs, --brand on the shopfront. Primary is the
   darkest saturated colour with real presence (a warm dark brown, from the
   brick/interior); accent is the most saturated second hue, a blue that reads
   close to the navy fascia sign. See company-profile.md, Brand, for the full
   run and contrast report — all pairs PASS. No override. */
:root {
  /* Colour */
  --color-primary: #2c2516;        /* dark, saturated — reads as the brand's colour */
  --color-on-primary: #f8f6f2;     /* text on primary */
  --color-accent: #345374;         /* blue — close to the navy fascia sign */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f8f6f2;             /* page background, primary hue at s30 l96 */
  --color-surface: #fdfdfc;        /* cards, menu panels */
  --color-ink: #23201a;            /* body text */
  --color-muted: #766f60;          /* secondary text */
  --color-border: #e7e3da;         /* hairlines */

  /* Type — the fascia is a plain, letter-spaced serif in capitals; formal, not
     hand-lettered. Libre Caslon Text/Inter reads that way without borrowing the
     "hand-painted" softness of Fraunces. */
  --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: 0em;
  --display-transform: none;       /* the sign is capitals but set in a serif, not a display face */

  /* Shape and texture */
  --radius: 2px;                   /* square, working counter-service shop */
  --radius-sm: 2px;
  --hero-overlay: linear-gradient(90deg, rgba(15, 12, 6, 0.8), rgba(15, 12, 6, 0.5) 45%, rgba(15, 12, 6, 0.15));
  --shadow: 0 10px 30px rgba(35, 32, 26, 0.1);
}