/* ============================================================
   Ladybug Lane — Radius, Shadow, Border & Motion Tokens
   Playful, sticker-style. Soft corners, warm-tinted ambient
   shadows, plus hard "pop" shadows echoing the bold black
   outline of the ladybug mark.
   ============================================================ */

:root {
  /* ---- Corner radius (generous, friendly) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Borders ---- */
  --border-hair:  1px;
  --border-thin:  1.5px;
  --border-bold:  2px;
  --border-chunk: 3px;   /* the signature chunky black outline */

  /* ---- Ambient shadows (warm crimson-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(124, 10, 34, 0.08);
  --shadow-sm:  0 2px 6px rgba(124, 10, 34, 0.10);
  --shadow-md:  0 6px 16px rgba(124, 10, 34, 0.12);
  --shadow-lg:  0 14px 34px rgba(124, 10, 34, 0.16);
  --shadow-xl:  0 24px 60px rgba(124, 10, 34, 0.20);

  /* ---- "Pop" shadows — hard cartoon offset (sticker vibe) ---- */
  --shadow-pop-sm:      2px 2px 0 var(--ink-950);
  --shadow-pop:         4px 4px 0 var(--ink-950);
  --shadow-pop-lg:      6px 6px 0 var(--ink-950);
  --shadow-pop-crimson: 4px 4px 0 var(--crimson-500);
  --shadow-pop-pink:    4px 4px 0 var(--blossom-300);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--blossom-50), 0 0 0 5px var(--ring-focus);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* playful overshoot */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}