diff --git a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
index 54f9bd27..19923775 100644
--- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
+++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
@@ -113,31 +113,31 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
             <AreaChart data={time_series}>
               <CartesianGrid
                 strokeDasharray="3 3"
-                stroke="hsl(var(--border))"
+                stroke="var(--color-border)"
                 vertical={false}
               />
               <XAxis
                 dataKey="date"
-                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
                 tickLine={false}
-                axisLine={{ stroke: 'hsl(var(--border))' }}
+                axisLine={{ stroke: 'var(--color-border)' }}
                 tickFormatter={(value) => {
                   const d = new Date(String(value))
                   return `${d.getMonth() + 1}/${d.getDate()}`
                 }}
               />
               <YAxis
-                tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 11 }}
+                tick={{ fill: 'var(--color-muted-foreground)', fontSize: 11 }}
                 tickLine={false}
                 axisLine={false}
                 allowDecimals={false}
               />
               <Tooltip
                 contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
+                  backgroundColor: 'var(--color-card)',
+                  border: '1px solid var(--color-border)',
                   borderRadius: '8px',
-                  color: 'hsl(var(--foreground))',
+                  color: 'var(--color-foreground)',
                   fontSize: '13px',
                 }}
                 labelFormatter={(value) => {
diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index 88c77695..310a2488 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -45,7 +45,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
                   {session.stepNumber && session.totalSteps
                     ? `Step ${session.stepNumber} of ${session.totalSteps}`
                     : 'In progress'}
-                  <span className="mx-1.5 text-[hsl(var(--text-dimmed))]">&middot;</span>
+                  <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
                   <span className="font-label text-[0.625rem]">{session.timeAgo}</span>
                 </div>
               </div>
diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
index 506a6018..f98de76b 100644
--- a/frontend/src/components/dashboard/QuickStats.tsx
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -35,7 +35,7 @@ export function QuickStats({ stats }: QuickStatsProps) {
             {stat.value}
           </p>
           {stat.meta && (
-            <p className="mt-0.5 text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{stat.meta}</p>
+            <p className="mt-0.5 text-[0.6875rem] text-[var(--text-dimmed)]">{stat.meta}</p>
           )}
         </div>
       ))}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index 52df7dea..aa49a20d 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -64,7 +64,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
             </span>
 
             {/* Time */}
-            <span className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+            <span className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
               {session.timeAgo}
             </span>
           </Link>
diff --git a/frontend/src/components/dashboard/TreeListItem.tsx b/frontend/src/components/dashboard/TreeListItem.tsx
index 22d80a39..5561e7a3 100644
--- a/frontend/src/components/dashboard/TreeListItem.tsx
+++ b/frontend/src/components/dashboard/TreeListItem.tsx
@@ -33,7 +33,7 @@ export function TreeListItem({
   return (
     <div
       onClick={() => navigate(getTreeNavigatePath(id, treeType))}
-      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[hsl(var(--sidebar-hover))]"
+      className="group grid cursor-pointer items-center gap-3 rounded-lg border border-transparent bg-card px-4 py-3 transition-colors hover:border-border hover:bg-[var(--sidebar-hover)]"
       style={{ gridTemplateColumns: '40px 1fr 130px 80px 100px 40px' }}
     >
       {/* Icon box */}
@@ -75,7 +75,7 @@ export function TreeListItem({
       </div>
 
       {/* Updated */}
-      <div className="text-right text-[0.6875rem] text-[hsl(var(--text-dimmed))]">
+      <div className="text-right text-[0.6875rem] text-[var(--text-dimmed)]">
         {timeAgo}
       </div>
 
diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx
index 4f46e96b..db289cfe 100644
--- a/frontend/src/components/dashboard/WeeklyCalendar.tsx
+++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx
@@ -65,7 +65,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
               </div>
               <div className="flex-1 overflow-y-auto p-1.5 space-y-1">
                 {dayEvents.length === 0 ? (
-                  <p className="text-[0.625rem] text-[hsl(var(--text-dimmed))] text-center py-2">No events</p>
+                  <p className="text-[0.625rem] text-[var(--text-dimmed)] text-center py-2">No events</p>
                 ) : (
                   dayEvents.map(event => (
                     <div
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index ced500dc..d56ddcfb 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -113,7 +113,7 @@ export function AppLayout() {
             onClick={() => setMobileMenuOpen(false)}
             aria-hidden="true"
           />
-          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[hsl(var(--sidebar-bg))] shadow-2xl animate-slide-in-left">
+          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[var(--sidebar-bg)] shadow-2xl animate-slide-in-left">
             <div className="flex h-14 items-center justify-between border-b border-border px-4">
               <Link to="/" className="flex items-center gap-2.5">
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
@@ -156,8 +156,8 @@ export function AppLayout() {
                       className={cn(
                         'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                         isActive
-                          ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                          : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                          ? 'bg-[var(--sidebar-active)] text-foreground'
+                          : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                       )}
                     >
                       <Icon size={18} />
@@ -171,7 +171,7 @@ export function AppLayout() {
               <div className="mt-3 border-t border-border pt-3">
                 <button
                   onClick={handleLogout}
-                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
+                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
                 >
                   <LogOut size={18} />
                   Logout
diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx
index 26da8534..10006b0c 100644
--- a/frontend/src/components/layout/NavItem.tsx
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -41,8 +41,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
         className={cn(
           'group relative flex items-center justify-center rounded-lg p-2 transition-all duration-120',
           isActive
-            ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+            ? 'bg-[var(--sidebar-active)] text-foreground'
+            : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
         )}
         title={label}
       >
@@ -68,9 +68,9 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
           'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-120',
           isActive
             ? isParentDimmed
-              ? 'bg-[hsl(var(--sidebar-active))]/50 text-foreground/70'
-              : 'bg-[hsl(var(--sidebar-active))] text-foreground'
-            : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+              ? 'bg-[var(--sidebar-active)]/50 text-foreground/70'
+              : 'bg-[var(--sidebar-active)] text-foreground'
+            : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
         )}
       >
         {/* Active indicator bar */}
@@ -110,8 +110,8 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
                 className={cn(
                   'flex items-center gap-2 rounded-lg pl-9 pr-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
                   childActive
-                    ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                    : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                    ? 'bg-[var(--sidebar-active)] text-foreground'
+                    : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                 )}
               >
                 <span className="truncate">{child.label}</span>
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index a395a1a7..1d431509 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -141,7 +141,7 @@ export function Sidebar() {
         <button
           onClick={toggleSidebar}
           className={cn(
-            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors",
+            "flex w-full items-center rounded-lg text-[0.8125rem] font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors",
             sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2"
           )}
           title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
diff --git a/frontend/src/components/sidebar/CategoryList.tsx b/frontend/src/components/sidebar/CategoryList.tsx
index 81dcb97f..cbb37e8f 100644
--- a/frontend/src/components/sidebar/CategoryList.tsx
+++ b/frontend/src/components/sidebar/CategoryList.tsx
@@ -38,8 +38,8 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
             className={cn(
               'flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-sm transition-colors',
               activeId === cat.id
-                ? 'bg-[hsl(var(--sidebar-active))] text-foreground'
-                : 'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                ? 'bg-[var(--sidebar-active)] text-foreground'
+                : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
             )}
           >
             <span
@@ -47,13 +47,13 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
               style={{ backgroundColor: cat.color }}
             />
             <span className="flex-1 truncate text-left">{cat.name}</span>
-            <span className="font-label text-[0.6875rem] text-[hsl(var(--text-dimmed))]">{cat.count}</span>
+            <span className="font-label text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
           </button>
         ))}
         {hasMore && (
           <button
             onClick={() => setExpanded(v => !v)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground transition-colors"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
           >
             {expanded ? (
               <>
diff --git a/frontend/src/components/sidebar/PinnedFlowsSection.tsx b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
index c102700c..187f9d6a 100644
--- a/frontend/src/components/sidebar/PinnedFlowsSection.tsx
+++ b/frontend/src/components/sidebar/PinnedFlowsSection.tsx
@@ -70,7 +70,7 @@ export function PinnedFlowsSection({ flows, onUnpin }: PinnedFlowsSectionProps)
                   }}
                   className={cn(
                     'group flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
-                    'text-muted-foreground hover:bg-[hsl(var(--sidebar-hover))] hover:text-foreground'
+                    'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                   )}
                   title={`${flow.tree_name} (right-click to unpin)`}
                 >
diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 571daaa3..32330b9b 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -139,7 +139,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
         proOptions={{ hideAttribution: true }}
         className="dark bg-accent/30"
       >
-        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="oklch(0.63 0.02 260 / 0.25)" />
         <Controls showInteractive={false} className="bg-card! border-border! shadow-lg!" />
         {minimapVisible && (
           <MiniMap
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index 87aba54c..56243d7d 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -691,7 +691,7 @@ export function TreeCanvas() {
       style={{
         // Subtle dot grid background
         backgroundImage:
-          'radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)',
+          'radial-gradient(circle, var(--color-border) 1px, transparent 1px)',
         backgroundSize: '24px 24px',
       }}
     >
diff --git a/frontend/src/components/tree-editor/useTreeLayout.ts b/frontend/src/components/tree-editor/useTreeLayout.ts
index eda895de..5dd78c7d 100644
--- a/frontend/src/components/tree-editor/useTreeLayout.ts
+++ b/frontend/src/components/tree-editor/useTreeLayout.ts
@@ -155,10 +155,10 @@ export function useTreeLayout(): UseTreeLayoutResult {
             target: child.id,
             type: 'smoothstep',
             label: edgeLabel,
-            labelStyle: { fill: 'hsl(var(--muted-foreground))', fontSize: 11 },
-            labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.9 },
+            labelStyle: { fill: 'var(--color-muted-foreground)', fontSize: 11 },
+            labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.9 },
             labelBgPadding: [4, 2] as [number, number],
-            style: { stroke: 'hsl(var(--border))' },
+            style: { stroke: 'var(--color-border)' },
           })
 
           walk(child, node.id)
@@ -183,17 +183,17 @@ export function useTreeLayout(): UseTreeLayoutResult {
             type: 'smoothstep',
             animated: true,
             label: ref.label ? truncateLabel(ref.label) : undefined,
-            labelStyle: { fill: 'hsl(var(--primary))', fontSize: 10, fontWeight: 500 },
-            labelBgStyle: { fill: 'hsl(var(--card))', fillOpacity: 0.95 },
+            labelStyle: { fill: 'var(--color-primary)', fontSize: 10, fontWeight: 500 },
+            labelBgStyle: { fill: 'var(--color-card)', fillOpacity: 0.95 },
             labelBgPadding: [4, 2] as [number, number],
             style: {
-              stroke: 'hsl(var(--primary))',
+              stroke: 'var(--color-primary)',
               strokeWidth: 2,
               strokeDasharray: '6 3',
             },
             markerEnd: {
               type: 'arrowclosed' as const,
-              color: 'hsl(var(--primary))',
+              color: 'var(--color-primary)',
               width: 16,
               height: 16,
             },
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 75b70194..bdd0bbe7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,120 +1,224 @@
 @import 'tailwindcss';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-brand-gradient-from: #06b6d4;
-  --color-brand-gradient-to: #22d3ee;
+  /* ── Brand tokens ─────────────────────────────────── */
+  --color-brand-gradient-from: oklch(0.65 0.13 195);   /* #06b6d4 cyan-500 */
+  --color-brand-gradient-to: oklch(0.74 0.12 195);     /* #22d3ee cyan-400 */
+  --color-brand-dark: oklch(0.145 0.013 264);           /* #101114 */
+  --color-brand-dark-card: oklch(0.17 0.01 264);        /* #14161a */
+  --color-brand-dark-surface: oklch(0.17 0.01 264);     /* #14161a */
+  --color-brand-text-primary: oklch(0.98 0.005 264);    /* #f8fafc */
+  --color-brand-text-secondary: oklch(0.63 0.02 260);   /* #8891a0 */
+  --color-brand-text-muted: oklch(0.45 0.015 260);      /* #5a6170 */
+  --color-brand-border: oklch(0.35 0 0 / 0.06);
 
-  --color-brand-dark: #101114;
-  --color-brand-dark-card: #14161a;
-  --color-brand-dark-surface: #14161a;
+  /* ── Semantic color tokens (OKLCH, direct values) ── */
+  --color-background: oklch(0.145 0.013 264);           /* dark charcoal #101114 */
+  --color-foreground: oklch(0.98 0.005 264);            /* near-white #f8fafc */
 
-  --color-brand-text-primary: #f8fafc;
-  --color-brand-text-secondary: #8891a0;
-  --color-brand-text-muted: #5a6170;
+  --color-card: oklch(0.178 0.008 264);                 /* #17191d */
+  --color-card-foreground: oklch(0.98 0.005 264);
 
-  --color-brand-border: rgba(255, 255, 255, 0.06);
+  --color-popover: oklch(0.178 0.008 264);
+  --color-popover-foreground: oklch(0.98 0.005 264);
 
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
+  --color-primary: oklch(0.65 0.13 195);                /* cyan #1ea8c4 */
+  --color-primary-foreground: oklch(0.145 0.013 264);   /* dark bg for contrast */
 
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: oklch(0.22 0.008 264);             /* #212329 */
+  --color-secondary-foreground: oklch(0.98 0.005 264);
 
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: oklch(0.22 0.008 264);
+  --color-muted-foreground: oklch(0.63 0.02 260);       /* #8891a0 */
 
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-accent: oklch(0.22 0.008 264);
+  --color-accent-foreground: oklch(0.98 0.005 264);
 
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-destructive: oklch(0.55 0.22 15);             /* rose #e63359 */
+  --color-destructive-foreground: oklch(0.98 0.005 264);
 
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-border: oklch(0.22 0.008 264);
+  --color-input: oklch(0.22 0.008 264);
+  --color-ring: oklch(0.65 0.13 195);                   /* cyan, matches primary */
 
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  /* ── Radii ───────────────────────────────────────── */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
 
+  /* ── Fonts ───────────────────────────────────────── */
   --font-sans:
-    IBM Plex Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, sans-serif;
-  --font-heading: Bricolage Grotesque, system-ui, sans-serif;
-  --font-label: JetBrains Mono, monospace;
+  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
+  --font-label: 'JetBrains Mono', monospace;
 
+  /* ── Gradients ───────────────────────────────────── */
   --background-image-gradient-brand: linear-gradient(
     135deg,
-    #06b6d4 0%,
-    #22d3ee 100%
+    oklch(0.65 0.13 195) 0%,
+    oklch(0.74 0.12 195) 100%
   );
   --background-image-gradient-brand-hover: linear-gradient(
     135deg,
-    #0891b2 0%,
-    #06b6d4 100%
+    oklch(0.58 0.12 195) 0%,
+    oklch(0.65 0.13 195) 100%
   );
-}
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+  /* ── Animations (keyframes inside @theme) ────────── */
+  --animate-fade-in: fade-in 200ms ease-out;
+  --animate-fade-in-up: fade-in-up 200ms ease-out;
+  --animate-slide-in-left: slide-in-from-left 200ms ease-out;
+  --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out;
+  --animate-scale-in: scale-in 150ms ease-out;
+  --animate-slide-down: slideDown 400ms ease-out;
+  --animate-slide-in-right: slideInRight 300ms ease-out;
+  --animate-fade-in-right: fadeInRight 400ms ease-out;
+  --animate-breathe-glow: breatheGlow 3s ease-in-out infinite alternate;
+  --animate-bell-wobble: bellWobble 500ms ease-in-out;
+  --animate-fade: fadeIn 300ms ease forwards;
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes slideDown {
+    from { transform: translateY(-100%); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  @keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes fadeInRight {
+    from { transform: translateX(30px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes breatheGlow {
+    from {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 0 20px oklch(0.65 0.13 195 / 0.04);
+    }
+    to {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.3),
+        0 0 30px oklch(0.65 0.13 195 / 0.12);
+    }
+  }
+
+  @keyframes bellWobble {
+    0% { transform: rotate(0deg); }
+    20% { transform: rotate(8deg); }
+    40% { transform: rotate(-6deg); }
+    60% { transform: rotate(4deg); }
+    80% { transform: rotate(-2deg); }
+    100% { transform: rotate(0deg); }
   }
 }
 
-@utility animate-fade-in {
-  animation: fade-in 200ms ease-out;
+/* ── Root CSS variables (non-theme: glass, shadows, layout) ── */
+:root {
+  /* App Shell tokens */
+  --sidebar-w: 260px;
+  --sidebar-bg: oklch(0.13 0.013 264);
+  --sidebar-hover: var(--color-secondary);
+  --sidebar-active: oklch(0.65 0.13 195 / 0.10);
+  --text-dimmed: oklch(0.42 0.015 260);
+
+  /* Glass system */
+  --glass-bg: oklch(0.16 0.01 264 / 0.55);
+  --glass-bg-hover: oklch(0.16 0.01 264 / 0.7);
+  --glass-border: oklch(1 0 0 / 0.06);
+  --glass-border-hover: oklch(1 0 0 / 0.12);
+  --glass-blur: blur(16px);
+  --glass-blur-strong: blur(20px);
+  --glass-blur-light: blur(12px);
+
+  /* Shadow system */
+  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px oklch(1 0 0 / 0.08);
+  --shadow-cyan-glow: 0 8px 32px oklch(0.65 0.13 195 / 0.08);
+
+  /* Easing */
+  --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-@utility animate-fade-in-up {
-  animation: fade-in-up 200ms ease-out;
-}
-
-@utility animate-slide-in-left {
-  animation: slide-in-from-left 200ms ease-out;
-}
-
-@utility animate-slide-in-bottom {
-  animation: slide-in-from-bottom 200ms ease-out;
-}
-
-@utility animate-scale-in {
-  animation: scale-in 150ms ease-out;
+/* ── Base styles ─────────────────────────────────────── */
+@layer base {
+  * {
+    @apply border-border;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 9999px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-muted-foreground);
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
 }
 
+/* ── Custom utilities ────────────────────────────────── */
 @utility btn-press {
-  /* Button press feedback */
   @apply active:scale-[0.98] transition-transform;
 }
 
 @utility text-gradient-brand {
-  /* Brand gradient text */
   @apply bg-gradient-brand bg-clip-text text-transparent;
 }
 
 @utility glass-card {
-  /* Glass card — interactive with hover lift */
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
@@ -133,7 +237,6 @@
 }
 
 @utility glass-card-static {
-  /* Glass card — static, no hover transform */
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
@@ -143,234 +246,30 @@
 }
 
 @utility active-glow {
-  /* Breathing glow for highlighted stat cards */
   animation: breatheGlow 3s ease-in-out infinite alternate;
 }
+
 @utility rdp-custom {
   @apply text-foreground;
-
-  & .rdp-month {
-    @apply w-full;
-  }
-
-  & .rdp-caption {
-    @apply flex justify-center items-center mb-4;
-  }
-
-  & .rdp-caption_label {
-    @apply text-sm font-medium;
-  }
-
-  & .rdp-nav {
-    @apply flex gap-1;
-  }
-
-  & .rdp-nav_button {
-    @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
-  }
-
-  & .rdp-table {
-    @apply w-full border-collapse;
-  }
-
-  & .rdp-head_cell {
-    @apply text-muted-foreground font-normal text-xs;
-  }
-
-  & .rdp-cell {
-    @apply text-center text-sm p-0;
-  }
-
-  & .rdp-day {
-    @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
-  }
-
-  & .rdp-day_selected {
-    @apply bg-primary text-primary-foreground hover:bg-primary/90;
-  }
-
-  & .rdp-day_today {
-    @apply bg-accent text-accent-foreground;
-  }
-
-  & .rdp-day_outside {
-    @apply text-muted-foreground opacity-50;
-  }
-
-  & .rdp-day_disabled {
-    @apply text-muted-foreground opacity-50;
-  }
-
-  & .rdp-day_range_middle {
-    @apply bg-accent text-accent-foreground;
-  }
-
-  & .rdp-day_hidden {
-    @apply invisible;
-  }
-}
-@utility rdp-month {
-  .rdp-custom & {
-    @apply w-full;
-  }
-}
-@utility rdp-caption {
-  .rdp-custom & {
-    @apply flex justify-center items-center mb-4;
-  }
-}
-@utility rdp-caption_label {
-  .rdp-custom & {
-    @apply text-sm font-medium;
-  }
-}
-@utility rdp-nav {
-  .rdp-custom & {
-    @apply flex gap-1;
-  }
-}
-@utility rdp-nav_button {
-  .rdp-custom & {
-    @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100;
-  }
-}
-@utility rdp-table {
-  .rdp-custom & {
-    @apply w-full border-collapse;
-  }
-}
-@utility rdp-head_cell {
-  .rdp-custom & {
-    @apply text-muted-foreground font-normal text-xs;
-  }
-}
-@utility rdp-cell {
-  .rdp-custom & {
-    @apply text-center text-sm p-0;
-  }
-}
-@utility rdp-day {
-  .rdp-custom & {
-    @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors;
-  }
-}
-@utility rdp-day_selected {
-  .rdp-custom & {
-    @apply bg-primary text-primary-foreground hover:bg-primary/90;
-  }
-}
-@utility rdp-day_today {
-  .rdp-custom & {
-    @apply bg-accent text-accent-foreground;
-  }
-}
-@utility rdp-day_outside {
-  .rdp-custom & {
-    @apply text-muted-foreground opacity-50;
-  }
-}
-@utility rdp-day_disabled {
-  .rdp-custom & {
-    @apply text-muted-foreground opacity-50;
-  }
-}
-@utility rdp-day_range_middle {
-  .rdp-custom & {
-    @apply bg-accent text-accent-foreground;
-  }
-}
-@utility rdp-day_hidden {
-  .rdp-custom & {
-    @apply invisible;
-  }
-}
-
-@layer base {
-  :root {
-    /* ResolutionFlow Dark Theme — Slate & Ice Modern */
-    --background: 228 12% 7%;
-    --foreground: 210 40% 98%;
-    --card: 220 10% 10%;
-    --card-foreground: 210 40% 98%;
-    --popover: 220 10% 10%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 187 72% 43%;
-    --primary-foreground: 228 12% 7%;
-    --secondary: 220 8% 14%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 220 8% 14%;
-    --muted-foreground: 215 10% 58%;
-    --accent: 220 8% 14%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 350 81% 55%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 220 8% 14%;
-    --input: 220 8% 14%;
-    --ring: 187 72% 43%;
-    --radius: 0.75rem;
-
-    /* App Shell tokens */
-    --sidebar-w: 260px;
-    --sidebar-bg: 228 12% 6%;
-    --sidebar-hover: 220 8% 14%;
-    --sidebar-active: 187 72% 43% / 0.10;
-    --border-subtle: 220 8% 12%;
-    --text-dimmed: 218 10% 39%;
-
-    /* Glass system */
-    --glass-bg: rgba(24, 26, 31, 0.55);
-    --glass-bg-hover: rgba(24, 26, 31, 0.7);
-    --glass-border: rgba(255, 255, 255, 0.06);
-    --glass-border-hover: rgba(255, 255, 255, 0.12);
-    --glass-blur: blur(16px);
-    --glass-blur-strong: blur(20px);
-    --glass-blur-light: blur(12px);
-
-    /* Shadow system */
-    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
-    --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
-    --shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08);
-
-    /* Easing */
-    --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
-  }
-  *::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  *::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--border));
-    border-radius: 9999px;
-  }
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground));
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-  }
+  & .rdp-month { @apply w-full; }
+  & .rdp-caption { @apply flex justify-center items-center mb-4; }
+  & .rdp-caption_label { @apply text-sm font-medium; }
+  & .rdp-nav { @apply flex gap-1; }
+  & .rdp-nav_button { @apply h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100; }
+  & .rdp-table { @apply w-full border-collapse; }
+  & .rdp-head_cell { @apply text-muted-foreground font-normal text-xs; }
+  & .rdp-cell { @apply text-center text-sm p-0; }
+  & .rdp-day { @apply h-9 w-9 p-0 font-normal hover:bg-accent rounded-md transition-colors; }
+  & .rdp-day_selected { @apply bg-primary text-primary-foreground hover:bg-primary/90; }
+  & .rdp-day_today { @apply bg-accent text-accent-foreground; }
+  & .rdp-day_outside { @apply text-muted-foreground opacity-50; }
+  & .rdp-day_disabled { @apply text-muted-foreground opacity-50; }
+  & .rdp-day_range_middle { @apply bg-accent text-accent-foreground; }
+  & .rdp-day_hidden { @apply invisible; }
 }
 
+/* ── Layout utilities ────────────────────────────────── */
 @layer utilities {
-  /* App Shell Grid Layout */
   .app-shell {
     display: grid;
     grid-template-columns: var(--sidebar-w) 1fr;
@@ -399,228 +298,94 @@
     overflow-y: auto;
   }
 
-  /* Mobile: single column */
   @media (max-width: 767px) {
     .app-shell {
       grid-template-columns: 1fr;
     }
   }
 
-  /* Staggered fade-in for page sections */
+  /* Staggered fade-in helper */
   .fade-in {
     animation: fadeIn 0.3s ease forwards;
   }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  /* Animations */
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(4px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slide-in-from-left {
-    from {
-      transform: translateX(-100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slide-in-from-bottom {
-    from {
-      opacity: 0;
-      transform: translateY(16px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes scale-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes slideDown {
-    from {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slideInRight {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes fadeInRight {
-    from {
-      transform: translateX(30px);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes breatheGlow {
-    from {
-      box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.3),
-        0 0 20px rgba(6, 182, 212, 0.04);
-    }
-    to {
-      box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.3),
-        0 0 30px rgba(6, 182, 212, 0.12);
-    }
-  }
-
-  @keyframes bellWobble {
-    0% {
-      transform: rotate(0deg);
-    }
-    20% {
-      transform: rotate(8deg);
-    }
-    40% {
-      transform: rotate(-6deg);
-    }
-    60% {
-      transform: rotate(4deg);
-    }
-    80% {
-      transform: rotate(-2deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
 }
 
-@layer utilities {
-  /* Sonner Toast Customization — outside @layer for higher specificity */
-  [data-sonner-toast] {
-    background-color: hsl(var(--card)) !important;
-    color: hsl(var(--card-foreground)) !important;
-    border: 1px solid hsl(var(--border)) !important;
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
-    border-radius: 0.75rem;
-    font-family: 'IBM Plex Sans', system-ui, sans-serif;
-  }
-
-  [data-sonner-toast] [data-title] {
-    font-family: 'IBM Plex Sans', system-ui, sans-serif;
-    font-weight: 600;
-  }
-
-  [data-sonner-toast][data-type='success'] {
-    border-color: rgba(52, 211, 153, 0.3) !important;
-  }
-  [data-sonner-toast][data-type='success'] [data-icon] {
-    color: #34d399;
-  }
-
-  [data-sonner-toast][data-type='error'] {
-    border-color: rgba(248, 113, 113, 0.3) !important;
-  }
-  [data-sonner-toast][data-type='error'] [data-icon] {
-    color: #f87171;
-  }
-
-  [data-sonner-toast][data-type='info'] {
-    border-color: hsl(var(--border)) !important;
-  }
-  [data-sonner-toast][data-type='info'] [data-icon] {
-    color: hsl(var(--muted-foreground));
-  }
-
-  [data-sonner-toast][data-type='warning'] {
-    border-color: rgba(251, 191, 36, 0.3) !important;
-  }
-  [data-sonner-toast][data-type='warning'] [data-icon] {
-    color: #fbbf24;
-  }
-
-  [data-sonner-toast] [data-close-button] {
-    color: hsl(var(--muted-foreground));
-    border-radius: 0.375rem;
-    transition:
-      color 150ms,
-      background-color 150ms;
-  }
-  [data-sonner-toast] [data-close-button]:hover {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-
-  /* React Day Picker Customization */
+/* ── Sonner toast overrides ──────────────────────────── */
+[data-sonner-toast] {
+  background-color: var(--color-card) !important;
+  color: var(--color-card-foreground) !important;
+  border: 1px solid var(--color-border) !important;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
+  border-radius: 0.75rem;
+  font-family: var(--font-sans);
 }
 
-/* React Flow dark theme overrides */
+[data-sonner-toast] [data-title] {
+  font-family: var(--font-sans);
+  font-weight: 600;
+}
+
+[data-sonner-toast][data-type='success'] {
+  border-color: oklch(0.76 0.15 163 / 0.3) !important;
+}
+[data-sonner-toast][data-type='success'] [data-icon] {
+  color: oklch(0.76 0.15 163);
+}
+
+[data-sonner-toast][data-type='error'] {
+  border-color: oklch(0.7 0.16 22 / 0.3) !important;
+}
+[data-sonner-toast][data-type='error'] [data-icon] {
+  color: oklch(0.7 0.16 22);
+}
+
+[data-sonner-toast][data-type='info'] {
+  border-color: var(--color-border) !important;
+}
+[data-sonner-toast][data-type='info'] [data-icon] {
+  color: var(--color-muted-foreground);
+}
+
+[data-sonner-toast][data-type='warning'] {
+  border-color: oklch(0.82 0.16 85 / 0.3) !important;
+}
+[data-sonner-toast][data-type='warning'] [data-icon] {
+  color: oklch(0.82 0.16 85);
+}
+
+[data-sonner-toast] [data-close-button] {
+  color: var(--color-muted-foreground);
+  border-radius: 0.375rem;
+  transition: color 150ms, background-color 150ms;
+}
+[data-sonner-toast] [data-close-button]:hover {
+  background-color: var(--color-accent);
+  color: var(--color-accent-foreground);
+}
+
+/* ── React Flow dark theme overrides ─────────────────── */
 .react-flow__background {
   background-color: transparent !important;
 }
 
 .react-flow__controls {
-  background-color: hsl(var(--card)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
   overflow: hidden;
 }
 
 .react-flow__controls-button {
-  background-color: hsl(var(--card)) !important;
-  border-color: hsl(var(--border)) !important;
-  fill: hsl(var(--muted-foreground)) !important;
-  color: hsl(var(--muted-foreground)) !important;
+  background-color: var(--color-card) !important;
+  border-color: var(--color-border) !important;
+  fill: var(--color-muted-foreground) !important;
+  color: var(--color-muted-foreground) !important;
 }
 
 .react-flow__controls-button:hover {
-  background-color: hsl(var(--accent)) !important;
-  fill: hsl(var(--foreground)) !important;
+  background-color: var(--color-accent) !important;
+  fill: var(--color-foreground) !important;
 }
 
 .react-flow__controls-button svg {
@@ -628,34 +393,32 @@
 }
 
 .react-flow__minimap {
-  background-color: hsl(var(--card)) !important;
-  border: 1px solid hsl(var(--border)) !important;
+  background-color: var(--color-card) !important;
+  border: 1px solid var(--color-border) !important;
   border-radius: 0.75rem !important;
 }
 
 .react-flow__edge-path {
-  stroke: hsl(var(--border));
+  stroke: var(--color-border);
 }
 
 .react-flow__edge-text {
-  fill: hsl(var(--muted-foreground));
+  fill: var(--color-muted-foreground);
 }
 
 .react-flow__edge-textbg {
-  fill: hsl(var(--card));
+  fill: var(--color-card);
 }
 
-/* Hide default React Flow attribution */
 .react-flow__attribution {
   display: none;
 }
 
-/* Handle styles */
 .react-flow__handle {
-  background-color: hsl(var(--border));
+  background-color: var(--color-border);
 }
 
-/* Accessibility: Reduce motion for users who prefer it */
+/* ── Accessibility: Reduce motion ────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/frontend/src/pages/MyAnalyticsPage.tsx b/frontend/src/pages/MyAnalyticsPage.tsx
index 5573d6cf..28460d55 100644
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -134,31 +134,31 @@ export default function MyAnalyticsPage() {
           <AreaChart data={time_series}>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
+              stroke="var(--color-border)"
               vertical={false}
             />
             <XAxis
               dataKey="date"
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
-              axisLine={{ stroke: 'hsl(var(--border))' }}
+              axisLine={{ stroke: 'var(--color-border)' }}
               tickFormatter={(value: string) => {
                 const d = new Date(value)
                 return `${d.getMonth() + 1}/${d.getDate()}`
               }}
             />
             <YAxis
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
               axisLine={false}
               allowDecimals={false}
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'hsl(var(--card))',
-                border: '1px solid hsl(var(--border))',
+                backgroundColor: 'var(--color-card)',
+                border: '1px solid var(--color-border)',
                 borderRadius: '8px',
-                color: 'hsl(var(--foreground))',
+                color: 'var(--color-foreground)',
                 fontSize: '13px',
               }}
               labelFormatter={(value) => {
diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index 096582d6..d70165d5 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -329,7 +329,7 @@ export default function SurveyPage() {
             <span className="hidden sm:inline">Resolution<span className="text-gradient-brand">Flow</span></span>
           </a>
           <div className="flex flex-1 items-center gap-2 sm:gap-2.5" style={{ maxWidth: '280px' }}>
-            <div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'hsl(var(--border))' }}>
+            <div className="flex-1 h-[3px] rounded-full overflow-hidden" style={{ background: 'var(--color-border)' }}>
               <div className="h-full rounded-full bg-gradient-brand transition-[width] duration-500" style={{ width: `${progressPct}%` }} />
             </div>
             <span className="text-[11px] font-label text-muted-foreground whitespace-nowrap tabular-nums">{answeredCount}/{TOTAL_QUESTIONS}</span>
@@ -376,7 +376,7 @@ export default function SurveyPage() {
                 key={i}
                 className="flex-1 h-1 sm:h-[3px] rounded-full transition-colors duration-300"
                 style={{
-                  background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'hsl(var(--border))',
+                  background: i < currentSlide ? '#34d399' : i === currentSlide ? 'linear-gradient(90deg, #06b6d4, #22d3ee)' : 'var(--color-border)',
                 }}
               />
             ))}
@@ -551,7 +551,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
               style={{
                 background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
                 border: `1px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}`,
-                color: answer === opt ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
+                color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
               }}
             >
               <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? '#06b6d4' : 'var(--glass-border)'}` }}>
@@ -578,7 +578,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
                 style={{
                   background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
                   border: `1px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`,
-                  color: selected ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
+                  color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
                 }}
               >
                 <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? '#06b6d4' : 'var(--glass-border)'}`, background: selected ? '#06b6d4' : 'transparent', color: selected ? 'white' : 'transparent' }}>
@@ -633,7 +633,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
         onChange={e => onChange(e.target.value + (q.suffix || ''))}
         className="w-full h-2 sm:h-1 rounded-full appearance-none cursor-pointer touch-none"
         style={{
-          background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, hsl(var(--border)) 100%)`,
+          background: `linear-gradient(to right, #06b6d4 0%, #06b6d4 ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) ${((numVal - (q.min || 0)) / ((q.max || 10) - (q.min || 0))) * 100}%, var(--color-border) 100%)`,
         }}
       />
       <div className="flex justify-between text-[11px] text-muted-foreground mt-2.5">
@@ -733,7 +733,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
             border: `1px solid ${overIdx === idx || draggingIdx === idx ? '#06b6d4' : 'var(--glass-border)'}`,
             opacity: draggingIdx === idx ? 0.5 : 1,
             cursor: 'grab',
-            color: 'hsl(var(--muted-foreground))',
+            color: 'var(--color-muted-foreground)',
           }}
         >
           <div className="shrink-0 text-brand-text-muted">
diff --git a/frontend/src/pages/TeamAnalyticsPage.tsx b/frontend/src/pages/TeamAnalyticsPage.tsx
index 383f8fbd..48fa4c32 100644
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -144,31 +144,31 @@ export default function TeamAnalyticsPage() {
           <AreaChart data={time_series}>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="hsl(var(--border))"
+              stroke="var(--color-border)"
               vertical={false}
             />
             <XAxis
               dataKey="date"
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
-              axisLine={{ stroke: 'hsl(var(--border))' }}
+              axisLine={{ stroke: 'var(--color-border)' }}
               tickFormatter={(value: string) => {
                 const d = new Date(value)
                 return `${d.getMonth() + 1}/${d.getDate()}`
               }}
             />
             <YAxis
-              tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
               tickLine={false}
               axisLine={false}
               allowDecimals={false}
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'hsl(var(--card))',
-                border: '1px solid hsl(var(--border))',
+                backgroundColor: 'var(--color-card)',
+                border: '1px solid var(--color-border)',
                 borderRadius: '8px',
-                color: 'hsl(var(--foreground))',
+                color: 'var(--color-foreground)',
                 fontSize: '13px',
               }}
               labelFormatter={(value) => {