fix(legal): use theme tokens so legal pages are readable

[fcgoesdev]

LegalShell hardcodes dark-theme colors while app/globals.css defines a light theme, so /privacy, /terms and /data-deletion currently render white text on a white background.

The bug

app/globals.css sets:

--color-background: #ffffff;
--color-foreground: #18181b;

components/legal-shell.tsx styles its content with text-white, text-zinc-300, text-cyan-200 and border-white/10 — values that assume a dark background.

Measured contrast against #ffffff:

element	before	after
<h1>	text-white — 1.00:1	text-foreground — 17.7:1
body copy	text-zinc-300 — 1.48:1	text-foreground — 17.7:1
lede + nav link	text-zinc-300 — 1.48:1	text-muted — 4.83:1
"Last updated"	text-cyan-200 — 1.25:1	text-accent — 2.80:1

Why this one matters

These three routes are what a Meta app reviewer opens when approving Instagram permissions — they're the URLs you paste into the privacy policy / terms / data deletion fields. Right now they look like blank pages.

I ran into this setting up a self-hosted deployment; the same token changes are running there now.

Scope

Class names only — no copy changes, no markup changes, no new tokens. All four tokens already exist in globals.css and are used elsewhere in the app (e.g. app/page.tsx, app/(dashboard)/overview/page.tsx).

Two things I deliberately left alone

1. text-accent is still below WCAG AA. #f97316 on white is 2.80:1, under the 4.5:1 required for normal text. I kept it because it matches existing convention — app/login/page.tsx:51 uses the same uppercase … text-accent treatment. Darkening --color-accent to something like #c2410c (5.18:1) would fix it globally, but that's a project-wide design decision, not mine to make in a drive-by PR. Happy to open a separate one if you want it.

2. The same mismatch exists in other components. components/seo-page-shell.tsx and components/public-site-header.tsx also pair text-white with effectively-white backgrounds (bg-white/[0.035], bg-background/85). I scoped this PR to LegalShell because that case is unambiguous and has the review-blocking consequence above.

If the light theme in globals.css is the intended direction, those components want the same treatment and I can follow up. If it isn't — if the app is meant to be dark and globals.css is what drifted — then this PR is the wrong fix and I'd rather hear that. Either way, let me know and I'll adjust.

[vercel]

Someone is attempting to deploy a commit to the diwenne's projects Team on Vercel.

A member of the Team first needs to authorize it.