:root{
  /* ---- Spacing scale (4px base, generous whitespace) ---- */
  --sp-0:0;            /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;

  /* ---- Screen gutters ---- */
  --gutter:24px;       /* generous side margin */
  --gutter-lg:32px;

  /* ---- Radii (soft, warm — never sharp) ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* ---- Life-grid geometry ---- */
  --dot-size:6px;      /* per-week dot diameter (year view) */
  --dot-gap:4px;       /* gap between week dots */
  --dot-row-gap:5px;   /* gap between year rows */

  /* ---- Touch targets ---- */
  --touch-min:44px;
}