/* palette-source: brand colours read from the shop's own logo and menus (logo.png, the PDF menu images, and the 2023 homepage); terracotta darkened a step and cream lightened a step so link and button text pass WCAG AA — not sampled from photographs; primary set to neutral espresso #2e2e2e (their menus sit on near-black) so it does not repeat the brown of two other tiles sites (variety-check) */
/*
  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: #2e2e2e;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f0e9de;     /* text on primary */
  --color-accent: #a8543f;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f7f2ea;             /* page background */
  --color-surface: #fffdf9;        /* cards, menu panels */
  --color-ink: #231c19;            /* body text */
  --color-muted: #6b5d55;          /* secondary text */
  --color-border: #e2d6c4;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Londrina Solid", "Arial Narrow", Impact, sans-serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 900;
  --display-tracking: 0.02em;
  --display-transform: uppercase;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 18px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(32, 24, 22, 0.25), rgba(32, 24, 22, 0.65));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}