/*
  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.
*/
/* palette-note: colours measured by hand from crops of the shop's own listing photo
   (never published — see company-profile.md Brand and Assets), not from palette.mjs run
   over the whole photo set, which returned a timber/terracotta palette dominated by
   interior surfaces. See company-profile.md → Brand for the full reasoning and the
   WCAG contrast table. */
:root {
  /* Colour */
  --color-primary: #1e232b;        /* the charcoal shopfront and dark back wall */
  --color-on-primary: #faf8f4;     /* text on primary */
  --color-accent: #55713d;         /* the pavement tables' sage green, deepened for contrast */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #faf8f4;             /* warm paper off-white: white tile and pale timber */
  --color-surface: #fefdfb;        /* one step lighter, same warm hue */
  --color-ink: #23262b;            /* body text */
  --color-muted: #5f6570;          /* secondary text */
  --color-border: #e6e2d9;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: 0.01em;
  --display-transform: none;       /* the awning is sentence case, not shouty caps */

  /* Shape and texture */
  --radius: 0;                     /* letterpress is square: printed-card, not soft */
  --radius-sm: 0;
  /* Hero image is a generated atmosphere shot with centred white text: a scrim dark
     enough at every stop that white text clears 4.5:1 against it. */
  --hero-overlay: linear-gradient(180deg, rgba(10, 12, 16, 0.58), rgba(10, 12, 16, 0.62));
  --shadow: 0 10px 30px rgba(20, 23, 28, 0.1);
}