Migrate UI styles to Zen theme tokens and preserve brand colors

src/components/common/Badge.module.css

@@ -47,12 +47,12 @@
 }
 
 .gray {
-  color: var(--zen-text-muted);
+  color: var(--zen-fg-muted);
   background: var(--zen-surface-sunken);
 }
 
 .gray .dot {
-  background: var(--zen-text-muted);
+  background: var(--zen-fg-muted);
 }
 
 :global([data-theme="dark"]) .good {

src/components/common/OverlayScrollArea.module.css

@@ -1,7 +1,7 @@
 .root {
-  --overlay-scrollbar-track: var(--zen-gray-50);
-  --overlay-scrollbar-thumb: var(--zen-gray-300);
-  --overlay-scrollbar-thumb-hover: var(--zen-gray-400);
+  --overlay-scrollbar-track: var(--zen-palette-50);
+  --overlay-scrollbar-thumb: var(--zen-palette-300);
+  --overlay-scrollbar-thumb-hover: var(--zen-palette-400);
   --overlay-scrollbar-viewport-padding-right: 0px;
   --overlay-scrollbar-vertical-margin-right: 2px;
 }
@@ -44,8 +44,8 @@
   content: "";
 }
 
-[data-theme='dark'] .root {
-  --overlay-scrollbar-track: var(--zen-gray-800);
-  --overlay-scrollbar-thumb: var(--zen-gray-600);
-  --overlay-scrollbar-thumb-hover: var(--zen-gray-500);
+[data-theme="dark"] .root {
+  --overlay-scrollbar-track: var(--zen-palette-800);
+  --overlay-scrollbar-thumb: var(--zen-palette-600);
+  --overlay-scrollbar-thumb-hover: var(--zen-palette-500);
 }

src/components/common/Panel.tsx

@@ -54,7 +54,7 @@ export function Panel({
       paddingX={{ base: '3', md: '6' }}
       border
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       position="relative"
       gap
       {...props}

src/components/common/SortableLabel.tsx

@@ -18,7 +18,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort
   const isActive = query.orderBy === sortKey;
   const isDescending = query.sortDescending === 'true';
   const direction = isActive ? (isDescending ? 'desc' : 'asc') : undefined;
-  const activeColor = 'var(--zen-text-primary)';
+  const activeColor = 'var(--zen-fg)';
 
   const getNextDirection = (): SortDirection => {
     if (!isActive) {
@@ -55,7 +55,7 @@ export function SortableLabel({ label, sortKey, defaultDirection = 'asc' }: Sort
           flexDirection: 'column',
           gap: 0,
           lineHeight: 0,
-          color: 'var(--zen-text-muted)',
+          color: 'var(--zen-fg-muted)',
           opacity: 0.8,
         }}
       >

src/components/metrics/ChangeLabel.tsx

@@ -12,7 +12,7 @@ const STYLES = {
     background: `var(--zen-status-error-bg)`,
   },
   neutral: {
-    color: `var(--zen-text-muted)`,
+    color: `var(--zen-fg-muted)`,
     background: `var(--zen-surface-raised)`,
   },
 };

src/components/metrics/MetricCard.tsx

@@ -51,7 +51,7 @@ export const MetricCard = ({
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="4"
     >

src/components/metrics/PerformanceCard.module.css

@@ -3,9 +3,9 @@
 }
 
 .card:hover {
-  box-shadow: 0 0 0 1px var(--zen-text-primary);
+  box-shadow: 0 0 0 1px var(--zen-fg);
 }
 
 .card.selected {
-  box-shadow: 0 0 0 1px var(--zen-text-primary);
+  box-shadow: 0 0 0 1px var(--zen-fg);
 }

src/components/metrics/PerformanceCard.tsx

@@ -61,7 +61,7 @@ export const PerformanceCard = ({
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="4"
       onClick={onClick}

src/components/property-data/PropertyDateChart.tsx

@@ -55,7 +55,7 @@ function InsightCard({ label, value, hint }: { label: string; value: string; hin
       paddingX="6"
       paddingY="4"
       borderRadius
-      backgroundColor="surface-base"
+      backgroundColor="surface"
       border
       gap="2"
       height="100%"

src/components/share/SharedSharesTable.tsx

@@ -5,7 +5,7 @@ import { useConfig, useMessages, useMobile } from '@/components/hooks';
 import { ExternalLink } from '@/components/icons';
 
 const desktopGridTemplateColumns = 'minmax(180px, 1fr) minmax(0, 2fr) auto';
-const rowBorder = '1px solid var(--zen-border-default)';
+const rowBorder = '1px solid var(--zen-border)';
 
 export interface ShareRow {
   id: string;