From c02fd77c302fedec416a31f49ce61422d12f98e7 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 14 Apr 2026 16:59:50 +0200
Subject: [PATCH] fix: use correct DS CSS variables for modal background

Replace non-existent --surface-1/--surface-2 with --bg-raised (modal)
and --bg-hover (subtle backgrounds) from the design system.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/Admin/ClaimMappingRulesModal.module.css  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/Admin/ClaimMappingRulesModal.module.css b/ui/src/pages/Admin/ClaimMappingRulesModal.module.css
index 4fbf61ea..a813bbcf 100644
--- a/ui/src/pages/Admin/ClaimMappingRulesModal.module.css
+++ b/ui/src/pages/Admin/ClaimMappingRulesModal.module.css
@@ -9,7 +9,7 @@
 }
 
 .modal {
-  background: var(--surface-1);
+  background: var(--bg-raised);
   border: 1px solid var(--border);
   border-radius: 12px;
   width: min(800px, 90vw);
@@ -87,7 +87,7 @@
 }
 
 .claimCode {
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: var(--font-mono);
@@ -103,7 +103,7 @@
 }
 
 .pillMatch {
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
   color: var(--text-secondary, var(--text-muted));
 }
 
@@ -147,7 +147,7 @@
 
 .iconBtn:hover {
   color: var(--text);
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
 }
 
 .iconBtn:disabled {
@@ -213,7 +213,7 @@
 }
 
 .testToggle:hover {
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
 }
 
 .testToggleLabel {
@@ -244,7 +244,7 @@
   width: 100%;
   box-sizing: border-box;
   height: 140px;
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 10px;
@@ -256,7 +256,7 @@
 
 .testResults {
   flex: 1;
-  background: var(--surface-2, var(--surface-1));
+  background: var(--bg-hover);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 12px;