/* Gray — spacing, radii & layout tokens. 8pt grid. Sharp over soft: 4pt on every container,
   999pt pill only on CTAs + capsule tags — nothing in between. No shadows ever; elevation is the gray ladder. */

:root {
  /* ── 8pt grid steps ── */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-11: 24px;
  --space-12: 28px;
  --space-13: 32px;
  --space-14: 48px;

  /* ── Layout ── */
  --screen-margin: 22px;   /* screen horizontal margin (20–22pt) */
  --card-padding: 16px;    /* cards with own padding */
  --card-gap: 8px;         /* gap between cards */
  --feed-gap: 18px;        /* feed-item gap */
  --eyebrow-top: 24px;     /* section eyebrow top spacing */

  /* ── Radii — only two values exist ── */
  --radius-sharp: 4px;     /* every card / input / tile / panel */
  --radius-pill: 999px;    /* CTA buttons + capsule tags only */
  --radius-sheet: 12px;    /* modal/sheet top corners */

  /* ── Borders — one structural hairline ── */
  --border-width: 1px;
  --border: 1px solid var(--gray-line);

  /* ── Touch targets (iOS) ── */
  --target-min: 44px;      /* 44pt minimum tap target */
  --control-min: 36px;     /* icon/control button min */

  /* ── Motion (calm; confirms state, never decorates) ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-press-in: 80ms; /* @kind other */    /* row press → surface-2 */
  --dur-press-out: 200ms; /* @kind other */  /* release */
  --dur-crossfade: 200ms; /* @kind other */  /* state crossfade + 4pt translate */
  --press-scale: 0.97; /* @kind other */     /* button press — no bounce, no overshoot */
}