/* palette-source: sampled from the shop's own photographs — the sage the shopfront
   fascia is painted, and the terracotta of the arcade floor outside their door.
   Written by hand on 2026-09-12; see the Brand section of company-profile.md for the
   measured values and why the primary was overridden from the palette tool's output. */
/*
  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 */
  --color-primary: #303b2b;        /* the fascia sage (#9aa197, h102) at heading weight */
  --color-on-primary: #f4f8f2;     /* text on primary */
  --color-accent: #954a28;         /* the arcade's terracotta floor tiles, as sampled */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f4f8f2;             /* page background */
  --color-surface: #fcfdfc;        /* cards, menu panels */
  --color-ink: #1d231a;            /* body text */
  --color-muted: #62705c;          /* secondary text */
  --color-border: #dee7da;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Zilla Slab", Rockwell, Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.005em;
  --display-transform: none;       /* the fascia sign is title case, not caps */

  /* Shape and texture */
  --radius: 2px;                   /* the sign, the boards and the arcade are all square */
  --radius-sm: 2px;
  --hero-overlay: linear-gradient(180deg, rgba(16, 22, 14, 0.30), rgba(16, 22, 14, 0.62));
  --shadow: 0 10px 30px rgba(29, 35, 26, 0.08);
}