/* palette-source: sampled — written by palette.mjs on 2026-10-11 from the logo, both shopfront photos. Primary charcoal #424242 is the chalkboard of their own printed menus (sampled by palette.mjs from the drinks menu); the logo keeps its navy ring #042344; accent is the logo red (palette.mjs sampled #bc1321, set to the profile value #bc1522, the Boston-inspired badge red; contrast re-checked, 5.8:1 as link text). Fonts: Alfa Slab One for the heavy slab lettering on the logo and sign, Work Sans for body. */
/*
  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: #424242;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f5f8;     /* text on primary */
  --color-accent: #bc1522;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f5f8;             /* page background */
  --color-surface: #fcfcfd;        /* cards, menu panels */
  --color-ink: #1a1e23;            /* body text */
  --color-muted: #606b76;          /* secondary text */
  --color-border: #dae0e7;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Alfa Slab One", Rockwell, "Courier New", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.01em;
  --display-transform: none;       /* 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(4, 35, 68, 0.35), rgba(4, 35, 68, 0.78));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}