/* palette-source: sampled — primary a deep violet taken from the lilac and purple in the logo and bag illustrations (the shopfront grey-blue sits too close to two recent gallery sites) (moved to keep clear of two recent gallery sites); accent from the red-black glazed cup in the shop's pour-over photo (override of the tool's terracotta fallback, since the shopfront and bags carry no saturated colour) */
/*
  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: #2c2340;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f6f4f9;     /* text on primary */
  --color-accent: #a62a4b;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f6f4f9;             /* page background */
  --color-surface: #fcfbfd;        /* cards, menu panels */
  --color-ink: #1e1a26;            /* body text */
  --color-muted: #645e72;          /* secondary text */
  --color-border: #e0dce8;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Outfit", "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

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