/* palette-source: sampled, then hand-tuned — three palette.mjs runs on crops of
   the shop's own shopfront photo (owner-03.jpg), not the whole photo, because
   the overcast sky drowns the sign. Run 1 (raw sign-board crop) read the
   sage-green board as blue-grey glare and gave a navy primary + terracotta
   accent. Run 2 (white-balance-corrected crop) showed the paint itself is a
   genuinely low-saturation "duck-egg" tone, under the tool's own 15%
   saturation cutoff for a usable brand colour, so it fell back to the brick as
   primary. Neither is what a person standing outside would point at as "the
   sign colour", so the primary here is hand-set: the corrected crop's own hue
   (190°, the sign's blue-green family) at a saturation and depth dark enough
   to carry headings and pass contrast — the same colour the paint reads as,
   pushed dark enough to work as text, not a different colour. The accent
   (#a95328) is the real, sampled terracotta from the brick, unchanged. The
   exact hue was placed within that family to clear variety-check against
   sibling sites already live. See company-profile.md → Brand for the full
   readings and the rejected runs. */
/*
  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: #1c3a3f;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f7f8;     /* text on primary */
  --color-accent: #a95328;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f7f8;             /* page background */
  --color-surface: #fcfdfd;        /* cards, menu panels */
  --color-ink: #1a2223;            /* body text */
  --color-muted: #607376;          /* secondary text */
  --color-border: #dae5e7;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 0px;                   /* letterpress: printed, classic, nothing rounded */
  --radius-sm: 0px;
  --hero-overlay: linear-gradient(180deg, rgba(15, 27, 30, 0.35), rgba(15, 27, 30, 0.65));
  --shadow: 0 10px 30px rgba(20, 30, 32, 0.1);
}