/* ============================================================
   The Larder — Brand tokens
   ------------------------------------------------------------
   This is the customization layer. Rebrand the template by
   editing the values below; index.html reads all of them.
   Loaded BEFORE the inline <style> in index.html.
   ============================================================ */

:root{
  /* ---- Core palette ---------------------------------------
     flour / flour-2 = page background / recessed band
     paper      = raised card surface
     olive      = secondary accent (unused as large fill; see olive-dp)
     olive-dp   = PRIMARY dark accent — header mark, footer, badges
     ink        = primary text + hairline borders (near-black olive)
     ink-soft   = secondary text
     tomato     = PRIMARY ACCENT — CTAs, sale tags, focus ring (AA on flour, 5.0:1)
     tomato-lt  = large fills / decorative dots only, not small text
     kraft / kraft-dk = tertiary accent — underlines, on-dark labels
     rule       = 1px borders and hairlines
  --------------------------------------------------------- */
  --flour:#F3EFE3;
  --flour-2:#EAE4D3;
  --paper:#FFFDF6;
  --olive:#5A6B37;
  --olive-dp:#44521F;
  --ink:#20260F;          /* olive-ink: headings + body */
  --ink-soft:#4E5540;
  --tomato:#C0392B;       /* accent — AA on flour (5.0:1) */
  --tomato-lt:#E4573F;    /* large fills only */
  --kraft:#D8C7A4;
  --kraft-dk:#B8A279;
  --rule:#CFC7B0;

  /* ---- Typefaces ------------------------------------------
     Change these AND the Google Fonts <link> in index.html.
  --------------------------------------------------------- */
  --serif:'Bricolage Grotesque',system-ui,sans-serif;  /* headings / display */
  --sans:'Karla',system-ui,sans-serif;                 /* body / UI */
  --mono:'JetBrains Mono',monospace;                   /* prices, labels, data */

  /* ---- Shape ------------------------------------------------ */
  --r:3px;
}