apteva 0.4.41 → 0.4.44

package/src/web/components/dashboard/Dashboard.tsx

@@ -149,7 +149,7 @@ export function Dashboard({
         <StatCard label="Agents" value={filteredAgents.length} subValue={`${filteredRunningCount} running`} />
         <StatCard label="Tasks" value={taskStats.total} subValue={`${taskStats.pending} pending`} />
         <StatCard label="Completed" value={taskStats.completed} color="text-green-400" />
-        <StatCard label="Providers" value={configuredProviders.length} color="text-[#f97316]" />
+        <StatCard label="Providers" value={configuredProviders.length} color="text-[var(--color-accent)]" />
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -160,11 +160,11 @@ export function Dashboard({
           onAction={() => onNavigate("agents")}
         >
           {loading ? (
-            <div className="p-4 text-center text-[#666]">Loading...</div>
+            <div className="p-4 text-center text-[var(--color-text-muted)]">Loading...</div>
           ) : filteredAgents.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">No agents yet</div>
+            <div className="p-4 text-center text-[var(--color-text-muted)]">No agents yet</div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {filteredAgents.slice(0, 5).map((agent) => (
                 <AgentListItem
                   key={agent.id}
@@ -185,12 +185,12 @@ export function Dashboard({
           onAction={() => onNavigate("telemetry")}
         >
           {activities.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">
+            <div className="p-4 text-center text-[var(--color-text-muted)]">
               <p>No activity yet</p>
-              <p className="text-sm text-[#444] mt-1">Agent activity will appear here in real-time</p>
+              <p className="text-sm text-[var(--color-text-faint)] mt-1">Agent activity will appear here in real-time</p>
             </div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {activities.map((evt) => (
                 <ActivityItem
                   key={evt.id}
@@ -210,12 +210,12 @@ export function Dashboard({
           onAction={() => onNavigate("tasks")}
         >
           {filteredTasks.length === 0 ? (
-            <div className="p-4 text-center text-[#666]">
+            <div className="p-4 text-center text-[var(--color-text-muted)]">
               <p>No tasks yet</p>
-              <p className="text-sm text-[#444] mt-1">Tasks will appear when agents create them</p>
+              <p className="text-sm text-[var(--color-text-faint)] mt-1">Tasks will appear when agents create them</p>
             </div>
           ) : (
-            <div className="divide-y divide-[#1a1a1a]">
+            <div className="divide-y divide-[var(--color-border)]">
               {filteredTasks.slice(0, 5).map((task) => (
                 <div
                   key={`${task.agentId}-${task.id}`}
@@ -223,16 +223,16 @@ export function Dashboard({
                 >
                   <div className="flex-1 min-w-0">
                     <p className="font-medium truncate">{task.title}</p>
-                    <p className="text-sm text-[#666]">
+                    <p className="text-sm text-[var(--color-text-muted)]">
                       {task.agentName}
                       {task.recurrence && (
-                        <span className="ml-1 text-[#555]">· {formatCronShort(task.recurrence)}</span>
+                        <span className="ml-1 text-[var(--color-text-faint)]">· {formatCronShort(task.recurrence)}</span>
                       )}
                       {task.next_run && (
-                        <span className="ml-1 text-[#f97316]">· {formatRelativeShort(task.next_run)}</span>
+                        <span className="ml-1 text-[var(--color-accent)]">· {formatRelativeShort(task.next_run)}</span>
                       )}
                       {!task.next_run && task.execute_at && (
-                        <span className="ml-1 text-[#f97316]">· {formatRelativeShort(task.execute_at)}</span>
+                        <span className="ml-1 text-[var(--color-accent)]">· {formatRelativeShort(task.execute_at)}</span>
                       )}
                     </p>
                   </div>
@@ -264,10 +264,10 @@ interface StatCardProps {
 
 function StatCard({ label, value, subValue, color }: StatCardProps) {
   return (
-    <div className="bg-[#111] rounded p-4 border border-[#1a1a1a]">
-      <p className="text-sm text-[#666] mb-1">{label}</p>
+    <div className="bg-[var(--color-surface)] rounded p-4 border border-[var(--color-border)]">
+      <p className="text-sm text-[var(--color-text-muted)] mb-1">{label}</p>
       <p className={`text-2xl font-semibold ${color || ''}`}>{value}</p>
-      {subValue && <p className="text-xs text-[#555] mt-1">{subValue}</p>}
+      {subValue && <p className="text-xs text-[var(--color-text-faint)] mt-1">{subValue}</p>}
     </div>
   );
 }
@@ -281,8 +281,8 @@ interface DashboardCardProps {
 
 function DashboardCard({ title, actionLabel, onAction, children }: DashboardCardProps) {
   return (
-    <div className="bg-[#111] rounded border border-[#1a1a1a] overflow-hidden">
-      <div className="px-4 py-3 border-b border-[#1a1a1a] flex items-center justify-between">
+    <div className="bg-[var(--color-surface)] rounded border border-[var(--color-border)] overflow-hidden">
+      <div className="px-4 py-3 border-b border-[var(--color-border)] flex items-center justify-between">
         <h3 className="font-semibold">{title}</h3>
         <button
           onClick={onAction}
@@ -304,7 +304,7 @@ function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Age
   return (
     <div
       onClick={onSelect}
-      className="px-4 py-3 hover:bg-[#1a1a1a] cursor-pointer flex items-center justify-between group"
+      className="px-4 py-3 hover:bg-[var(--color-surface-raised)] cursor-pointer flex items-center justify-between group"
     >
       <div className="flex items-center gap-3 flex-1 min-w-0">
         <span
@@ -313,12 +313,12 @@ function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Age
               ? isActive
                 ? "bg-green-400 animate-pulse"
                 : "bg-[#3b82f6]"
-              : "bg-[#444]"
+              : "bg-[var(--color-scrollbar)]"
           }`}
         />
         <div className="flex-1 min-w-0">
           <p className="font-medium truncate">{agent.name}</p>
-          <div className="flex items-center gap-2 text-sm text-[#666]">
+          <div className="flex items-center gap-2 text-sm text-[var(--color-text-muted)]">
             {isActive && label ? (
               <span className="text-green-400 truncate">{label}</span>
             ) : (
@@ -326,7 +326,7 @@ function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Age
             )}
             {showProject && project && (
               <>
-                <span className="text-[#444]">·</span>
+                <span className="text-[var(--color-text-faint)]">·</span>
                 <span className="flex items-center gap-1">
                   <span className="w-2 h-2 rounded-full" style={{ backgroundColor: project.color }} />
                   {project.name}
@@ -339,7 +339,7 @@ function AgentListItem({ agent, onSelect, onMessage, showProject }: { agent: Age
       {onMessage && (
         <button
           onClick={(e) => { e.stopPropagation(); onMessage(); }}
-          className="opacity-0 group-hover:opacity-100 transition px-2 py-1 text-xs text-[#f97316] hover:bg-[#f97316]/10 rounded"
+          className="opacity-0 group-hover:opacity-100 transition px-2 py-1 text-xs text-[var(--color-accent)] hover:bg-[var(--color-accent-10)] rounded"
           title="Send message"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -367,9 +367,9 @@ function ActivityItem({ activity, agentName, timestamp }: { activity: string; ag
   return (
     <div className="px-4 py-3">
       <p className="text-sm truncate">{activity}</p>
-      <div className="flex items-center gap-2 text-xs text-[#555] mt-1">
-        <span className="text-[#666]">{agentName}</span>
-        <span className="text-[#444]">&middot;</span>
+      <div className="flex items-center gap-2 text-xs text-[var(--color-text-faint)] mt-1">
+        <span className="text-[var(--color-text-muted)]">{agentName}</span>
+        <span className="text-[var(--color-text-faint)]">&middot;</span>
         <span>{timeAgo(timestamp)}</span>
       </div>
     </div>
@@ -428,13 +428,13 @@ function QuickMessageModal({ agent, onClose }: { agent: Agent; onClose: () => vo
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      <div className="relative bg-[#111] border border-[#222] rounded-xl shadow-2xl w-full max-w-md mx-4 p-5">
+      <div className="relative bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-xl shadow-2xl w-full max-w-md mx-4 p-5">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
             <span className="w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse" />
             <h3 className="font-medium">{agent.name}</h3>
           </div>
-          <button onClick={onClose} className="text-[#666] hover:text-[#e0e0e0] transition">
+          <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition">
             <CloseIcon />
           </button>
         </div>
@@ -442,7 +442,7 @@ function QuickMessageModal({ agent, onClose }: { agent: Agent; onClose: () => vo
         {sent ? (
           <div className="py-6 text-center">
             <p className="text-green-400 font-medium">Message sent</p>
-            <p className="text-sm text-[#555] mt-1">The agent will process your message</p>
+            <p className="text-sm text-[var(--color-text-faint)] mt-1">The agent will process your message</p>
           </div>
         ) : (
           <div className="flex gap-2">
@@ -454,12 +454,12 @@ function QuickMessageModal({ agent, onClose }: { agent: Agent; onClose: () => vo
               onKeyDown={e => e.key === "Enter" && handleSend()}
               placeholder={`Message ${agent.name}...`}
               disabled={sending}
-              className="flex-1 bg-[#0a0a0a] border border-[#222] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-[#f97316] placeholder-[#444] disabled:opacity-50"
+              className="flex-1 bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--color-accent)] placeholder-[#444] disabled:opacity-50"
             />
             <button
               onClick={handleSend}
               disabled={sending || !message.trim()}
-              className="px-4 py-2.5 bg-[#f97316] text-black rounded-lg text-sm font-medium hover:bg-[#fb923c] transition disabled:opacity-30"
+              className="px-4 py-2.5 bg-[var(--color-accent)] text-black rounded-lg text-sm font-medium hover:bg-[var(--color-accent-hover)] transition disabled:opacity-30"
             >
               {sending ? "..." : "Send"}
             </button>

package/src/web/components/layout/Header.tsx

@@ -134,24 +134,25 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
   };
 
   const getProjectColor = () => {
-    if (currentProjectId === null) return "#666";
-    if (currentProjectId === "unassigned") return "#888";
+    if (currentProjectId === null) return "var(--color-text-muted)";
+    if (currentProjectId === "unassigned") return "var(--color-text-secondary)";
     return currentProject?.color || "#6366f1";
   };
 
   return (
-    <header className="border-b border-[#1a1a1a] px-4 md:px-6 py-4 flex-shrink-0">
+    <header className="px-4 md:px-6 py-4 flex-shrink-0" style={{ borderBottom: "1px solid var(--color-border)" }}>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           {/* Hamburger menu button - mobile only */}
           <button
             onClick={onMenuClick}
-            className="p-2 -ml-2 text-[#666] hover:text-[#e0e0e0] transition md:hidden"
+            className="p-2 -ml-2 transition md:hidden"
+            style={{ color: "var(--color-text-muted)" }}
           >
             <MenuIcon />
           </button>
           <div className="flex items-center gap-2">
-            <span className="text-[#f97316]">&gt;_</span>
+            <span style={{ color: "var(--color-accent)" }}>&gt;_</span>
             <span className="text-xl tracking-wider">apteva</span>
           </div>
 
@@ -160,7 +161,8 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             <div className="relative ml-2 md:ml-4">
               <button
                 onClick={() => setShowProjectMenu(!showProjectMenu)}
-                className="flex items-center gap-2 px-3 py-1.5 rounded border border-[#222] bg-[#111] hover:bg-[#1a1a1a] transition text-sm"
+                className="flex items-center gap-2 px-3 py-1.5 rounded transition text-sm"
+                style={{ border: "1px solid var(--color-border-light)", backgroundColor: "var(--color-surface)" }}
               >
                 <span
                   className="w-2.5 h-2.5 rounded-full"
@@ -172,43 +174,49 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
                 <ChevronDownIcon />
               </button>
               {showProjectMenu && (
-                <div className="absolute left-0 top-full mt-1 w-56 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                <div className="absolute left-0 top-full mt-1 w-56 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
                   <div className="py-1 max-h-64 overflow-y-auto">
                     <button
                       onClick={() => handleProjectSelect(null)}
-                      className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                        currentProjectId === null ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                      }`}
+                      className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                      style={{
+                        backgroundColor: currentProjectId === null ? "var(--color-surface-raised)" : "transparent",
+                        color: currentProjectId === null ? "var(--color-accent)" : "var(--color-text)",
+                      }}
                     >
-                      <span className="w-2.5 h-2.5 rounded-full bg-[#666]" />
+                      <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: "var(--color-text-muted)" }} />
                       All Projects
                     </button>
                     {projects.map(project => (
                       <button
                         key={project.id}
                         onClick={() => handleProjectSelect(project.id)}
-                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                          currentProjectId === project.id ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                        }`}
+                        className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                        style={{
+                          backgroundColor: currentProjectId === project.id ? "var(--color-surface-raised)" : "transparent",
+                          color: currentProjectId === project.id ? "var(--color-accent)" : "var(--color-text)",
+                        }}
                       >
                         <span
                           className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                           style={{ backgroundColor: project.color }}
                         />
                         <span className="truncate">{project.name}</span>
-                        <span className="ml-auto text-xs text-[#666]">{project.agentCount}</span>
+                        <span className="ml-auto text-xs" style={{ color: "var(--color-text-muted)" }}>{project.agentCount}</span>
                       </button>
                     ))}
                     {unassignedCount > 0 && (
                       <button
                         onClick={() => handleProjectSelect("unassigned")}
-                        className={`w-full px-4 py-2 text-left text-sm flex items-center gap-2 hover:bg-[#1a1a1a] transition ${
-                          currentProjectId === "unassigned" ? "bg-[#1a1a1a] text-[#f97316]" : ""
-                        }`}
+                        className="w-full px-4 py-2 text-left text-sm flex items-center gap-2 transition"
+                        style={{
+                          backgroundColor: currentProjectId === "unassigned" ? "var(--color-surface-raised)" : "transparent",
+                          color: currentProjectId === "unassigned" ? "var(--color-accent)" : "var(--color-text)",
+                        }}
                       >
-                        <span className="w-2.5 h-2.5 rounded-full bg-[#888]" />
+                        <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: "var(--color-text-secondary)" }} />
                         <span className="truncate">Unassigned</span>
-                        <span className="ml-auto text-xs text-[#666]">{unassignedCount}</span>
+                        <span className="ml-auto text-xs" style={{ color: "var(--color-text-muted)" }}>{unassignedCount}</span>
                       </button>
                     )}
                   </div>
@@ -222,7 +230,7 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             <span
               className={`w-2 h-2 rounded-full ${connected ? "bg-green-400" : "bg-red-400"}`}
             />
-            <span className="text-xs text-[#666] hidden sm:inline">
+            <span className="text-xs hidden sm:inline" style={{ color: "var(--color-text-muted)" }}>
               {connected ? "Live" : "Offline"}
             </span>
           </div>
@@ -230,7 +238,8 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
           <div className="relative">
             <button
               onClick={openNotifications}
-              className="relative p-2 text-[#666] hover:text-[#e0e0e0] transition rounded hover:bg-[#1a1a1a]"
+              className="relative p-2 transition rounded"
+              style={{ color: "var(--color-text-muted)" }}
             >
               <BellIcon className="w-5 h-5" />
               {unseenCount > 0 && (
@@ -253,40 +262,47 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             {showNotifications && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />
-                <div className="absolute right-0 top-full mt-1 w-80 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto">
-                  <div className="px-4 py-3 border-b border-[#222] flex items-center justify-between">
+                <div className="absolute right-0 top-full mt-1 w-80 rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
+                  <div className="px-4 py-3 flex items-center justify-between" style={{ borderBottom: "1px solid var(--color-border-light)" }}>
                     <span className="text-sm font-medium">Notifications</span>
                     {notifications.length > 0 && (
-                      <span className="text-xs text-[#666]">{notifications.length} recent</span>
+                      <span className="text-xs" style={{ color: "var(--color-text-muted)" }}>{notifications.length} recent</span>
                     )}
                   </div>
                   {notifications.length === 0 ? (
-                    <div className="px-4 py-8 text-center text-sm text-[#666]">
+                    <div className="px-4 py-8 text-center text-sm" style={{ color: "var(--color-text-muted)" }}>
                       No notifications
                     </div>
                   ) : (
                     <div className="py-1">
                       {notifications.map(n => (
-                        <div key={n.id} className={`px-4 py-3 hover:bg-[#1a1a1a] transition border-b border-[#1a1a1a] ${!n.seen ? "bg-[#0f0f0f]" : ""}`}>
+                        <div key={n.id} className="px-4 py-3 transition" style={{
+                          borderBottom: "1px solid var(--color-border)",
+                          backgroundColor: !n.seen ? "var(--color-bg-secondary)" : "transparent",
+                        }}>
                           <div className="flex items-center gap-2 mb-1">
                             <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
                               !n.seen
-                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "bg-[#f97316]")
-                                : "bg-[#333]"
-                            }`} />
-                            <span className={`text-xs font-medium truncate ${!n.seen ? "text-[#ccc]" : "text-[#666]"}`}>
+                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "")
+                                : ""
+                            }`} style={{
+                              backgroundColor: !n.seen
+                                ? (n.level === "error" || n.category === "ERROR" ? undefined : "var(--color-accent)")
+                                : "var(--color-surface-raised)",
+                            }} />
+                            <span className="text-xs font-medium truncate" style={{ color: !n.seen ? "var(--color-text)" : "var(--color-text-muted)" }}>
                               {n.category === "system" && n.type === "agent_stopped" ? "Agent Stopped" :
                                n.category === "ERROR" ? "Error" :
                                `${n.category} / ${n.type}`}
                             </span>
-                            <span className="text-[10px] text-[#555] ml-auto flex-shrink-0">
+                            <span className="text-[10px] ml-auto flex-shrink-0" style={{ color: "var(--color-text-faint)" }}>
                               {formatNotifTime(n.timestamp)}
                             </span>
                           </div>
-                          <div className={`text-xs truncate ${!n.seen ? "text-[#aaa]" : "text-[#666]"}`}>
+                          <div className="text-xs truncate" style={{ color: !n.seen ? "var(--color-text-secondary)" : "var(--color-text-muted)" }}>
                             {n.error || (n.data as any)?.message || (n.data as any)?.error || `${n.type} event`}
                           </div>
-                          <div className="text-[10px] text-[#555] mt-1">
+                          <div className="text-[10px] mt-1" style={{ color: "var(--color-text-faint)" }}>
                             {agentNames[n.agent_id] || n.agent_id.slice(0, 8)}
                           </div>
                         </div>

package/src/web/components/layout/Sidebar.tsx

@@ -39,20 +39,22 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
       {/* Sidebar - hidden on mobile unless open, always visible on md+ */}
       <aside
         className={`
-          fixed inset-y-0 left-0 z-50 w-64 bg-[#0a0a0a] border-r border-[#1a1a1a] p-4 flex flex-col transform transition-transform duration-200 ease-in-out
+          fixed inset-y-0 left-0 z-50 w-64 p-4 flex flex-col transform transition-transform duration-200 ease-in-out
           md:relative md:w-56 md:translate-x-0 md:z-auto
           ${isOpen ? "translate-x-0" : "-translate-x-full"}
         `}
+        style={{ backgroundColor: "var(--color-bg)", borderRight: "1px solid var(--color-border)" }}
       >
         {/* Mobile header with close button */}
         <div className="flex items-center justify-between mb-4 md:hidden">
           <div className="flex items-center gap-2">
-            <span className="text-[#f97316]">&gt;_</span>
+            <span style={{ color: "var(--color-accent)" }}>&gt;_</span>
             <span className="text-lg tracking-wider">apteva</span>
           </div>
           <button
             onClick={onClose}
-            className="p-2 text-[#666] hover:text-[#e0e0e0] transition"
+            className="p-2 transition"
+            style={{ color: "var(--color-text-muted)" }}
           >
             <CloseIcon />
           </button>
@@ -137,26 +139,31 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
 
         {/* User profile - pinned to bottom */}
         {user && (
-          <div className="relative border-t border-[#1a1a1a] pt-3 mt-3">
+          <div className="relative pt-3 mt-3" style={{ borderTop: "1px solid var(--color-border)" }}>
             <button
               onClick={() => setShowUserMenu(!showUserMenu)}
-              className="w-full flex items-center gap-3 px-3 py-2 rounded hover:bg-[#111] transition"
+              className="w-full flex items-center gap-3 px-3 py-2 rounded transition"
+              style={{ color: "var(--color-text)" }}
+              onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--color-surface)"}
+              onMouseLeave={e => e.currentTarget.style.backgroundColor = "transparent"}
             >
-              <div className="w-8 h-8 rounded-full bg-[#f97316] flex items-center justify-center text-black font-medium text-sm flex-shrink-0">
+              <div className="w-8 h-8 rounded-full flex items-center justify-center text-black font-medium text-sm flex-shrink-0" style={{ backgroundColor: "var(--color-accent)" }}>
                 {user.username.charAt(0).toUpperCase()}
               </div>
               <div className="flex-1 min-w-0 text-left">
                 <p className="text-sm font-medium truncate">{user.username}</p>
-                <p className="text-xs text-[#555]">{user.role}</p>
+                <p className="text-xs" style={{ color: "var(--color-text-faint)" }}>{user.role}</p>
               </div>
             </button>
             {showUserMenu && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowUserMenu(false)} />
-                <div className="absolute left-3 bottom-full mb-1 w-48 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50">
+                <div className="absolute left-3 bottom-full mb-1 w-48 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
                   <button
                     onClick={handleLogout}
-                    className="w-full px-4 py-2.5 text-left text-sm text-red-400 hover:bg-[#1a1a1a] transition rounded-lg"
+                    className="w-full px-4 py-2.5 text-left text-sm text-red-400 transition rounded-lg"
+                    onMouseEnter={e => e.currentTarget.style.backgroundColor = "var(--color-surface-raised)"}
+                    onMouseLeave={e => e.currentTarget.style.backgroundColor = "transparent"}
                   >
                     Sign out
                   </button>
@@ -182,16 +189,28 @@ function NavButton({ icon, label, active, onClick, badge }: NavButtonProps) {
   return (
     <button
       onClick={onClick}
-      className={`w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition ${
-        active
-          ? "bg-[#111] text-[#e0e0e0]"
-          : "text-[#666] hover:bg-[#111] hover:text-[#888]"
-      }`}
+      className="w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition"
+      style={{
+        backgroundColor: active ? "var(--color-surface)" : "transparent",
+        color: active ? "var(--color-text)" : "var(--color-text-muted)",
+      }}
+      onMouseEnter={e => {
+        if (!active) {
+          e.currentTarget.style.backgroundColor = "var(--color-surface)";
+          e.currentTarget.style.color = "var(--color-text-secondary)";
+        }
+      }}
+      onMouseLeave={e => {
+        if (!active) {
+          e.currentTarget.style.backgroundColor = "transparent";
+          e.currentTarget.style.color = "var(--color-text-muted)";
+        }
+      }}
     >
       {icon}
       {label}
       {badge && (
-        <span className="ml-auto bg-[#333] text-[#888] text-xs px-2 py-0.5 rounded-full">
+        <span className="ml-auto text-xs px-2 py-0.5 rounded-full" style={{ backgroundColor: "var(--color-surface-raised)", color: "var(--color-text-secondary)" }}>
           {badge}
         </span>
       )}