/* ============================================================
   Aelo — Effects: radii, shadows, motion
   Soft corners (10–20px). Shadows are almost absent — warm hairline
   borders do the work. Motion is calm: short fades, no bounce.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   11px;  /* buttons, inputs */
  --radius-lg:   14px;  /* inner cards */
  --radius-xl:   20px;  /* panels */
  --radius-2xl:  24px;  /* app-icon tiles */
  --radius-pill: 999px;

  /* ---- Shadows (whisper-soft, warm-tinted) ---- */
  --shadow-none: none;
  --shadow-sm:   0 8px 18px rgba(26, 26, 24, 0.10);
  --shadow-md:   0 8px 20px rgba(26, 26, 24, 0.10);
  --shadow-lg:   0 10px 24px rgba(26, 26, 24, 0.12);
  --shadow-ring: 0 0 0 4px var(--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-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
}