/* palette-source: sampled — gold from the badge (darkened for contrast), brown from
   the badge's lettering, both from the shop's own logo; see company-profile.md,
   Brand, for the full palette.mjs run, the hand overrides and why. */
/*
  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 — palette.mjs was run on the shop's own logo (a gold badge with wheat
     sheaves) and shopfront photo. Its automatic accent fell back to a generic
     terracotta because every gold in the logo sits within 15° of the primary hue,
     too close for the tool's own accent rule (25°+ apart). Hand overrides, both
     still tracing to the one asset (the printed paper bag):
     (1) primary is the badge's own gold (printed as #d0950c/#ecb624), darkened to
     hue 43 at saturation 90%, lightness 22% until it clears 7:1 (AAA) as heading
     text on the page background — a mustard gold rather than the bright printed
     one, because yellow needs far more darkening than red or brown for the same
     contrast;
     (2) accent is the badge's own dark brown lettering (#754212), used as-is: it
     clears every contrast check on its own (7.65:1 as text on the background,
     8.25:1 for white button text on it), so no correction was needed.
     Hue 43 was also chosen to keep this site clear of another Cupán Studio
     client already at hue 24 (bakery, market archetype) and another freshly
     landed at hue 355 (also market) — tiles had a clean gap from hue 40 with
     nothing else nearby, so tiles is the archetype and hue 43 the primary. */
  --color-primary: #6b4e06;        /* badge's gold, darkened for AAA text contrast */
  --color-on-primary: #f8f6f2;     /* text on primary */
  --color-accent: #754212;         /* badge's own dark brown lettering, used as sampled */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f8f6f2;             /* off-white, primary hue at low saturation */
  --color-surface: #fdfdfc;        /* cards, menu panels */
  --color-ink: #23211a;            /* body text */
  --color-muted: #767060;          /* secondary text */
  --color-border: #e7e3da;         /* hairlines */

  /* Type — the logo pairs a hand-lettered blackletter wordmark with a plain serif
     line ("Traditional Home Bakery"); a script or blackletter face across the whole
     site would be unreadable at body size, so the pairing below keeps the same
     traditional, printed feel in faces that work on a screen. Petrona is a serif,
     not a geometric sans, so it also keeps this tiles build from reading like the
     other tiles sites (Jost, Anton, DM Serif Display, Manrope, Space Grotesk,
     Archivo, Nunito, Archivo Black) — none of them serif, all of them cooler. */
  --font-display: "Petrona", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.005em;
  --display-transform: none;

  /* Shape and texture — tiles calls for large, soft corners; kept, but tuned down
     from the archetype's default 22px "app icon" rounding to a calmer 14px (see
     custom.css) so it reads as a bakery counter, not a SaaS landing page. */
  --radius: 14px;
  --radius-sm: 10px;
  --hero-overlay: linear-gradient(180deg, rgba(35, 18, 4, 0.3), rgba(35, 18, 4, 0.68));
  --shadow: 0 10px 30px rgba(33, 20, 18, 0.1);
}