Frontend redesign chunk 1: design tokens and type

Replace hardcoded dark-palette Tailwind classes with semantic CSS custom
properties (page/surface/raised/line/ink/accent/sev-moderate/sev-major/
map-*) defined on :root (light) and .dark (dark), wired through
tailwind.config.ts theme.extend.colors. Add IBM Plex Sans/Mono via
next/font/google: sans for everything a person reads, mono reserved for
machine identifiers only. Drop font-mono from body and Button's base
classes. Existing !important light-mode overrides kept temporarily so
nothing goes unreadable mid-migration (removed in chunk 4).

Per UI_REDESIGN.md chunk 1.

drb-frontend/tailwind.config.ts

@@ -9,8 +9,30 @@ const config: Config = {
   theme: {
     extend: {
       fontFamily: {
-        mono: ["ui-monospace", "Cascadia Code", "Source Code Pro", "monospace"],
-        sans: ["ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+        mono: ["var(--font-mono)", "ui-monospace", "Cascadia Code", "Source Code Pro", "monospace"],
+        sans: ["var(--font-sans)", "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+      },
+      // Semantic tokens — defined as CSS custom properties in app/globals.css on
+      // :root (light) and .dark (dark). Components must use these names, never a
+      // raw gray-9xx, so a theme is one variable block rather than an override sheet.
+      colors: {
+        page:        "var(--page)",
+        surface:     "var(--surface)",
+        raised:      "var(--raised)",
+        line:        "var(--line)",
+        "line-strong": "var(--line-strong)",
+        ink: {
+          DEFAULT: "var(--ink)",
+          2:       "var(--ink-2)",
+          muted:   "var(--ink-muted)",
+        },
+        accent:         "var(--accent)",
+        "sev-moderate": "var(--sev-moderate)",
+        "sev-major":    "var(--sev-major)",
+        "map-bg":    "var(--map-bg)",
+        "map-block": "var(--map-block)",
+        "map-road":  "var(--map-road)",
+        "map-water": "var(--map-water)",
       },
       // Marketing/product type scale — used by the (marketing) surface and
       // settings shell so headings read as a deliberate hierarchy rather than