/* palette-source: sampled — written by palette.mjs on 2026-10-11 */
/* Sampled from the shop's own pictures. palette.mjs read the fascia and roundel as near-black navy (#020526) with brass (#956111, darkened from #cc8517 for link contrast). Override: primary is set to the roundel's plain black (#101010) and the page tints to the cream of the retail bags (#f6f3ec), because the navy tint put the site within 20 degrees of other navy tiles builds (variety-check) and the logo itself prints black. */
/*
  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: #101010;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f6f3ec;     /* text on primary */
  --color-accent: #956111;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f6f3ec;             /* page background */
  --color-surface: #fdfcf9;        /* cards, menu panels */
  --color-ink: #1a1a1a;            /* body text */
  --color-muted: #5f5b55;          /* secondary text */
  --color-border: #e0dbd0;         /* hairlines */

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

  /* Shape and texture */
  --radius: 12px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 4px;
  --hero-overlay: linear-gradient(180deg, rgba(16, 16, 16, 0.3), rgba(16, 16, 16, 0.72));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}