/* Zero Prep Tools - Spacing, radii, shadows, borders, motion
 * Paper doesn't have glassy drop-shadows - it lifts a little off the desk and
 * casts a soft warm shadow. Corners are gently cut, like a trimmed index card.
 */
: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;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Radii - small, like trimmed paper. Not pill-soft. ---- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair:  1px solid var(--border-soft);
  --border-thin:  1px solid var(--border-default);
  --border-ink:   1.5px solid var(--ink-0);   /* hand-inked outline */
  --border-w:     1.5px;

  /* ---- Shadows - warm, soft, low. Paper resting on a desk. ---- */
  --shadow-xs:   0 1px 0 rgba(74, 62, 40, 0.06);
  --shadow-sm:   0 1px 2px rgba(74, 62, 40, 0.10), 0 1px 0 rgba(74, 62, 40, 0.04);
  --shadow-md:   0 2px 6px rgba(74, 62, 40, 0.12), 0 1px 2px rgba(74, 62, 40, 0.08);
  --shadow-lg:   0 8px 22px rgba(74, 62, 40, 0.16), 0 2px 6px rgba(74, 62, 40, 0.08);
  --shadow-xl:   0 18px 44px rgba(74, 62, 40, 0.20), 0 6px 14px rgba(74, 62, 40, 0.10);
  /* sticky-note lift: shadow plus a hint of a peeled corner */
  --shadow-note: 0 10px 20px rgba(74, 62, 40, 0.14), 0 2px 4px rgba(74, 62, 40, 0.10);
  /* pressed-in / inset (sunk panels, inputs) */
  --shadow-inset: inset 0 1px 2px rgba(74, 62, 40, 0.10);

  /* ---- Motion - quick and a touch springy, like flipping a page ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  /* ---- Container widths ---- */
  --width-prose:   62ch;
  --width-content: 1120px;
  --width-wide:    1280px;
}