fix(frontend): readability in both themes

- Token colors wrapped in color-mix so opacity modifiers (bg-surface/90 etc.)
  generate rules; map overlay panels were rendering see-through.
- Light mode: keep white text on saturated fills (primary/danger buttons were
  remapped to navy); map text-gray-200, bg-gray-800/60, border-gray-600.
- Dark mode: lift text-gray-600/700 to gray-500 for contrast.

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

drb-frontend/tailwind.config.ts

@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss";
 
+const tok = (name: string) =>
+  `color-mix(in srgb, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+
 const config: Config = {
   content: [
     "./app/**/*.{ts,tsx}",
@@ -15,24 +18,27 @@ const config: Config = {
       // 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.
+      // Wrapped in color-mix so opacity modifiers (bg-surface/90, bg-accent/15)
+      // work — a bare var() hex gives Tailwind nothing to apply alpha to, and the
+      // class silently generates no rule (map overlays rendered see-through).
       colors: {
-        page:        "var(--page)",
-        surface:     "var(--surface)",
-        raised:      "var(--raised)",
-        line:        "var(--line)",
-        "line-strong": "var(--line-strong)",
+        page:          tok("page"),
+        surface:       tok("surface"),
+        raised:        tok("raised"),
+        line:          tok("line"),
+        "line-strong": tok("line-strong"),
         ink: {
-          DEFAULT: "var(--ink)",
-          2:       "var(--ink-2)",
-          muted:   "var(--ink-muted)",
+          DEFAULT: tok("ink"),
+          2:       tok("ink-2"),
+          muted:   tok("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)",
+        accent:         tok("accent"),
+        "sev-moderate": tok("sev-moderate"),
+        "sev-major":    tok("sev-major"),
+        "map-bg":    tok("map-bg"),
+        "map-block": tok("map-block"),
+        "map-road":  tok("map-road"),
+        "map-water": tok("map-water"),
       },
       // Marketing/product type scale — used by the (marketing) surface and
       // settings shell so headings read as a deliberate hierarchy rather than