/* palette-source: sampled — palette.mjs sampled slate #313b45 from the menu cover and shopfront; the final primary #3a4a3c is the menu paper's eucalyptus green taken dark (the slate collided with an earlier client in every archetype under variety-check); accent #a24a63 is the menu's blush rose (#e7b7c0, read by eye) darkened for contrast; the tool's terracotta default is not used. */
/*
  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: #3a4a3c;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f3f6f2;     /* text on primary */
  --color-accent: #a24a63;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f3f6f2;             /* page background */
  --color-surface: #fcfdfb;        /* cards, menu panels */
  --color-ink: #1c211d;            /* body text */
  --color-muted: #5a6458;          /* secondary text */
  --color-border: #dde4db;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Sorts Mill Goudy", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, serif;
  --display-weight: 400;
  --display-tracking: 0;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 12px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(58, 74, 60, 0.2), rgba(47, 67, 72, 0.6));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}