/* palette-source: archetype (custom health-food green, hand-derived — see
   company-profile.md Brand/Decisions) — written 2026-09-22 */
/*
  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.

  Fuel has no logo and no usable photo of its own (see company-profile.md
  Brand/Gaps: Google's ten listing photos are all customer uploads, Instagram
  and Facebook could not be opened). palette.mjs's fixed --archetype presets
  would have collided in hue with clients already built (green-natural
  #2c3f36 is pixel-identical to cathedral-cafe's primary; bright-playful
  #68273d is pixel-identical to coffee-co-at-cloud-nine's), so the primary
  here is a hand-derived leafy green (h128 s42 l20, run through the same
  role/contrast maths as palette.mjs — see the profile for the worked
  numbers) picked to read as fresh/health-food without sitting on top of
  another client's colour. Every contrast pairing below passes WCAG AA/AAA
  as printed in the profile.
*/
:root {
  /* Colour */
  --color-primary: #1e4823;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f2f8f3;     /* text on primary */
  --color-accent: #a75c1b;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f8f3;             /* page background */
  --color-surface: #fcfdfc;        /* cards, menu panels */
  --color-ink: #1a231b;            /* body text */
  --color-muted: #607663;          /* secondary text */
  --color-border: #dae7db;         /* hairlines */

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

  /* Shape and texture */
  --radius: 20px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 12px;
  --hero-overlay: linear-gradient(180deg, rgba(10, 20, 12, 0.25), rgba(10, 20, 12, 0.6));
  --shadow: 0 10px 30px rgba(26, 35, 27, 0.1);
}