/* ============================================================
   Belong — Spacing, radius, shadow tokens.
   Shadows are Forest-based rgba(12,44,42,…) — never pure black.
   ============================================================ */

: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;

  /* — Radius — */
  --radius-xs:  2px;
  --radius-sm:  5px;    /* buttons / chips / inputs */
  --radius:     7px;    /* CTAs */
  --radius-lg:  12px;   /* cards / containers */
  --radius-xl:  18px;   /* marketing panels */
  --radius-full:999px;  /* avatars / pills */

  /* — Borders — */
  --border-width: 1px;

  /* — Shadows: Forest-tinted, never pure black — */
  --shadow-sm:  0 1px 3px rgba(12,44,42,0.06);
  --shadow:     0 2px 8px rgba(12,44,42,0.08), 0 0 0 1px rgba(12,44,42,0.03);
  --shadow-lg:  0 8px 24px rgba(12,44,42,0.10), 0 2px 6px rgba(12,44,42,0.05);
  --shadow-xl:  0 20px 44px rgba(12,44,42,0.16), 0 4px 12px rgba(12,44,42,0.07);

  /* — Motion — */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:   0.12s;  /* @kind other */
  --dur:        0.18s;  /* @kind other */
  --dur-slow:   0.28s;  /* @kind other */
}