From 4c2efce3937e7acab4a102ace2a5927a8b23ddc9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 19 Jun 2026 22:52:06 +0000
Subject: [PATCH] fix(tokens): correct About z-index and accent/dark-mode token
 reuse

- About modal overlay used a raw z-index: 1200, below the semantic
  --z-modal (3000)/--z-toast (4000) layers, so token-based surfaces would
  cover it. Consume var(--z-modal) instead.
- .btn-primary and .search-button sit on the accent gradient but coloured
  their text with --color-danger-text (only correct by coincidence, #fff).
  Use the purpose-built --color-on-accent so retinting danger can't break
  them. The other --color-danger-text uses are white-on-red and stay.
- --color-item-hover-blue/--color-item-hover-sky were light-only literals
  that would read wrong in dark mode; wrap them in light-dark().

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
---
 frontend/src/lib/components/AppShell.svelte | 2 +-
 frontend/src/lib/styles/base/variables.css  | 4 ++--
 frontend/src/lib/styles/ported/buttons.css  | 2 +-
 frontend/src/lib/styles/ported/topbar.css   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/AppShell.svelte b/frontend/src/lib/components/AppShell.svelte
index 62865fbd..9fdc887c 100644
--- a/frontend/src/lib/components/AppShell.svelte
+++ b/frontend/src/lib/components/AppShell.svelte
@@ -1028,7 +1028,7 @@
 	.about-overlay {
 		position: fixed;
 		inset: 0;
-		z-index: 1200;
+		z-index: var(--z-modal);
 		display: flex;
 		align-items: center;
 		justify-content: center;
diff --git a/frontend/src/lib/styles/base/variables.css b/frontend/src/lib/styles/base/variables.css
index 541f09c6..5bb0760d 100644
--- a/frontend/src/lib/styles/base/variables.css
+++ b/frontend/src/lib/styles/base/variables.css
@@ -368,8 +368,8 @@
     --color-item-active: light-dark(#f8d2ae, #5a5047);
     --color-item-selected: light-dark(#fff8f6, #39281a);
     --color-item-hover-accent: light-dark(#fff0ec, #3d342c);
-    --color-item-hover-blue: #f0f8ff;
-    --color-item-hover-sky: #e0f2fe;
+    --color-item-hover-blue: light-dark(#f0f8ff, #18293f);
+    --color-item-hover-sky: light-dark(#e0f2fe, #103048);
 
     /* Sidebar — already dark-leaning in both modes; dark mode goes deeper. */
     --color-sidebar-bg-from: light-dark(#2a3042, #0f172a);
diff --git a/frontend/src/lib/styles/ported/buttons.css b/frontend/src/lib/styles/ported/buttons.css
index 6048b6ab..3f015274 100644
--- a/frontend/src/lib/styles/ported/buttons.css
+++ b/frontend/src/lib/styles/ported/buttons.css
@@ -18,7 +18,7 @@
 
 .btn-primary {
     background: var(--color-accent-gradient);
-    color: var(--color-danger-text);
+    color: var(--color-on-accent);
     box-shadow: 0 4px 15px var(--color-accent-shadow);
 }
 
diff --git a/frontend/src/lib/styles/ported/topbar.css b/frontend/src/lib/styles/ported/topbar.css
index 1c2ab828..f05391da 100644
--- a/frontend/src/lib/styles/ported/topbar.css
+++ b/frontend/src/lib/styles/ported/topbar.css
@@ -165,7 +165,7 @@
     top: 50%;
     transform: translateY(-50%);
     background: var(--color-accent-gradient);
-    color: var(--color-danger-text);
+    color: var(--color-on-accent);
     border: none;
     border-radius: var(--radius-xl);
     width: 36px;