From e4b2dd26046260ad8af931fbe19f44e09db81b24 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 19:37:12 +0100
Subject: [PATCH] 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 | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/Routes/RouteDetail.module.css b/ui/src/pages/Routes/RouteDetail.module.css
index df1a80dc..e445bff4 100644
--- a/ui/src/pages/Routes/RouteDetail.module.css
+++ b/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);
-  color: white;
-  border-color: var(--accent-primary);
+  background: var(--amber-bg);
+  color: var(--amber-deep);
+  border-color: var(--amber);
+  font-weight: 600;
 }
 
 .tapModalFooter {