/* =============================================
   High Stack Solutions — Spacing, Radius, Shadow
   Base grid: 4px
   ============================================= */
:root {
  /* ── Base Scale ──────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;
  --space-40:  160px;

  /* ── Section Padding (generous; space = premium) */
  --section-sm:  64px;
  --section-md:  96px;
  --section-lg:  128px;

  /* ── Layout ──────────────────────────────── */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1440px;
  --container-padding: 24px;

  /* ── Border Radius ───────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;  /* pill — non-negotiable on buttons */

  /* ── Shadows (green-tinted, never neutral grey) */
  --shadow-xs:   0 1px 2px  rgba(16, 29, 20, 0.06);
  --shadow-sm:   0 2px 8px  rgba(16, 29, 20, 0.08);
  --shadow-md:   0 4px 20px rgba(16, 29, 20, 0.10);
  --shadow-lg:   0 8px 32px rgba(16, 29, 20, 0.14);
  --shadow-xl:   0 16px 48px rgba(16, 29, 20, 0.18);
  --shadow-2xl:  0 24px 64px rgba(16, 29, 20, 0.24);
  --shadow-lime: 0 4px 24px rgba(213, 246, 116, 0.40);   /* lime glow for CTAs on dark */

  /* ── Transitions ─────────────────────────── */
  --transition-fast:   100ms ease;                              /* @kind other */
  --transition-base:   200ms ease;                              /* @kind other */
  --transition-slow:   350ms ease;                              /* @kind other */
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}