/* ============================================================
   Roulsen — Spacing, radii, shadows, motion
   Generous, editorial whitespace. 4px base grid.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;  /* section rhythm on large editorial layouts */

  /* --- Layout --- */
  --maxw-prose:   680px;
  --maxw-content: 1080px;
  --maxw-wide:    1320px;
  --gutter:       24px;

  /* --- Corner radii — restrained, mostly square --- */
  --r-none:  0px;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-pill:  999px;

  /* --- Shadows — soft, low, never glossy --- */
  --shadow-xs:  0 1px 2px rgba(11,11,12,0.05);
  --shadow-sm:  0 1px 3px rgba(11,11,12,0.07), 0 1px 2px rgba(11,11,12,0.04);
  --shadow-md:  0 8px 24px rgba(11,11,12,0.08);
  --shadow-lg:  0 24px 60px rgba(11,11,12,0.12);

  /* --- Motion — quiet, precise, no bounce --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}