/* Zapier spacing + shape tokens. Base unit 4px. */
:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Semantic */
  --pad-band: var(--space-4xl) var(--space-xl);   /* hero / content bands */
  --pad-card: var(--space-xl);                    /* card interior */
  --pad-button: var(--space-md) var(--space-xl);  /* md buttons */
  --pad-input: var(--space-md) var(--space-lg);
  --container-max: 1280px;

  /* ── Radius ── */
  --radius-none: 0px;
  --radius-sm: 6px;      /* inputs, inline pills */
  --radius-md: 12px;     /* THE brand radius — buttons + cards */
  --radius-pill: 9999px; /* status pills, badges */
  --radius-full: 9999px; /* circular icon containers */
}