/*
  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 — hand-sampled from the shop's own fascia paint and
  cup print (owner-01.jpg, owner-09.jpg); see company-profile.md → Brand →
  "Palette, settled (orchestrator, 2026-09-10)" for the full pixel samples,
  the reason palette.mjs's algorithmic run could not be used as-is, and the
  seven contrast pairs, all PASS.
*/
:root {
  /* Colour */
  --color-primary: #242b33;        /* the fascia paint itself, sampled owner-01 */
  --color-on-primary: #f5f7f9;     /* text on primary */
  --color-accent: #b14b2f;         /* the sign's coral hue (h13), darkened to l44 for link text */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f5f7f9;             /* primary hue at low saturation: cool paper, not cream */
  --color-surface: #fbfcfd;        /* cards, menu panels */
  --color-ink: #1b2026;            /* body text */
  --color-muted: #636e7e;          /* secondary text */
  --color-border: #dde3ea;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-transform: none;       /* the wordmark "Frèd." is not all caps */

  /* Shape and texture */
  --radius: 0px;                   /* letterpress: square corners throughout */
  --radius-sm: 0px;
  --hero-overlay: linear-gradient(180deg, rgba(20, 16, 14, 0.35), rgba(20, 16, 14, 0.62));
  --shadow: 0 10px 30px rgba(27, 32, 38, 0.10);
}