fix(frontend): apply Geist to body text (#170)

Geist and Geist Mono are loaded in layout.tsx and their variables are
mapped to Tailwind's font-sans and font-mono, but globals.css still
carried the create-next-app default of `body { font-family: Arial,
Helvetica, sans-serif; }`. That override won everywhere, so Geist Sans
reached only elements that named `font-sans` explicitly, of which there
is exactly one in the whole application.

The result was that Geist Sans was downloaded on every page load and then
applied to almost nothing, while the interface rendered in Arial. Geist
Mono was unaffected, since its twenty call sites all use `font-mono`.

Setting the body font to the variable makes the loaded font the inherited
default, which is what the existing wiring already assumed. The variable
resolves to `Geist, Geist Fallback`, and that fallback is Arial with
size-adjust and metric overrides generated by Next, so the swap when the
webfont lands does not reflow the page. The `var()` default and the
trailing generics only apply if the font class is ever absent from body.

docs/DESIGN.md is updated in the same commit, since it documented the
previous behaviour.

Author: Valtora

docs/DESIGN.md

@@ -90,9 +90,18 @@ setting. Use or extend the tokens instead.
 and exposed as `--font-geist-sans` and `--font-geist-mono`, which `@theme inline` maps to Tailwind's
 `--font-sans` and `--font-mono`.
 
-Body text does not currently use them. `globals.css` sets `body { font-family: Arial, Helvetica,
-sans-serif; }`, so Geist applies only where a `font-sans` or `font-mono` utility is used
-explicitly.
+Geist Sans is the body font, set once on `body` in `globals.css`, so it is inherited everywhere
+rather than applied per component. Geist Mono is applied where it is wanted, through the `font-mono`
+utility.
+
+The `--font-geist-sans` variable already resolves to `Geist, Geist Fallback`, where the fallback is
+Arial carrying `size-adjust` and ascent/descent overrides that Next generates to match Geist's
+metrics. That is what covers the window before the webfont resolves, and it is why the swap does not
+visibly reflow the page. The generic families after the variable are a last resort for the case
+where the font class is absent entirely.
+
+There is no need to add a `font-sans` class to reach the body font; an element only needs one when
+it is overriding something else back to the default.
 
 ## Accessibility
 

frontend/src/app/globals.css

@@ -104,7 +104,11 @@ html[data-ui-density="compact"] {
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  /* layout.tsx sets --font-geist-sans on this element, and it already resolves
+     to "Geist, Geist Fallback" -- the fallback being Arial with size-adjust and
+     metric overrides, so the swap when the webfont lands is near-invisible. The
+     var() default and the generics only matter if that class is ever absent. */
+  font-family: var(--font-geist-sans, Arial), Helvetica, sans-serif;
 }
 
 body.resize-dragging,