/* palette-source: archetype (warm-classic) — written by palette.mjs on 2026-09-14 */
/*
  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 — the published Steep system (styles.refero.design), translated for a
     bakery: white paper, near-black ink, one peach surface for the single thing
     worth flagging. See company-profile.md, Brand, for the published values this
     was worked from and where the bakery version departs from them. */
  --color-primary: #17191c;        /* near-black ink: headings, header, footer, button fill */
  --color-on-primary: #ffffff;     /* text on primary */
  --color-accent: #5d2a1a;         /* sienna brown: links, eyebrows, the price column */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #ffffff;             /* page background: white paper */
  --color-surface: #f2f2f3;        /* cards: Mist Gray */
  --color-ink: #17191c;            /* body text */
  --color-muted: #686c77;          /* secondary text — darkened from Steep's own
                                       #777b86 (4.23:1 on white, fails AA at body
                                       size); this value clears 4.5:1 on both white
                                       and Mist Gray */
  --color-border: #e4e4e6;         /* hairlines, same family as Mist Gray */

  /* Type — set the Google Fonts import in fonts.css to match. Source Serif 4 at
     weight 400 only, per Steep's own declared fallback stack. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 24px;                  /* cards, per Steep */
  --radius-sm: 16px;                /* small UI chrome */
  --hero-overlay: linear-gradient(180deg, rgba(23, 25, 28, 0.18), rgba(23, 25, 28, 0.58));
  --shadow: 0 10px 30px rgba(23, 25, 28, 0.1); /* unused: every shadow is flattened in custom.css — no floating UI fragments on a bakery site */
}