/* ============================================================
   NewSparc — DESIGN TOKENS (green light · e-waste/refurb)
   Third sibling of the Sparc family spine. Same variable names.
   Green leads (recycling), teal is the FieldSparc thread,
   amber reserved for the phone CTA (family rule).
   ============================================================ */
:root {
  /* ---------- PAPER (cool-fresh white ramp) ---------- */
  --ink-950:#e7eeе9;  --ink-900:#eef4f0;  --ink-850:#ffffff;  /* page bg */
  --ink-800:#ffffff;  --ink-750:#f4f8f5;  --ink-700:#eaf2ec;  --ink-600:#d9e4dc;
  --line:#dfe8e1;     --line-soft:#ebf1ec;
  --text:#16241b;     --text-dim:#4a5a4f;  --text-mute:#78877d;

  /* ---------- GREEN = the lead ---------- */
  --green-400:#22ab60; --green-500:#1a9e57; --green-600:#15854a;
  --green-glow:rgba(26,158,87,.18);

  /* ---------- TEAL = the FieldSparc thread ---------- */
  --teal-400:#0da183; --teal-500:#0b8f74; --teal-600:#09775f;
  --teal-glow:rgba(11,143,116,.14);

  /* ---------- AMBER = phone CTA only ---------- */
  --amber-400:#ec8410; --amber-500:#d9730a; --amber-600:#c26307;
  --amber-glow:rgba(217,115,10,.22);

  /* ---------- Semantic ---------- */
  --bg:var(--ink-850); --surface:var(--ink-800); --surface-2:var(--ink-750);
  --primary:var(--green-500); --accent:var(--amber-500); --on-accent:#ffffff;
  --band:#f2f7f3; --dark:#0e2117; --dark-2:#16311f;
  --dark-text:#ecf5ee; --dark-dim:#9db8a6; --dark-line:#27442f;

  /* ---------- Type ---------- */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --fs-hero:clamp(2.7rem, 5.4vw + 1rem, 5.6rem);
  --fs-h1:clamp(2rem, 3.6vw + 1rem, 3.6rem);
  --fs-h2:clamp(1.5rem, 2.2vw + .8rem, 2.5rem);
  --fs-h3:clamp(1.15rem, 1.3vw + .6rem, 1.5rem);
  --fs-body:clamp(1rem, .35vw + .92rem, 1.125rem);
  --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.65;
  --track-display:-.02em; --track-eyebrow:.22em;

  /* ---------- Space ---------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --maxw:1220px; --gutter:clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius / depth ---------- */
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(14,33,23,.05), 0 10px 28px -18px rgba(14,33,23,.16);
  --shadow-2:0 2px 6px rgba(14,33,23,.06), 0 24px 56px -30px rgba(14,33,23,.24);
  --glow-green:0 0 0 1px var(--green-glow), 0 14px 36px -20px var(--green-glow);
  --glow-amber:0 10px 30px -14px var(--amber-glow);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.35s;

  --mesh:radial-gradient(circle at 1px 1px, rgba(22,36,27,.05) 1px, transparent 0) 0 0/26px 26px;
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} }