/* ============================================================
   Spacing, radii & sizing — Pasör
   Built on a 4px base. Mirrors the app's common EdgeInsets
   (8 / 12 / 16 / 24) and component dimensions.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;   /* card inner gap */
  --space-4: 16px;   /* default screen padding */
  --space-5: 20px;
  --space-6: 24px;   /* auth screen horizontal padding */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Corner radii ---- */
  --radius-sm: 6px;     /* small chips, follow button */
  --radius-md: 12px;    /* inputs, OTP, cards (tight) */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 16px;    /* finance / stat cards */
  --radius-2xl: 20px;   /* bottom sheets, marketing cards */
  --radius-pill: 28px;  /* primary buttons (56h pill) */
  --radius-full: 999px; /* avatars, circular badges */

  /* ---- Component sizing ---- */
  --control-h: 56px;        /* button / input height */
  --otp-w: 48px;
  --otp-h: 56px;
  --avatar-sm: 36px;        /* feed post avatar */
  --avatar-md: 60px;        /* story avatar inner */
  --avatar-lg: 80px;        /* logo circle / profile */
  --story-ring: 68px;       /* story ring outer */
  --nav-h: 64px;            /* bottom nav */
  --tap-min: 44px;          /* minimum hit target */
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 28px;          /* nav icons */

  /* ---- Layout ---- */
  --screen-ref-w: 390px;    /* iPhone 14 design reference */
  --content-max: 1100px;    /* marketing / dashboard max width */
}