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/app/features/page.tsx

@@ -76,7 +76,7 @@ export default function FeaturesPage() {
       <div className="max-w-2xl">
         <Badge tone="brand">Features</Badge>
         <h1 className="text-display-sm md:text-display text-white mt-5">Everything between the radio and the map</h1>
-        <p className="text-gray-400 mt-4 leading-relaxed">
+        <p className="text-ink-2 mt-4 leading-relaxed">
           DRB is the pipeline from decoded radio traffic to a picture your team can act on: transcription,
           correlation, mapping, and a live relay — end to end.
         </p>
@@ -88,12 +88,12 @@ export default function FeaturesPage() {
             <div className="lg:col-span-2">
               <p className="text-indigo-400 text-xs font-mono uppercase tracking-wider font-semibold">{s.eyebrow}</p>
               <h2 className="text-white text-2xl font-bold mt-2">{s.title}</h2>
-              <p className="text-gray-400 mt-3 leading-relaxed">{s.body}</p>
+              <p className="text-ink-2 mt-3 leading-relaxed">{s.body}</p>
             </div>
             <Card padding="lg" className="lg:col-span-3">
               <ul className="space-y-3">
                 {s.points.map((p) => (
-                  <li key={p} className="flex items-start gap-3 text-sm text-gray-300">
+                  <li key={p} className="flex items-start gap-3 text-sm text-ink-2">
                     <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0" />
                     {p}
                   </li>
@@ -107,7 +107,7 @@ export default function FeaturesPage() {
         ))}
       </div>
 
-      <div className="text-center mt-20 pt-16 border-t border-gray-800">
+      <div className="text-center mt-20 pt-16 border-t border-line">
         <h2 className="text-display-sm text-white">See it running on your own traffic</h2>
         <div className="mt-6">
           <LinkButton href="/login" size="lg">Get started</LinkButton>