/* ===========================================================================
   Cocoon — Spacing, radii, shadow & motion tokens
   Base-4 spacing for a predictable, harmonious rhythm. Generous radii and
   the softest possible shadows — warmth comes from light, not depth.
   =========================================================================== */

:root {
  /* --- Spacing (base-4) --------------------------------------------------- */
  --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;

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      8px;   /* default — buttons, inputs, badges */
  --radius-lg:   12px;  /* cards, panels */
  --radius-xl:   16px;  /* feature surfaces */
  --radius-2xl:  24px;  /* large hero containers */
  --radius-full: 9999px;

  /* --- Shadows (warm espresso, very low alpha) ---------------------------- */
  --shadow-xs: 0 1px 3px rgba(43, 24, 16, 0.08);
  --shadow-sm: 0 1px 4px rgba(43, 24, 16, 0.08);
  --shadow-md: 0 4px 14px rgba(43, 24, 16, 0.10);
  --shadow-lg: 0 12px 32px rgba(43, 24, 16, 0.14);

  /* --- Motion ------------------------------------------------------------- */
  /* Cocoon moves slowly and settles. No bounce, no urgency. */
  --ease-rest: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-quick: 160ms; /* @kind other */
  --dur-calm:  280ms;  /* @kind other */
  --dur-slow:  520ms;  /* @kind other */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1100px;
  --app-width: 390px; /* mobile-first app frame */
}