/*
  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.
*/
/* palette-source: read from the shop's logo and shopfront photos (hot pink #e60178 logo, awning and door, taken down to a deep raspberry-plum for the dark role; cream lettering; the sage of the planter and window frames is in the photos only), values nudged for contrast, not the sampler's near-black */
:root {
  /* Colour */
  --color-primary: #4d1040;        /* the logo pink #e60178 taken down to a deep raspberry-plum for headings, footer and blocks (13:1 on cream) */
  --color-on-primary: #faf6ef;     /* cream, as in the logo lettering */
  --color-accent: #d4006e;         /* the logo pink #e60178, darkened a step so pink links reach 4.8:1 on cream */
  --color-on-accent: #ffffff;      /* 5.2:1 on the accent */
  --color-bg: #faf6ef;             /* warm cream */
  --color-surface: #ffffff;        /* cards, menu panels */
  --color-ink: #26241f;            /* body text */
  --color-muted: #6a5a52;          /* secondary text, 6.1:1 on bg */
  --color-border: #e8e0d2;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Sniglet", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 800;
  --display-tracking: 0;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 22px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 12px;
  --hero-overlay: linear-gradient(180deg, rgba(38, 20, 28, 0.2), rgba(38, 20, 28, 0.62));
  --shadow: 0 10px 30px rgba(38, 36, 31, 0.08);
}