/* ==========================================================================
   Kids Corner — Spacing, radii, borders, shadows
   Generous whitespace; thick ink outlines; hard "sticker" shadows.
   ========================================================================== */

:root {
  /* --- Spacing scale (4px base) ----------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-12:  6rem;     /* 96 - spread margins */

  /* --- Radii — soft & rounded, nothing sharp ---------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;   /* cards */
  --radius-xl:   32px;   /* big sticker cards */
  --radius-pill: 999px;  /* buttons, tags */

  /* --- Border widths — the ink outline ---------------------------------- */
  --border-thin:    1.5px;
  --border-line:    2.5px;  /* default doodle outline */
  --border-bold:    3.5px;  /* emphasized cards / buttons */
  --border-heavy:   5px;    /* hero / cover frame */

  /* --- Sticker shadows (solid, un-blurred, offset down-right) ------------ */
  --shadow-sticker:    4px 4px 0 0 var(--ink);
  --shadow-sticker-sm: 2px 2px 0 0 var(--ink);
  --shadow-sticker-lg: 7px 7px 0 0 var(--ink);
  /* colored sticker shadow helpers (use with currentColor cards) */
  --shadow-sticker-red:    4px 4px 0 0 var(--shade-red);
  --shadow-sticker-blue:   4px 4px 0 0 var(--shade-blue);

  /* --- Soft shadows (warm, low blur) ------------------------------------ */
  --shadow-soft:    0 6px 18px -6px rgba(33,28,26,0.28);
  --shadow-soft-sm: 0 2px 8px -2px rgba(33,28,26,0.22);

  /* --- Motion ----------------------------------------------------------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */ /* springy / back-out */
  --ease-soft:   cubic-bezier(0.33, 0, 0.2, 1);        /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    400ms;  /* @kind other */

  /* --- Layout ----------------------------------------------------------- */
  --container:     1080px;
  --container-narrow: 720px;
  --page-pad:      var(--space-6);
}