/* palette-source: sampled — written by palette.mjs on 2026-09-24 */
/*
  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: #7a4318;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f8f4f2;     /* text on primary */
  --color-accent: #a95328;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f8f4f2;             /* page background */
  --color-surface: #fdfcfc;        /* cards, menu panels */
  --color-ink: #231e1a;            /* body text */
  --color-muted: #766a60;          /* secondary text */
  --color-border: #e7e0da;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-transform: uppercase;  /* the shopfront sign is bold slab caps, "GINGER CAFE" */

  /* Shape and texture */
  --radius: 8px;                   /* soft but quiet, not the awning's own pill shape */
  --radius-sm: 6px;
  --hero-overlay: linear-gradient(180deg, rgba(30, 16, 6, 0.2), rgba(30, 16, 6, 0.6));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}