fix(frontend): finish the token migration — raw grey classes -> theme tokens

UI_REDESIGN chunk 4 was never finished: 39 app/component files still used
raw Tailwind greys, kept readable in light mode only by the !important
override sheet. In dark mode text-gray-600 is ~2.3:1 on surface, and the
light override maps it to #94a3b8 (~2.6:1 on white) — unreadable in both.

Mechanical mapping (886 classes): gray-100/200 -> ink, 300/400 -> ink-2,
500/600/700 -> ink-muted, bg 950/900/800 -> page/surface/raised,
border 800 -> line, 700/600 -> line-strong, plus hover/divide/placeholder.
Alpha suffixes kept (tokens are color-mix, so /60 works). bg-gray-700,
text-white and marketing pages left alone. text-[9px] -> text-[10px].

Frontend unverified: no Node on the authoring box (#207).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

drb-frontend/components/admin/CameraProvidersTab.tsx

@@ -58,16 +58,16 @@ export function CameraProvidersTab() {
 
   return (
     <section className="space-y-3">
-      <p className="text-gray-400 text-xs leading-snug">
+      <p className="text-ink-2 text-xs leading-snug">
         Public camera sources for the Live wall. Every provider is <b>off</b> until enabled here. Licence status comes from the
         camera-sources catalog (2026-10-04); a red or amber licence means DRB does not hold a confirmed right to show that imagery.
         Required attributions render on every camera tile.
       </p>
       {error && <div className="bg-red-950 border border-red-800 rounded-lg p-3 text-red-400 text-sm font-mono break-words">{error}</div>}
       {!providers ? (
-        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+        <p className="text-ink-muted text-sm font-mono">Loading…</p>
       ) : (
-        <div className="bg-gray-900 border border-gray-800 rounded-xl divide-y divide-gray-800">
+        <div className="bg-surface border border-line rounded-xl divide-y divide-line">
           {providers.map((p) => {
             const lic = LICENCE_STYLE[p.licence.status];
             const lockReason = !p.implemented ? "No working adapter (stub)" : p.licence.status === "prohibited" ? "Source terms forbid this use" : null;
@@ -77,8 +77,8 @@ export function CameraProvidersTab() {
                   <div className="min-w-0 space-y-1">
                     <span className={`inline-block text-xs font-semibold px-2 py-0.5 rounded border ${lic.cls}`}>{lic.label}</span>
                     <p className="text-white text-sm font-semibold">{p.name}</p>
-                    <p className="text-gray-400 text-xs">{p.licence.label}</p>
-                    <p className="text-gray-500 text-xs">{p.region} · {p.formats}</p>
+                    <p className="text-ink-2 text-xs">{p.licence.label}</p>
+                    <p className="text-ink-muted text-xs">{p.region} · {p.formats}</p>
                   </div>
                   <div className="shrink-0 text-right space-y-1">
                     <button
@@ -93,25 +93,25 @@ export function CameraProvidersTab() {
                     >
                       <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${p.enabled ? "translate-x-6" : "translate-x-1"}`} />
                     </button>
-                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-gray-500"}`}>
+                    <p className={`text-[11px] font-mono ${p.serving ? "text-green-400" : "text-ink-muted"}`}>
                       {p.serving ? "serving" : lockReason ?? p.not_serving_reason ?? "off"}
                     </p>
                   </div>
                 </div>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] font-mono text-gray-400">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px] font-mono text-ink-2">
                   <span>cameras: {p.health ? p.health.count : "—"}</span>
                   <span>last fetch: {fmtEpoch(p.health?.fetched_at)}</span>
                   <span className={p.health?.error ? "text-red-400" : ""}>health: {p.health ? (p.health.error ? "error" : p.health.fetched_at ? "ok" : "not fetched yet") : "n/a"}</span>
                   <span className={p.key_missing ? "text-amber-400" : ""}>{p.key_setting ? `key: ${p.key_missing ? "missing" : "set"}` : "no key needed"}</span>
                 </div>
                 {p.health?.error && <p className="text-[11px] font-mono text-red-400 break-words">{p.health.error}</p>}
-                {p.licence.attribution && <p className="text-[11px] text-gray-400">Attribution shown with imagery: “{p.licence.attribution}”</p>}
+                {p.licence.attribution && <p className="text-[11px] text-ink-2">Attribution shown with imagery: “{p.licence.attribution}”</p>}
                 {p.acknowledgement && (
                   <p className="text-[11px] text-amber-300">
                     Licence warning acknowledged by {p.acknowledgement.by_email || p.acknowledgement.by_uid} on {new Date(p.acknowledgement.at).toLocaleString()}
                   </p>
                 )}
-                <details className="text-[11px] text-gray-500">
+                <details className="text-[11px] text-ink-muted">
                   <summary className="cursor-pointer select-none">Terms & adapter notes</summary>
                   <p className="mt-1">{p.licence.terms}</p>
                   <p className="mt-1">{p.notes}</p>
@@ -129,16 +129,16 @@ export function CameraProvidersTab() {
 
       {confirming && (
         <div className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4" role="alertdialog" aria-modal="true" aria-labelledby="cam-ack-title">
-          <div className="bg-gray-900 border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
+          <div className="bg-surface border border-red-700 rounded-xl max-w-lg w-full p-5 space-y-3">
             <h2 id="cam-ack-title" className="text-white font-semibold">Enable {confirming.name}?</h2>
             <p className="text-red-300 text-sm font-semibold">{LICENCE_STYLE[confirming.licence.status].label}</p>
-            <p className="text-gray-300 text-sm leading-snug">{confirming.licence.warning}</p>
-            <label className="flex items-start gap-2 text-sm text-gray-200">
+            <p className="text-ink-2 text-sm leading-snug">{confirming.licence.warning}</p>
+            <label className="flex items-start gap-2 text-sm text-ink">
               <input type="checkbox" checked={ackChecked} onChange={(e) => setAckChecked(e.target.checked)} className="mt-1" />
               <span>I confirm DRB holds the right to show this source&apos;s imagery. This confirmation is recorded with my account and the time in the audit log.</span>
             </label>
             <div className="flex justify-end gap-2">
-              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-gray-700 text-gray-300">Cancel</button>
+              <button type="button" onClick={() => setConfirming(null)} className="text-sm px-3 py-1.5 rounded border border-line-strong text-ink-2">Cancel</button>
               <button type="button" disabled={!ackChecked || busy === confirming.id} onClick={() => toggle(confirming, true, true)}
                 className="text-sm px-3 py-1.5 rounded bg-red-700 text-white disabled:opacity-40">Enable and record</button>
             </div>