/* ============================================================
   Tilt Protocol — Spacing, radius & layout tokens
   4px base grid. Cards round at 0.75rem; pills are fully round.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 0.5rem;    /* 8px — chips, small controls */
  --radius-md: 0.625rem;  /* 10px — buttons (lg) */
  --radius-lg: 0.75rem;   /* 12px — DEFAULT card radius (--radius) */
  --radius-xl: 1rem;      /* 16px — large cards */
  --radius-2xl: 1.25rem;  /* 20px — hero panels */
  --radius-pill: 9999px;  /* nav pills, badges, status dots */

  /* base radius alias (matches product --radius: 0.75rem) */
  --radius: var(--radius-lg);

  /* ---- Layout ---- */
  --container: 1200px;       /* marketing content width */
  --container-app: 1400px;   /* app content width */
  --navbar-h: 60px;          /* fixed top nav height */
  --tap-min: 44px;           /* minimum touch target */

  /* ---- Page gutters ---- */
  --gutter: 16px;
  --gutter-sm: 24px;
}