/* palette-source: sampled — hand override of palette.mjs's auto pick, built around the
   lilac banner colour (#c5aece) in assets/google/owner-01.jpg rather than the tool's
   auto-picked coffee-brown/terracotta pair (too close to an existing client's palette
   and not the shop's actual colour). See company-profile.md Brand section, "Tokens
   chosen", for the full reasoning and the contrast run. */
/*
  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: #25172b;        /* deep aubergine/near-black, lilac hue (h283) — headings, header, footer */
  --color-on-primary: #f6f3f7;     /* text on primary */
  --color-accent: #8a5f9b;         /* the shop's own banner lilac (#c5aece), darkened to clear 4.5:1 as link text */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f6f3f7;             /* page background, primary hue at S22 L96 */
  --color-surface: #fdfcfd;        /* cards, menu panels */
  --color-ink: #211a23;            /* body text */
  --color-muted: #706076;          /* secondary text */
  --color-border: #e3dae7;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.02em;
  --display-transform: uppercase;  /* the banner's "COFFEE" is set in bold condensed caps */

  /* Shape and texture */
  --radius: 0px;                   /* square, plain, a working counter */
  --radius-sm: 0px;
  --hero-overlay: linear-gradient(180deg, rgba(37, 23, 43, 0.35), rgba(9, 5, 11, 0.78));
  --shadow: 0 10px 30px rgba(9, 5, 11, 0.18);
}