/* palette-source: sampled — accent (#a97f5a honey timber, darkened to #896648 for contrast) was sampled from owner-01.jpg by palette.mjs. Primary #34365e is an OVERRIDE: the shopfront is blue-teal navy (about #2d4a5c by eye, hue ~200) but every slot at that hue in every archetype is taken by a recent client (variety-check), so the primary is pushed to a deeper indigo navy; swap to #2d4a5c if the owner prefers the true shopfront colour. Neutrals derived from the primary hue. */
/*
  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: #34365e;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f3f8;     /* text on primary */
  --color-accent: #896648;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f3f8;             /* page background */
  --color-surface: #fcfcfe;        /* cards, menu panels */
  --color-ink: #1a1c26;            /* body text */
  --color-muted: #575b70;          /* secondary text */
  --color-border: #dcdee9;         /* hairlines */

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

  /* Shape and texture */
  --radius: 6px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 4px;
  --hero-overlay: linear-gradient(180deg, rgba(16, 18, 38, 0.30), rgba(16, 18, 38, 0.72));
  --shadow: 0 10px 30px rgba(26, 28, 38, 0.08);
}