/* ============================================================
   The Alluvial — Spacing, Radius, Shadow, Layout & Motion
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base, compresses up top) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii (soft, riverbank-smooth) ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-card: 16px; /* the organic card curve */
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Shadows (warm, low — sediment-soft, never blue/gray) ---- */
  --shadow-xs: 0 1px 2px rgba(52, 27, 19, 0.06);
  --shadow-sm: 0 2px 6px rgba(52, 27, 19, 0.07);
  --shadow-md: 0 8px 24px rgba(52, 27, 19, 0.09);
  --shadow-lg: 0 18px 48px rgba(52, 27, 19, 0.12);
  --shadow-xl: 0 32px 70px rgba(52, 27, 19, 0.16);
  --shadow-focus: 0 0 0 3px rgba(165, 88, 63, 0.28); /* clay focus glow */

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 720px;
  --container-lg: 1320px;
  --header-h:     68px;
  --gutter:       clamp(20px, 5vw, 72px); /* @kind spacing */

  /* ---- Motion (calm, flowing — like water) ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.30, 1);   /* @kind other */
  --ease-river:  cubic-bezier(0.33, 0.00, 0.10, 1);   /* @kind other */
  --ease-wave:   cubic-bezier(0.33, 0.00, 0.10, 1);   /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    240ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */
  --dur-slowest: 720ms;  /* @kind other */
}