/* ============================================================
   Grove design tokens & shared primitives
   Brand System v1.0 — load this before the page stylesheet.
   ============================================================ */

:root{
  --forest:#0E3A28;      /* dark surfaces · footers */
  --green:#15724E;       /* Grove Green · brand, CTAs, links */
  --green-dark:#0F5C3E;
  --spring:#34C77A;      /* energy · success · highlights */
  --clay:#EE6C4D;        /* warm accent · joy */
  --honey:#F2B441;       /* optimism · ratings */
  --canvas:#FBF8F1;      /* base background */
  --sand:#F4EFE3;
  --border:#EAE3D3;
  --ink:#16231B;         /* text · headings */
  --body:#3C4A41;
  --muted:#7C8880;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Hanken Grotesk',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--spring);color:var(--forest)}
button{font-family:'Hanken Grotesk',sans-serif}

/* ---------- Type primitives ---------- */
.eyebrow{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--spring);margin:0 0 18px}
.kicker{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:0 0 12px}
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.03em;line-height:1.02;margin:0}

/* ---------- Buttons ---------- */
.btn{
  font-weight:700;font-size:15.5px;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;
  transition:background .15s, transform .1s, border-color .15s;
}
.btn:active{transform:scale(.98)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-ghost{background:transparent;color:#EAF3EC;border:1.5px solid rgba(234,243,236,.4)}
.btn-ghost:hover{border-color:#EAF3EC}
.btn-outline{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.btn-outline:hover{background:#EFF7F1}