Frontend redesign chunk 2: primitives and marks

Rewrite components/ui/* (Button, Card, Badge, PageHeader, EmptyState,
Skeleton) against the chunk-1 tokens instead of hardcoded gray-9xx classes,
and drop the remaining font-mono from label/heading text.

Add the three colour-blindness-validated encoding components from
UI_REDESIGN.md §2.3:
- components/marks/SeverityMark.tsx — glyph (filled triangle / outline
  triangle / outline circle) + optional spine + optional label, from the
  four-level severity ladder. Colour is never the only channel.
- components/marks/TypeGlyph.tsx — five stroked SVG glyphs (fire, police,
  ems, collision, other) in currentColor. Incident type is now shape, not
  hue, since five hues can't clear an all-pairs CVD gate.
- components/marks/NodeMark.tsx — diamond at four weights (filled+ring /
  filled / hollow / hollow-dashed). Green is gone from node state entirely.

lib/severity.tsx now renders through SeverityMark; SEVERITY_COLORS reads
the validated sev-moderate/sev-major tokens with routine/minor neutral.
IncidentBadges.tsx's TypeBadge is reimplemented on TypeGlyph instead of a
coloured pill.

Per UI_REDESIGN.md chunk 2.

drb-frontend/components/ui/Card.tsx

@@ -19,9 +19,9 @@ export function Card({ children, hover, padding = "md", highlighted, className,
   return (
     <div
       className={[
-        "bg-gray-900 border rounded-xl",
-        highlighted ? "border-indigo-600/40 shadow-glow" : "border-gray-800",
-        hover ? "transition-colors hover:border-gray-600" : "",
+        "bg-surface border rounded-xl",
+        highlighted ? "border-accent/40 shadow-glow" : "border-line",
+        hover ? "transition-colors hover:border-line-strong" : "",
         PADDING[padding],
         className ?? "",
       ]
@@ -38,8 +38,8 @@ export function CardHeader({ title, subtitle, action }: { title: ReactNode; subt
   return (
     <div className="flex items-start justify-between gap-4 mb-4">
       <div className="min-w-0">
-        <h3 className="text-white font-semibold text-sm">{title}</h3>
-        {subtitle && <p className="text-gray-500 text-xs mt-0.5 leading-snug">{subtitle}</p>}
+        <h3 className="text-ink font-semibold text-sm">{title}</h3>
+        {subtitle && <p className="text-ink-muted text-xs mt-0.5 leading-snug">{subtitle}</p>}
       </div>
       {action && <div className="shrink-0">{action}</div>}
     </div>