design-system: Inter is declared as the body font but never loaded

[joelpeace48-cell]

Problem

app/globals.css:17 sets:

font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

Inter is never loaded. There is no next/font import, no @font-face, and no
stylesheet link anywhere in app/ or components/ — I checked. So the site
silently falls back to system-ui for every visitor who does not happen to have
Inter installed locally, which is most of them.

The result is that the design was built and reviewed in one typeface and ships
in another, and nobody gets a warning — it degrades silently rather than
failing.

What to do

• Load it properly with next/font/google:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-sans" });

next/font self-hosts the files at build time, so there is no request to
Google at runtime — better for privacy and for the CSP.

• Reference it via the CSS variable in globals.css rather than naming the
  family directly.
• Subset to the character ranges actually used; preload only the weights used.
• Confirm the fallback stack has similar metrics so there is no layout shift
  when the webfont swaps in.

Acceptance criteria

• Inter loaded via next/font, self-hosted
• Referenced through a CSS variable
• Only used weights and subsets shipped
• No cumulative layout shift attributable to the font swap
• Verified in a browser with Inter uninstalled

Notes

Verify with Inter uninstalled, or in a clean browser profile. On a designer's
machine — where Inter is usually installed system-wide — this bug is invisible.