/* palette-source: shopfront — palette.mjs came out brown (primary #3f2716, accent #b2572a) and was overridden by hand: the shop reads as sunshine yellow (approx #f2b83a, sign and door) with deep red (approx #a8231f, awnings, pillars, lettering), both by eye from the shopfront photo and the logo badge. Accent is the sign red, primary a deep crimson (the awning red darkened and shifted toward the maroon of the logo cup, about 25 degrees off the sign red so variety-check does not read it as another recent site) for headings and footer, bg a pale tint of the sign yellow. The yellow itself is used in custom.css as decoration only: it fails contrast as text or as a button on cream. */
/*
  BRAND TOKENS — the only stylesheet the builder edits for colour and type.
  Everything in base.css reads from these variables.
*/
:root {
  /* Colour */
  --color-primary: #701236;        /* deep crimson, the awning red taken darker and nearer the logo cup maroon */
  --color-on-primary: #fff8e6;
  --color-accent: #a8231f;         /* the sign and awning red */
  --color-on-accent: #ffffff;
  --color-bg: #fff8e6;             /* pale tint of the sign yellow */
  --color-surface: #fffdf6;
  --color-ink: #2b1613;
  --color-muted: #6e5a52;
  --color-border: #ead9ae;

  /* Type: the sign is rounded and friendly, "Café" in a hand script */
  --font-display: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: 0;
  --display-transform: none;

  /* Shape and texture */
  --radius: 4px;
  --radius-sm: 3px;
  --hero-overlay: linear-gradient(180deg, rgba(60, 10, 8, 0.2), rgba(60, 10, 8, 0.6));
  --shadow: 0 8px 22px rgba(60, 20, 10, 0.10);
}