fix: use design system tokens for tap type selector active state

The active type option was invisible because --accent-primary doesn't
exist in the design system. Now uses --amber-bg/--amber-deep/--amber
from tokens.css for a clearly visible selected state matching the
brand accent palette.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Routes/RouteDetail.module.css

@@ -360,18 +360,26 @@
 
 .typeOption {
   padding: 4px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   font-size: 11px;
   cursor: pointer;
   border: 1px solid var(--border-subtle);
   background: var(--bg-surface);
   color: var(--text-muted);
+  font-family: var(--font-body);
+  transition: all 0.15s ease;
+}
+
+.typeOption:hover {
+  border-color: var(--border);
+  color: var(--text-secondary);
 }
 
 .typeOptionActive {
-  background: var(--accent-primary);
+  background: var(--amber-bg);
-  color: white;
+  color: var(--amber-deep);
-  border-color: var(--accent-primary);
+  border-color: var(--amber);
+  font-weight: 600;
 }
 
 .tapModalFooter {