/* Frond — brand tokens (customization layer)
   Edit these values to rebrand the whole site.
   Loaded before each page's inline <style>, so every var() below wins. */
:root{
  /* ── Core palette ─────────────────────────────────────────── */
  --paper:#F5F3ED;        /* page background — cool botanical off-white */
  --paper-2:#EAEDE4;      /* pale wash — alternating section bands, card image beds */
  --charcoal:#1E241F;     /* primary text, dark bands, footer */
  --charcoal-70:#4C554D;  /* muted / secondary text */
  --leaf-deep:#1F4A34;    /* deep leaf — primary buttons, newsletter band */
  --leaf:#2F6A45;         /* AA-safe accent for small text on paper */
  --leaf-bright:#4F8B5B;  /* vivid accent — large fills, focus ring, stars */
  --line:#D6D9CE;         /* hairline borders */
  --white:#FFFFFF;        /* card surfaces */

  /* ── Type stacks ──────────────────────────────────────────── */
  --ff-display:"Bricolage Grotesque", system-ui, sans-serif;  /* headings, prices */
  --ff-body:"Inter", system-ui, sans-serif;                   /* body copy */
  --ff-mono:"JetBrains Mono", ui-monospace, monospace;        /* eyebrows, labels, data */

  /* ── Modular type scale (14 sizes max) ────────────────────── */
  --t-hero:clamp(2.6rem, 6.4vw, 4.9rem);
  --t-h2:clamp(1.9rem, 3.6vw, 2.85rem);
  --t-h3:1.28rem;
  --t-h4:1.05rem;
  --t-body:1rem;
  --t-sm:.875rem;
  --t-xs:.75rem;
  --t-label:.68rem;

  /* ── Layout ───────────────────────────────────────────────── */
  --gut:60px;                     /* stepped page gutter */
  --maxw:1240px;                  /* content max width */
  --r:14px;                       /* base corner radius */
  --sec:clamp(72px, 8vw, 116px);  /* vertical section rhythm */
}
@media (max-width:1024px){ :root{ --gut:28px; } }
@media (max-width:600px){ :root{ --gut:18px; } }
@media (max-width:360px){ :root{ --gut:14px; } }