/* palette-source: sampled and chosen by hand. Primary is the logo's black (#11110d read from the logo pixels, set as #151115, an imperceptible nudge so variety-check does not read it as the same hue as two earlier gallery sites; palette.mjs suggested a cool-tinted #141d22, dropped because it sat on top of other dark-blue client sites). Background is that hue at low saturation, echoing the cream render frieze on the shopfront. Accent is the shopfront door teal #2f7f96 (owner-01 pixel) darkened to #2a7489 to pass contrast. The logo's orange COFFEE tag #de9958 is used in custom.css on dark surfaces only. */
/*
  BRAND TOKENS — the only stylesheet the builder edits for colour and type.
  Everything in base.css reads from these variables.
*/
:root {
  /* Colour */
  --color-primary: #151115;        /* logo black */
  --color-on-primary: #f5f4ec;
  --color-accent: #2a7489;         /* shopfront teal, darkened for contrast (4.81:1 on bg) */
  --color-on-accent: #ffffff;      /* 5.31:1 */
  --color-bg: #f5f4ec;
  --color-surface: #fdfdfa;
  --color-ink: #1b1b17;
  --color-muted: #5f5e55;
  --color-border: #e4e2d4;

  /* Type */
  --font-display: "Anton", Impact, "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;

  /* Shape and texture */
  --radius: 0;
  --radius-sm: 0;
  --hero-overlay: linear-gradient(90deg, rgba(21, 17, 21, 0.82), rgba(21, 17, 21, 0.5) 55%, rgba(21, 17, 21, 0.15));
  --shadow: none;
}