/* ============================================================
   Elevation & motion — Willa
   ------------------------------------------------------------
   Soft teal-tinted shadows — never harsh, never neutral gray.
   Motion is minimal-functional: only transitions that aid
   comprehension. The product's real "motion" is the SMS
   arriving on your phone.
   ============================================================ */
:root {
  /* ---- Shadows (teal-tinted, low spread) ---- */
  --shadow-sm: 0 1px 2px rgba(12, 46, 51, 0.06);
  --shadow-card: 0 2px 10px rgba(12, 46, 51, 0.07);
  --shadow-email: 0 6px 28px rgba(12, 46, 51, 0.10);
  --shadow-modal: 0 14px 44px rgba(12, 46, 51, 0.18);

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

  /* ---- Motion ---- */
  --ease-enter: ease-out;    /* @kind other */ /* elements arriving */
  --ease-exit: ease-in;      /* @kind other */ /* elements leaving */
  --ease-move: ease-in-out;  /* @kind other */ /* movement */
  --duration-micro: 100ms;   /* @kind other */ /* hover states */
  --duration-short: 150ms;   /* @kind other */ /* transitions */
  --duration-medium: 250ms;  /* @kind other */ /* page transitions */
  --transition-base: 150ms ease-out; /* @kind other */
}