CSS Refactor

From https://github.com/getodk/web-forms/pull/164#issuecomment-2297309308

- [ ] Naming things: maybe this will be better addressed with PrimeVue 4, but it would be nice if we had fewer magic values and more use of system of CSS variables or other named values. Will hopefully make it easier to understand why something changes, e.g. font-weight 400 to 500 (or vice versa), font-size changes, accommodations for spacing moving up or down component/DOM hierarchy
- [ ] Various use of negative margins is concerning. Especially where it seems to be counteracting spacing controlled by the same general thing (FormPanel). Would generally like to do a focused overhaul on how layout/spacing/alignment/etc are handled.
- In such focused overhaul, also want to be mindful of RTL where we have styles producing asymmetric horizontal spacing/alignment
- [ ] In general, worth thinking about:
- System for naming and categorical structuring of components
- How that can/will align with designs in Figma, tokens in PrimeVue, our own token system

Start by reviewing the discussion in pull request 164 and the existing FormPanel layout and spacing styles. Done means replacing magic values with named CSS variables or tokens, reducing problematic negative margins, considering RTL alignment, and assessing consistency with Figma and PrimeVue conventions.

Written by the indexing model from the issue text.