/* palette-source: sampled — written by palette.mjs on 2026-09-10 */
/*
  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: #46387f;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f3f2f8;     /* text on primary */
  --color-accent: #9b5b2a;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f3f2f8;             /* page background */
  --color-surface: #fcfcfd;        /* cards, menu panels */
  --color-ink: #1c1a23;            /* body text */
  --color-muted: #656076;          /* secondary text */
  --color-border: #dcdae7;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match.
     The shopfront sign is a geometric sans in white caps, letterspaced, with a
     circular O and a straight-legged R. Jost is the closest Google Fonts match;
     DM Sans carries the body without competing with it. Caps are applied where
     the sign uses them (wordmark, eyebrows, menu bands) rather than to every
     heading, so long headings stay readable. */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 500;
  --display-tracking: 0em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture — the logo is a roundel and the archetype is pill-led, so
     corners are generous. */
  --radius: 22px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 12px;
  --hero-overlay: linear-gradient(180deg, rgba(24, 18, 46, 0.28), rgba(24, 18, 46, 0.68));
  --shadow: 0 10px 30px rgba(40, 32, 70, 0.10);
}