refactor: DRY calendar additions + define --color-surface in theme

- Define --color-surface in theme.css (light: #f0f0f8, dark: #1a1b22)
  — was used across 10+ components with no-op fallbacks; now properly
  defined alongside --color-bg and --color-bg-card
- Extract shared date formatters into utils/dateFormat.ts:
  fmtTime, fmtDateTime, fmtRelativeDateTime, fmtDayLabel, fmtCompact
- Replace duplicate inline formatters in CalendarView, HomeView
  (formatUpcomingTime), and KnowledgeView (formatEventDate)
- CalendarView: replace hardcoded rgba(99,102,241,0.4) hover colour
  with color-mix(in srgb, var(--color-primary) 40%, transparent);
  fix --color-input-bg fallback to use var(--color-bg); remove
  hardcoded hex fallbacks now that --color-surface is defined

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

frontend/src/views/KnowledgeView.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
 import { useRouter } from "vue-router";
 import { apiGet, transcribeAudio } from "@/api/client";
+import { fmtCompact } from "@/utils/dateFormat";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
 import { useVoiceRecorder } from "@/composables/useVoiceRecorder";
@@ -118,11 +119,7 @@ async function fetchTodayBar() {
   } catch { /* silent */ }
 }
 
-function formatEventDate(dtStr: string, allDay: boolean): string {
-  const d = new Date(dtStr);
-  if (allDay) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-  return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-}
+const formatEventDate = fmtCompact
 
 // ─── Graph panel ──────────────────────────────────────────────────────────────