From 16d9af8b96f498aee1d2f2afc1a166c3053a4983 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 8 Apr 2026 12:22:03 -0400
Subject: [PATCH] fix(theme): increase dark mode contrast for borders, glows,
 and card edges; DRY color values into CSS variables

---
 frontend/src/assets/theme.css         | 19 +++++++++++++++++--
 frontend/src/components/AppHeader.vue |  6 +++---
 frontend/src/views/KnowledgeView.vue  | 14 +++++++-------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index cae746b..7b19fff 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -58,6 +58,14 @@
   --color-accent-warm-light: #d4a017;
   --color-primary-solid: #7c3aed;
   --color-primary-deep: #5b21b6;
+  /* Reusable brand patterns */
+  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
+  --glow-cta: 0 2px 10px rgba(124, 58, 237, 0.35);
+  --glow-cta-hover: 0 4px 20px rgba(124, 58, 237, 0.55);
+  --glow-soft: 0 0 16px rgba(124, 58, 237, 0.35);
+  --color-primary-faint: rgba(124, 58, 237, 0.08);
+  --color-primary-tint: rgba(124, 58, 237, 0.12);
+  --color-primary-wash: rgba(124, 58, 237, 0.20);
 }
 
 [data-theme="dark"] {
@@ -68,8 +76,8 @@
   --color-text: #e4e4f0;
   --color-text-secondary: #8888a8;
   --color-text-muted: #52526a;
-  --color-border: rgba(124, 58, 237, 0.12);
-  --color-input-border: rgba(124, 58, 237, 0.22);
+  --color-border: rgba(124, 58, 237, 0.22);
+  --color-input-border: rgba(124, 58, 237, 0.35);
   --color-primary: #a78bfa;
   --color-danger: #f44336;
   --color-tag-bg: #2a2a45;
@@ -109,6 +117,13 @@
   --color-accent-warm-light: #e8c45a;
   --color-primary-solid: #7c3aed;
   --color-primary-deep: #5b21b6;
+  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
+  --glow-cta: 0 2px 12px rgba(124, 58, 237, 0.45);
+  --glow-cta-hover: 0 4px 24px rgba(124, 58, 237, 0.65);
+  --glow-soft: 0 0 18px rgba(124, 58, 237, 0.4);
+  --color-primary-faint: rgba(124, 58, 237, 0.10);
+  --color-primary-tint: rgba(124, 58, 237, 0.14);
+  --color-primary-wash: rgba(124, 58, 237, 0.22);
 }
 
 *,
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 3c285e6..9f52698 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -153,7 +153,7 @@ router.afterEach(() => {
 <style scoped>
 .app-header {
   background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
-  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
+  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
   position: relative;
 }
 .nav {
@@ -222,8 +222,8 @@ router.afterEach(() => {
 .nav-link.router-link-active {
   color: #c4b5fd;
   font-weight: 600;
-  background: rgba(124, 58, 237, 0.2);
-  box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
+  background: rgba(124, 58, 237, 0.25);
+  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
 }
 
 /* Status indicator */
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index 9c8015e..95b94db 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -954,16 +954,16 @@ onUnmounted(() => {
 }
 .k-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
-  border-color: rgba(124, 58, 237, 0.2);
+  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: rgba(124, 58, 237, 0.35);
 }
 
 /* Type-specific card DNA */
-.k-card--note   { border-color: rgba(124, 58, 237, 0.12); }
-.k-card--task   { border-color: rgba(212, 160, 23, 0.10); }
-.k-card--person { border-color: rgba(16, 185, 129, 0.10); }
-.k-card--place  { border-color: rgba(245, 158, 11, 0.10); }
-.k-card--list   { border-color: rgba(56, 189, 248, 0.10); }
+.k-card--note   { border-color: rgba(124, 58, 237, 0.20); }
+.k-card--task   { border-color: rgba(212, 160, 23, 0.18); }
+.k-card--person { border-color: rgba(16, 185, 129, 0.18); }
+.k-card--place  { border-color: rgba(245, 158, 11, 0.18); }
+.k-card--list   { border-color: rgba(56, 189, 248, 0.18); }
 
 /* Top gradient bars */
 .k-card--note::before,