/* ============================================================
   WhatsApp Colors — Elevation, borders & motion tokens
   Shadows are soft and low. Motion is quick and calm — short
   fades and a gentle pop; no bounces.
   ============================================================ */

:root {
  /* Shadows (light) */
  --wa-shadow-xs: 0 1px 1px rgba(0,0,0,.10);            /* message bubbles */
  --wa-shadow-sm: 0 1px 3px rgba(11,20,26,.08);         /* cards, chips */
  --wa-shadow-md: 0 3px 8px rgba(37,211,102,.35);       /* accent brand tile */
  --wa-shadow-pop: 0 18px 54px rgba(11,20,26,.30);      /* popovers / date picker */
  --wa-shadow-modal: 0 24px 70px rgba(0,0,0,.45);       /* modals */
  --wa-shadow-toast: 0 12px 34px rgba(0,0,0,.28);       /* toast */
  --wa-shadow-accent: 0 2px 6px rgba(37,211,102,.30);   /* primary button lift */

  /* Scrim behind modals */
  --wa-scrim: rgba(11,20,26,.55);

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

  /* Motion */
  --wa-ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --wa-dur-fast: .12s; /* @kind other */
  --wa-dur: .16s; /* @kind other */
  --wa-dur-slow: .38s; /* @kind other */
}

[data-theme="dark"], .theme-dark {
  --wa-shadow-xs: 0 1px 1px rgba(0,0,0,.30);
  --wa-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --wa-shadow-md: 0 3px 8px rgba(18,140,126,.4);
  --wa-shadow-accent: 0 2px 6px rgba(18,140,126,.4);
}