Frontend: migrate responsive spacing and typography toward rem

[tystar86]

Goal

Prefer rem (and clamp() in rem) for typography and layout spacing in the React app so the UI tracks root font size and user zoom / accessibility settings. Keep px where appropriate (hairline borders, some shadows, media-query breakpoints unless we adopt em breakpoints).

Why

frontend/src/styles/theme.css and many page-level inline styles still use raw px. A rem-based scale aligns with responsive and accessibility habits without changing design intent at default zoom.

Agent / implementation checklist

Run these steps when picking up this issue (Cursor, Claude Code, etc.):

1. Baseline

   • Confirm root font size (html / :root, typically 100% → 16px). If anything non-default exists, document it next to shared CSS variables.

2. Tokens first (frontend/src/styles/theme.css)

   • Convert --nb-page-edge, --nb-copy-pad-x, and other spacing tokens to rem (e.g. translate current px intent: 1rem equals 16px at default browser settings).
   • Prefer rem for padding, margin, gap, and font sizes; keep px for border widths and very small UI chrome unless we define a project-wide rule.

3. Pages

   • Reduce px in frontend/src/pages/*.jsx inline styles: either switch numeric spacing to rem or move rules into theme.css classes that use rem.

4. Avoid

   • Mechanical replace-all of every px (breakpoints, borders, box-shadow offsets often stay px).
   • Unintentional visual drift: after conversion, compare dashboard, posts list, post detail, login at ~375px and ~1280px width.

5. Verify

   • cd frontend && npm run lint && npm test -- --run
   • Optional: uv run pytest if any shared contracts touched (unlikely).

Commands (copy-paste)

cd frontend && npm run lint && npm test -- --run

Tracking

• Linear: TYS-187 — Frontend: rem-based spacing and typography (theme + pages)