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 {

frontend/src/components/BriefingSetupWizard.vue

@@ -247,7 +247,7 @@ async function finish() {
 }
 .wizard-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   transition: width 0.3s ease;
 }
 .wizard-step-label {
@@ -375,7 +375,7 @@ async function finish() {
 }
 .btn-wizard-primary {
   padding: 0.5rem 1.25rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;

frontend/src/components/ChatInputBar.vue

@@ -391,7 +391,7 @@ defineExpose({ focus, prefill })
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 50%;

frontend/src/components/EventSlideOver.vue

@@ -357,7 +357,7 @@ async function doDelete() {
   box-sizing: border-box;
   transition: border-color 0.15s;
 }
-.so-input:focus { outline: none; border-color: var(--color-primary, #7c3aed); }
+.so-input:focus { outline: none; border-color: var(--color-primary); }
 
 .so-textarea { resize: vertical; min-height: 5rem; font-family: inherit; }
 
@@ -376,8 +376,8 @@ async function doDelete() {
   transition: all 0.15s;
 }
 .toggle-btn.active {
-  background: var(--color-primary, #7c3aed);
-  border-color: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
+  border-color: var(--color-primary);
   color: #fff;
 }
 
@@ -403,7 +403,7 @@ async function doDelete() {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;

frontend/src/components/InlineAssistPanel.vue

@@ -94,10 +94,10 @@ const markers: Record<DiffLine["type"], string> = {
 
 /* ── Streaming ── */
 .iap-streaming {
-  border-color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
 }
 .iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 8%, var(--color-bg-secondary));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary));
 }
 
 .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   animation: iap-pulse 1.2s ease-in-out infinite;
 }
@@ -172,8 +172,8 @@ const markers: Record<DiffLine["type"], string> = {
   font-family: inherit;
 }
 .iap-btn-toggle:hover {
-  border-color: var(--color-primary, #7c3aed);
-  color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .iap-actions {

frontend/src/components/ShareDialog.vue

@@ -337,7 +337,7 @@ onMounted(async () => {
 
 .btn-add-share {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 6px;

frontend/src/components/TagPill.vue

@@ -40,7 +40,7 @@ defineEmits<{
 }
 .tag-pill:hover {
   color: var(--color-primary);
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 .dismiss {
   background: none;

frontend/src/components/ToolCallCard.vue

@@ -751,7 +751,7 @@ function closeEventSlideOver(changed = false) {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
 }
 
@@ -773,14 +773,14 @@ function closeEventSlideOver(changed = false) {
 }
 .tool-event-card.clickable { cursor: pointer; }
 .tool-event-card.clickable:hover {
-  border-color: var(--color-primary, #7c3aed);
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card, #16161a));
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card, #16161a));
 }
 .tool-event-card-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   margin-top: 3px;
 }

frontend/src/views/CalendarView.vue

@@ -435,7 +435,7 @@ const upcomingGrouped = computed(() => {
 }
 
 .btn-new-event {
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: 8px;
@@ -482,8 +482,8 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-button:hover),
 :deep(.fc-button-active) {
-  background: var(--color-primary, #7c3aed) !important;
-  border-color: var(--color-primary, #7c3aed) !important;
+  background: var(--color-primary) !important;
+  border-color: var(--color-primary) !important;
   color: #fff !important;
 }
 :deep(.fc-button:focus) { box-shadow: none !important; }
@@ -494,7 +494,7 @@ const upcomingGrouped = computed(() => {
   font-size: 0.82rem;
 }
 :deep(.fc-daygrid-day.fc-day-today) {
-  background: rgba(124, 58, 237, 0.08);
+  background: var(--color-primary-tint);
 }
 :deep(.fc-event) {
   border-radius: 4px;
@@ -505,7 +505,7 @@ const upcomingGrouped = computed(() => {
 }
 :deep(.fc-event-main) { color: #fff; }
 :deep(.fc-event:not([style*="background"])) {
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
 }
 :deep(.fc-daygrid-day-frame) { min-height: 5rem; }
 :deep(.fc-scrollgrid) { border-color: var(--color-border, #2a2b30); }
@@ -575,7 +575,7 @@ const upcomingGrouped = computed(() => {
 }
 .picker-month.active {
   background: rgba(124,58,237,0.22);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
   font-weight: 700;
 }
 
@@ -691,7 +691,7 @@ const upcomingGrouped = computed(() => {
 
 .popover-accent {
   height: 4px;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
 }
 
 .popover-content {
@@ -750,7 +750,7 @@ const upcomingGrouped = computed(() => {
 }
 .popover-btn:hover { opacity: 0.85; }
 .popover-btn--edit {
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   color: #fff;
 }
 .popover-btn--close {

frontend/src/views/HomeView.vue

@@ -605,7 +605,7 @@ function formatUpcomingTime(event: EventEntry): string {
   align-items: center;
   gap: 0.4rem;
   padding: 0.55rem 1.1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border-radius: var(--radius-sm);
   text-decoration: none;
@@ -892,14 +892,14 @@ function formatUpcomingTime(event: EventEntry): string {
   width: 100%;
 }
 .upcoming-event-card:hover {
-  border-color: var(--color-primary, #7c3aed);
-  background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card));
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card));
 }
 .upcoming-event-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--color-primary, #7c3aed);
+  background: var(--color-primary);
   flex-shrink: 0;
   margin-top: 4px;
 }

frontend/src/views/KnowledgeView.vue

@@ -721,7 +721,7 @@ onUnmounted(() => {
   font-size: 0.78rem;
 }
 .today-link {
-  color: var(--color-primary, #7c3aed);
+  color: var(--color-primary);
   text-decoration: none;
   font-weight: 500;
   opacity: 0.85;
@@ -777,7 +777,7 @@ onUnmounted(() => {
   border-radius: 8px;
   border: 1px solid rgba(124, 58, 237, 0.4);
   background: rgba(124, 58, 237, 0.12);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
   cursor: pointer;
   font-size: 0.85rem;
   font-weight: 500;
@@ -830,8 +830,8 @@ onUnmounted(() => {
 }
 .filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
 .filter-btn.active {
-  background: rgba(124, 58, 237, 0.15);
-  color: var(--color-primary, #a78bfa);
+  background: var(--color-primary-wash);
+  color: var(--color-primary);
   opacity: 1;
 }
 .filter-btn-label { flex: 1; }
@@ -848,7 +848,7 @@ onUnmounted(() => {
 }
 .filter-btn.active .filter-count {
   background: rgba(124, 58, 237, 0.2);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
 }
 .filter-tag { font-size: 0.78rem; }
 
@@ -893,7 +893,7 @@ onUnmounted(() => {
   outline: none;
   transition: border-color 0.15s;
 }
-.search-input:focus { border-color: var(--color-primary, #7c3aed); }
+.search-input:focus { border-color: var(--color-primary); }
 .sort-select {
   padding: 7px 10px;
   border-radius: 8px;
@@ -920,9 +920,9 @@ onUnmounted(() => {
 }
 .btn-graph:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }
 .btn-graph.active {
-  background: rgba(124, 58, 237, 0.15);
+  background: var(--color-primary-wash);
   border-color: rgba(124, 58, 237, 0.35);
-  color: var(--color-primary, #a78bfa);
+  color: var(--color-primary);
 }
 
 /* ── Card grid ───────────────────────────────────────────── */

frontend/src/views/NoteEditorView.vue

@@ -731,7 +731,7 @@ onUnmounted(() => assist.clearSelection());
   transition: border-color 0.15s;
 }
 .sb-select:focus, .sb-input:focus {
-  border-color: var(--color-primary, #7c3aed);
+  border-color: var(--color-primary);
 }
 
 /* Tag suggest row inside sidebar */

frontend/src/views/NoteViewerView.vue

@@ -350,17 +350,17 @@ async function convertToTask() {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
+  box-shadow: var(--glow-cta-hover);
   opacity: 0.95;
   color: #fff;
 }

frontend/src/views/ProjectView.vue

@@ -676,17 +676,17 @@ async function confirmDelete() {
   align-items: center;
   gap: 0.35rem;
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
-.btn-workspace:hover { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42); opacity: 0.95; color: #fff; }
+.btn-workspace:hover { box-shadow: var(--glow-cta-hover); opacity: 0.95; color: #fff; }
 
 .btn-share {
   padding: 0.4rem 0.8rem;
@@ -857,7 +857,7 @@ async function confirmDelete() {
 
 .btn-save-panel {
   padding: 0.45rem 0.9rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);
@@ -866,7 +866,7 @@ async function confirmDelete() {
   font-weight: 600;
   font-family: inherit;
   width: 100%;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
+  box-shadow: var(--glow-soft);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); opacity: 0.95; }

frontend/src/views/SettingsView.vue

@@ -3489,7 +3489,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
   }
   .sidebar-item.active {
     border-bottom-color: var(--color-primary);
-    background: rgba(124, 58, 237, 0.08);
+    background: var(--color-primary-tint);
   }
   .settings-grid {
     grid-template-columns: 1fr;

frontend/src/views/TaskViewerView.vue

@@ -480,23 +480,23 @@ const subTaskProgress = computed(() => {
   padding: 0.45rem 1.1rem;
   border: none;
   border-radius: var(--radius-sm);
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
-  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
+  box-shadow: var(--glow-cta);
   transition: box-shadow 0.15s, opacity 0.15s;
 }
 .btn-edit:hover {
-  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
+  box-shadow: var(--glow-cta-hover);
   opacity: 0.95;
   color: #fff;
 }
 .btn-advance {
   padding: 0.45rem 1rem;
-  background: linear-gradient(135deg, #7c3aed, #5b21b6);
+  background: var(--gradient-cta);
   color: #fff;
   border: none;
   border-radius: var(--radius-sm);