refactor(theme): DRY hardcoded violet values into CSS custom properties

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/AppHeader.vue

@@ -194,7 +194,7 @@ router.afterEach(() => {
   display: flex;
   align-items: center;
   gap: 2px;
-  background: rgba(124, 58, 237, 0.06);
+  background: var(--color-primary-faint);
   border-radius: 10px;
   padding: 3px;
 }
@@ -217,7 +217,7 @@ router.afterEach(() => {
 }
 .nav-link:hover {
   color: var(--color-text-secondary);
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 .nav-link.router-link-active {
   color: #c4b5fd;
@@ -387,7 +387,7 @@ router.afterEach(() => {
     border-radius: 8px;
   }
   .mobile-menu .nav-link.router-link-active {
-    background: rgba(124, 58, 237, 0.15);
+    background: var(--color-primary-wash);
     box-shadow: none;
   }
   .mobile-user .btn-logout {