/*
  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: sampled — written by palette.mjs on 2026-09-26 */
:root {
  /* Colour */
  --color-primary: #0d0f30;        /* main brand colour: headings, header, footer — override: the shopfront's own navy fascia (sampled #051024–#0d283f, hue 203–219), nudged to hue 237 so this site reads as its own navy next to another Cupanstudio client that sampled to the same hue; still the darkest, most saturated colour off the shopfront photo */
  --color-on-primary: #f2f2f8;     /* text on primary */
  --color-accent: #1c6bba;         /* buttons, links, highlights — the logo's own heart-blue #1f78d2 (64% of the logo file), darkened 5% to clear 4.5:1; tool's #84421e is a pastry-photo brown, not the brand */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f2f8;             /* page background */
  --color-surface: #fcfcfd;        /* cards, menu panels */
  --color-ink: #1a1a23;            /* body text */
  --color-muted: #606176;          /* secondary text */
  --color-border: #dadae7;         /* hairlines */

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

  /* Shape and texture */
  --radius: 18px;                  /* soft and rounded, matching the heart logo and its rounded wordmark */
  --radius-sm: 10px;
  --hero-overlay: linear-gradient(180deg, rgba(13, 15, 48, 0.25), rgba(13, 15, 48, 0.68));
  --shadow: 0 10px 30px rgba(13, 15, 48, 0.1);
}