/*
  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-source: sampled from the shop's own photos (owner-01.jpg awning sign tagged
   --brand, owner-03.jpg cappuccino, owner-10.jpg pastry case) via scripts/palette.mjs,
   2026-09-10. --color-bg, --color-surface and --color-border were then warmed by hand
   from the tool's cool blue-grey reading toward the warm off-white wall visible in
   every room photo (owner-10.jpg) — hue shifted from ~h215 to ~h32 at the same
   saturation/lightness steps the tool uses (bg s25 l96, border s22 l88, surface s15
   l99). --color-primary and --color-accent are the tool's values, unchanged. See
   company-profile.md → Brand for the contrast re-check. */
:root {
  /* Colour */
  --color-primary: #0d1522;        /* near-black navy: the sign's dark glazing/ironwork */
  --color-on-primary: #f7f5f2;     /* text on primary: the warmed bg, so footer white matches page white */
  --color-accent: #9f5a0f;         /* warm amber: the only colour in an otherwise line-and-white room */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f7f5f2;             /* warmed toward the room's actual off-white wall */
  --color-surface: #fdfcfc;        /* one step lighter, same warm hue */
  --color-ink: #1a1e23;            /* body text */
  --color-muted: #606976;          /* secondary text */
  --color-border: #e7e1da;         /* hairlines, warmed to match bg */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Jost", "Century Gothic", "Futura", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.06em;
  --display-transform: uppercase;  /* the sign is a tightly-tracked geometric sans in caps */

  /* Shape and texture */
  --radius: 3px;                   /* near-square: the brand is thin black line on white */
  --radius-sm: 2px;
  /* Tuned by measuring, not by eye. This hero photo is hard on white text at both ends:
     a bright white wall behind the header and eyebrow, bright golden pastry behind the
     subtitle, links and hours row. The lightest point is held at 30%, the window between
     the two, so the hand-drawn wall still reads; it is darker above for the header brand
     and eyebrow, and ramps hard below for everything in the lower band. Every hero text
     element clears WCAG AA against its own painted backdrop (worst 4.86:1 small, 5.55:1
     display). Re-measure with the harness if this image or the hero copy ever changes. */
  --hero-overlay: linear-gradient(180deg, rgba(13, 21, 34, 0.52) 0%, rgba(13, 21, 34, 0.48) 18%, rgba(13, 21, 34, 0.42) 30%, rgba(13, 21, 34, 0.56) 40%, rgba(13, 21, 34, 0.6) 58%, rgba(13, 21, 34, 0.72) 78%, rgba(13, 21, 34, 0.8) 100%);
  --shadow: 0 10px 30px rgba(13, 21, 34, 0.08);
}