/* ════════ SPACING · RADII · SHADOWS · LAYOUT TOKENS ════════
 * Calm, even rhythm. Pill controls (999px), 12–20px cards, layered
 * low-contrast shadows tinted green on the CTA. Page is capped at
 * 1280px with a responsive edge gutter.
 */
:root {
  /* ── Spacing scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --pad: 1.5rem;      /* default card padding */
  --gutter: 1.25rem;  /* default grid gap */

  /* ── Radii ── */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ── Shadows (low-contrast, layered) ── */
  --shadow-1: 0 1px 2px rgba(12,31,23,.04), 0 2px 8px rgba(12,31,23,.04);
  --shadow-2: 0 2px 6px rgba(12,31,23,.05), 0 12px 32px rgba(12,31,23,.07);
  --shadow-cta: 0 1px 2px rgba(14,140,92,.22), 0 8px 20px rgba(22,184,122,.28);

  /* ── Layout ── */
  --maxw: 1280px;
  --edge: 34px;       /* page horizontal gutter — steps down responsively */

  /* ── Motion (low animation, high clarity) ── */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur: .15s;      /* @kind other */
  --dur-slow: .25s; /* @kind other */
}

@media (max-width: 1024px) { :root { --edge: 28px; } }
@media (max-width: 600px)  { :root { --edge: 20px; } }
@media (max-width: 400px)  { :root { --edge: 16px; } }