/* ============================================================
   The Trouble Markers — Spacing, radius, shadow, motion
   Generous, soft and chunky. Nothing is sharp; nothing is tight.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius — rounded like a marker cap --------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---- The signature ink keyline ------------------------ */
  --stroke: 3px;            /* default hand-drawn outline weight */
  --stroke-bold: 4px;       /* hero elements */
  --stroke-hair: 2px;       /* small chips & inputs */

  /* ---- Shadows — flat "sticker" offset, not soft blur ---- */
  /* The brand reads as cut-out cartoon stickers: a hard ink   */
  /* offset shadow, no blur. Use --shadow-soft only sparingly. */
  --shadow-sticker: 4px 4px 0 var(--ink);
  --shadow-sticker-lg: 6px 6px 0 var(--ink);
  --shadow-sticker-sm: 3px 3px 0 var(--ink);
  --shadow-soft: 0 8px 24px rgba(22, 22, 22, 0.12);
  --shadow-pressed: 1px 1px 0 var(--ink);

  /* ---- Motion — bouncy & lively ------------------------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
}