/* ============================================================
   Emmunity — Spacing, radii & layout tokens
   Base unit is 4px. The app is roomy: generous card padding,
   large gaps between timeline groups.
   ============================================================ */
:root {
  /* ---- Spacing scale (official: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64) -- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;   /* default card / screen gutter */
  --s5: 24px;   /* card inner padding           */
  --s6: 32px;   /* between groups               */
  --s7: 48px;
  --s8: 64px;

  /* back-compat aliases */
  --space-0:  0;
  --space-1:  var(--s1);
  --space-2:  var(--s2);
  --space-3:  var(--s3);
  --space-4:  var(--s4);
  --space-5:  20px;
  --space-6:  var(--s5);
  --space-7:  var(--s6);
  --space-8:  40px;
  --space-9:  var(--s7);
  --space-10: var(--s8);

  /* ---- Radii (official) ----------------------------------- */
  --r-xs:   8px;
  --r-sm:   12px;   /* small chips, list cards               */
  --r-md:   16px;   /* inputs, vaccine cards                  */
  --r-lg:   20px;   /* cards                                  */
  --r-xl:   28px;   /* large featured cards / sheets         */
  --r-pill: 999px;  /* buttons, day pills, badges            */

  /* back-compat radii */
  --radius-sm:   var(--r-xs);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  32px;
  --radius-pill: var(--r-pill);

  /* ---- Layout --------------------------------------------- */
  --screen-gutter: 20px;     /* mobile horizontal padding         */
  --screen-max:    440px;    /* phone content max width           */
  --tabbar-height: 84px;
  --touch-min:     44px;     /* minimum hit target                */

  /* ---- Hairline ------------------------------------------- */
  --border-width: 1px;
}