/*
  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.
*/
/* Provenance: palette.mjs run on owner-02, badge-sign, latte-art (--brand logo-take-it-handy,
   marina-market-stall, espresso-cup) gave primary #0f1317 (shopfront, sign, card black), then set to neutral charcoal #151515 (the sign and shutters read as neutral black in daylight; every blue-black and teal-black hue was already taken inside every archetype, see variety-check)
   and accent #936125 (from the badge-sign's warm tones). Override: accent set to #9a5a2c, the
   copper foil on the logo card (~#b87b4b) darkened to pass 4.5:1 on bg. bg/surface/border moved
   from the tool's cold blue-grey to warm cream (street-photo cream #c9b983 family); muted
   adjusted to stay above 4.5:1. Marina teal (~#1fa3b0 by eye, cups and stall) is not a token;
   it is used as a decoration in custom.css only. */
:root {
  /* Colour */
  --color-primary: #151515;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f5f8;     /* text on primary */
  --color-accent: #9a5a2c;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f5f2ea;             /* page background */
  --color-surface: #fcfbf7;        /* cards, menu panels */
  --color-ink: #1a1f23;            /* body text */
  --color-muted: #5c636b;          /* secondary text */
  --color-border: #e0dbcd;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Grenze Gotisch", "UnifrakturCook", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: 0;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 0px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 0px;
  --hero-overlay: linear-gradient(90deg, rgba(15,19,23,0.78), rgba(15,19,23,0.5) 50%, rgba(15,19,23,0.2));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}