/* EverPay spacing, radius & depth.
   4pt grid: every spacing value is a multiple of 4.
   DEPTH RULE: no shadows anywhere — use a 1px solid border for separation. */
:root {
  /* Spacing scale (4pt grid) */
  --space-0_5: 2px;   /* hairline: indicator dots, active underlines */
  --space-1: 4px;     /* icon-to-label gap */
  --space-2: 8px;     /* tight inner padding */
  --space-3: 12px;    /* base: card inner padding, list gaps */
  --space-4: 16px;    /* comfortable: section padding */
  --space-5: 20px;    /* screen margin — horizontal page padding is always 20px */
  --space-6: 24px;    /* generous card padding, section gap */
  --space-8: 32px;    /* hero / onboarding breathing room */
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-tag: 6px;     /* small badges, chips */
  --radius-md: 12px;     /* inputs, small cards, buttons (base radius) */
  --radius-card: 16px;   /* content cards, modals */
  --radius-pill: 999px;  /* pills, tabs */
  --radius-base: 12px;

  /* Borders & depth */
  --border-width: 1px;
  --border-color: var(--border);
  --divider: 1px solid var(--gray-50);
  --shadow-none: none;   /* EverPay uses borders, never shadows */

  /* Layout */
  --screen-max: 430px;   /* mobile canvas, centered */
  --nav-height: 64px;
}