/* ============================================================
   Fluffy Friends — Radii, shadows, borders, motion
   The brand reads SOFT & ROUNDED — generous radii everywhere,
   pill buttons, and gentle pink-tinted shadows. No harsh edges.
   ============================================================ */
:root {
  /* Corner radii — everything is pleasantly rounded */
  --radius-sm:   0.5rem;   /* 8  — inputs, chips        */
  --radius-md:   0.875rem; /* 14 — buttons, small cards */
  --radius-lg:   1.375rem; /* 22 — cards                */
  --radius-xl:   2rem;     /* 32 — feature panels       */
  --radius-2xl:  2.75rem;  /* 44 — hero blobs           */
  --radius-pill: 999px;    /* pills, avatars, badges    */

  /* Shadows — soft, warm, slightly pink */
  --shadow-xs:  0 1px 2px rgba(20, 17, 16, 0.06);
  --shadow-sm:  0 2px 8px rgba(20, 17, 16, 0.06);
  --shadow-md:  0 8px 24px rgba(20, 17, 16, 0.08);
  --shadow-lg:  0 16px 44px rgba(20, 17, 16, 0.10);
  --shadow-pink:0 14px 36px rgba(236, 101, 147, 0.22);  /* glow under pink CTAs */
  --shadow-card:0 10px 30px rgba(190, 140, 150, 0.14);

  /* Borders */
  --border-width: 1px;
  --border-bold:  2px;

  /* Motion — gentle, friendly, a touch of bounce */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* Hover / press conventions
     hover  → lift (translateY -2px) + deepen shadow
     press  → settle (scale .97), no shadow
     Pink CTAs darken pink-300 → pink-400 on hover, pink-600 on press. */
  --press-scale: 0.97; /* @kind other */
  --hover-lift:  -2px; /* @kind spacing */
}