/* palette-source: hand-picked from the shop's awning, wall and logo (see company-profile.md, Brand) */
/*
  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: #2e2e2e;   /* the slate wall (about #767f90) taken to a neutral charcoal at heading weight: any blue tint collides with an existing market client in variety-check, so the blue lives in the bg and ink tints and the lime in the accent */
  --color-on-primary: #f3f5f8;   /* bg colour on slate */
  --color-accent: #5e6e0a;   /* the lime awning (#91a021 to #d6e16b) darkened to olive so it carries white button text and link text */
  --color-on-accent: #ffffff;   /* white on olive */
  --color-bg: #f1f4f2;   /* near-white, a trace of the awning green and the wall blue */
  --color-surface: #fdfdfb;   /* cards */
  --color-ink: #1f2429;   /* body text, slate-tinted */
  --color-muted: #5a6270;   /* secondary text */
  --color-border: #d9dccf;   /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: 0.02em;
  --display-transform: uppercase;       /* the sign and cups are all caps */

  /* Shape and texture */
  --radius: 10px;
  --radius-sm: 6px;
  --hero-overlay: linear-gradient(180deg, rgba(30, 32, 36, 0.35), rgba(30, 32, 36, 0.72));
  --shadow: 0 10px 30px rgba(30, 32, 36, 0.08);
}