/* ============================================================
   SPACING · RADII · SHADOWS · MOTION
   Warm, editorial, generous. Honor clear space.
   ============================================================ */
:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* Section rhythm on marketing surfaces */
  --section-y: 96px;
  --gutter:    24px;
  --container: 1200px;

  /* --- Corner radii — soft, not pill-everything --- */
  --radius-sm:   6px;
  --radius-md:   10px;  /* inputs, small cards */
  --radius-lg:   16px;  /* cards, panels */
  --radius-xl:   24px;  /* hero panels, feature cards */
  --radius-pill: 999px; /* circular elements only (avatars, dots) — NOT buttons/chips (those are clip) */

  /* --- Borders --- */
  --border-width:      1px; /* @kind other */
  --border-width-thick: 2px; /* @kind other */

  /* --- Shadows — subtle, warm-tinted, never glow --- */
  --shadow-xs: 0 1px 2px rgba(12, 26, 14, 0.06);
  --shadow-sm: 0 1px 3px rgba(12, 26, 14, 0.08), 0 1px 2px rgba(12, 26, 14, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 26, 14, 0.08), 0 2px 4px rgba(12, 26, 14, 0.04);
  --shadow-lg: 0 12px 32px rgba(12, 26, 14, 0.10), 0 4px 8px rgba(12, 26, 14, 0.05);
  --shadow-focus: 0 0 0 3px rgba(17, 208, 115, 0.35); /* green-400 @ 35% */

  /* --- Motion — calm, no bounce --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}