/* ============================================================
   WhatsApp Colors — Spacing, radii & sizing tokens
   The UI is compact: 4px base rhythm, control heights 34–44px.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --wa-space-1: 2px;
  --wa-space-2: 4px;
  --wa-space-3: 6px;
  --wa-space-4: 8px;
  --wa-space-5: 10px;
  --wa-space-6: 12px;
  --wa-space-7: 14px;
  --wa-space-8: 16px;
  --wa-space-9: 18px;
  --wa-space-10: 20px;
  --wa-space-12: 24px;
  --wa-space-16: 32px;
  --wa-space-20: 40px;

  /* Corner radii — soft but not pill-round; controls sit at 9–11px */
  --wa-radius-xs: 5px;    /* kbd, tiny chips */
  --wa-radius-sm: 7px;    /* compact fields, menu items */
  --wa-radius-md: 9px;    /* inputs, nav buttons */
  --wa-radius-lg: 10px;   /* buttons */
  --wa-radius-xl: 11px;   /* icon tiles, cards */
  --wa-radius-2xl: 14px;  /* modals, popovers */
  --wa-radius-pill: 999px;/* badges, status pills, avatars */

  /* Control heights */
  --wa-h-compact: 34px;   /* dense fields, toolbar buttons */
  --wa-h-control: 38px;   /* nav search, secondary buttons */
  --wa-h-button: 40px;    /* standard button */
  --wa-h-field: 42px;     /* form inputs / selects */
  --wa-h-modal-btn: 44px; /* modal footer buttons */

  /* Layout */
  --wa-sidebar-w: 300px;
  --wa-header-h: 64px;
  --wa-row-h: 58px;       /* compact list row */
  --wa-row-h-comfy: 72px; /* comfortable list row */
}