/* ==========================================================================
   MITHO — Radius, shadow, border, motion tokens
   Playful, unapologetic: chunky rounded corners, hand-drawn energy via
   offset "sticker" shadows (flat, no blur) alongside soft ambient shadows
   for depth-based surfaces.
   ========================================================================== */

:root {
  /* ---- Radius ---- */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-thin:   1.5px solid var(--color-border);
  --border-strong: 2.5px solid var(--color-border-strong);

  /* ---- Soft ambient shadows (warm-tinted, never neutral gray) ---- */
  --shadow-sm: 0 1px 2px oklch(24% 0.09 21 / 0.06), 0 1px 1px oklch(24% 0.09 21 / 0.04);
  --shadow-md: 0 4px 10px oklch(24% 0.09 21 / 0.08), 0 2px 4px oklch(24% 0.09 21 / 0.05);
  --shadow-lg: 0 14px 32px oklch(24% 0.09 21 / 0.12), 0 4px 10px oklch(24% 0.09 21 / 0.06);

  /* ---- Sticker / offset shadows — the brand's signature playful depth ---- */
  --shadow-sticker-sm: 3px 3px 0 var(--color-ink);
  --shadow-sticker-md: 5px 5px 0 var(--color-ink);
  --shadow-sticker-lg: 8px 8px 0 var(--color-ink);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
}