/* ==========================================================================
   Answerly — Radius & elevation
   ElevenLabs-style: crisp neutral shadows, generous rounding, PILL buttons.
   ========================================================================== */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:   4px;
  --radius-sm:   10px;  /* inputs */
  --radius-md:   12px;  /* small surfaces */
  --radius-lg:   18px;  /* cards */
  --radius-xl:   22px;
  --radius-2xl:  28px;  /* large feature cards */
  --radius-icon: 24%;   /* the squircle brand mark (rx ≈ 24% of side) */
  --radius-pill: 999px; /* DEFAULT button shape — fully rounded */
  --radius-full: 999px; /* pills, avatars */

  /* ---- Shadows (neutral, low contrast) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.07), 0 1px 3px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 14px 44px rgba(10, 10, 10, 0.11), 0 2px 8px rgba(10, 10, 10, 0.05);
  --shadow-xl: 0 28px 80px rgba(10, 10, 10, 0.16);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px var(--focus-ring);

  /* ---- 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 */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms;      /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}