diff --git a/frontend/src/components/account/DeleteAccountModal.tsx b/frontend/src/components/account/DeleteAccountModal.tsx
index 82667668..1150f3e8 100644
--- a/frontend/src/components/account/DeleteAccountModal.tsx
+++ b/frontend/src/components/account/DeleteAccountModal.tsx
@@ -39,24 +39,24 @@ export function DeleteAccountModal({ onClose }: Props) {
       <div className="card-flat w-full max-w-md p-6">
         <div className="flex items-center gap-2 text-rose-500 mb-4">
           <AlertTriangle className="h-5 w-5" />
-          <h2 className="text-lg font-semibold font-heading text-[#e2e5eb]">Delete Account</h2>
+          <h2 className="text-lg font-semibold font-heading text-foreground">Delete Account</h2>
         </div>
-        <p className="text-sm text-[#848b9b] mb-4">
+        <p className="text-sm text-muted-foreground mb-4">
           This action is <strong className="text-rose-400">permanent</strong>. Your account, data,
           and all associated flows will be permanently deleted.
         </p>
 
         <form onSubmit={handleDelete} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-[#e2e5eb]">Confirm Password</label>
+            <label className="block text-sm font-medium text-foreground">Confirm Password</label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
               className={cn(
-                'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                'text-[#e2e5eb] focus:border-primary focus:outline-hidden'
+                'mt-1 block w-full rounded-lg border border-border bg-card px-3 py-2',
+                'text-foreground focus:border-primary focus:outline-hidden'
               )}
             />
           </div>
@@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               onClick={onClose}
               className={cn(
                 'rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
+                'bg-input border border-border text-foreground'
               )}
             >
               Cancel
diff --git a/frontend/src/components/account/LeaveAccountModal.tsx b/frontend/src/components/account/LeaveAccountModal.tsx
index 8014b3e3..6670fc92 100644
--- a/frontend/src/components/account/LeaveAccountModal.tsx
+++ b/frontend/src/components/account/LeaveAccountModal.tsx
@@ -34,10 +34,10 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
       <div className="card-flat w-full max-w-md p-6">
         <div className="flex items-center gap-2 text-amber-400 mb-4">
           <AlertTriangle className="h-5 w-5" />
-          <h2 className="text-lg font-semibold font-heading text-[#e2e5eb]">Leave Account</h2>
+          <h2 className="text-lg font-semibold font-heading text-foreground">Leave Account</h2>
         </div>
-        <p className="text-sm text-[#848b9b] mb-4">
-          Are you sure you want to leave <strong className="text-[#e2e5eb]">{accountName}</strong>?
+        <p className="text-sm text-muted-foreground mb-4">
+          Are you sure you want to leave <strong className="text-foreground">{accountName}</strong>?
           A new personal account will be created for you.
         </p>
         <div className="flex justify-end gap-3">
@@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
             onClick={onClose}
             className={cn(
               'rounded-lg px-4 py-2 text-sm font-medium',
-              'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
+              'bg-input border border-border text-foreground'
             )}
           >
             Cancel
diff --git a/frontend/src/components/account/NotificationSettings.tsx b/frontend/src/components/account/NotificationSettings.tsx
index b11a0b3e..6eee0f22 100644
--- a/frontend/src/components/account/NotificationSettings.tsx
+++ b/frontend/src/components/account/NotificationSettings.tsx
@@ -173,8 +173,8 @@ export function NotificationSettings() {
       {/* Section header */}
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Bell className="h-6 w-6 text-[#848b9b]" />
-          <h2 className="text-xl font-semibold font-heading text-[#e2e5eb]">Notifications</h2>
+          <Bell className="h-6 w-6 text-muted-foreground" />
+          <h2 className="text-xl font-semibold font-heading text-foreground">Notifications</h2>
         </div>
 
         <div className="relative" ref={dropdownRef}>
@@ -182,7 +182,7 @@ export function NotificationSettings() {
             onClick={() => setShowDropdown(!showDropdown)}
             className={cn(
               'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
               'hover:border-[rgba(255,255,255,0.12)] transition-all'
             )}
           >
@@ -192,16 +192,16 @@ export function NotificationSettings() {
           </button>
 
           {showDropdown && (
-            <div className="absolute right-0 mt-1 z-20 w-48 rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl">
+            <div className="absolute right-0 mt-1 z-20 w-48 rounded-xl border border-border bg-card shadow-xl">
               {(Object.entries(CHANNEL_LABELS) as [ChannelType, string][]).map(([key, label]) => {
                 const Icon = CHANNEL_ICONS[key]
                 return (
                   <button
                     key={key}
                     onClick={() => handleAddChannel(key)}
-                    className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] first:rounded-t-xl last:rounded-b-xl transition-colors"
+                    className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-foreground hover:bg-[rgba(255,255,255,0.04)] first:rounded-t-xl last:rounded-b-xl transition-colors"
                   >
-                    <Icon className="h-4 w-4 text-[#848b9b]" />
+                    <Icon className="h-4 w-4 text-muted-foreground" />
                     {label}
                   </button>
                 )
@@ -214,15 +214,15 @@ export function NotificationSettings() {
       {/* Loading */}
       {loading && (
         <div className="flex justify-center py-8">
-          <Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
         </div>
       )}
 
       {/* Empty state */}
       {!loading && configs.length === 0 && !addingChannel && (
         <div className="card-flat p-6 text-center">
-          <Bell className="mx-auto h-8 w-8 text-[#848b9b]/50 mb-3" />
-          <p className="text-sm text-[#848b9b]">
+          <Bell className="mx-auto h-8 w-8 text-muted-foreground/50 mb-3" />
+          <p className="text-sm text-muted-foreground">
             No notification channels configured. Add a channel to receive alerts for session events.
           </p>
         </div>
@@ -237,8 +237,8 @@ export function NotificationSettings() {
               <div key={config.id} className="card-flat p-5">
                 {/* Header row */}
                 <div className="flex items-center gap-3 mb-4">
-                  <Icon className="h-5 w-5 text-[#848b9b]" />
-                  <span className="text-sm font-medium text-[#e2e5eb]">
+                  <Icon className="h-5 w-5 text-muted-foreground" />
+                  <span className="text-sm font-medium text-foreground">
                     {CHANNEL_LABELS[config.channel]}
                   </span>
                   <span
@@ -249,7 +249,7 @@ export function NotificationSettings() {
                   />
                   <span className={cn(
                     'text-xs font-sans text-xs',
-                    config.is_active ? 'text-emerald-400' : 'text-[#848b9b]'
+                    config.is_active ? 'text-emerald-400' : 'text-muted-foreground'
                   )}>
                     {config.is_active ? 'Active' : 'Inactive'}
                   </span>
@@ -259,20 +259,20 @@ export function NotificationSettings() {
                 <div className="mb-4">
                   {config.webhook_url && (
                     <div>
-                      <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                      <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                         Webhook URL
                       </span>
-                      <p className="mt-0.5 text-sm text-[#e2e5eb] font-mono">
+                      <p className="mt-0.5 text-sm text-foreground font-mono">
                         {maskWebhookUrl(config.webhook_url)}
                       </p>
                     </div>
                   )}
                   {config.email_addresses && config.email_addresses.length > 0 && (
                     <div>
-                      <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                      <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                         Email Addresses
                       </span>
-                      <p className="mt-0.5 text-sm text-[#e2e5eb]">
+                      <p className="mt-0.5 text-sm text-foreground">
                         {config.email_addresses.join(', ')}
                       </p>
                     </div>
@@ -281,7 +281,7 @@ export function NotificationSettings() {
 
                 {/* Event toggles */}
                 <div className="mb-4">
-                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Events
                   </span>
                   <div className="mt-2 grid gap-2 sm:grid-cols-2">
@@ -294,28 +294,28 @@ export function NotificationSettings() {
                           type="checkbox"
                           checked={config.events_enabled[eventKey] ?? false}
                           onChange={() => handleToggleEvent(config, eventKey)}
-                          className="h-3.5 w-3.5 rounded border-[#1e2130] bg-[#14161d] text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer accent-[#06b6d4]"
+                          className="h-3.5 w-3.5 rounded border-border bg-card text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer accent-[#06b6d4]"
                         />
-                        <span className="text-sm text-[#e2e5eb]">{eventLabel}</span>
+                        <span className="text-sm text-foreground">{eventLabel}</span>
                       </label>
                     ))}
                   </div>
                 </div>
 
                 {/* Action buttons */}
-                <div className="flex items-center gap-3 pt-2 border-t border-[#1e2130]">
+                <div className="flex items-center gap-3 pt-2 border-t border-border">
                   <button
                     onClick={() => handleToggleActive(config)}
                     className={cn(
                       'inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium',
-                      'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+                      'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
                       'hover:border-[rgba(255,255,255,0.12)] transition-all'
                     )}
                   >
                     {config.is_active ? (
                       <ToggleRight className="h-4 w-4 text-emerald-400" />
                     ) : (
-                      <ToggleLeft className="h-4 w-4 text-[#848b9b]" />
+                      <ToggleLeft className="h-4 w-4 text-muted-foreground" />
                     )}
                     {config.is_active ? 'Disable' : 'Enable'}
                   </button>
@@ -325,7 +325,7 @@ export function NotificationSettings() {
                     disabled={testingId === config.id}
                     className={cn(
                       'inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium',
-                      'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+                      'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
                       'hover:border-[rgba(255,255,255,0.12)] transition-all',
                       'disabled:opacity-50 disabled:cursor-not-allowed'
                     )}
@@ -349,7 +349,7 @@ export function NotificationSettings() {
                   ) : (
                     <button
                       onClick={() => setConfirmDeleteId(config.id)}
-                      className="ml-auto inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-red-400 transition-colors"
+                      className="ml-auto inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-red-400 transition-colors"
                     >
                       <Trash2 className="h-4 w-4" />
                       Remove
@@ -366,16 +366,16 @@ export function NotificationSettings() {
               <div className="flex items-center gap-3 mb-4">
                 {(() => {
                   const Icon = CHANNEL_ICONS[addingChannel]
-                  return <Icon className="h-5 w-5 text-[#848b9b]" />
+                  return <Icon className="h-5 w-5 text-muted-foreground" />
                 })()}
-                <span className="text-sm font-medium text-[#e2e5eb]">
+                <span className="text-sm font-medium text-foreground">
                   Add {CHANNEL_LABELS[addingChannel]}
                 </span>
               </div>
 
               {addingChannel === 'email' ? (
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Email Addresses
                   </label>
                   <Input
@@ -385,13 +385,13 @@ export function NotificationSettings() {
                     placeholder="user@example.com, team@example.com"
                     className="mt-1"
                   />
-                  <p className="mt-1 text-xs text-[#848b9b]">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     Separate multiple addresses with commas
                   </p>
                 </div>
               ) : (
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Webhook URL
                   </label>
                   <Input
@@ -414,7 +414,7 @@ export function NotificationSettings() {
                   disabled={isSaving}
                   className={cn(
                     'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-                    'bg-[#22d3ee] text-white',
+                    'bg-primary text-white',
                     'hover:brightness-110 active:scale-[0.98] transition-all',
                     'disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
@@ -424,7 +424,7 @@ export function NotificationSettings() {
                 </button>
                 <button
                   onClick={() => setAddingChannel(null)}
-                  className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Cancel
                 </button>
diff --git a/frontend/src/components/account/TransferOwnershipModal.tsx b/frontend/src/components/account/TransferOwnershipModal.tsx
index c49091e9..8c69d23b 100644
--- a/frontend/src/components/account/TransferOwnershipModal.tsx
+++ b/frontend/src/components/account/TransferOwnershipModal.tsx
@@ -43,24 +43,24 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
       <div className="card-flat w-full max-w-md p-6">
         <div className="flex items-center gap-2 text-amber-400 mb-4">
           <AlertTriangle className="h-5 w-5" />
-          <h2 className="text-lg font-semibold font-heading text-[#e2e5eb]">Transfer Ownership</h2>
+          <h2 className="text-lg font-semibold font-heading text-foreground">Transfer Ownership</h2>
         </div>
-        <p className="text-sm text-[#848b9b] mb-4">
+        <p className="text-sm text-muted-foreground mb-4">
           This will make the selected member the new account owner. You will become an engineer.
         </p>
 
         {nonOwnerMembers.length === 0 ? (
-          <p className="text-sm text-[#848b9b]">No other members to transfer to.</p>
+          <p className="text-sm text-muted-foreground">No other members to transfer to.</p>
         ) : (
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-[#e2e5eb]">New Owner</label>
+              <label className="block text-sm font-medium text-foreground">New Owner</label>
               <select
                 value={targetUserId}
                 onChange={(e) => setTargetUserId(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] focus:border-primary focus:outline-hidden'
+                  'mt-1 block w-full rounded-lg border border-border bg-card px-3 py-2',
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               >
                 {nonOwnerMembers.map((m) => (
@@ -69,15 +69,15 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium text-[#e2e5eb]">Your Password</label>
+              <label className="block text-sm font-medium text-foreground">Your Password</label>
               <input
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
                 className={cn(
-                  'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] focus:border-primary focus:outline-hidden'
+                  'mt-1 block w-full rounded-lg border border-border bg-card px-3 py-2',
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               />
             </div>
@@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onClick={onClose}
                 className={cn(
                   'rounded-lg px-4 py-2 text-sm font-medium',
-                  'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
+                  'bg-input border border-border text-foreground'
                 )}
               >
                 Cancel
diff --git a/frontend/src/components/admin/ActionMenu.tsx b/frontend/src/components/admin/ActionMenu.tsx
index 9bc1ae90..6cabd654 100644
--- a/frontend/src/components/admin/ActionMenu.tsx
+++ b/frontend/src/components/admin/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         ref={buttonRef}
         onClick={() => setOpen(!open)}
         className={cn(
-          'rounded-md p-1.5 text-[#848b9b] transition-colors',
-          'hover:bg-accent hover:text-[#e2e5eb]'
+          'rounded-md p-1.5 text-muted-foreground transition-colors',
+          'hover:bg-accent hover:text-foreground'
         )}
       >
         <MoreHorizontal className="h-4 w-4" />
@@ -63,8 +63,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         <div
           ref={menuRef}
           className={cn(
-            'fixed z-50 min-w-[160px] rounded-md border border-[#1e2130]',
-            'bg-[#14161d] py-1 shadow-lg animate-scale-in'
+            'fixed z-50 min-w-[160px] rounded-md border border-border',
+            'bg-card py-1 shadow-lg animate-scale-in'
           )}
           style={{
             top: `${menuPosition.top}px`,
@@ -81,7 +81,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
                 'disabled:opacity-50 disabled:pointer-events-none',
                 item.destructive
                   ? 'text-red-400 hover:bg-red-400/10'
-                  : 'text-[#848b9b] hover:bg-accent'
+                  : 'text-muted-foreground hover:bg-accent'
               )}
             >
               {item.icon}
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index 2ac2e939..89becfd2 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -36,7 +36,7 @@ export function AdminLayout() {
   return (
     <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 shrink-0 border-r border-[#1e2130] bg-[#14161d] md:block">
+      <div className="hidden w-60 shrink-0 border-r border-border bg-card md:block">
         <AdminSidebar />
       </div>
 
@@ -44,14 +44,14 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-[#14161d]/80"
+            className="absolute inset-0 bg-card/80"
             onClick={() => setMobileOpen(false)}
           />
-          <div className="absolute inset-y-0 left-0 w-60 border-r border-[#1e2130] bg-[#14161d] shadow-xl">
+          <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
             <div className="flex h-12 items-center justify-end px-3">
               <button
                 onClick={() => setMobileOpen(false)}
-                className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent"
+                className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -67,7 +67,7 @@ export function AdminLayout() {
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}
-            className="mb-4 rounded-md p-2 text-[#848b9b] hover:bg-accent md:hidden"
+            className="mb-4 rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
           >
             <Menu className="h-5 w-5" />
           </button>
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index 9e17cfe4..a5a23d08 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -45,7 +45,7 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
   return (
     <aside className={cn('flex h-full flex-col', className)}>
       <div className="p-4">
-        <h2 className="text-lg font-bold text-[#e2e5eb]">Admin Panel</h2>
+        <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
       </div>
       <nav className="flex-1 space-y-1 px-3">
         {navItems.map((item) => (
@@ -56,8 +56,8 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
             className={cn(
               'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
               isActive(item.path, item.end)
-                ? 'bg-accent text-[#e2e5eb]'
-                : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                ? 'bg-accent text-foreground'
+                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <item.icon className="h-4 w-4" />
@@ -65,13 +65,13 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
           </Link>
         ))}
       </nav>
-      <div className="border-t border-[#1e2130] p-3">
+      <div className="border-t border-border p-3">
         <Link
           to="/trees"
           onClick={onNavigate}
           className={cn(
             'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-            'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+            'text-muted-foreground hover:bg-accent hover:text-foreground'
           )}
         >
           <ArrowLeft className="h-4 w-4" />
diff --git a/frontend/src/components/admin/CategoryRow.tsx b/frontend/src/components/admin/CategoryRow.tsx
index e83e2f57..61384b93 100644
--- a/frontend/src/components/admin/CategoryRow.tsx
+++ b/frontend/src/components/admin/CategoryRow.tsx
@@ -38,7 +38,7 @@ export function CategoryRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-4',
+        'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
         isDragging && 'opacity-50'
       )}
     >
@@ -47,7 +47,7 @@ export function CategoryRow({
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab touch-none text-[#848b9b] hover:text-[#e2e5eb] active:cursor-grabbing"
+        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
         aria-label="Drag to reorder"
       >
         <GripVertical className="h-5 w-5" />
@@ -56,17 +56,17 @@ export function CategoryRow({
       {/* Category Info */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <h3 className="font-medium text-[#e2e5eb]">{category.name}</h3>
+          <h3 className="font-medium text-foreground">{category.name}</h3>
           {!category.is_active && (
-            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-[#848b9b]">
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-muted-foreground">
               Archived
             </span>
           )}
         </div>
         {category.description && (
-          <p className="mt-1 text-sm text-[#848b9b]">{category.description}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
         )}
-        <p className="mt-1 text-xs text-[#848b9b]">
+        <p className="mt-1 text-xs text-muted-foreground">
           {stepCount} step{stepCount !== 1 ? 's' : ''}
         </p>
       </div>
@@ -77,8 +77,8 @@ export function CategoryRow({
           type="button"
           onClick={() => onEdit(category)}
           className={cn(
-            'rounded-md border border-[#1e2130] bg-[#14161d] p-2 text-[#848b9b]',
-            'hover:bg-accent hover:text-[#e2e5eb]'
+            'rounded-md border border-border bg-card p-2 text-muted-foreground',
+            'hover:bg-accent hover:text-foreground'
           )}
           title="Edit category"
           aria-label="Edit category"
@@ -91,7 +91,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onArchive(category.id)}
             className={cn(
-              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
+              'rounded-md border border-input bg-background p-2 text-muted-foreground',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Archive category"
@@ -104,7 +104,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onRestore(category.id)}
             className={cn(
-              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
+              'rounded-md border border-input bg-background p-2 text-muted-foreground',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Restore category"
diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index fe970bd8..a42daf0d 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -91,7 +91,7 @@ export function CreateCategoryModal({
         )}
 
         <div>
-          <label htmlFor="name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -104,14 +104,14 @@ export function CreateCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-[#848b9b]">
+          <p className="mt-1 text-xs text-muted-foreground">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
-            Description <span className="text-[#848b9b]">(optional)</span>
+          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
           </label>
           <Textarea
             id="description"
diff --git a/frontend/src/components/admin/DataTable.tsx b/frontend/src/components/admin/DataTable.tsx
index aa407259..7dc528ee 100644
--- a/frontend/src/components/admin/DataTable.tsx
+++ b/frontend/src/components/admin/DataTable.tsx
@@ -50,16 +50,16 @@ export function DataTable<T>({
   }
 
   return (
-    <div className="overflow-x-auto rounded-lg border border-[#1e2130]">
+    <div className="overflow-x-auto rounded-lg border border-border">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-[#1e2130] bg-accent">
+          <tr className="border-b border-border bg-accent">
             {columns.map((col) => (
               <th
                 key={col.key}
                 className={cn(
-                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[#848b9b]',
-                  col.sortable && 'cursor-pointer select-none hover:text-[#e2e5eb]',
+                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground',
+                  col.sortable && 'cursor-pointer select-none hover:text-foreground',
                   col.className
                 )}
                 onClick={col.sortable ? () => handleSort(col.key) : undefined}
@@ -87,7 +87,7 @@ export function DataTable<T>({
         <tbody>
           {isLoading ? (
             Array.from({ length: skeletonRows }).map((_, i) => (
-              <tr key={i} className="border-b border-[#1e2130] last:border-0">
+              <tr key={i} className="border-b border-border last:border-0">
                 {columns.map((col) => (
                   <td key={col.key} className="px-4 py-3">
                     <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
@@ -99,7 +99,7 @@ export function DataTable<T>({
             <tr>
               <td colSpan={columns.length} className="px-4 py-12 text-center">
                 {emptyState || (
-                  <span className="text-[#848b9b]">No data found</span>
+                  <span className="text-muted-foreground">No data found</span>
                 )}
               </td>
             </tr>
@@ -107,7 +107,7 @@ export function DataTable<T>({
             data.map((item) => (
               <tr
                 key={keyExtractor(item)}
-                className="border-b border-[#1e2130] last:border-0 hover:bg-accent transition-colors"
+                className="border-b border-border last:border-0 hover:bg-accent transition-colors"
               >
                 {columns.map((col) => (
                   <td key={col.key} className={cn('px-4 py-3', col.className)}>
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index 898c8c2a..b113bee1 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -103,7 +103,7 @@ export function EditCategoryModal({
         )}
 
         <div>
-          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -116,14 +116,14 @@ export function EditCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-[#848b9b]">
+          <p className="mt-1 text-xs text-muted-foreground">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
-            Description <span className="text-[#848b9b]">(optional)</span>
+          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
+            Description <span className="text-muted-foreground">(optional)</span>
           </label>
           <Textarea
             id="edit-description"
diff --git a/frontend/src/components/admin/Pagination.tsx b/frontend/src/components/admin/Pagination.tsx
index 1fc838cd..1e967ed8 100644
--- a/frontend/src/components/admin/Pagination.tsx
+++ b/frontend/src/components/admin/Pagination.tsx
@@ -36,20 +36,20 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
 
   return (
     <div className="flex items-center justify-between gap-4 pt-4">
-      <span className="text-sm text-[#848b9b]">
+      <span className="text-sm text-muted-foreground">
         Showing {start}-{end} of {total}
       </span>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
-          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
         {getPageNumbers().map((p, i) =>
           p === 'ellipsis' ? (
-            <span key={`e${i}`} className="px-1 text-[#848b9b]">...</span>
+            <span key={`e${i}`} className="px-1 text-muted-foreground">...</span>
           ) : (
             <button
               key={p}
@@ -58,8 +58,8 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
                 btnBase,
                 'px-2',
                 p === page
-                  ? 'bg-[#22d3ee] text-white'
-                  : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                  ? 'bg-primary text-white'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               {p}
@@ -69,7 +69,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
-          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
+          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
         >
           <ChevronRight className="h-4 w-4" />
         </button>
diff --git a/frontend/src/components/admin/SearchInput.tsx b/frontend/src/components/admin/SearchInput.tsx
index d968de69..662ccea0 100644
--- a/frontend/src/components/admin/SearchInput.tsx
+++ b/frontend/src/components/admin/SearchInput.tsx
@@ -40,21 +40,21 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
 
   return (
     <div className={cn('relative', className)}>
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
       <input
         type="text"
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
         className={cn(
-          'h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] pl-9 pr-8 text-sm text-[#e2e5eb]',
-          'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+          'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
+          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (
         <button
           onClick={handleClear}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[#848b9b] hover:text-[#e2e5eb]"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
         >
           <X className="h-3.5 w-3.5" />
         </button>
diff --git a/frontend/src/components/admin/StatusBadge.tsx b/frontend/src/components/admin/StatusBadge.tsx
index 0c2a2251..0f2e4b54 100644
--- a/frontend/src/components/admin/StatusBadge.tsx
+++ b/frontend/src/components/admin/StatusBadge.tsx
@@ -12,7 +12,7 @@ const variantClasses: Record<BadgeVariant, string> = {
   success: 'bg-emerald-400/10 text-emerald-400',
   destructive: 'bg-red-400/10 text-red-400',
   warning: 'bg-yellow-400/10 text-yellow-400',
-  default: 'bg-accent text-[#848b9b]',
+  default: 'bg-accent text-muted-foreground',
 }
 
 export function StatusBadge({ variant = 'default', children, className }: StatusBadgeProps) {
diff --git a/frontend/src/components/analytics/CoverageHeatmap.tsx b/frontend/src/components/analytics/CoverageHeatmap.tsx
index 747d217c..5c8237c3 100644
--- a/frontend/src/components/analytics/CoverageHeatmap.tsx
+++ b/frontend/src/components/analytics/CoverageHeatmap.tsx
@@ -41,10 +41,10 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
     return (
       <div className="card-flat p-6">
         <div className="flex items-center gap-2 mb-2">
-          <MapPin size={16} className="text-[#e2e5eb]" />
-          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Domain Coverage</h3>
+          <MapPin size={16} className="text-foreground" />
+          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
         </div>
-        <p className="text-sm text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
           No session data for this period. Start using FlowPilot to see coverage metrics.
         </p>
       </div>
@@ -55,10 +55,10 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
     <div className="card-flat p-3 sm:p-5">
       <div className="mb-4">
         <div className="flex items-center gap-2 mb-1">
-          <MapPin size={16} className="text-[#e2e5eb]" />
-          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Domain Coverage</h3>
+          <MapPin size={16} className="text-foreground" />
+          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
         </div>
-        <p className="text-xs text-[#848b9b]">
+        <p className="text-xs text-muted-foreground">
           Resolution coverage and knowledge gaps by problem domain
         </p>
       </div>
@@ -66,26 +66,26 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
       <div className="overflow-x-auto">
         <table className="w-full">
           <thead>
-            <tr className="border-b border-[#1e2130]">
-              <th className="px-3 py-2 text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <tr className="border-b border-border">
+              <th className="px-3 py-2 text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Domain
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Flows
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Sessions
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Resolution %
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Escalation %
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Guided %
               </th>
-              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
                 title="Average time to resolve sessions in this domain. Green: &lt;10 min, Amber: 10–20 min, Red: &gt;20 min. Lower is better.">
                 Avg Resolution
               </th>
@@ -93,15 +93,15 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
           </thead>
           <tbody>
             {data.domains.map((row) => (
-              <tr key={row.domain} className="border-b border-[#1e2130]">
-                <td className="px-3 py-2 text-sm text-[#e2e5eb] font-medium">
+              <tr key={row.domain} className="border-b border-border">
+                <td className="px-3 py-2 text-sm text-foreground font-medium">
                   {row.domain}
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
                   {row.flow_count === 0 ? (
                     <Link
                       to="/trees/new"
-                      className="inline-flex items-center gap-1 text-xs text-[#22d3ee] hover:underline"
+                      className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                     >
                       <Plus size={10} />
                       Create Flow
@@ -115,7 +115,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                     </span>
                   )}
                 </td>
-                <td className="px-3 py-2 text-sm text-right text-[#848b9b]">
+                <td className="px-3 py-2 text-sm text-right text-muted-foreground">
                   {row.session_count}
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
@@ -144,7 +144,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
                   {row.avg_resolution_minutes == null ? (
-                    <span className="text-[#848b9b]">—</span>
+                    <span className="text-muted-foreground">—</span>
                   ) : (
                     <span
                       className={cn(
@@ -167,7 +167,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
           {data.unmapped_session_count > 0 && (
             <tfoot>
               <tr>
-                <td colSpan={7} className="px-3 py-2 text-xs text-[#848b9b]">
+                <td colSpan={7} className="px-3 py-2 text-xs text-muted-foreground">
                   {data.unmapped_session_count} sessions had no domain classification
                 </td>
               </tr>
@@ -176,7 +176,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
         </table>
       </div>
 
-      <div className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-sans text-xs text-[#848b9b]">
+      <div className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-sans text-xs text-muted-foreground">
         <span><span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1" />Good</span>
         <span><span className="inline-block w-2 h-2 rounded-full bg-amber-400 mr-1" />Needs Improvement</span>
         <span><span className="inline-block w-2 h-2 rounded-full bg-rose-500 mr-1" />Critical</span>
diff --git a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
index c868f1a8..19923775 100644
--- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
+++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
@@ -54,14 +54,14 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     )
   }
 
   if (error || !data) {
     return (
-      <div className="text-center py-12 text-[#848b9b]">
+      <div className="text-center py-12 text-muted-foreground">
         No analytics data available for this flow.
       </div>
     )
@@ -73,11 +73,11 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
     <div className="space-y-6">
       {/* Period selector */}
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-[#e2e5eb]">Flow Analytics</h3>
+        <h3 className="text-lg font-semibold text-foreground">Flow Analytics</h3>
         <select
           value={period}
           onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-          className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-ring"
+          className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-ring"
         >
           {PERIOD_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -107,8 +107,8 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Area chart - Sessions over time */}
       {time_series.length > 0 && (
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Sessions Over Time</p>
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Sessions Over Time</p>
           <ResponsiveContainer width="100%" height={180}>
             <AreaChart data={time_series}>
               <CartesianGrid
@@ -192,7 +192,7 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                   className="h-2 w-2 rounded-full"
                   style={{ backgroundColor: color }}
                 />
-                <span className="text-xs text-[#848b9b] capitalize">
+                <span className="text-xs text-muted-foreground capitalize">
                   {key}
                 </span>
               </div>
@@ -203,16 +203,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Step Feedback Table with Dropoff Metrics */}
       {step_feedback.length > 0 && (
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Step Performance</p>
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Step Performance</p>
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b border-[#1e2130]">
-                  <th className="text-left py-2 pr-4 text-[#e2e5eb] font-medium">Step</th>
-                  <th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Visits</th>
-                  <th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Dropoffs</th>
-                  <th className="text-right py-2 text-[#e2e5eb] font-medium">Dropoff Rate</th>
+                <tr className="border-b border-border">
+                  <th className="text-left py-2 pr-4 text-foreground font-medium">Step</th>
+                  <th className="text-right py-2 pr-4 text-foreground font-medium">Visits</th>
+                  <th className="text-right py-2 pr-4 text-foreground font-medium">Dropoffs</th>
+                  <th className="text-right py-2 text-foreground font-medium">Dropoff Rate</th>
                 </tr>
               </thead>
               <tbody>
@@ -220,23 +220,23 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                   <tr
                     key={step.node_id}
                     className={cn(
-                      'border-b border-[#1e2130] last:border-0',
+                      'border-b border-border last:border-0',
                       step.dropoff_rate > 0.2 && 'bg-red-400/5'
                     )}
                   >
-                    <td className="py-2 pr-4 text-[#848b9b] truncate max-w-[200px]">
+                    <td className="py-2 pr-4 text-muted-foreground truncate max-w-[200px]">
                       {step.node_title}
                     </td>
-                    <td className="py-2 pr-4 text-right text-[#848b9b]">
+                    <td className="py-2 pr-4 text-right text-muted-foreground">
                       {step.visit_count}
                     </td>
-                    <td className="py-2 pr-4 text-right text-[#848b9b]">
+                    <td className="py-2 pr-4 text-right text-muted-foreground">
                       {step.dropoff_count}
                     </td>
                     <td
                       className={cn(
                         'py-2 text-right font-medium',
-                        step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-[#848b9b]'
+                        step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-muted-foreground'
                       )}
                     >
                       {(step.dropoff_rate * 100).toFixed(1)}%
@@ -251,13 +251,13 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Recent Comments (Anonymous) */}
       {recent_comments.length > 0 && (
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Recent Feedback</p>
+        <div className="bg-card border border-border rounded-xl p-4">
+          <p className="text-sm font-semibold text-foreground mb-3">Recent Feedback</p>
           <div className="space-y-3">
             {recent_comments.map((item, i) => (
               <div
                 key={i}
-                className="flex items-start gap-3 border-b border-[#1e2130]/50 pb-3 last:border-0 last:pb-0"
+                className="flex items-start gap-3 border-b border-border/50 pb-3 last:border-0 last:pb-0"
               >
                 <div className="flex items-center gap-0.5 shrink-0 pt-0.5">
                   {[1, 2, 3, 4, 5].map((v) => (
@@ -267,16 +267,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                       className={cn(
                         v <= item.rating
                           ? 'fill-yellow-400 text-yellow-400'
-                          : 'fill-none text-[#848b9b]'
+                          : 'fill-none text-muted-foreground'
                       )}
                     />
                   ))}
                 </div>
                 <div className="min-w-0">
                   {item.comment && (
-                    <p className="text-sm text-[#e2e5eb]">{item.comment}</p>
+                    <p className="text-sm text-foreground">{item.comment}</p>
                   )}
-                  <p className="text-xs text-[#848b9b] mt-0.5">
+                  <p className="text-xs text-muted-foreground mt-0.5">
                     {new Date(item.created_at).toLocaleDateString()}
                   </p>
                 </div>
@@ -299,11 +299,11 @@ function StatCard({
   subtitle?: string
 }) {
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-      <p className="text-xs text-[#848b9b]">{label}</p>
-      <p className="text-xl font-bold text-[#e2e5eb] mt-1">{value}</p>
+    <div className="bg-card border border-border rounded-xl p-4">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="text-xl font-bold text-foreground mt-1">{value}</p>
       {subtitle && (
-        <p className="text-xs text-[#848b9b] mt-0.5">{subtitle}</p>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/analytics/FlowQualityTable.tsx b/frontend/src/components/analytics/FlowQualityTable.tsx
index 82e35d98..0f20c51b 100644
--- a/frontend/src/components/analytics/FlowQualityTable.tsx
+++ b/frontend/src/components/analytics/FlowQualityTable.tsx
@@ -13,7 +13,7 @@ type SortColumn = 'name' | 'usage_count' | 'success_rate' | 'last_matched_at' |
 type SortDir = 'asc' | 'desc'
 
 const TYPE_LABELS: Record<string, { label: string; color: string }> = {
-  troubleshooting: { label: 'Troubleshooting', color: 'text-[#22d3ee]' },
+  troubleshooting: { label: 'Troubleshooting', color: 'text-primary' },
   procedural: { label: 'Project', color: 'text-amber-400' },
   maintenance: { label: 'Maintenance', color: 'text-blue-400' },
 }
@@ -33,7 +33,7 @@ function formatRelativeTime(dateStr: string | null): string {
 }
 
 function rateColor(value: number | null): string {
-  if (value === null) return 'text-[#848b9b]'
+  if (value === null) return 'text-muted-foreground'
   if (value > 75) return 'text-emerald-400'
   if (value >= 50) return 'text-amber-400'
   return 'text-rose-500'
@@ -112,7 +112,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
     return (
       <div className="card-flat p-3 sm:p-5">
         <div className="flex items-center justify-center min-h-[200px]">
-          <p className="text-sm text-[#848b9b]">
+          <p className="text-sm text-muted-foreground">
             No flows found for this account. Create your first flow to start tracking quality.
           </p>
         </div>
@@ -133,17 +133,17 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
     <div className="card-flat p-3 sm:p-5">
       <div className="mb-4">
         <div className="flex items-center gap-2">
-          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">
+          <h3 className="font-heading text-sm font-semibold text-foreground">
             Flow Quality Scores
           </h3>
           <span className="group relative">
-            <Info size={14} className="text-[#848b9b] cursor-help" />
-            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-[#14161d] border border-[#1e2130] text-xs text-[#848b9b] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+            <Info size={14} className="text-muted-foreground cursor-help" />
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-card border border-border text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
               Quality score combines success rate (50%), AI confidence level (30%), and recent usage (20%). Higher is better.
             </div>
           </span>
         </div>
-        <p className="text-xs text-[#848b9b] mt-1">
+        <p className="text-xs text-muted-foreground mt-1">
           Performance and usage metrics for your troubleshooting flows
         </p>
       </div>
@@ -151,7 +151,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
       <div className="overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-[#1e2130]">
+            <tr className="border-b border-border">
               {columns.map((col) => {
                 const isActive = sortCol === col.key
                 const SortIcon = isActive
@@ -160,7 +160,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
                 return (
                   <th
                     key={col.key}
-                    className="text-left py-2 px-2 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] cursor-pointer select-none hover:text-[#e2e5eb] transition-colors"
+                    className="text-left py-2 px-2 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
                     onClick={() => handleSort(col.key)}
                     title={col.title}
                   >
@@ -207,7 +207,7 @@ function FlowRow({
   return (
     <tr
       className={cn(
-        'border-b border-[#1e2130]/50 hover:bg-[#14161d]/30 transition-colors',
+        'border-b border-border/50 hover:bg-card/30 transition-colors',
         isTopPerformer && 'border-l-2 border-l-emerald-400',
         needsAttention && 'border-l-2 border-l-rose-500',
       )}
@@ -217,11 +217,11 @@ function FlowRow({
         <div className="flex items-center gap-2">
           <Link
             to={getTreeEditorPath(flow.flow_id, flow.tree_type)}
-            className="text-[#e2e5eb] hover:text-[#22d3ee] transition-colors font-medium truncate max-w-[200px]"
+            className="text-foreground hover:text-primary transition-colors font-medium truncate max-w-[200px]"
           >
             {flow.name}
           </Link>
-          <span className={cn('font-sans text-xs text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-[#848b9b]')}>
+          <span className={cn('font-sans text-xs text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-muted-foreground')}>
             {TYPE_LABELS[flow.tree_type]?.label || flow.tree_type}
           </span>
           {needsAttention && (
@@ -233,7 +233,7 @@ function FlowRow({
       </td>
 
       {/* Usage */}
-      <td className="py-2.5 px-2 text-[#e2e5eb]">{flow.usage_count}</td>
+      <td className="py-2.5 px-2 text-foreground">{flow.usage_count}</td>
 
       {/* Success Rate */}
       <td className={cn('py-2.5 px-2', rateColor(flow.success_rate))}>
@@ -241,7 +241,7 @@ function FlowRow({
       </td>
 
       {/* Last Used */}
-      <td className="py-2.5 px-2 text-[#848b9b]">
+      <td className="py-2.5 px-2 text-muted-foreground">
         {formatRelativeTime(flow.last_matched_at)}
       </td>
 
@@ -259,7 +259,7 @@ function FlowRow({
               style={{ width: `${flow.quality_score * 100}%` }}
             />
           </div>
-          <span className="text-xs text-[#e2e5eb]">
+          <span className="text-xs text-foreground">
             {(flow.quality_score * 100).toFixed(0)}
           </span>
         </div>
diff --git a/frontend/src/components/analytics/PsaMetricsPanel.tsx b/frontend/src/components/analytics/PsaMetricsPanel.tsx
index 8690e256..6c47f2fe 100644
--- a/frontend/src/components/analytics/PsaMetricsPanel.tsx
+++ b/frontend/src/components/analytics/PsaMetricsPanel.tsx
@@ -21,7 +21,7 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
     return (
       <div className="card-flat p-3 sm:p-5">
         <div className="flex items-center justify-center min-h-[200px]">
-          <p className="text-sm text-[#848b9b]">
+          <p className="text-sm text-muted-foreground">
             No PSA activity data for this period. Link sessions to PSA tickets to see metrics.
           </p>
         </div>
@@ -34,19 +34,19 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
       {/* Row 1 — Metric cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div className="card-flat p-4">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Time Entries</p>
-          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.total_time_entries}</p>
-          <p className="text-xs text-[#848b9b] mt-1">logged to PSA</p>
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-text-muted">Time Entries</p>
+          <p className="text-accent-text font-heading text-2xl mt-1">{data.total_time_entries}</p>
+          <p className="text-xs text-muted-foreground mt-1">logged to PSA</p>
         </div>
         <div className="card-flat p-4">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Hours Logged</p>
-          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.total_hours_logged.toFixed(1)}</p>
-          <p className="text-xs text-[#848b9b] mt-1">total hours tracked</p>
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-text-muted">Hours Logged</p>
+          <p className="text-accent-text font-heading text-2xl mt-1">{data.total_hours_logged.toFixed(1)}</p>
+          <p className="text-xs text-muted-foreground mt-1">total hours tracked</p>
         </div>
         <div className="card-flat p-4">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Avg Hours/Session</p>
-          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.avg_hours_per_session.toFixed(2)}</p>
-          <p className="text-xs text-[#848b9b] mt-1">per resolved session</p>
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-text-muted">Avg Hours/Session</p>
+          <p className="text-accent-text font-heading text-2xl mt-1">{data.avg_hours_per_session.toFixed(2)}</p>
+          <p className="text-xs text-muted-foreground mt-1">per resolved session</p>
         </div>
       </div>
 
@@ -56,7 +56,7 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
       {/* Row 3 — Daily Trend Chart */}
       {data.daily_trend.length > 0 && (
         <div className="card-flat p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
             PSA Activity Trend
           </h3>
           <ResponsiveContainer width="100%" height={250}>
@@ -130,7 +130,7 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
 
   return (
     <div className="card-flat p-3 sm:p-5">
-      <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+      <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
         Documentation Push Funnel
       </h3>
 
@@ -139,15 +139,15 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
         {steps.map((step, i) => (
           <div key={step.label} className="flex items-center gap-2 flex-1">
             <div className="bg-primary/5 border border-primary/20 rounded-lg p-3 text-center flex-1">
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 {step.label}
               </p>
-              <p className="text-lg font-heading text-[#e2e5eb]">{step.count}</p>
+              <p className="text-lg font-heading text-foreground">{step.count}</p>
             </div>
             {i < steps.length - 1 && (
               <div className="flex flex-col items-center shrink-0 px-1">
-                <ArrowRight size={14} className="text-[#848b9b]" />
-                <span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">
+                <ArrowRight size={14} className="text-muted-foreground" />
+                <span className="text-[0.625rem] text-muted-foreground font-sans text-xs">
                   {funnelPct(steps[i].count, steps[i + 1].count)}
                 </span>
               </div>
@@ -161,15 +161,15 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
         {steps.map((step, i) => (
           <div key={step.label} className="flex flex-col items-center gap-2 w-full">
             <div className="bg-primary/5 border border-primary/20 rounded-lg p-3 text-center w-full">
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 {step.label}
               </p>
-              <p className="text-lg font-heading text-[#e2e5eb]">{step.count}</p>
+              <p className="text-lg font-heading text-foreground">{step.count}</p>
             </div>
             {i < steps.length - 1 && (
               <div className="flex items-center gap-1">
-                <ArrowDown size={14} className="text-[#848b9b]" />
-                <span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">
+                <ArrowDown size={14} className="text-muted-foreground" />
+                <span className="text-[0.625rem] text-muted-foreground font-sans text-xs">
                   {funnelPct(steps[i].count, steps[i + 1].count)}
                 </span>
               </div>
diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx
index 4fa3c200..0cba31c7 100644
--- a/frontend/src/components/assistant/ChatMessage.tsx
+++ b/frontend/src/components/assistant/ChatMessage.tsx
@@ -16,8 +16,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
       <div
         className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
           role === 'assistant'
-            ? 'bg-primary/15 text-[#22d3ee]'
-            : 'bg-white/[0.08] text-[#848b9b]'
+            ? 'bg-primary/15 text-primary'
+            : 'bg-white/[0.08] text-muted-foreground'
         }`}
       >
         {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
@@ -28,8 +28,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         <div
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
-              ? 'bg-primary/15 text-[#e2e5eb]'
-              : 'bg-[#191c25] text-[#e2e5eb] border border-[#1e2130]'
+              ? 'bg-primary/15 text-foreground'
+              : 'bg-input text-foreground border border-border'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
@@ -38,7 +38,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         {/* Suggested flows (assistant only) */}
         {role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
           <div className="space-y-1.5">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index f4d4fa6c..3776ce53 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -31,7 +31,7 @@ export function ChatSidebar({
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
+          className="w-full flex items-center justify-center gap-2 bg-primary text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Plus size={16} />
           New Chat
@@ -42,7 +42,7 @@ export function ChatSidebar({
       <div className="flex-1 overflow-y-auto py-2">
         {pinnedChats.length > 0 && (
           <div className="px-3 mb-1">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Pinned
             </span>
           </div>
@@ -74,7 +74,7 @@ export function ChatSidebar({
         ))}
 
         {chats.length === 0 && (
-          <div className="px-4 py-8 text-center text-[#848b9b] text-sm">
+          <div className="px-4 py-8 text-center text-muted-foreground text-sm">
             No conversations yet
           </div>
         )}
@@ -102,14 +102,14 @@ function ChatItem({
       className={cn(
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
         isActive
-          ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-          : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+          ? 'bg-accent-dim text-foreground'
+          : 'text-muted-foreground hover:bg-input hover:text-foreground'
       )}
     >
       <MessageSquare size={14} className="shrink-0" />
       <div className="flex-1 min-w-0">
         <div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
-        <div className="text-[0.6875rem] text-[#848b9b]">
+        <div className="text-[0.6875rem] text-muted-foreground">
           {chat.message_count} messages
         </div>
       </div>
@@ -119,11 +119,11 @@ function ChatItem({
           className="p-1 rounded hover:bg-white/[0.08]"
           title={chat.pinned ? 'Unpin' : 'Pin'}
         >
-          <Pin size={12} className={chat.pinned ? 'text-[#22d3ee]' : ''} />
+          <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
         </button>
         <button
           onClick={e => { e.stopPropagation(); onDelete() }}
-          className="p-1 rounded hover:bg-white/[0.08] text-[#848b9b] hover:text-rose-400"
+          className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
           title="Delete"
         >
           <Trash2 size={12} />
diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index 8cbaa75b..5f285706 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -155,21 +155,21 @@ export function ConcludeSessionModal({
           style={{ borderColor: 'var(--glass-border)' }}
         >
           <div className="flex items-center gap-3">
-            <div className="w-9 h-9 rounded-xl bg-[rgba(34,211,238,0.10)] flex items-center justify-center">
-              <ClipboardList size={18} className="text-[#22d3ee]" />
+            <div className="w-9 h-9 rounded-xl bg-accent-dim flex items-center justify-center">
+              <ClipboardList size={18} className="text-primary" />
             </div>
             <div>
-              <h2 className="text-base font-heading font-semibold text-[#e2e5eb]">
+              <h2 className="text-base font-heading font-semibold text-foreground">
                 Conclude Session
               </h2>
-              <p className="text-xs text-[#848b9b] truncate max-w-[300px]">
+              <p className="text-xs text-muted-foreground truncate max-w-[300px]">
                 {chatTitle}
               </p>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="p-2 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="p-2 rounded-lg hover:bg-border text-muted-foreground hover:text-foreground transition-colors"
           >
             <X size={18} />
           </button>
@@ -196,10 +196,10 @@ export function ConcludeSessionModal({
                 className={cn(
                   'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-sans text-xs font-medium transition-colors',
                   step === s
-                    ? 'bg-[#22d3ee] text-white'
+                    ? 'bg-primary text-white'
                     : (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
-                    ? 'bg-primary/20 text-[#22d3ee]'
-                    : 'bg-brand-border text-[#848b9b]'
+                    ? 'bg-primary/20 text-primary'
+                    : 'bg-brand-border text-muted-foreground'
                 )}
               >
                 {i + 1}
@@ -207,7 +207,7 @@ export function ConcludeSessionModal({
               <span
                 className={cn(
                   'text-xs font-sans text-xs',
-                  step === s ? 'text-[#e2e5eb]' : 'text-[#848b9b]'
+                  step === s ? 'text-foreground' : 'text-muted-foreground'
                 )}
               >
                 {s === 'select-outcome' ? 'Outcome' : s === 'add-notes' ? 'Notes' : 'Summary'}
@@ -221,7 +221,7 @@ export function ConcludeSessionModal({
           {/* Step 1: Select Outcome */}
           {step === 'select-outcome' && (
             <div className="space-y-3">
-              <p className="text-sm text-[#848b9b] mb-4">
+              <p className="text-sm text-muted-foreground mb-4">
                 How did this session end?
               </p>
               {OUTCOMES.map(o => {
@@ -233,16 +233,16 @@ export function ConcludeSessionModal({
                     className={cn(
                       'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
                       'hover:scale-[1.01] active:scale-[0.99]',
-                      'bg-[#14161d] border-[#1e2130]',
-                      'hover:border-[#2a2f3d] hover:bg-[#191c25]'
+                      'bg-card border-border',
+                      'hover:border-border-hover hover:bg-input'
                     )}
                   >
                     <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', o.bg)}>
                       <Icon size={20} className={o.color} />
                     </div>
                     <div>
-                      <span className="text-sm font-semibold text-[#e2e5eb] block">{o.label}</span>
-                      <span className="text-xs text-[#848b9b]">{o.description}</span>
+                      <span className="text-sm font-semibold text-foreground block">{o.label}</span>
+                      <span className="text-xs text-muted-foreground">{o.description}</span>
                     </div>
                   </button>
                 )
@@ -261,14 +261,14 @@ export function ConcludeSessionModal({
                 </div>
                 <button
                   onClick={() => setStep('select-outcome')}
-                  className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Change
                 </button>
               </div>
 
               <div>
-                <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-2">
+                <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-2">
                   Additional Notes (optional)
                 </label>
                 <textarea
@@ -282,7 +282,7 @@ export function ConcludeSessionModal({
                       : 'What still needs to be done, where you left off...'
                   }
                   rows={4}
-                  className="w-full resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm placeholder:text-[#848b9b] px-4 py-3 focus:outline-hidden focus:border-primary/30"
+                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
                   style={{ borderColor: 'var(--glass-border)' }}
                 />
               </div>
@@ -308,16 +308,16 @@ export function ConcludeSessionModal({
 
               {/* Generated summary */}
               <div
-                className="rounded-xl border p-5 bg-[#14161d]"
+                className="rounded-xl border p-5 bg-card"
                 style={{ borderColor: 'var(--glass-border)' }}
               >
                 <div className="flex items-center justify-between mb-3">
-                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] flex items-center gap-1.5">
-                    <Sparkles size={10} className="text-[#22d3ee]" />
+                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
+                    <Sparkles size={10} className="text-primary" />
                     Generated Ticket Notes
                   </span>
                 </div>
-                <div className="prose-sm text-[#e2e5eb]">
+                <div className="prose-sm text-foreground">
                   <MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
                 </div>
               </div>
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
               <div />
               <button
                 onClick={onClose}
-                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground bg-input border border-border hover:border-border-hover transition-all"
               >
                 Cancel
               </button>
@@ -346,14 +346,14 @@ export function ConcludeSessionModal({
             <>
               <button
                 onClick={() => setStep('select-outcome')}
-                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground bg-input border border-border hover:border-border-hover transition-all"
               >
                 Back
               </button>
               <button
                 onClick={handleGenerate}
                 disabled={generating}
-                className="flex items-center gap-2 bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+                className="flex items-center gap-2 bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
               >
                 {generating ? (
                   <>
@@ -390,7 +390,7 @@ export function ConcludeSessionModal({
                     'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
                     copied
                       ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
-                      : 'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]'
+                      : 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
                   )}
                 >
                   {copied ? (
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
                 </button>
                 <button
                   onClick={onClose}
-                  className="px-4 py-2.5 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
+                  className="px-4 py-2.5 rounded-lg text-sm text-muted-foreground hover:text-foreground bg-input border border-border hover:border-border-hover transition-all"
                 >
                   Done
                 </button>
diff --git a/frontend/src/components/assistant/SuggestedFlowCard.tsx b/frontend/src/components/assistant/SuggestedFlowCard.tsx
index b0302789..120ae956 100644
--- a/frontend/src/components/assistant/SuggestedFlowCard.tsx
+++ b/frontend/src/components/assistant/SuggestedFlowCard.tsx
@@ -18,24 +18,24 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
   return (
     <button
       onClick={handleClick}
-      className="w-full text-left card-flat p-3 rounded-xl hover:border-[#2a2f3d] transition-colors group"
+      className="w-full text-left card-flat p-3 rounded-xl hover:border-border-hover transition-colors group"
     >
       <div className="flex items-start gap-2">
-        <Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />
+        <Box size={14} className="text-primary mt-0.5 shrink-0" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-1.5">
-            <span className="text-[0.8125rem] font-medium text-[#e2e5eb] truncate">
+            <span className="text-[0.8125rem] font-medium text-foreground truncate">
               {flow.tree_name}
             </span>
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
               {flow.tree_type}
             </span>
           </div>
-          <p className="text-[0.75rem] text-[#848b9b] mt-0.5 line-clamp-2">
+          <p className="text-[0.75rem] text-muted-foreground mt-0.5 line-clamp-2">
             {flow.relevance_snippet}
           </p>
         </div>
-        <ArrowRight size={14} className="text-[#848b9b] group-hover:text-[#22d3ee] transition-colors shrink-0 mt-0.5" />
+        <ArrowRight size={14} className="text-muted-foreground group-hover:text-primary transition-colors shrink-0 mt-0.5" />
       </div>
     </button>
   )
diff --git a/frontend/src/components/common/ActionMenu.tsx b/frontend/src/components/common/ActionMenu.tsx
index d766b28d..d4058f28 100644
--- a/frontend/src/components/common/ActionMenu.tsx
+++ b/frontend/src/components/common/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
-          'hover:bg-accent hover:text-[#e2e5eb]'
+          'rounded-md border border-border p-2 text-muted-foreground',
+          'hover:bg-accent hover:text-foreground'
         )}
         aria-label="Actions"
       >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       {isOpen && (
         <div
           className={cn(
-            'absolute z-50 mt-1 min-w-[180px] bg-[#14161d] border border-[#1e2130] rounded-lg p-1',
+            'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
             align === 'right' ? 'right-0' : 'left-0'
           )}
         >
@@ -81,7 +81,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
                     ? 'cursor-not-allowed opacity-40'
                     : action.variant === 'destructive'
                       ? 'text-red-400 hover:bg-accent hover:text-red-300'
-                      : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                 )}
               >
                 {Icon && <Icon className="h-4 w-4" />}
diff --git a/frontend/src/components/common/BrandWordmark.tsx b/frontend/src/components/common/BrandWordmark.tsx
index a5eadf82..1b2b5b07 100644
--- a/frontend/src/components/common/BrandWordmark.tsx
+++ b/frontend/src/components/common/BrandWordmark.tsx
@@ -9,7 +9,7 @@ export function BrandWordmark({ size = 'sm', className }: BrandWordmarkProps) {
   return (
     <span
       className={cn(
-        'font-heading font-bold tracking-tight text-[#f0f2f5]',
+        'font-heading font-bold tracking-tight text-text-heading',
         size === 'sm' ? 'text-xl' : 'text-3xl',
         className
       )}
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index 7b1a6b32..ccc778af 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-[#1e2130] px-4 py-2 text-sm font-medium',
-              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-[#22d3ee] text-white hover:brightness-110'
+                : 'bg-primary text-white hover:brightness-110'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-[#848b9b]">{message}</p>
+      <p className="text-sm text-muted-foreground">{message}</p>
     </Modal>
   )
 }
diff --git a/frontend/src/components/common/ContextMenu.tsx b/frontend/src/components/common/ContextMenu.tsx
index 5a2b9a1a..d452c0c1 100644
--- a/frontend/src/components/common/ContextMenu.tsx
+++ b/frontend/src/components/common/ContextMenu.tsx
@@ -71,12 +71,12 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
         left: position.x,
         top: position.y,
       }}
-      className="min-w-[200px] rounded-xl border border-[#1e2130] bg-[#14161d] p-1 shadow-lg"
+      className="min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg"
     >
       {items.map((item) => (
         <div key={item.id}>
           {item.separator && (
-            <div className="my-1 border-t border-[#1e2130]" />
+            <div className="my-1 border-t border-border" />
           )}
           <button
             onClick={() => {
@@ -87,11 +87,11 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-[#e2e5eb] hover:bg-[#1e2130]'
+                : 'text-foreground hover:bg-border'
             )}
           >
             {item.icon && (
-              <span className="flex h-4 w-4 items-center justify-center text-[#848b9b]">
+              <span className="flex h-4 w-4 items-center justify-center text-muted-foreground">
                 {item.icon}
               </span>
             )}
diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 581b79d2..27375622 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -65,7 +65,7 @@ export function CreateFlowDropdown({
     <div className={cn('relative', className)}>
       <button
         onClick={() => setShowMenu(!showMenu)}
-        className="flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
+        className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
       >
         <Plus size={16} />
         {label}
@@ -74,17 +74,17 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl">
             {/* Troubleshooting */}
             <Link
               to="/trees/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
             >
-              <FolderTree className="h-4 w-4 text-[#848b9b]" />
+              <FolderTree className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
                 <div className="font-medium">Troubleshooting Tree</div>
-                <div className="text-xs text-[#848b9b]">Branching decision flow</div>
+                <div className="text-xs text-muted-foreground">Branching decision flow</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -95,27 +95,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('troubleshooting')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-[#1e2130]" />
+            <div className="my-1 border-t border-border" />
 
             {/* Procedural */}
             <Link
               to="/flows/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
             >
-              <ListOrdered className="h-4 w-4 text-[#848b9b]" />
+              <ListOrdered className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
                 <div className="font-medium">Procedural Flow</div>
-                <div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
+                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -126,27 +126,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('procedural')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-[#1e2130]" />
+            <div className="my-1 border-t border-border" />
 
             {/* Maintenance */}
             <Link
               to="/flows/new?type=maintenance"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
             >
               <Wrench className="h-4 w-4 text-amber-400" />
               <div className="flex-1">
                 <div className="font-medium">Maintenance Flow</div>
-                <div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
+                <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -157,11 +157,11 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('maintenance')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
diff --git a/frontend/src/components/common/EmptyState.tsx b/frontend/src/components/common/EmptyState.tsx
index cee8d013..b917eb6b 100644
--- a/frontend/src/components/common/EmptyState.tsx
+++ b/frontend/src/components/common/EmptyState.tsx
@@ -31,17 +31,17 @@ export function EmptyState({
         </div>
       )}
       {!illustration && icon && (
-        <div className="mb-4 text-[#848b9b]">{icon}</div>
+        <div className="mb-4 text-muted-foreground">{icon}</div>
       )}
-      <h3 className="text-lg font-semibold text-[#e2e5eb]">{title}</h3>
+      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
       {description && (
-        <p className="mt-2 max-w-sm text-sm text-[#848b9b]">{description}</p>
+        <p className="mt-2 max-w-sm text-sm text-muted-foreground">{description}</p>
       )}
       {action && <div className="mt-4">{action}</div>}
       {learnMoreLink && (
         <Link
           to={learnMoreLink}
-          className="mt-3 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="mt-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
           {learnMoreText} &rarr;
         </Link>
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index 3529ab59..dea0c53b 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -39,10 +39,10 @@ function DefaultFallback({ error, resetError }: FallbackProps) {
         <h2 className="mb-2 text-xl font-semibold text-red-400">
           Something went wrong
         </h2>
-        <p className="mb-4 text-[#848b9b]">
+        <p className="mb-4 text-muted-foreground">
           An unexpected error occurred. Please try refreshing the page.
         </p>
-        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-[#1e2130] p-3 text-left text-xs text-red-400">
+        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
           {error.message}
         </pre>
         <div className="flex justify-center gap-3">
diff --git a/frontend/src/components/common/InfoTip.tsx b/frontend/src/components/common/InfoTip.tsx
index b4da66af..ccaf448e 100644
--- a/frontend/src/components/common/InfoTip.tsx
+++ b/frontend/src/components/common/InfoTip.tsx
@@ -5,7 +5,7 @@ interface InfoTipProps {
 export function InfoTip({ text }: InfoTipProps) {
   return (
     <span
-      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-[#848b9b] cursor-help shrink-0"
+      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-muted-foreground cursor-help shrink-0"
       title={text}
     >
       i
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
index b458c125..03f0c7a6 100644
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -134,7 +134,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
       <div
         ref={modalRef}
         className={cn(
-          'relative flex w-full flex-col border border-[#1e2130] bg-[#14161d] shadow-lg',
+          'relative flex w-full flex-col border border-border bg-card shadow-lg',
           'animate-scale-in transition-all duration-200',
           isFullScreen
             ? 'fixed inset-4 max-w-none w-auto h-auto rounded-2xl'
@@ -145,8 +145,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex shrink-0 items-center justify-between border-b border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
-          <h2 id="modal-title" className="text-lg font-semibold text-[#e2e5eb]">
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+          <h2 id="modal-title" className="text-lg font-semibold text-foreground">
             {title}
           </h2>
           <div className="flex items-center gap-1">
@@ -154,7 +154,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
               <button
                 type="button"
                 onClick={toggleFullScreen}
-                className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                 title={isFullScreen ? 'Exit full screen' : 'Full screen'}
               >
                 {isFullScreen
@@ -166,8 +166,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
             <button
               onClick={onClose}
               className={cn(
-                'rounded-md p-1.5 text-[#848b9b] transition-colors sm:p-1',
-                'hover:bg-accent hover:text-[#e2e5eb]',
+                'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
+                'hover:bg-accent hover:text-foreground',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
               aria-label="Close modal"
@@ -184,7 +184,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="shrink-0 border-t border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
+          <div className="shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}
diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx
index df682ead..ee22d06c 100644
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -25,11 +25,11 @@ export function PageHeader({
       <div className="flex items-start gap-3">
         {icon && <div className="shrink-0">{icon}</div>}
         <div>
-          <h1 className={cn('text-2xl font-bold font-heading text-[#e2e5eb]', titleClassName)}>
+          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
             {title}
           </h1>
           {description && (
-            <p className={cn('mt-1 text-sm text-[#848b9b]', descriptionClassName)}>
+            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
               {description}
             </p>
           )}
diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx
index d180f4d8..4bb62571 100644
--- a/frontend/src/components/common/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader.tsx
@@ -5,7 +5,7 @@ export function PageLoader() {
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
-        <p className="text-sm text-[#848b9b]">Loading&hellip;</p>
+        <p className="text-sm text-muted-foreground">Loading&hellip;</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/common/PasswordInput.tsx b/frontend/src/components/common/PasswordInput.tsx
index c7522094..f783d44a 100644
--- a/frontend/src/components/common/PasswordInput.tsx
+++ b/frontend/src/components/common/PasswordInput.tsx
@@ -19,7 +19,7 @@ export function PasswordInput({ className, ...props }: PasswordInputProps) {
       <button
         type="button"
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         tabIndex={-1}
         title={visible ? 'Hide password' : 'Show password'}
       >
diff --git a/frontend/src/components/common/RichTextInput.tsx b/frontend/src/components/common/RichTextInput.tsx
index 0e765744..914726cd 100644
--- a/frontend/src/components/common/RichTextInput.tsx
+++ b/frontend/src/components/common/RichTextInput.tsx
@@ -233,7 +233,7 @@ export function RichTextInput({
         rows={rows}
         disabled={disabled}
         className={cn(
-          'w-full bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+          'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
           'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
           isDragOver && 'border-primary/50 bg-primary/5',
           disabled && 'opacity-50 cursor-not-allowed'
@@ -243,7 +243,7 @@ export function RichTextInput({
       {/* Drag overlay hint */}
       {isDragOver && (
         <div className="absolute inset-0 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
-          <div className="flex items-center gap-2 text-sm text-[#22d3ee]">
+          <div className="flex items-center gap-2 text-sm text-primary">
             <ImagePlus size={16} />
             Drop image to attach
           </div>
@@ -254,19 +254,19 @@ export function RichTextInput({
       {pendingUploads.length > 0 && (
         <div className="flex gap-2 flex-wrap mt-2">
           {pendingUploads.map((upload) => (
-            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-[#1e2130]">
+            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-border">
               <img src={upload.preview} alt="" className="w-full h-full object-cover" />
               {upload.status === 'uploading' && (
-                <div className="absolute inset-0 bg-[#0c0d10]/50 flex items-center justify-center">
-                  <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
+                <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-primary" />
                 </div>
               )}
               {upload.status === 'done' && (
                 <button
                   onClick={() => handleRemove(upload.id)}
-                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[#0c0d10]/80 border border-[#1e2130] flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background/80 border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
                 >
-                  <X size={10} className="text-[#848b9b]" />
+                  <X size={10} className="text-muted-foreground" />
                 </button>
               )}
               {upload.status === 'error' && (
@@ -284,7 +284,7 @@ export function RichTextInput({
 
       {/* Paste hint */}
       {isFocused && !value && pendingUploads.length === 0 && (
-        <p className="text-[0.625rem] text-[#848b9b]/50 mt-1">Paste screenshots with Ctrl+V</p>
+        <p className="text-[0.625rem] text-muted-foreground/50 mt-1">Paste screenshots with Ctrl+V</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index fc6d5732..45ba1d71 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -55,12 +55,12 @@ export function RouteError() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0c0d10] p-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
       <div className="max-w-md text-center">
-        <h1 className="mb-2 text-4xl font-bold text-[#e2e5eb]">Oops!</h1>
+        <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>
         {errorDetails && (
-          <p className="mb-4 text-[#848b9b]">{errorDetails}</p>
+          <p className="mb-4 text-muted-foreground">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
           <Button variant="secondary" onClick={() => navigate(-1)}>
diff --git a/frontend/src/components/common/Spinner.tsx b/frontend/src/components/common/Spinner.tsx
index 46a0fe26..4222704d 100644
--- a/frontend/src/components/common/Spinner.tsx
+++ b/frontend/src/components/common/Spinner.tsx
@@ -15,7 +15,7 @@ export function Spinner({ size = 'md', className }: SpinnerProps) {
   return (
     <div
       className={cn(
-        'animate-spin rounded-full border-[#1e2130] border-t-primary',
+        'animate-spin rounded-full border-border border-t-primary',
         SIZES[size],
         className
       )}
diff --git a/frontend/src/components/common/StarRating.tsx b/frontend/src/components/common/StarRating.tsx
index 813f570a..d93e584a 100644
--- a/frontend/src/components/common/StarRating.tsx
+++ b/frontend/src/components/common/StarRating.tsx
@@ -48,14 +48,14 @@ export function StarRating({
               sizeClasses[size],
               star <= value
                 ? 'fill-yellow-400 text-yellow-400'
-                : 'fill-none text-[#848b9b]',
+                : 'fill-none text-muted-foreground',
               !readonly && 'hover:text-yellow-300'
             )}
           />
         </button>
       ))}
       {showCount && (
-        <span className="ml-1 text-sm text-[#848b9b]">
+        <span className="ml-1 text-sm text-muted-foreground">
           ({value}/5)
         </span>
       )}
diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index 855894e1..2cb22eb2 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -37,8 +37,8 @@ export function TagBadges({
             'rounded-full font-sans text-xs transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-accent text-[#848b9b] hover:bg-accent'
-              : 'bg-accent/50 text-[#848b9b] hover:bg-accent',
+              ? 'bg-accent text-muted-foreground hover:bg-accent'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -50,7 +50,7 @@ export function TagBadges({
           className={cn(
             'rounded-full font-sans text-xs',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-accent/50 text-[#848b9b]'
+            'bg-accent/50 text-muted-foreground'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >
diff --git a/frontend/src/components/common/TagInput.tsx b/frontend/src/components/common/TagInput.tsx
index eda5afb6..b790a727 100644
--- a/frontend/src/components/common/TagInput.tsx
+++ b/frontend/src/components/common/TagInput.tsx
@@ -123,10 +123,10 @@ export function TagInput({
       <div
         className={cn(
           'flex flex-wrap gap-1.5 rounded-xl border px-2 py-1.5',
-          'bg-[#14161d] text-[#e2e5eb]',
+          'bg-card text-foreground',
           'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20',
           disabled ? 'cursor-not-allowed opacity-50' : '',
-          'border-[#1e2130]'
+          'border-border'
         )}
         onClick={() => inputRef.current?.focus()}
       >
@@ -136,7 +136,7 @@ export function TagInput({
             key={tag}
             className={cn(
               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
-              'bg-accent text-[#848b9b]'
+              'bg-accent text-muted-foreground'
             )}
           >
             {tag}
@@ -184,8 +184,8 @@ export function TagInput({
             placeholder={tags.length === 0 ? placeholder : ''}
             disabled={disabled}
             className={cn(
-              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-[#e2e5eb]',
-              'placeholder:text-[#848b9b]',
+              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
+              'placeholder:text-muted-foreground',
               'focus:outline-hidden focus:ring-0'
             )}
           />
@@ -196,8 +196,8 @@ export function TagInput({
       {showSuggestions && suggestions.length > 0 && (
         <div
           className={cn(
-            'absolute z-10 mt-1 w-full rounded-xl border border-[#1e2130]',
-            'bg-[#14161d] shadow-lg'
+            'absolute z-10 mt-1 w-full rounded-xl border border-border',
+            'bg-card shadow-lg'
           )}
         >
           {suggestions.map((suggestion, index) => (
@@ -206,13 +206,13 @@ export function TagInput({
               type="button"
               onClick={() => addTag(suggestion.name)}
               className={cn(
-                'flex w-full items-center justify-between px-3 py-2 text-sm text-[#848b9b]',
+                'flex w-full items-center justify-between px-3 py-2 text-sm text-muted-foreground',
                 'hover:bg-accent',
                 index === selectedIndex && 'bg-accent'
               )}
             >
               <span>{suggestion.name}</span>
-              <span className="text-xs text-[#848b9b]">
+              <span className="text-xs text-muted-foreground">
                 {suggestion.usage_count} trees
               </span>
             </button>
@@ -225,8 +225,8 @@ export function TagInput({
                 type="button"
                 onClick={() => addTag(inputValue)}
                 className={cn(
-                  'flex w-full items-center gap-2 border-t border-[#1e2130] px-3 py-2 text-sm',
-                  'hover:bg-accent text-[#e2e5eb]'
+                  'flex w-full items-center gap-2 border-t border-border px-3 py-2 text-sm',
+                  'hover:bg-accent text-foreground'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -237,7 +237,7 @@ export function TagInput({
       )}
 
       {/* Helper text */}
-      <p className="mt-1 text-xs text-[#848b9b]">
+      <p className="mt-1 text-xs text-muted-foreground">
         {tags.length}/{maxTags} tags. Press Enter, Tab, comma, or semicolon to add.
       </p>
     </div>
diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index f406eef0..a70164b1 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -105,12 +105,12 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         style={{ borderColor: 'var(--glass-border)' }}
       >
         <div className="flex items-center gap-2">
-          <Sparkles size={16} className="text-[#22d3ee]" />
-          <span className="text-sm font-semibold text-[#e2e5eb]">AI Copilot</span>
+          <Sparkles size={16} className="text-primary" />
+          <span className="text-sm font-semibold text-foreground">AI Copilot</span>
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="p-1.5 rounded-lg hover:bg-border text-muted-foreground hover:text-foreground transition-colors"
         >
           <X size={16} />
         </button>
@@ -123,8 +123,8 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             <div
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
-                  ? 'bg-primary/15 text-[#e2e5eb]'
-                  : 'bg-[#191c25] text-[#e2e5eb] border border-[#1e2130]'
+                  ? 'bg-primary/15 text-foreground'
+                  : 'bg-input text-foreground border border-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -133,8 +133,8 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         ))}
         {loading && (
           <div className="flex justify-start">
-            <div className="bg-[#191c25] border border-[#1e2130] rounded-xl px-3.5 py-2.5">
-              <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
+            <div className="bg-input border border-border rounded-xl px-3.5 py-2.5">
+              <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
         )}
@@ -142,7 +142,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         {/* Suggested flows */}
         {suggestedFlows.length > 0 && (
           <div className="space-y-2 pt-2">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
@@ -164,19 +164,19 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             onKeyDown={handleKeyDown}
             placeholder="Ask about this step..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-[0.8125rem] placeholder:text-[#848b9b] px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
+            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={loading || initializing}
           />
           <button
             onClick={handleSend}
             disabled={!input.trim() || loading || initializing}
-            className="bg-[#22d3ee] text-white p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
+            className="bg-primary text-white p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>
         </div>
-        <p className="text-[0.625rem] text-[#848b9b] mt-1.5 px-1">Shift + Enter for a new line</p>
+        <p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/copilot/CopilotToggle.tsx b/frontend/src/components/copilot/CopilotToggle.tsx
index 27777ec5..4f52bf04 100644
--- a/frontend/src/components/copilot/CopilotToggle.tsx
+++ b/frontend/src/components/copilot/CopilotToggle.tsx
@@ -11,7 +11,7 @@ export function CopilotToggle({ isOpen, onToggle }: CopilotToggleProps) {
   return (
     <button
       onClick={onToggle}
-      className="fixed bottom-6 right-6 z-40 bg-[#22d3ee] text-white p-3.5 rounded-full hover:brightness-110 active:scale-[0.98] transition-all"
+      className="fixed bottom-6 right-6 z-40 bg-primary text-white p-3.5 rounded-full hover:brightness-110 active:scale-[0.98] transition-all"
       title="Open AI Copilot"
     >
       <MessageCircle size={22} />
diff --git a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
index 26af94a1..e7bcd31d 100644
--- a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
@@ -31,11 +31,11 @@ export function ActiveFlowPilotSessions() {
     return (
       <div className="card-flat">
         <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
+          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-24 rounded-xl bg-[#14161d] border border-[#1e2130] animate-pulse" />
+            <div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
           ))}
         </div>
       </div>
@@ -49,16 +49,16 @@ export function ActiveFlowPilotSessions() {
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
         <div className="flex items-center gap-2">
-          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Active Sessions</h3>
+          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
           {sessions.length > 0 && (
-            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 text-[0.625rem] font-bold text-[#22d3ee]">
+            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-dim px-1.5 text-[0.625rem] font-bold text-primary">
               {sessions.length}
             </span>
           )}
         </div>
         <Link
           to="/sessions?filter=active"
-          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           View all <ArrowRight size={10} />
         </Link>
@@ -66,8 +66,8 @@ export function ActiveFlowPilotSessions() {
 
       {sessions.length === 0 ? (
         <div className="px-5 py-8 text-center">
-          <p className="text-sm text-[#848b9b]">No active sessions</p>
-          <p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
+          <p className="text-sm text-muted-foreground">No active sessions</p>
+          <p className="mt-1 text-[0.6875rem] text-text-muted">Start typing above to begin troubleshooting</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
@@ -78,23 +78,23 @@ export function ActiveFlowPilotSessions() {
               className="card-interactive p-4 text-left"
             >
               <div className="flex items-start justify-between gap-2 mb-2">
-                <Sparkles size={14} className="shrink-0 text-[#22d3ee] mt-0.5" />
+                <Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
                 <span
                   className={cn(
                     'font-sans text-xs text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
                     session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
                     session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
                     session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
-                    !session.confidence_tier && 'bg-[#14161d] text-[#848b9b]',
+                    !session.confidence_tier && 'bg-card text-muted-foreground',
                   )}
                 >
                   {session.confidence_tier || 'starting'}
                 </span>
               </div>
-              <p className="text-sm font-medium text-[#e2e5eb] truncate">
+              <p className="text-sm font-medium text-foreground truncate">
                 {session.problem_summary || 'Session in progress'}
               </p>
-              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-[#848b9b]">
+              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
                 <span className="flex items-center gap-1">
                   <Clock size={10} />
                   {timeAgo(session.created_at)}
diff --git a/frontend/src/components/dashboard/FiltersBar.tsx b/frontend/src/components/dashboard/FiltersBar.tsx
index 835a606f..b612bd0c 100644
--- a/frontend/src/components/dashboard/FiltersBar.tsx
+++ b/frontend/src/components/dashboard/FiltersBar.tsx
@@ -22,15 +22,15 @@ export function FiltersBar({ filters, activeFilter, onFilterChange }: FiltersBar
           className={cn(
             'shrink-0 rounded-lg border px-3 py-1.5 text-[0.8125rem] font-medium transition-colors',
             activeFilter === f.id
-              ? 'border-[#22d3ee]/30 bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
-              : 'border-[#1e2130] bg-[#14161d] text-[#848b9b] hover:border-[#1e2130]/80 hover:text-[#e2e5eb]'
+              ? 'border-[#22d3ee]/30 bg-accent-dim text-primary'
+              : 'border-border bg-card text-muted-foreground hover:border-border/80 hover:text-foreground'
           )}
         >
           {f.label}
         </button>
       ))}
-      <div className="mx-1.5 h-5 w-px shrink-0 bg-[#1e2130]" />
-      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
+      <div className="mx-1.5 h-5 w-px shrink-0 bg-border" />
+      <button className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:text-foreground transition-colors">
         <Filter size={14} />
         More Filters
       </button>
diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 17478a8e..3b128644 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -25,10 +25,10 @@ export function KnowledgeBaseCards() {
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Knowledge Base</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
         <button
           onClick={() => navigate('/trees')}
-          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           Browse <ArrowRight size={10} />
         </button>
@@ -41,8 +41,8 @@ export function KnowledgeBaseCards() {
             className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
           >
             <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
               {item.label}
             </p>
           </button>
diff --git a/frontend/src/components/dashboard/OnboardingChecklist.tsx b/frontend/src/components/dashboard/OnboardingChecklist.tsx
index 810eef8c..3a5f99f6 100644
--- a/frontend/src/components/dashboard/OnboardingChecklist.tsx
+++ b/frontend/src/components/dashboard/OnboardingChecklist.tsx
@@ -73,7 +73,7 @@ export function OnboardingChecklist() {
       {/* Progress bar */}
       <div className="h-1 w-full bg-[rgba(255,255,255,0.04)]">
         <div
-          className="h-full bg-[#22d3ee] transition-all duration-500 ease-out"
+          className="h-full bg-primary transition-all duration-500 ease-out"
           style={{ width: `${progressPercent}%` }}
         />
       </div>
@@ -82,15 +82,15 @@ export function OnboardingChecklist() {
         {/* Header */}
         <div className="flex items-center justify-between mb-3">
           <div>
-            <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
               Getting Started
             </p>
-            <p className="text-sm text-[#e2e5eb] mt-0.5">
+            <p className="text-sm text-foreground mt-0.5">
               {isAllDone ? (
-                <span className="text-[#67e8f9] font-semibold">You're all set!</span>
+                <span className="text-accent-text font-semibold">You're all set!</span>
               ) : (
                 <span>
-                  <span className="text-[#67e8f9] font-semibold">{completedCount}</span>
+                  <span className="text-accent-text font-semibold">{completedCount}</span>
                   {' '}of {totalCount} complete
                 </span>
               )}
@@ -98,7 +98,7 @@ export function OnboardingChecklist() {
           </div>
           <button
             onClick={handleDismiss}
-            className="rounded-md p-1 text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+            className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
             aria-label="Dismiss onboarding checklist"
           >
             <X size={16} />
@@ -126,8 +126,8 @@ export function OnboardingChecklist() {
                     className={cn(
                       'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
                       done
-                        ? 'bg-[#22d3ee] border-transparent'
-                        : 'border-[#1e2130]'
+                        ? 'bg-primary border-transparent'
+                        : 'border-border'
                     )}
                   >
                     {done && <Check size={12} className="text-white" />}
@@ -138,8 +138,8 @@ export function OnboardingChecklist() {
                     className={cn(
                       'flex-1',
                       done
-                        ? 'text-[#848b9b] line-through'
-                        : 'text-[#e2e5eb]'
+                        ? 'text-muted-foreground line-through'
+                        : 'text-foreground'
                     )}
                   >
                     {item.label}
@@ -147,7 +147,7 @@ export function OnboardingChecklist() {
 
                   {/* Arrow for incomplete items */}
                   {!done && (
-                    <ChevronRight size={14} className="text-[#848b9b] shrink-0" />
+                    <ChevronRight size={14} className="text-muted-foreground shrink-0" />
                   )}
                 </button>
               </li>
diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index fb43e334..3a70ae05 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -19,15 +19,15 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
   return (
     <div className="card-flat flex flex-col h-full">
       <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">My Open Sessions</h3>
-        <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
+        <h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
+        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
           View All
         </Link>
       </div>
       <div className="flex-1 flex flex-col">
         {sessions.length === 0 ? (
           <div className="flex-1 flex items-center justify-center">
-            <p className="text-sm text-[#848b9b]">No open sessions</p>
+            <p className="text-sm text-muted-foreground">No open sessions</p>
           </div>
         ) : (
           sessions.map((session, i) => (
@@ -40,8 +40,8 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
             >
               <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
               <div className="flex-1 min-w-0">
-                <div className="text-sm text-[#e2e5eb] truncate">{session.treeName}</div>
-                <div className="text-[0.6875rem] text-[#848b9b]">
+                <div className="text-sm text-foreground truncate">{session.treeName}</div>
+                <div className="text-[0.6875rem] text-muted-foreground">
                   {session.stepNumber && session.totalSteps
                     ? `Step ${session.stepNumber} of ${session.totalSteps}`
                     : 'In progress'}
@@ -52,7 +52,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
               <Link
                 to={getTreeNavigatePath(session.treeId, session.treeType)}
                 state={{ sessionId: session.id }}
-                className="shrink-0 rounded-lg bg-[#22d3ee] px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
+                className="shrink-0 rounded-lg bg-primary px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
               >
                 Resume
               </Link>
diff --git a/frontend/src/components/dashboard/PendingEscalations.tsx b/frontend/src/components/dashboard/PendingEscalations.tsx
index 6a6de03f..23604813 100644
--- a/frontend/src/components/dashboard/PendingEscalations.tsx
+++ b/frontend/src/components/dashboard/PendingEscalations.tsx
@@ -37,7 +37,7 @@ export function PendingEscalations() {
       >
         <div className="flex items-center gap-2">
           <AlertTriangle size={14} className="text-amber-400" />
-          <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">
+          <h3 className="font-heading text-sm font-bold text-foreground">
             Pending Escalations
             <span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400">
               {escalations.length}
@@ -46,7 +46,7 @@ export function PendingEscalations() {
         </div>
         <Link
           to="/escalations"
-          className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           View all
         </Link>
@@ -64,10 +64,10 @@ export function PendingEscalations() {
           >
             <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" />
             <div className="flex-1 min-w-0">
-              <div className="text-sm text-[#e2e5eb] truncate">
+              <div className="text-sm text-foreground truncate">
                 {esc.problem_summary || 'Escalated session'}
               </div>
-              <div className="text-[0.6875rem] text-[#848b9b]">
+              <div className="text-[0.6875rem] text-muted-foreground">
                 {esc.problem_domain || 'General'}
                 <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
                 <span className="font-sans text-xs">{timeAgo(esc.created_at)}</span>
diff --git a/frontend/src/components/dashboard/PerformanceCards.tsx b/frontend/src/components/dashboard/PerformanceCards.tsx
index 6b18b1c9..fdd82b84 100644
--- a/frontend/src/components/dashboard/PerformanceCards.tsx
+++ b/frontend/src/components/dashboard/PerformanceCards.tsx
@@ -74,14 +74,14 @@ export function PerformanceCards() {
           style={{ animationDelay: `${400 + i * 60}ms` }}
         >
           <div className="flex items-center justify-between mb-2">
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
               {card.label}
             </p>
             <card.icon size={14} style={{ color: card.iconColor }} />
           </div>
           <p className={cn(
             'font-heading text-2xl font-extrabold tracking-tight',
-            card.highlight ? 'text-[#67e8f9]' : 'text-[#e2e5eb]'
+            card.highlight ? 'text-accent-text' : 'text-foreground'
           )}>
             {card.value}
           </p>
diff --git a/frontend/src/components/dashboard/PreparedSessions.tsx b/frontend/src/components/dashboard/PreparedSessions.tsx
index 01b1bfb4..3554d648 100644
--- a/frontend/src/components/dashboard/PreparedSessions.tsx
+++ b/frontend/src/components/dashboard/PreparedSessions.tsx
@@ -32,7 +32,7 @@ export function PreparedSessions() {
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <ClipboardList className="h-4 w-4 text-cyan-400" />
-          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Prepared for You</h3>
+          <h3 className="font-heading text-sm font-semibold text-foreground">Prepared for You</h3>
           <span className="flex h-5 w-5 items-center justify-center rounded-full bg-cyan-400/20 text-[0.625rem] font-bold text-cyan-400">
             {sessions.length}
           </span>
@@ -51,13 +51,13 @@ export function PreparedSessions() {
               key={session.id}
               onClick={() => handleStart(session)}
               className={cn(
-                'group flex w-full items-center justify-between gap-3 rounded-lg border border-[#1e2130] px-4 py-3',
+                'group flex w-full items-center justify-between gap-3 rounded-lg border border-border px-4 py-3',
                 'text-left transition-all hover:border-cyan-500/30 hover:bg-cyan-500/5'
               )}
             >
               <div className="min-w-0 flex-1">
-                <p className="text-sm font-medium text-[#e2e5eb] truncate">{flowName}</p>
-                <div className="mt-1 flex items-center gap-3 text-xs text-[#848b9b]">
+                <p className="text-sm font-medium text-foreground truncate">{flowName}</p>
+                <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                   {session.ticket_number && (
                     <span>{session.ticket_number}</span>
                   )}
@@ -73,7 +73,7 @@ export function PreparedSessions() {
                   </span>
                 </div>
               </div>
-              <ArrowRight className="h-4 w-4 shrink-0 text-[#848b9b] opacity-0 transition-opacity group-hover:opacity-100" />
+              <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
             </button>
           )
         })}
diff --git a/frontend/src/components/dashboard/QuickActions.tsx b/frontend/src/components/dashboard/QuickActions.tsx
index 139b690d..dd13596a 100644
--- a/frontend/src/components/dashboard/QuickActions.tsx
+++ b/frontend/src/components/dashboard/QuickActions.tsx
@@ -14,7 +14,7 @@ export function QuickActions() {
   return (
     <div className="card-flat flex flex-col h-full">
       <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Quick Actions</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
       </div>
       <div className="flex-1 flex flex-col justify-between p-3 gap-2">
         {ACTIONS.map(({ icon: Icon, label, description, href, color }) => (
@@ -30,8 +30,8 @@ export function QuickActions() {
               <Icon size={18} style={{ color }} />
             </span>
             <div className="min-w-0">
-              <div className="text-sm font-medium text-[#e2e5eb]">{label}</div>
-              <div className="text-[0.6875rem] text-[#848b9b] truncate">{description}</div>
+              <div className="text-sm font-medium text-foreground">{label}</div>
+              <div className="text-[0.6875rem] text-muted-foreground truncate">{description}</div>
             </div>
           </button>
         ))}
diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
index 12215a82..b25f1e83 100644
--- a/frontend/src/components/dashboard/QuickStats.tsx
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -21,13 +21,13 @@ export function QuickStats({ stats }: QuickStatsProps) {
           className={cn('card-interactive p-4 fade-in')}
           style={{ animationDelay: `${50 + i * 30}ms` }}
         >
-          <p className="font-sans text-xs text-[0.625rem] font-medium uppercase tracking-widest text-[#848b9b]">
+          <p className="font-sans text-xs text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
             {stat.label}
           </p>
           <p
             className={cn(
               'mt-1 font-heading text-2xl font-extrabold tracking-tight',
-              stat.gradient && 'text-[#67e8f9]',
+              stat.gradient && 'text-accent-text',
               stat.color
             )}
             style={stat.color && !stat.color.startsWith('text-') ? { color: stat.color } : undefined}
diff --git a/frontend/src/components/dashboard/RecentActivity.tsx b/frontend/src/components/dashboard/RecentActivity.tsx
index 5f502d5e..ee079d5d 100644
--- a/frontend/src/components/dashboard/RecentActivity.tsx
+++ b/frontend/src/components/dashboard/RecentActivity.tsx
@@ -26,7 +26,7 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
   return (
     <div className="card-flat">
       <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Activity</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
       </div>
       <div>
         {activities.map((item, i) => (
@@ -45,9 +45,9 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
               <item.icon size={16} style={{ color: item.iconColor }} />
             </span>
             <div className="flex-1 min-w-0 pt-0.5">
-              <p className="text-sm text-[#e2e5eb]">{item.description}</p>
+              <p className="text-sm text-foreground">{item.description}</p>
             </div>
-            <span className="shrink-0 font-sans text-xs text-[0.625rem] text-[#848b9b] pt-1">
+            <span className="shrink-0 font-sans text-xs text-[0.625rem] text-muted-foreground pt-1">
               {item.timestamp}
             </span>
           </div>
diff --git a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
index 0467cdcc..4ab12e51 100644
--- a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
@@ -46,10 +46,10 @@ export function RecentFlowPilotSessions() {
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Recent Sessions</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
         <Link
           to="/sessions"
-          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           History <ArrowRight size={10} />
         </Link>
@@ -69,11 +69,11 @@ export function RecentFlowPilotSessions() {
             >
               <StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
               <div className="flex-1 min-w-0">
-                <p className="text-sm text-[#e2e5eb] truncate">
+                <p className="text-sm text-foreground truncate">
                   {session.problem_summary || 'Session'}
                 </p>
               </div>
-              <span className="shrink-0 font-sans text-xs text-[#848b9b]">
+              <span className="shrink-0 font-sans text-xs text-muted-foreground">
                 {timeAgo(session.resolved_at || session.created_at)}
               </span>
             </button>
diff --git a/frontend/src/components/dashboard/SectionGroup.tsx b/frontend/src/components/dashboard/SectionGroup.tsx
index 7eb7b0af..e805cc84 100644
--- a/frontend/src/components/dashboard/SectionGroup.tsx
+++ b/frontend/src/components/dashboard/SectionGroup.tsx
@@ -19,19 +19,19 @@ export function SectionGroup({ title, count, defaultOpen = true, delay = 150, ch
         onClick={() => setOpen(!open)}
         className="flex w-full items-center gap-2 py-2"
       >
-        <span className="h-2 w-2 shrink-0 rounded-full bg-[#22d3ee]" />
-        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-[#e2e5eb]">
+        <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+        <span className="font-heading text-[0.8125rem] font-bold uppercase tracking-[0.04em] text-foreground">
           {title}
         </span>
         {count !== undefined && (
-          <span className="rounded-full bg-secondary px-2 py-0.5 font-sans text-xs text-[#848b9b]">
+          <span className="rounded-full bg-secondary px-2 py-0.5 font-sans text-xs text-muted-foreground">
             {count}
           </span>
         )}
         <div className="flex-1" />
         <ChevronDown
           size={14}
-          className={cn('text-[#848b9b] transition-transform', !open && '-rotate-90')}
+          className={cn('text-muted-foreground transition-transform', !open && '-rotate-90')}
         />
       </button>
       {open && <div className="mt-1 space-y-1">{children}</div>}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index edd9106d..173e4a13 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -23,8 +23,8 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
   return (
     <div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
       <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Recent Sessions</h3>
-        <Link to="/sessions" className="text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
+        <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
+        <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
           View All
         </Link>
       </div>
@@ -47,10 +47,10 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
             />
 
             {/* Name */}
-            <span className="text-sm text-[#e2e5eb] truncate">{session.treeName}</span>
+            <span className="text-sm text-foreground truncate">{session.treeName}</span>
 
             {/* Progress */}
-            <span className="text-[0.6875rem] text-[#848b9b] truncate">
+            <span className="text-[0.6875rem] text-muted-foreground truncate">
               {session.status === 'completed'
                 ? '✓ Resolved'
                 : session.stepNumber && session.totalSteps
@@ -59,7 +59,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
             </span>
 
             {/* Ticket */}
-            <span className="font-sans text-xs text-[0.6875rem] text-[#848b9b] truncate">
+            <span className="font-sans text-xs text-[0.6875rem] text-muted-foreground truncate">
               {session.ticketNumber || '—'}
             </span>
 
diff --git a/frontend/src/components/dashboard/StartSessionInput.tsx b/frontend/src/components/dashboard/StartSessionInput.tsx
index 2ff6a1db..fcb0bca8 100644
--- a/frontend/src/components/dashboard/StartSessionInput.tsx
+++ b/frontend/src/components/dashboard/StartSessionInput.tsx
@@ -37,7 +37,7 @@ export function StartSessionInput() {
         <div className="relative">
           <Sparkles
             size={18}
-            className="absolute left-4 top-1/2 -translate-y-1/2 text-[#848b9b]"
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
           />
           <input
             ref={inputRef}
@@ -46,7 +46,7 @@ export function StartSessionInput() {
             onChange={(e) => setValue(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="What are you troubleshooting?"
-            className="w-full rounded-xl border border-[#1e2130] bg-[#0c0d10] py-3.5 pl-11 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
         <div className="mt-3 flex items-center justify-between">
@@ -57,8 +57,8 @@ export function StartSessionInput() {
               className={cn(
                 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                 mode === 'guided'
-                  ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                  : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                  ? 'bg-accent-dim text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
               )}
             >
               <Sparkles size={12} />
@@ -70,15 +70,15 @@ export function StartSessionInput() {
               className={cn(
                 'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                 mode === 'chat'
-                  ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                  : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                  ? 'bg-accent-dim text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
               )}
             >
               <MessageCircle size={12} />
               Open Chat
             </button>
           </div>
-          <span className="text-[0.625rem] text-[#848b9b]">
+          <span className="text-[0.625rem] text-muted-foreground">
             Press Enter to start
           </span>
         </div>
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index 74d5e365..bc3389fc 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -30,10 +30,10 @@ export function TeamSummary() {
         className="flex items-center justify-between px-5 py-3"
         style={{ borderBottom: '1px solid var(--glass-border)' }}
       >
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">Team Summary</h3>
+        <h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
         <button
           onClick={() => navigate('/analytics')}
-          className="flex items-center gap-1 text-[0.6875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           Manage <ArrowRight size={10} />
         </button>
@@ -46,8 +46,8 @@ export function TeamSummary() {
             className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
           >
             <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-[#e2e5eb]">{item.value}</p>
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
+            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
               {item.label}
             </p>
           </button>
diff --git a/frontend/src/components/dashboard/TreeListItem.tsx b/frontend/src/components/dashboard/TreeListItem.tsx
index 769290c5..3e1e0e07 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-[#14161d] px-4 py-3 transition-colors hover:border-[#1e2130] hover:bg-[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 */}
@@ -46,15 +46,15 @@ export function TreeListItem({
 
       {/* Info */}
       <div className="min-w-0">
-        <p className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">{name}</p>
+        <p className="font-heading text-sm font-semibold text-foreground truncate">{name}</p>
         <div className="mt-0.5 flex items-center gap-2">
           {tags.slice(0, 3).map(tag => (
-            <span key={tag} className="rounded border border-[#1e2130] bg-secondary px-1.5 py-px font-sans text-xs text-[0.625rem] text-[#848b9b]">
+            <span key={tag} className="rounded border border-border bg-secondary px-1.5 py-px font-sans text-xs text-[0.625rem] text-muted-foreground">
               {tag}
             </span>
           ))}
           {description && tags.length === 0 && (
-            <span className="text-[0.6875rem] text-[#848b9b] truncate">{description}</span>
+            <span className="text-[0.6875rem] text-muted-foreground truncate">{description}</span>
           )}
         </div>
       </div>
@@ -64,13 +64,13 @@ export function TreeListItem({
         {category && (
           <>
             <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: categoryColor }} />
-            <span className="font-sans text-xs text-[#848b9b] truncate">{category.name}</span>
+            <span className="font-sans text-xs text-muted-foreground truncate">{category.name}</span>
           </>
         )}
       </div>
 
       {/* Usage count */}
-      <div className="text-right font-sans text-xs text-[#848b9b]">
+      <div className="text-right font-sans text-xs text-muted-foreground">
         {usageCount} uses
       </div>
 
@@ -85,7 +85,7 @@ export function TreeListItem({
           e.stopPropagation()
           navigate(getTreeEditorPath(id, treeType))
         }}
-        className="flex h-8 w-8 items-center justify-center rounded-md text-[#848b9b] opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
+        className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
       >
         <MoreHorizontal size={16} />
       </button>
diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx
index 3c0f618c..c92ae5aa 100644
--- a/frontend/src/components/dashboard/WeeklyCalendar.tsx
+++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx
@@ -36,8 +36,8 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
   return (
     <div className="card-flat flex flex-col h-full">
       <div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
-        <Calendar size={16} className="text-[#848b9b]" />
-        <h3 className="font-heading text-sm font-bold text-[#e2e5eb]">This Week</h3>
+        <Calendar size={16} className="text-muted-foreground" />
+        <h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
       </div>
       <div className="flex flex-1 min-h-0">
         {days.map((day, i) => {
@@ -56,10 +56,10 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
                   borderBottom: day.isToday ? '2px solid #06b6d4' : '1px solid var(--glass-border)',
                 }}
               >
-                <span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-[#848b9b]'}`}>
+                <span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-cyan-400' : 'text-muted-foreground'}`}>
                   {day.label}
                 </span>
-                <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-[#e2e5eb]' : 'text-[#848b9b]'}`}>
+                <div className={`text-sm font-heading font-bold ${day.isToday ? 'text-foreground' : 'text-muted-foreground'}`}>
                   {day.date.getDate()}
                 </div>
               </div>
@@ -76,8 +76,8 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
                         background: 'rgba(255, 255, 255, 0.02)',
                       }}
                     >
-                      <div className="font-medium text-[#e2e5eb] truncate">{event.title}</div>
-                      <div className="font-sans text-xs text-[0.5625rem] text-[#848b9b]">{event.time}</div>
+                      <div className="font-medium text-foreground truncate">{event.title}</div>
+                      <div className="font-sans text-xs text-[0.5625rem] text-muted-foreground">{event.time}</div>
                     </div>
                   ))
                 )}
diff --git a/frontend/src/components/editor-ai/AIPromptDialog.tsx b/frontend/src/components/editor-ai/AIPromptDialog.tsx
index 37d48739..1b033b63 100644
--- a/frontend/src/components/editor-ai/AIPromptDialog.tsx
+++ b/frontend/src/components/editor-ai/AIPromptDialog.tsx
@@ -83,14 +83,14 @@ export function AIPromptDialog({
           <button
             onClick={onClose}
             disabled={isGenerating}
-            className="rounded-[10px] bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm text-foreground hover:border-[#2a2f3d] transition-colors disabled:opacity-50"
+            className="rounded-[10px] bg-input border border-border px-4 py-2 text-sm text-foreground hover:border-border-hover transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
           <button
             onClick={handleGenerate}
             disabled={!prompt.trim() || isGenerating}
-            className="flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+            className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
           >
             {isGenerating ? (
               <>
diff --git a/frontend/src/components/editor-ai/ChatTab.tsx b/frontend/src/components/editor-ai/ChatTab.tsx
index bdb3bebb..e4ffed60 100644
--- a/frontend/src/components/editor-ai/ChatTab.tsx
+++ b/frontend/src/components/editor-ai/ChatTab.tsx
@@ -50,7 +50,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-[#191c25] text-foreground border border-[#1e2130]'
+                  : 'bg-input text-foreground border border-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -59,7 +59,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
         ))}
         {isLoading && (
           <div className="flex justify-start">
-            <div className="bg-[#191c25] border border-[#1e2130] rounded-xl px-3.5 py-2.5">
+            <div className="bg-input border border-border rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>
@@ -84,7 +84,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
           <button
             onClick={onSend}
             disabled={!input.trim() || isLoading}
-            className="bg-[#22d3ee] text-white p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
+            className="bg-primary text-white p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>
diff --git a/frontend/src/components/editor-ai/EditorAIPanel.tsx b/frontend/src/components/editor-ai/EditorAIPanel.tsx
index eaad0327..34c5df29 100644
--- a/frontend/src/components/editor-ai/EditorAIPanel.tsx
+++ b/frontend/src/components/editor-ai/EditorAIPanel.tsx
@@ -65,7 +65,7 @@ export function EditorAIPanel({
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-[#1e2130] text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1.5 rounded-lg hover:bg-border text-muted-foreground hover:text-foreground transition-colors"
         >
           <X size={16} />
         </button>
diff --git a/frontend/src/components/editor-ai/SuggestionsTab.tsx b/frontend/src/components/editor-ai/SuggestionsTab.tsx
index 5aa14593..d178c9c5 100644
--- a/frontend/src/components/editor-ai/SuggestionsTab.tsx
+++ b/frontend/src/components/editor-ai/SuggestionsTab.tsx
@@ -26,7 +26,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
         const config = STATUS_CONFIG[s.status]
         const StatusIcon = config.icon
         return (
-          <div key={s.id} className="rounded-lg border border-border bg-[#14161d] px-3 py-2">
+          <div key={s.id} className="rounded-lg border border-border bg-card px-3 py-2">
             <div className="flex items-center justify-between">
               <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 {s.action_type.replace(/_/g, ' ')}
@@ -39,7 +39,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
             {s.target_node_id && (
               <p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
             )}
-            <p className="mt-0.5 font-label text-[0.625rem] text-[#4f5666]">
+            <p className="mt-0.5 font-label text-[0.625rem] text-text-muted">
               {new Date(s.created_at).toLocaleDateString()}
             </p>
           </div>
diff --git a/frontend/src/components/flowpilot/AISessionListItem.tsx b/frontend/src/components/flowpilot/AISessionListItem.tsx
index 6a139b72..8186c10e 100644
--- a/frontend/src/components/flowpilot/AISessionListItem.tsx
+++ b/frontend/src/components/flowpilot/AISessionListItem.tsx
@@ -8,11 +8,11 @@ interface AISessionListItemProps {
 }
 
 const STATUS_CONFIG = {
-  active: { icon: Clock, color: 'text-[#22d3ee]', label: 'Active' },
+  active: { icon: Clock, color: 'text-primary', label: 'Active' },
   paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
   resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
   escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
-  abandoned: { icon: AlertCircle, color: 'text-[#5a6170]', label: 'Abandoned' },
+  abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
 } as const
 
 export function AISessionListItem({ session }: AISessionListItemProps) {
@@ -26,12 +26,12 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-[#e2e5eb] truncate">
+          <p className="text-sm font-medium text-foreground truncate">
             {session.problem_summary || 'Untitled session'}
           </p>
           <div className="mt-1.5 flex items-center gap-3 flex-wrap">
             {session.problem_domain && (
-              <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
+              <span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
                 {session.problem_domain}
               </span>
             )}
@@ -39,10 +39,10 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
               <StatusIcon size={12} />
               {config.label}
             </span>
-            <span className="text-xs text-[#848b9b]">
+            <span className="text-xs text-muted-foreground">
               {session.step_count} steps
             </span>
-            <span className="text-xs text-[#5a6170]">
+            <span className="text-xs text-text-muted">
               {new Date(session.created_at).toLocaleDateString(undefined, {
                 month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
               })}
diff --git a/frontend/src/components/flowpilot/ConfidenceIndicator.tsx b/frontend/src/components/flowpilot/ConfidenceIndicator.tsx
index 0db26e65..c5995776 100644
--- a/frontend/src/components/flowpilot/ConfidenceIndicator.tsx
+++ b/frontend/src/components/flowpilot/ConfidenceIndicator.tsx
@@ -30,12 +30,12 @@ export function ConfidenceIndicator({ tier, score, className }: ConfidenceIndica
   return (
     <div className={cn('group relative inline-flex items-center gap-2', className)}>
       <span className={cn('h-2 w-2 rounded-full', config.color)} />
-      <span className="font-sans text-xs text-xs text-[#848b9b]">{config.label}</span>
+      <span className="font-sans text-xs text-xs text-muted-foreground">{config.label}</span>
 
       {/* Tooltip */}
-      <div className="pointer-events-none absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-[#1e2130] bg-[#14161d] p-3 opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-        <p className="text-xs text-[#848b9b]">{config.description}</p>
-        <p className="mt-1 font-sans text-xs text-[0.625rem] text-[#5a6170]">
+      <div className="pointer-events-none absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-border bg-card p-3 opacity-0 shadow-lg transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+        <p className="text-xs text-muted-foreground">{config.description}</p>
+        <p className="mt-1 font-sans text-xs text-[0.625rem] text-text-muted">
           Confidence: {Math.round(score * 100)}%
         </p>
       </div>
diff --git a/frontend/src/components/flowpilot/EscalateModal.tsx b/frontend/src/components/flowpilot/EscalateModal.tsx
index 49bbfd65..a92cdb98 100644
--- a/frontend/src/components/flowpilot/EscalateModal.tsx
+++ b/frontend/src/components/flowpilot/EscalateModal.tsx
@@ -43,7 +43,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
         </div>
 
         <div>
-          <label className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
+          <label className="mb-1.5 block text-sm font-medium text-foreground">
             Why are you escalating?
           </label>
           <RichTextInput
@@ -54,7 +54,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
             placeholder="e.g. I've exhausted all networking diagnostics and suspect this is a firewall policy issue that requires senior admin access..."
             rows={4}
           />
-          <p className="mt-1 text-[0.625rem] text-[#5a6170]">
+          <p className="mt-1 text-[0.625rem] text-text-muted">
             Minimum 5 characters. This will be shown to the engineer who picks up.
           </p>
         </div>
@@ -63,7 +63,7 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
           <button
             onClick={handleClose}
             disabled={isProcessing}
-            className="flex-1 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 min-h-[44px] text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
+            className="flex-1 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 min-h-[44px] text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors disabled:opacity-50"
           >
             Cancel
           </button>
diff --git a/frontend/src/components/flowpilot/EscalationQueue.tsx b/frontend/src/components/flowpilot/EscalationQueue.tsx
index 97c6bb33..af2de015 100644
--- a/frontend/src/components/flowpilot/EscalationQueue.tsx
+++ b/frontend/src/components/flowpilot/EscalationQueue.tsx
@@ -42,7 +42,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+        <Loader2 size={20} className="animate-spin text-muted-foreground" />
       </div>
     )
   }
@@ -53,7 +53,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
         <p className="text-sm text-rose-400">{error}</p>
         <button
           onClick={loadQueue}
-          className="mt-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
         >
           Try again
         </button>
@@ -64,11 +64,11 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   if (sessions.length === 0) {
     return (
       <div className="py-12 text-center">
-        <AlertTriangle size={24} className="mx-auto mb-2 text-[#848b9b]/40" />
-        <p className="text-sm text-[#848b9b]">No sessions awaiting escalation</p>
+        <AlertTriangle size={24} className="mx-auto mb-2 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">No sessions awaiting escalation</p>
         <button
           onClick={loadQueue}
-          className="mt-3 flex items-center gap-1.5 mx-auto text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="mt-3 flex items-center gap-1.5 mx-auto text-xs text-muted-foreground hover:text-foreground transition-colors"
         >
           <RefreshCw size={12} />
           Refresh
@@ -80,12 +80,12 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between px-1">
-        <h3 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170]">
+        <h3 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted">
           Awaiting pickup ({sessions.length})
         </h3>
         <button
           onClick={loadQueue}
-          className="flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
         >
           <RefreshCw size={10} />
           Refresh
@@ -95,7 +95,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
       {sessions.map((session) => (
         <div key={session.id} className="card-interactive p-3 sm:p-4 space-y-3">
           <div>
-            <p className="text-sm font-semibold text-[#e2e5eb]">
+            <p className="text-sm font-semibold text-foreground">
               {session.problem_summary || 'Untitled session'}
             </p>
             {session.escalation_reason && (
@@ -105,9 +105,9 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
             )}
           </div>
 
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[#848b9b]">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
             {session.problem_domain && (
-              <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-[#22d3ee]">
+              <span className="font-sans text-xs rounded-md bg-accent-dim px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-primary">
                 {session.problem_domain}
               </span>
             )}
@@ -120,7 +120,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
               {new Date(session.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
             </span>
             {session.psa_ticket_id && (
-              <span className="flex items-center gap-1 text-[#22d3ee]">
+              <span className="flex items-center gap-1 text-primary">
                 <Ticket size={10} />
                 #{session.psa_ticket_id}
               </span>
@@ -129,7 +129,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
 
           <button
             onClick={() => handlePickup(session.id)}
-            className="w-full min-h-[44px] rounded-lg bg-[#22d3ee] text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
+            className="w-full min-h-[44px] rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
           >
             Pick Up Session
           </button>
diff --git a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
index 7c8fe8da..7a171034 100644
--- a/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotActionBar.tsx
@@ -70,7 +70,7 @@ export function FlowPilotActionBar({
     <>
       {/* Bottom bar — fixed to viewport bottom, works regardless of height chain */}
       <div
-        className="fixed bottom-0 right-0 z-40 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 border-t border-[#1e2130] bg-[#14161d] px-3 py-3 sm:px-5"
+        className="fixed bottom-0 right-0 z-40 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 border-t border-border bg-card px-3 py-3 sm:px-5"
         style={{ left: 'var(--sidebar-w, 0px)' }}
       >
         <div className="flex gap-2 sm:gap-3">
@@ -96,7 +96,7 @@ export function FlowPilotActionBar({
             <button
               onClick={handlePause}
               disabled={isProcessing || submitting}
-              className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
+              className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
             >
               <Pause size={16} />
               Pause
@@ -106,7 +106,7 @@ export function FlowPilotActionBar({
             <button
               onClick={() => setShowAbandon(true)}
               disabled={isProcessing || submitting}
-              className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
+              className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
             >
               <X size={16} />
               Close
@@ -119,20 +119,20 @@ export function FlowPilotActionBar({
       {showResolve && (
         <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm">
           <div className="card-flat w-full max-w-full sm:max-w-lg mx-0 sm:mx-4 p-4 sm:p-6 rounded-t-2xl sm:rounded-2xl">
-            <h3 className="font-heading text-lg font-semibold text-[#e2e5eb] mb-1">Resolve Session</h3>
-            <p className="text-sm text-[#848b9b] mb-4">Summarize what fixed the issue. This will be included in the auto-generated documentation.</p>
+            <h3 className="font-heading text-lg font-semibold text-foreground mb-1">Resolve Session</h3>
+            <p className="text-sm text-muted-foreground mb-4">Summarize what fixed the issue. This will be included in the auto-generated documentation.</p>
             <textarea
               value={resolutionSummary}
               onChange={(e) => setResolutionSummary(e.target.value)}
               placeholder="What resolved the issue?"
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
               rows={4}
               autoFocus
             />
             <div className="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <button
                 onClick={() => setShowResolve(false)}
-                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Cancel
               </button>
@@ -152,14 +152,14 @@ export function FlowPilotActionBar({
       {showAbandon && (
         <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm">
           <div className="card-flat w-full max-w-full sm:max-w-lg mx-0 sm:mx-4 p-4 sm:p-6 rounded-t-2xl sm:rounded-2xl">
-            <h3 className="font-heading text-lg font-semibold text-[#e2e5eb] mb-1">Close Session</h3>
-            <p className="text-sm text-[#848b9b] mb-4">
+            <h3 className="font-heading text-lg font-semibold text-foreground mb-1">Close Session</h3>
+            <p className="text-sm text-muted-foreground mb-4">
               Are you sure you want to close this session? The session history will be kept but it won't count as resolved.
             </p>
             <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <button
                 onClick={() => setShowAbandon(false)}
-                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Cancel
               </button>
diff --git a/frontend/src/components/flowpilot/FlowPilotIntake.tsx b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
index 8cee6b89..c52ee8f2 100644
--- a/frontend/src/components/flowpilot/FlowPilotIntake.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
@@ -100,11 +100,11 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
     return (
       <div className="flex items-center justify-center min-h-[50vh]">
         <div className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[rgba(34,211,238,0.10)]">
-            <Sparkles size={24} className="text-[#22d3ee] animate-pulse" />
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-accent-dim">
+            <Sparkles size={24} className="text-primary animate-pulse" />
           </div>
-          <p className="text-sm font-medium text-[#e2e5eb]">Analyzing your issue...</p>
-          <p className="mt-1 text-xs text-[#848b9b]">FlowPilot is classifying the problem and searching for relevant flows</p>
+          <p className="text-sm font-medium text-foreground">Analyzing your issue...</p>
+          <p className="mt-1 text-xs text-muted-foreground">FlowPilot is classifying the problem and searching for relevant flows</p>
         </div>
       </div>
     )
@@ -118,10 +118,10 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
     <div className="flex items-start justify-center px-3 sm:px-4 pt-[6vh] sm:pt-[10vh]">
       <div className="w-full max-w-2xl">
         <div className="text-center mb-4 sm:mb-6">
-          <h1 className="font-heading text-xl sm:text-2xl font-bold tracking-tight text-[#e2e5eb]">
+          <h1 className="font-heading text-xl sm:text-2xl font-bold tracking-tight text-foreground">
             What are you troubleshooting?
           </h1>
-          <p className="mt-2 text-sm text-[#848b9b]">
+          <p className="mt-2 text-sm text-muted-foreground">
             Describe the issue, paste an error message, or pull context from a ticket
           </p>
         </div>
@@ -132,22 +132,22 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
             <div className="rounded-xl border border-primary/20 bg-primary/5 p-4">
               <div className="flex items-start justify-between">
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm font-semibold text-[#e2e5eb]">
-                    <span className="text-[#22d3ee]">#{selectedTicketId}</span>
+                  <p className="text-sm font-semibold text-foreground">
+                    <span className="text-primary">#{selectedTicketId}</span>
                     {' — '}
                     {selectedTicket.summary}
                   </p>
-                  <div className="mt-1 flex flex-wrap items-center gap-x-2 text-xs text-[#848b9b]">
+                  <div className="mt-1 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
                     {selectedTicket.company_name && <span>{selectedTicket.company_name}</span>}
                     {selectedTicket.priority_name && (
                       <>
-                        <span className="text-[#5a6170]">&bull;</span>
+                        <span className="text-text-muted">&bull;</span>
                         <span>{selectedTicket.priority_name}</span>
                       </>
                     )}
                     {selectedTicket.status_name && (
                       <>
-                        <span className="text-[#5a6170]">&bull;</span>
+                        <span className="text-text-muted">&bull;</span>
                         <span>{selectedTicket.status_name}</span>
                       </>
                     )}
@@ -155,7 +155,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 </div>
                 <button
                   onClick={handleClearTicket}
-                  className="ml-2 rounded-md p-1 text-[#848b9b] hover:bg-white/[0.06] hover:text-[#e2e5eb] transition-colors"
+                  className="ml-2 rounded-md p-1 text-muted-foreground hover:bg-white/[0.06] hover:text-foreground transition-colors"
                 >
                   <X size={14} />
                 </button>
@@ -166,7 +166,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 value={additionalContext}
                 onChange={(e) => setAdditionalContext(e.target.value)}
                 placeholder="Add extra context (optional) — e.g. 'User called back and said it's also affecting their second monitor'"
-                className="mt-3 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+                className="mt-3 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
                 rows={3}
               />
             </div>
@@ -190,8 +190,8 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 onClick={() => setShowLogs(!showLogs)}
                 className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
                   showLogs
-                    ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border border-primary/20'
-                    : 'bg-[#14161d]/50 text-[#848b9b] border border-[#1e2130] hover:text-[#e2e5eb]'
+                    ? 'bg-accent-dim text-primary border border-primary/20'
+                    : 'bg-card/50 text-muted-foreground border border-border hover:text-foreground'
                 }`}
               >
                 <Terminal size={12} />
@@ -206,8 +206,8 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 disabled={!psaChecked || !psaConnection}
                 className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
                   psaConnection
-                    ? 'bg-[#14161d]/50 text-[#848b9b] border border-[#1e2130] hover:text-[#e2e5eb] hover:border-primary/20'
-                    : 'bg-[#14161d]/50 text-[#5a6170] border border-[#1e2130] opacity-50 cursor-not-allowed'
+                    ? 'bg-card/50 text-muted-foreground border border-border hover:text-foreground hover:border-primary/20'
+                    : 'bg-card/50 text-text-muted border border-border opacity-50 cursor-not-allowed'
                 }`}
                 title={!psaConnection ? 'Connect your PSA in Settings → Integrations' : 'Search for a ConnectWise ticket'}
               >
@@ -229,20 +229,20 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
               value={logContent}
               onChange={(e) => setLogContent(e.target.value)}
               placeholder="Paste log output, error messages, or Event Viewer entries here..."
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-4 py-3 font-mono text-xs text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+              className="w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
               rows={6}
             />
           )}
 
           {/* Submit */}
           <div className="flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <p className="text-[0.6875rem] text-[#5a6170] text-center sm:text-left">
+            <p className="text-[0.6875rem] text-text-muted text-center sm:text-left">
               FlowPilot will analyze your input and guide you through diagnosis
             </p>
             <button
               onClick={handleSubmit}
               disabled={!hasContent}
-              className="w-full sm:w-auto min-h-[44px] rounded-lg bg-[#22d3ee] text-white px-5 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all whitespace-nowrap"
+              className="w-full sm:w-auto min-h-[44px] rounded-lg bg-primary text-white px-5 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all whitespace-nowrap"
             >
               {submitLabel}
             </button>
diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
index 0390a7f0..7e74001a 100644
--- a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
@@ -48,8 +48,8 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
         className={cn(
           'flex items-end gap-2 rounded-xl border p-3 transition-colors',
           isDisabled
-            ? 'border-[#1e2130]/50 opacity-50'
-            : 'border-[#1e2130] focus-within:border-[rgba(6,182,212,0.3)]'
+            ? 'border-border/50 opacity-50'
+            : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
         )}
         style={{ background: '#14161d' }}
       >
@@ -61,7 +61,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
           placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
           disabled={isDisabled}
           rows={1}
-          className="flex-1 resize-none bg-transparent text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
+          className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
         />
         <button
           onClick={handleSubmit}
@@ -70,8 +70,8 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
           className={cn(
             'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-all',
             message.trim() && !isDisabled
-              ? 'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]'
-              : 'bg-[rgba(255,255,255,0.04)] text-[#848b9b] cursor-not-allowed'
+              ? 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
+              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
           )}
         >
           <Send size={16} />
diff --git a/frontend/src/components/flowpilot/FlowPilotOptions.tsx b/frontend/src/components/flowpilot/FlowPilotOptions.tsx
index 4c7673f5..e26639d5 100644
--- a/frontend/src/components/flowpilot/FlowPilotOptions.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotOptions.tsx
@@ -32,20 +32,20 @@ export function FlowPilotOptions({ options, onSelect, disabled }: FlowPilotOptio
               'hover:border-[rgba(6,182,212,0.3)] hover:shadow-[0_0_20px_rgba(6,182,212,0.08)]',
               'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
               isSelected
-                ? 'border-primary/40 bg-[rgba(34,211,238,0.10)]'
-                : 'border-[#1e2130] bg-[#14161d]/50',
+                ? 'border-primary/40 bg-accent-dim'
+                : 'border-border bg-card/50',
               disabled && 'pointer-events-none opacity-60'
             )}
           >
             <div className="flex items-start justify-between gap-3">
               <div className="flex-1">
-                <p className="text-sm font-medium text-[#e2e5eb]">{option.label}</p>
+                <p className="text-sm font-medium text-foreground">{option.label}</p>
                 {option.followup_hint && (
-                  <p className="mt-1 text-xs text-[#848b9b]">{option.followup_hint}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">{option.followup_hint}</p>
                 )}
               </div>
               {isSelected && (
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/20 text-[#22d3ee]">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/20 text-primary">
                   <Check size={12} />
                 </span>
               )}
diff --git a/frontend/src/components/flowpilot/FlowPilotSession.tsx b/frontend/src/components/flowpilot/FlowPilotSession.tsx
index a6f5f8ff..685cbded 100644
--- a/frontend/src/components/flowpilot/FlowPilotSession.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotSession.tsx
@@ -141,9 +141,9 @@ export function FlowPilotSession({
           onClick={() => setShowMobileSidebar(!showMobileSidebar)}
           className="flex w-full items-center justify-between px-3 py-2 sm:px-4"
         >
-          <div className="flex items-center gap-3 text-xs text-[#848b9b] overflow-x-auto">
+          <div className="flex items-center gap-3 text-xs text-muted-foreground overflow-x-auto">
             {session.problem_domain && (
-              <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-[#22d3ee] shrink-0">
+              <span className="font-sans text-xs rounded-md bg-accent-dim px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-primary shrink-0">
                 {session.problem_domain}
               </span>
             )}
@@ -156,7 +156,7 @@ export function FlowPilotSession({
               score={currentStep?.confidence_score ?? 0}
             />
           </div>
-          {showMobileSidebar ? <ChevronUp size={14} className="text-[#848b9b] shrink-0" /> : <ChevronDown size={14} className="text-[#848b9b] shrink-0" />}
+          {showMobileSidebar ? <ChevronUp size={14} className="text-muted-foreground shrink-0" /> : <ChevronDown size={14} className="text-muted-foreground shrink-0" />}
         </button>
         {showMobileSidebar && (
           <div className="px-3 pb-3 sm:px-4 space-y-3">
@@ -169,7 +169,7 @@ export function FlowPilotSession({
               <button
                 onClick={() => setShowTicketPicker(true)}
                 disabled={linkingTicket}
-                className="w-full flex items-center gap-2 rounded-xl border border-dashed border-[#1e2130] px-3 py-2.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:border-primary/30 transition-colors disabled:opacity-50 min-h-[44px]"
+                className="w-full flex items-center gap-2 rounded-xl border border-dashed border-border px-3 py-2.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors disabled:opacity-50 min-h-[44px]"
               >
                 <Ticket size={14} />
                 {linkingTicket ? 'Linking...' : 'Link Ticket'}
@@ -177,14 +177,14 @@ export function FlowPilotSession({
             ) : null}
             {session.problem_summary && (
               <div>
-                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">Problem</h4>
-                <p className="text-sm text-[#e2e5eb]">{session.problem_summary}</p>
+                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Problem</h4>
+                <p className="text-sm text-foreground">{session.problem_summary}</p>
               </div>
             )}
             {session.matched_flow_id && (
               <div className="flex items-center gap-2">
-                <Network size={14} className="text-[#848b9b]" />
-                <span className="text-xs text-[#e2e5eb]">
+                <Network size={14} className="text-muted-foreground" />
+                <span className="text-xs text-foreground">
                   {session.match_score ? `${Math.round(session.match_score * 100)}% match` : 'Match found'}
                 </span>
               </div>
@@ -228,7 +228,7 @@ export function FlowPilotSession({
               <button
                 onClick={() => setShowTicketPicker(true)}
                 disabled={linkingTicket}
-                className="w-full flex items-center gap-2 rounded-xl border border-dashed border-[#1e2130] px-3 py-2.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:border-primary/30 transition-colors disabled:opacity-50"
+                className="w-full flex items-center gap-2 rounded-xl border border-dashed border-border px-3 py-2.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 transition-colors disabled:opacity-50"
               >
                 <Ticket size={14} />
                 {linkingTicket ? 'Linking...' : 'Link Ticket'}
@@ -238,20 +238,20 @@ export function FlowPilotSession({
             {/* Problem summary */}
             {session.problem_summary && (
               <div>
-                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">
+                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">
                   Problem
                 </h4>
-                <p className="text-sm text-[#e2e5eb]">{session.problem_summary}</p>
+                <p className="text-sm text-foreground">{session.problem_summary}</p>
               </div>
             )}
 
             {/* Domain */}
             {session.problem_domain && (
               <div>
-                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">
+                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">
                   Domain
                 </h4>
-                <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
+                <span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
                   {session.problem_domain}
                 </span>
               </div>
@@ -259,7 +259,7 @@ export function FlowPilotSession({
 
             {/* Confidence */}
             <div>
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">
                 Confidence
               </h4>
               <ConfidenceIndicator
@@ -271,12 +271,12 @@ export function FlowPilotSession({
             {/* Matched flow */}
             {session.matched_flow_id && (
               <div>
-                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">
+                <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">
                   Matched flow
                 </h4>
                 <div className="flex items-center gap-2">
-                  <Network size={14} className="text-[#848b9b]" />
-                  <span className="text-xs text-[#e2e5eb]">
+                  <Network size={14} className="text-muted-foreground" />
+                  <span className="text-xs text-foreground">
                     {session.match_score ? `${Math.round(session.match_score * 100)}% match` : 'Match found'}
                   </span>
                 </div>
@@ -286,12 +286,12 @@ export function FlowPilotSession({
             {/* Steps */}
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-1.5">
-                <Hash size={12} className="text-[#848b9b]" />
-                <span className="text-xs text-[#848b9b]">{session.step_count} steps</span>
+                <Hash size={12} className="text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">{session.step_count} steps</span>
               </div>
               <div className="flex items-center gap-1.5">
-                <Clock size={12} className="text-[#848b9b]" />
-                <span className="text-xs text-[#848b9b]">
+                <Clock size={12} className="text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
                   {new Date(session.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </span>
               </div>
@@ -330,12 +330,12 @@ export function FlowPilotSession({
       {/* Paused banner */}
       {session.status === 'paused' && onResume && (
         <div
-          className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between border-t border-[#1e2130] bg-[#14161d] px-3 py-3 sm:px-5"
+          className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between border-t border-border bg-card px-3 py-3 sm:px-5"
         >
-          <span className="text-sm text-[#848b9b]">Session paused</span>
+          <span className="text-sm text-muted-foreground">Session paused</span>
           <button
             onClick={onResume}
-            className="flex items-center gap-2 rounded-lg bg-[#22d3ee] text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
+            className="flex items-center gap-2 rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
           >
             <Play size={14} />
             Resume Session
diff --git a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
index 0a152c90..0d81a3bd 100644
--- a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
@@ -65,9 +65,9 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
         className="w-full text-left card-flat p-3 sm:p-4 opacity-70 hover:opacity-90 transition-opacity"
       >
         <div className="flex items-center gap-3">
-          <Icon size={16} className="shrink-0 text-[#848b9b]" />
-          <p className="text-sm text-[#e2e5eb] truncate flex-1">{stepText}</p>
-          <ChevronDown size={14} className="shrink-0 text-[#848b9b]" />
+          <Icon size={16} className="shrink-0 text-muted-foreground" />
+          <p className="text-sm text-foreground truncate flex-1">{stepText}</p>
+          <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
         </div>
       </button>
     )
@@ -82,14 +82,14 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
           className="mb-2 flex w-full items-center justify-between text-left"
         >
           <div className="flex items-center gap-2">
-            <Icon size={16} className="text-[#848b9b]" />
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
+            <Icon size={16} className="text-muted-foreground" />
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
               Step {step.step_order + 1}
             </span>
           </div>
-          <ChevronUp size={14} className="text-[#848b9b]" />
+          <ChevronUp size={14} className="text-muted-foreground" />
         </button>
-        <MarkdownContent content={stepText} className="text-sm text-[#e2e5eb]" />
+        <MarkdownContent content={stepText} className="text-sm text-foreground" />
       </div>
     )
   }
@@ -105,7 +105,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       {/* Context message */}
       {step.context_message && (
         <div className="mb-3 rounded-lg bg-primary/5 px-3 py-2 border border-primary/10">
-          <MarkdownContent content={step.context_message} className="text-xs text-[#848b9b]" />
+          <MarkdownContent content={step.context_message} className="text-xs text-muted-foreground" />
         </div>
       )}
 
@@ -113,14 +113,14 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       <div className="flex items-start gap-3 mb-4">
         <span className={cn(
           'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
-          isResolutionSuggestion ? 'bg-emerald-500/10 text-emerald-400' : 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
+          isResolutionSuggestion ? 'bg-emerald-500/10 text-emerald-400' : 'bg-accent-dim text-primary'
         )}>
           <Icon size={14} />
         </span>
         <div className="min-w-0 flex-1">
           <MarkdownContent content={stepText} className="text-sm" />
           {isResolutionSuggestion && typeof content.resolution_summary === 'string' && (
-            <p className="mt-2 text-sm text-[#848b9b]">
+            <p className="mt-2 text-sm text-muted-foreground">
               {content.resolution_summary}
             </p>
           )}
@@ -141,7 +141,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
               </button>
               <button
                 onClick={() => handleResolutionResponse(false)}
-                className="flex-1 min-h-[44px] rounded-lg bg-[#14161d]/50 border border-[#1e2130] px-4 py-2.5 text-sm font-medium text-[#e2e5eb] hover:bg-[#14161d] transition-colors"
+                className="flex-1 min-h-[44px] rounded-lg bg-card/50 border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-card transition-colors"
               >
                 No, keep investigating
               </button>
@@ -180,7 +180,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
                 window.open('/script-builder?from=flowpilot', '_blank')
                 onRespond({ action_result: { success: true, details: 'Opened Script Builder' } })
               }}
-              className="flex-1 min-h-[44px] rounded-lg bg-[#22d3ee] text-white px-4 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
+              className="flex-1 min-h-[44px] rounded-lg bg-primary text-white px-4 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
             >
               Open Script Builder
             </button>
@@ -191,13 +191,13 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
             <div className="flex flex-col gap-2 sm:flex-row">
               <button
                 onClick={() => handleActionComplete(true)}
-                className="flex-1 min-h-[44px] rounded-lg bg-[rgba(34,211,238,0.10)] border border-primary/20 px-4 py-2.5 text-sm font-medium text-[#22d3ee] hover:bg-primary/20 transition-colors"
+                className="flex-1 min-h-[44px] rounded-lg bg-accent-dim border border-primary/20 px-4 py-2.5 text-sm font-medium text-primary hover:bg-primary/20 transition-colors"
               >
                 I've completed this action
               </button>
               <button
                 onClick={() => handleActionComplete(false)}
-                className="flex-1 min-h-[44px] rounded-lg bg-[#14161d]/50 border border-[#1e2130] px-4 py-2.5 text-sm font-medium text-[#e2e5eb] hover:bg-[#14161d] transition-colors"
+                className="flex-1 min-h-[44px] rounded-lg bg-card/50 border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-card transition-colors"
               >
                 This didn't work
               </button>
@@ -208,7 +208,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
           {!isResolutionSuggestion && step.allow_skip && (
             <button
               onClick={handleSkip}
-              className="flex items-center gap-1.5 text-xs text-[#5a6170] hover:text-[#848b9b] transition-colors"
+              className="flex items-center gap-1.5 text-xs text-text-muted hover:text-muted-foreground transition-colors"
             >
               <SkipForward size={12} />
               I can't check this right now
@@ -221,7 +221,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       {isProcessing && (
         <div className="flex items-center gap-2 pt-2">
           <div className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
-          <span className="text-xs text-[#848b9b]">FlowPilot is thinking...</span>
+          <span className="text-xs text-muted-foreground">FlowPilot is thinking...</span>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
index 62899312..196f869a 100644
--- a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
+++ b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
@@ -65,14 +65,14 @@ export function InSessionScriptGenerator({
   return (
     <div className="mt-3 rounded-xl border border-primary/20 bg-primary/5 p-3 sm:p-4 space-y-3">
       <div className="flex items-center gap-2">
-        <Terminal size={14} className="text-[#22d3ee]" />
-        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
+        <Terminal size={14} className="text-primary" />
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-primary">
           Script Generator
         </span>
       </div>
 
       {instructions && (
-        <p className="text-xs text-[#848b9b]">{instructions}</p>
+        <p className="text-xs text-muted-foreground">{instructions}</p>
       )}
 
       {/* Parameter editing */}
@@ -80,7 +80,7 @@ export function InSessionScriptGenerator({
         <>
           <button
             onClick={() => setShowParams(!showParams)}
-            className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
           >
             {showParams ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             Parameters ({Object.keys(params).length})
@@ -90,13 +90,13 @@ export function InSessionScriptGenerator({
             <div className="space-y-2">
               {Object.entries(params).map(([key, value]) => (
                 <div key={key}>
-                  <label className="block text-xs font-medium text-[#848b9b] mb-1">
+                  <label className="block text-xs font-medium text-muted-foreground mb-1">
                     {key.replace(/_/g, ' ')}
                   </label>
                   <input
                     value={value}
                     onChange={(e) => setParams(prev => ({ ...prev, [key]: e.target.value }))}
-                    className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                    className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
                   />
                 </div>
               ))}
@@ -106,7 +106,7 @@ export function InSessionScriptGenerator({
           <button
             onClick={handleGenerate}
             disabled={isGenerating}
-            className="w-full min-h-[44px] flex items-center justify-center gap-2 rounded-lg bg-[#22d3ee] text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
+            className="w-full min-h-[44px] flex items-center justify-center gap-2 rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
           >
             {isGenerating ? (
               <Loader2 size={14} className="animate-spin" />
@@ -121,12 +121,12 @@ export function InSessionScriptGenerator({
       {/* Generated script display */}
       {generatedScript && (
         <>
-          <div className="relative rounded-lg bg-[#14161d]/80 border border-[#1e2130] overflow-hidden">
-            <div className="flex items-center justify-between px-3 py-1.5 border-b border-[#1e2130]/50">
-              <span className="text-xs text-[#848b9b] font-mono">PowerShell</span>
+          <div className="relative rounded-lg bg-card/80 border border-border overflow-hidden">
+            <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50">
+              <span className="text-xs text-muted-foreground font-mono">PowerShell</span>
               <button
                 onClick={handleCopy}
-                className="flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
               >
                 {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
                 {copied ? 'Copied' : 'Copy'}
@@ -141,13 +141,13 @@ export function InSessionScriptGenerator({
           <div className="flex flex-col gap-2 pt-1 sm:flex-row">
             <button
               onClick={() => handleContinue(true)}
-              className="flex-1 min-h-[44px] rounded-lg bg-[rgba(34,211,238,0.10)] border border-primary/20 px-4 py-2 text-sm font-medium text-[#22d3ee] hover:bg-primary/20 transition-colors"
+              className="flex-1 min-h-[44px] rounded-lg bg-accent-dim border border-primary/20 px-4 py-2 text-sm font-medium text-primary hover:bg-primary/20 transition-colors"
             >
               Script worked — continue
             </button>
             <button
               onClick={() => handleContinue(false)}
-              className="flex-1 min-h-[44px] rounded-lg bg-[#14161d]/50 border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:bg-[#14161d] transition-colors"
+              className="flex-1 min-h-[44px] rounded-lg bg-card/50 border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-card transition-colors"
             >
               Didn't resolve it
             </button>
diff --git a/frontend/src/components/flowpilot/ProposalCard.tsx b/frontend/src/components/flowpilot/ProposalCard.tsx
index c87324ee..466eb855 100644
--- a/frontend/src/components/flowpilot/ProposalCard.tsx
+++ b/frontend/src/components/flowpilot/ProposalCard.tsx
@@ -5,7 +5,7 @@ const TYPE_CONFIG = {
   new_flow: { label: 'New Flow', color: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20', icon: Sparkles },
   enhancement: { label: 'Enhancement', color: 'text-amber-400 bg-amber-400/10 border-amber-400/20', icon: ArrowUpRight },
   branch_addition: { label: 'Branch', color: 'text-blue-400 bg-blue-400/10 border-blue-400/20', icon: GitBranch },
-  auto_reinforced: { label: 'Reinforced', color: 'text-[#848b9b] bg-[#14161d] border-[#1e2130]', icon: Sparkles },
+  auto_reinforced: { label: 'Reinforced', color: 'text-muted-foreground bg-card border-border', icon: Sparkles },
 } as const
 
 interface ProposalCardProps {
@@ -24,11 +24,11 @@ export function ProposalCard({ proposal, isSelected, onClick }: ProposalCardProp
       className={`w-full text-left rounded-xl border p-3 space-y-2 transition-all ${
         isSelected
           ? 'border-primary/30 bg-primary/5'
-          : 'border-[rgba(255,255,255,0.06)] bg-[#14161d] hover:border-[rgba(255,255,255,0.12)]'
+          : 'border-[rgba(255,255,255,0.06)] bg-card hover:border-[rgba(255,255,255,0.12)]'
       }`}
     >
       <div className="flex items-start justify-between gap-2">
-        <p className="text-sm font-semibold text-[#e2e5eb] line-clamp-2">{proposal.title}</p>
+        <p className="text-sm font-semibold text-foreground line-clamp-2">{proposal.title}</p>
         <span className={`shrink-0 flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-sans text-xs text-[0.5625rem] uppercase tracking-wider ${typeConfig.color}`}>
           <TypeIcon size={10} />
           {typeConfig.label}
@@ -36,12 +36,12 @@ export function ProposalCard({ proposal, isSelected, onClick }: ProposalCardProp
       </div>
 
       {proposal.description && (
-        <p className="text-xs text-[#848b9b] line-clamp-2">{proposal.description}</p>
+        <p className="text-xs text-muted-foreground line-clamp-2">{proposal.description}</p>
       )}
 
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[#848b9b]">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
         {proposal.problem_domain && (
-          <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-[#22d3ee]">
+          <span className="font-sans text-xs rounded-md bg-accent-dim px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-primary">
             {proposal.problem_domain}
           </span>
         )}
@@ -53,7 +53,7 @@ export function ProposalCard({ proposal, isSelected, onClick }: ProposalCardProp
           <Clock size={10} />
           {new Date(proposal.created_at).toLocaleDateString()}
         </span>
-        <span className="text-[#22d3ee]">
+        <span className="text-primary">
           {Math.round(proposal.confidence_score * 100)}%
         </span>
       </div>
diff --git a/frontend/src/components/flowpilot/ProposalDetail.tsx b/frontend/src/components/flowpilot/ProposalDetail.tsx
index 3f8f8fc1..0bb9c606 100644
--- a/frontend/src/components/flowpilot/ProposalDetail.tsx
+++ b/frontend/src/components/flowpilot/ProposalDetail.tsx
@@ -61,13 +61,13 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
     <div className="flex h-full flex-col">
       {/* Header */}
       <div className="border-b px-6 py-4" style={{ borderColor: 'var(--glass-border)' }}>
-        <h2 className="font-heading text-lg font-semibold text-[#e2e5eb]">{proposal.title}</h2>
+        <h2 className="font-heading text-lg font-semibold text-foreground">{proposal.title}</h2>
         {proposal.description && (
-          <p className="mt-1 text-sm text-[#848b9b]">{proposal.description}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{proposal.description}</p>
         )}
-        <div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-[#848b9b]">
+        <div className="mt-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
           {proposal.problem_domain && (
-            <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
+            <span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
               {proposal.problem_domain}
             </span>
           )}
@@ -90,11 +90,11 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
       <div className="flex-1 overflow-y-auto p-6 space-y-5">
         {/* Source session link */}
         <div className="card-flat p-4">
-          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Source Session</h4>
+          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Source Session</h4>
           <Link
             to={`/pilot/${proposal.source_session_id}`}
             target="_blank"
-            className="flex items-center gap-2 text-sm text-[#22d3ee] hover:underline"
+            className="flex items-center gap-2 text-sm text-primary hover:underline"
           >
             <ExternalLink size={12} />
             View session that generated this proposal
@@ -106,15 +106,15 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
           const diff = proposal.proposed_diff as { diff_description?: string; new_nodes?: Array<{ title?: string; question?: string; description?: string }> }
           return (
             <div className="card-flat border-l-2 border-l-amber-500 p-4">
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Proposed Changes</h4>
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Proposed Changes</h4>
               {diff.diff_description && (
-                <p className="text-sm text-[#e2e5eb]">{diff.diff_description}</p>
+                <p className="text-sm text-foreground">{diff.diff_description}</p>
               )}
               {diff.new_nodes && diff.new_nodes.length > 0 && (
                 <div className="mt-3 space-y-1.5">
-                  <p className="text-xs font-medium text-[#848b9b]">New nodes:</p>
+                  <p className="text-xs font-medium text-muted-foreground">New nodes:</p>
                   {diff.new_nodes.map((node, i) => (
-                    <div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-[#e2e5eb]">
+                    <div key={i} className="rounded-lg bg-emerald-500/5 border border-emerald-500/10 px-3 py-2 text-xs text-foreground">
                       <span className="text-emerald-400">+ </span>
                       {node.title || node.question || node.description || 'New node'}
                     </div>
@@ -129,13 +129,13 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
         <div className="card-flat p-4">
           <button
             onClick={() => setShowFlowData(!showFlowData)}
-            className="flex items-center gap-1.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] hover:text-[#e2e5eb] transition-colors"
+            className="flex items-center gap-1.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted hover:text-foreground transition-colors"
           >
             {showFlowData ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             Flow Data (JSON)
           </button>
           {showFlowData && (
-            <pre className="mt-3 max-h-[400px] overflow-auto rounded-lg bg-[#14161d]/80 p-3 text-xs text-[#848b9b] font-mono">
+            <pre className="mt-3 max-h-[400px] overflow-auto rounded-lg bg-card/80 p-3 text-xs text-muted-foreground font-mono">
               {JSON.stringify(proposal.proposed_flow_data, null, 2)}
             </pre>
           )}
@@ -144,7 +144,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
         {/* Supporting sessions */}
         {proposal.supporting_session_ids.length > 1 && (
           <div className="card-flat p-4">
-            <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">
+            <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">
               Supporting Sessions ({proposal.supporting_session_ids.length})
             </h4>
             <div className="space-y-1">
@@ -153,7 +153,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
                   key={sid}
                   to={`/pilot/${sid}`}
                   target="_blank"
-                  className="block text-xs text-[#22d3ee] hover:underline truncate"
+                  className="block text-xs text-primary hover:underline truncate"
                 >
                   {sid}
                 </Link>
@@ -165,13 +165,13 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
         {/* Review info (for already-reviewed proposals) */}
         {proposal.reviewed_at && (
           <div className="card-flat p-4">
-            <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-2">Review</h4>
-            <p className="text-sm text-[#e2e5eb]">
+            <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-2">Review</h4>
+            <p className="text-sm text-foreground">
               <span className="capitalize">{proposal.status}</span> on{' '}
               {new Date(proposal.reviewed_at).toLocaleString()}
             </p>
             {proposal.reviewer_notes && (
-              <p className="mt-1 text-xs text-[#848b9b]">{proposal.reviewer_notes}</p>
+              <p className="mt-1 text-xs text-muted-foreground">{proposal.reviewer_notes}</p>
             )}
           </div>
         )}
@@ -180,14 +180,14 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
       {/* Review actions bar */}
       {canReview && (
         <div
-          className="border-t border-[#1e2130] bg-[#14161d] px-5 py-3 space-y-3"
+          className="border-t border-border bg-card px-5 py-3 space-y-3"
         >
           {/* Notes input */}
           <input
             value={reviewNotes}
             onChange={(e) => setReviewNotes(e.target.value)}
             placeholder="Reviewer notes (optional)"
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
           />
 
           {/* Action buttons */}
@@ -202,14 +202,14 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
                 Approve & Publish
               </button>
             ) : (
-              <span className="text-xs text-[#848b9b] italic px-2">
+              <span className="text-xs text-muted-foreground italic px-2">
                 Enhancement proposals require Edit & Publish
               </span>
             )}
             <button
               onClick={handleEditAndPublish}
               disabled={isSubmitting}
-              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
+              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
             >
               <Pencil size={14} />
               Edit & Publish
@@ -217,7 +217,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
             <button
               onClick={() => handleAction('dismiss')}
               disabled={isSubmitting}
-              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors ml-auto"
+              className="flex items-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors ml-auto"
             >
               <EyeOff size={14} />
               Dismiss
diff --git a/frontend/src/components/flowpilot/SessionBriefing.tsx b/frontend/src/components/flowpilot/SessionBriefing.tsx
index 401c69e0..9f4eb662 100644
--- a/frontend/src/components/flowpilot/SessionBriefing.tsx
+++ b/frontend/src/components/flowpilot/SessionBriefing.tsx
@@ -40,10 +40,10 @@ export function SessionBriefing({
   return (
     <div className="card-flat border-l-2 border-l-amber-500 p-5 space-y-4">
       <div>
-        <h3 className="font-heading text-base font-semibold text-[#e2e5eb]">
+        <h3 className="font-heading text-base font-semibold text-foreground">
           Escalation from {originalEngineerName || 'another engineer'}
         </h3>
-        <p className="mt-1 text-sm text-[#848b9b]">
+        <p className="mt-1 text-sm text-muted-foreground">
           Review the briefing below, then choose how to proceed.
         </p>
       </div>
@@ -51,15 +51,15 @@ export function SessionBriefing({
       {/* Problem */}
       {pkg.problem_summary && (
         <div>
-          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">Problem</h4>
-          <p className="text-sm text-[#e2e5eb]">{pkg.problem_summary}</p>
+          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Problem</h4>
+          <p className="text-sm text-foreground">{pkg.problem_summary}</p>
         </div>
       )}
 
       {/* Escalation reason */}
       {pkg.escalation_reason && (
         <div>
-          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">Why escalated</h4>
+          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Why escalated</h4>
           <p className="text-sm text-amber-400">{pkg.escalation_reason}</p>
         </div>
       )}
@@ -69,7 +69,7 @@ export function SessionBriefing({
         <div>
           <button
             onClick={() => setShowSteps(!showSteps)}
-            className="flex items-center gap-1.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] hover:text-[#e2e5eb] transition-colors"
+            className="flex items-center gap-1.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted hover:text-foreground transition-colors"
           >
             {showSteps ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
             Steps taken ({pkg.steps_tried.length})
@@ -77,10 +77,10 @@ export function SessionBriefing({
           {showSteps && (
             <div className="mt-2 space-y-1.5">
               {pkg.steps_tried.map((step, i) => (
-                <div key={i} className="rounded-lg bg-[#14161d]/50 px-3 py-2 text-xs">
-                  <p className="text-[#e2e5eb]">{i + 1}. {step.description}</p>
+                <div key={i} className="rounded-lg bg-card/50 px-3 py-2 text-xs">
+                  <p className="text-foreground">{i + 1}. {step.description}</p>
                   {step.response && (
-                    <p className="mt-0.5 text-[#22d3ee]">→ {step.response}</p>
+                    <p className="mt-0.5 text-primary">→ {step.response}</p>
                   )}
                 </div>
               ))}
@@ -92,11 +92,11 @@ export function SessionBriefing({
       {/* Remaining hypotheses */}
       {pkg.remaining_hypotheses && pkg.remaining_hypotheses.length > 0 && (
         <div>
-          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">Remaining hypotheses</h4>
+          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Remaining hypotheses</h4>
           <ul className="space-y-1">
             {pkg.remaining_hypotheses.map((h, i) => (
-              <li key={i} className="text-sm text-[#e2e5eb] flex items-start gap-2">
-                <span className="text-[#22d3ee] mt-0.5">•</span>
+              <li key={i} className="text-sm text-foreground flex items-start gap-2">
+                <span className="text-primary mt-0.5">•</span>
                 {h}
               </li>
             ))}
@@ -107,10 +107,10 @@ export function SessionBriefing({
       {/* Suggested next steps */}
       {pkg.suggested_next_steps && pkg.suggested_next_steps.length > 0 && (
         <div>
-          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170] mb-1">Suggested next steps</h4>
+          <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted mb-1">Suggested next steps</h4>
           <ul className="space-y-1">
             {pkg.suggested_next_steps.map((s, i) => (
-              <li key={i} className="text-sm text-[#e2e5eb] flex items-start gap-2">
+              <li key={i} className="text-sm text-foreground flex items-start gap-2">
                 <span className="text-emerald-400 mt-0.5">→</span>
                 {s}
               </li>
@@ -125,7 +125,7 @@ export function SessionBriefing({
           <button
             onClick={onContinue}
             disabled={isProcessing}
-            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-[#22d3ee] text-white px-4 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
+            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-primary text-white px-4 py-2.5 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
           >
             <ArrowRight size={14} />
             Continue Where They Left Off
@@ -133,7 +133,7 @@ export function SessionBriefing({
           <button
             onClick={() => setFreshMode(true)}
             disabled={isProcessing}
-            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
+            className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
           >
             <MessageSquare size={14} />
             Start Fresh With Context
@@ -145,7 +145,7 @@ export function SessionBriefing({
             value={freshContext}
             onChange={(e) => setFreshContext(e.target.value)}
             placeholder="What additional information do you have, or what would you like to investigate first?"
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-4 py-3 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+            className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
             rows={3}
             autoFocus
           />
@@ -153,14 +153,14 @@ export function SessionBriefing({
             <button
               onClick={() => setFreshMode(false)}
               disabled={isProcessing}
-              className="rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
+              className="rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 transition-colors"
             >
               Back
             </button>
             <button
               onClick={() => freshContext.trim() && onFresh(freshContext.trim())}
               disabled={!freshContext.trim() || isProcessing}
-              className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-[#22d3ee] text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
+              className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] disabled:opacity-40 transition-all"
             >
               <ArrowRight size={14} />
               Start Diagnosis
diff --git a/frontend/src/components/flowpilot/SessionDocView.tsx b/frontend/src/components/flowpilot/SessionDocView.tsx
index f449167e..a8fa3b98 100644
--- a/frontend/src/components/flowpilot/SessionDocView.tsx
+++ b/frontend/src/components/flowpilot/SessionDocView.tsx
@@ -109,25 +109,25 @@ export function SessionDocView({
       {/* Header */}
       <div className="card-flat p-3 sm:p-4 lg:p-5">
         <div className="flex items-start gap-3">
-          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[rgba(34,211,238,0.10)] text-[#22d3ee]">
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-dim text-primary">
             <FileText size={16} />
           </span>
           <div className="flex-1">
-            <h3 className="font-heading text-lg font-semibold text-[#e2e5eb]">Session Documentation</h3>
-            <p className="mt-1 text-sm text-[#848b9b]">{documentation.problem_summary}</p>
+            <h3 className="font-heading text-lg font-semibold text-foreground">Session Documentation</h3>
+            <p className="mt-1 text-sm text-muted-foreground">{documentation.problem_summary}</p>
             <div className="mt-2 flex items-center gap-3 flex-wrap">
               {documentation.problem_domain && (
-                <span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
+                <span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
                   {documentation.problem_domain}
                 </span>
               )}
               {documentation.duration_display && (
-                <span className="flex items-center gap-1 text-xs text-[#848b9b]">
+                <span className="flex items-center gap-1 text-xs text-muted-foreground">
                   <Clock size={12} />
                   {documentation.duration_display}
                 </span>
               )}
-              <span className="text-xs text-[#848b9b]">
+              <span className="text-xs text-muted-foreground">
                 {documentation.total_steps} steps
               </span>
             </div>
@@ -144,11 +144,11 @@ export function SessionDocView({
             ) : (
               <ArrowUpRight size={14} className="text-amber-400" />
             )}
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground">
               {documentation.resolution_summary ? 'Resolved' : 'Escalated'}
             </span>
           </div>
-          <p className="text-sm text-[#e2e5eb]">
+          <p className="text-sm text-foreground">
             {documentation.resolution_summary || documentation.escalation_reason}
           </p>
         </div>
@@ -156,30 +156,30 @@ export function SessionDocView({
 
       {/* Intake summary */}
       <div className="card-flat p-3 sm:p-4">
-        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b] mb-2">
+        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground mb-2">
           Original intake
         </h4>
-        <p className="text-sm text-[#e2e5eb] whitespace-pre-wrap">{documentation.intake_summary}</p>
+        <p className="text-sm text-foreground whitespace-pre-wrap">{documentation.intake_summary}</p>
       </div>
 
       {/* Diagnostic steps */}
       <div className="space-y-2">
-        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b] px-1">
+        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-muted-foreground px-1">
           Diagnostic trail
         </h4>
         {documentation.diagnostic_steps.map((step) => (
           <div key={step.step_number} className="card-flat p-3 sm:p-4">
             <div className="flex items-start gap-3">
-              <span className="font-sans text-xs flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#14161d] text-[0.625rem] text-[#848b9b] border border-[#1e2130]">
+              <span className="font-sans text-xs flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-card text-[0.625rem] text-muted-foreground border border-border">
                 {step.step_number}
               </span>
               <div className="flex-1">
-                <p className="text-sm text-[#e2e5eb]">{step.description}</p>
+                <p className="text-sm text-foreground">{step.description}</p>
                 {step.engineer_response && (
-                  <p className="mt-1 text-xs text-[#22d3ee]">→ {step.engineer_response}</p>
+                  <p className="mt-1 text-xs text-primary">→ {step.engineer_response}</p>
                 )}
                 {step.outcome && (
-                  <p className="mt-1 text-xs text-[#848b9b]">Outcome: {step.outcome}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">Outcome: {step.outcome}</p>
                 )}
               </div>
             </div>
@@ -190,7 +190,7 @@ export function SessionDocView({
       {/* Rating */}
       {onRate && (
         <div className="card-flat p-3 sm:p-4 text-center">
-          <p className="text-sm text-[#848b9b] mb-2">How helpful was this session?</p>
+          <p className="text-sm text-muted-foreground mb-2">How helpful was this session?</p>
           <div className="flex items-center justify-center gap-1">
             {[1, 2, 3, 4, 5].map((star) => (
               <button
@@ -203,7 +203,7 @@ export function SessionDocView({
                   className={
                     (currentRating ?? 0) >= star
                       ? 'fill-amber-400 text-amber-400'
-                      : 'text-[#848b9b] hover:text-amber-400'
+                      : 'text-muted-foreground hover:text-amber-400'
                   }
                 />
               </button>
diff --git a/frontend/src/components/flowpilot/SessionTicketCard.tsx b/frontend/src/components/flowpilot/SessionTicketCard.tsx
index f17474e7..0098aa9f 100644
--- a/frontend/src/components/flowpilot/SessionTicketCard.tsx
+++ b/frontend/src/components/flowpilot/SessionTicketCard.tsx
@@ -36,7 +36,7 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
   return (
     <div className="rounded-xl border border-primary/20 bg-primary/5 p-3 space-y-2">
       <div className="flex items-start justify-between">
-        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#5a6170]">
+        <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted">
           Linked Ticket
         </h4>
         {ticketUrl && (
@@ -44,7 +44,7 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
             href={ticketUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-[#848b9b] hover:text-[#22d3ee] transition-colors"
+            className="text-muted-foreground hover:text-primary transition-colors"
             title="Open in ConnectWise"
           >
             <ExternalLink size={12} />
@@ -52,14 +52,14 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
         )}
       </div>
 
-      <p className="text-sm font-semibold text-[#e2e5eb]">
-        <span className="text-[#22d3ee]">#{ticketId}</span>
+      <p className="text-sm font-semibold text-foreground">
+        <span className="text-primary">#{ticketId}</span>
         {ticket?.summary && (
           <span> — {ticket.summary}</span>
         )}
       </p>
 
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#848b9b]">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
         {company?.name && (
           <span className="flex items-center gap-1">
             <Building2 size={10} />
@@ -68,33 +68,33 @@ export function SessionTicketCard({ ticketId, ticketData, siteUrl }: SessionTick
         )}
         {ticket?.priority && (
           <>
-            <span className="text-[#5a6170]">&bull;</span>
+            <span className="text-text-muted">&bull;</span>
             <span>{ticket.priority}</span>
           </>
         )}
         {ticket?.status && (
           <>
-            <span className="text-[#5a6170]">&bull;</span>
+            <span className="text-text-muted">&bull;</span>
             <span>{ticket.status}</span>
           </>
         )}
       </div>
 
       {configs && configs.length > 0 && (
-        <div className="border-t border-[#1e2130]/50 pt-2 mt-2">
-          <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-[#5a6170] mb-1">
+        <div className="border-t border-border/50 pt-2 mt-2">
+          <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-text-muted mb-1">
             Devices
           </p>
           <div className="space-y-0.5">
             {configs.slice(0, 3).map((cfg, i) => (
-              <div key={i} className="flex items-center gap-1.5 text-xs text-[#848b9b]">
+              <div key={i} className="flex items-center gap-1.5 text-xs text-muted-foreground">
                 <Cpu size={10} />
                 <span>{cfg.device_identifier}</span>
-                {cfg.type && <span className="text-[#5a6170]">({cfg.type})</span>}
+                {cfg.type && <span className="text-text-muted">({cfg.type})</span>}
               </div>
             ))}
             {configs.length > 3 && (
-              <p className="text-[0.625rem] text-[#5a6170]">
+              <p className="text-[0.625rem] text-text-muted">
                 +{configs.length - 3} more
               </p>
             )}
diff --git a/frontend/src/components/flowpilot/SimilarSessions.tsx b/frontend/src/components/flowpilot/SimilarSessions.tsx
index 8d1e63e8..e5d29219 100644
--- a/frontend/src/components/flowpilot/SimilarSessions.tsx
+++ b/frontend/src/components/flowpilot/SimilarSessions.tsx
@@ -35,8 +35,8 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
   if (loading) {
     return (
       <div className="flex items-center gap-1.5 py-1">
-        <Loader2 size={10} className="animate-spin text-[#848b9b]" />
-        <span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">Loading similar sessions…</span>
+        <Loader2 size={10} className="animate-spin text-muted-foreground" />
+        <span className="text-[0.625rem] text-muted-foreground font-sans text-xs">Loading similar sessions…</span>
       </div>
     )
   }
@@ -47,7 +47,7 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
 
   return (
     <div className="space-y-2">
-      <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+      <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
         Similar Past Sessions
       </h4>
       {sessions.map((session) => (
@@ -57,21 +57,21 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
           className="card-interactive p-3 block hover:border-[rgba(255,255,255,0.12)] transition-all"
         >
           <div className="flex items-start justify-between gap-2">
-            <p className="text-xs text-[#e2e5eb] line-clamp-2">
+            <p className="text-xs text-foreground line-clamp-2">
               {session.problem_summary || 'Untitled session'}
             </p>
-            <span className="text-[0.625rem] font-sans text-xs text-[#22d3ee] shrink-0">
+            <span className="text-[0.625rem] font-sans text-xs text-primary shrink-0">
               {Math.round(session.similarity * 100)}%
             </span>
           </div>
           {session.resolution_summary && (
-            <p className="text-[0.625rem] text-[#848b9b] mt-1 line-clamp-1">
+            <p className="text-[0.625rem] text-muted-foreground mt-1 line-clamp-1">
               ✓ {session.resolution_summary}
             </p>
           )}
           <div className="flex items-center gap-2 mt-1.5">
             {session.problem_domain && (
-              <span className="text-[0.5rem] font-sans text-xs uppercase tracking-wider text-[#848b9b]/70">
+              <span className="text-[0.5rem] font-sans text-xs uppercase tracking-wider text-muted-foreground/70">
                 {session.problem_domain}
               </span>
             )}
@@ -82,7 +82,7 @@ export function SimilarSessions({ sessionId }: SimilarSessionsProps) {
                   ? 'text-emerald-400'
                   : session.status === 'escalated'
                     ? 'text-amber-400'
-                    : 'text-[#848b9b]'
+                    : 'text-muted-foreground'
               )}
             >
               {session.status}
diff --git a/frontend/src/components/kb-accelerator/NodeCard.tsx b/frontend/src/components/kb-accelerator/NodeCard.tsx
index c18d297e..c9b1487b 100644
--- a/frontend/src/components/kb-accelerator/NodeCard.tsx
+++ b/frontend/src/components/kb-accelerator/NodeCard.tsx
@@ -66,7 +66,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-1">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
               {node.node_type}
             </span>
             <span className={cn('font-sans text-xs text-[0.625rem]', confidenceTextColor(node.confidence_score))}>
@@ -85,27 +85,27 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <textarea
                 value={editContent}
                 onChange={e => setEditContent(e.target.value)}
-                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary/30 focus:outline-hidden"
+                className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary/30 focus:outline-hidden"
                 rows={3}
               />
               <div className="flex gap-2">
                 <button
                   onClick={() => handleAction('edit', { content: { ...node.content, question: editContent, content: editContent } })}
                   disabled={busy}
-                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[#22d3ee] text-white hover:brightness-110"
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-white hover:brightness-110"
                 >
                   Save
                 </button>
                 <button
                   onClick={() => setEditMode(false)}
-                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]"
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground"
                 >
                   Cancel
                 </button>
               </div>
             </div>
           ) : (
-            <p className="text-sm text-[#e2e5eb]">{stepContent || question}</p>
+            <p className="text-sm text-foreground">{stepContent || question}</p>
           )}
         </div>
 
@@ -116,7 +116,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <button
                 onClick={() => handleAction('approve')}
                 disabled={busy}
-                className="p-1.5 rounded-md text-[#848b9b] hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
+                className="p-1.5 rounded-md text-muted-foreground hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
                 title="Approve"
               >
                 <Check size={14} />
@@ -126,7 +126,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <button
                 onClick={() => handleAction('reject')}
                 disabled={busy}
-                className="p-1.5 rounded-md text-[#848b9b] hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
+                className="p-1.5 rounded-md text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
                 title="Unapprove"
               >
                 <X size={14} />
@@ -135,7 +135,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={startEdit}
               disabled={busy}
-              className="p-1.5 rounded-md text-[#848b9b] hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
               title="Edit"
             >
               <Pencil size={14} />
@@ -143,7 +143,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('regenerate')}
               disabled={busy}
-              className="p-1.5 rounded-md text-[#848b9b] hover:text-[#22d3ee] hover:bg-[rgba(34,211,238,0.10)] transition-colors"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-accent-dim transition-colors"
               title="Regenerate"
             >
               <RotateCcw size={14} />
@@ -151,7 +151,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('insert_after', { content: { question: 'New node', type: node.node_type } })}
               disabled={busy}
-              className="p-1.5 rounded-md text-[#848b9b] hover:text-[#22d3ee] hover:bg-[rgba(34,211,238,0.10)] transition-colors"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-accent-dim transition-colors"
               title="Insert after"
             >
               <Plus size={14} />
@@ -159,7 +159,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('delete')}
               disabled={busy}
-              className="p-1.5 rounded-md text-[#848b9b] hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
+              className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
               title="Delete"
             >
               <Trash2 size={14} />
@@ -173,16 +173,16 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
         <div className="mt-3">
           <button
             onClick={() => setExpanded(!expanded)}
-            className="flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
           >
             {expanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
             {options.length} option{options.length !== 1 ? 's' : ''}
           </button>
           {expanded && (
-            <div className="mt-2 space-y-1 pl-3 border-l border-[#1e2130]">
+            <div className="mt-2 space-y-1 pl-3 border-l border-border">
               {options.map((opt, i) => (
-                <p key={i} className="text-xs text-[#848b9b]">
-                  {opt.label} {opt.next_node_id && <span className="text-[#5a6170]">→ {opt.next_node_id}</span>}
+                <p key={i} className="text-xs text-muted-foreground">
+                  {opt.label} {opt.next_node_id && <span className="text-text-muted">→ {opt.next_node_id}</span>}
                 </p>
               ))}
             </div>
@@ -192,7 +192,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
 
       {/* Source excerpt */}
       {node.source_excerpt && (
-        <p className="mt-2 text-xs text-[#5a6170] italic truncate" title={node.source_excerpt}>
+        <p className="mt-2 text-xs text-text-muted italic truncate" title={node.source_excerpt}>
           Source: {node.source_excerpt}
         </p>
       )}
diff --git a/frontend/src/components/kb-accelerator/ReviewScreen.tsx b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
index 75c53834..28041651 100644
--- a/frontend/src/components/kb-accelerator/ReviewScreen.tsx
+++ b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
@@ -32,21 +32,21 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
       {/* Header */}
       <div className="card-flat p-4 flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h2 className="text-lg font-heading font-semibold text-[#e2e5eb]">{flowTitle}</h2>
+          <h2 className="text-lg font-heading font-semibold text-foreground">{flowTitle}</h2>
           {flowDescription && (
-            <p className="text-sm text-[#848b9b] mt-0.5">{flowDescription}</p>
+            <p className="text-sm text-muted-foreground mt-0.5">{flowDescription}</p>
           )}
         </div>
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 text-sm">
-            <BarChart3 size={14} className="text-[#848b9b]" />
-            <span className="text-[#848b9b]">
-              Avg confidence: <span className="text-[#e2e5eb] font-medium">{Math.round(avgConfidence * 100)}%</span>
+            <BarChart3 size={14} className="text-muted-foreground" />
+            <span className="text-muted-foreground">
+              Avg confidence: <span className="text-foreground font-medium">{Math.round(avgConfidence * 100)}%</span>
             </span>
           </div>
           <div className="flex items-center gap-2 text-sm">
             <CheckCircle2 size={14} className="text-emerald-400" />
-            <span className="text-[#848b9b]">
+            <span className="text-muted-foreground">
               {approvedCount}/{nodes.length} approved
             </span>
           </div>
@@ -90,8 +90,8 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
         {/* Nodes panel */}
         <div className="flex flex-col card-flat overflow-hidden">
           <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
-            <span className="text-sm font-medium text-[#e2e5eb]">Generated Flow</span>
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] ml-auto">
+            <span className="text-sm font-medium text-foreground">Generated Flow</span>
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
               {kbImport.target_type === 'troubleshooting' ? 'Troubleshooting' : 'Project'}
             </span>
           </div>
@@ -105,7 +105,7 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
               />
             ))}
             {nodes.length === 0 && (
-              <p className="text-sm text-[#848b9b] text-center py-8">
+              <p className="text-sm text-muted-foreground text-center py-8">
                 No nodes generated. Try converting again.
               </p>
             )}
@@ -120,8 +120,8 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
           disabled={loading}
           className={cn(
             'px-4 py-2.5 rounded-lg text-sm font-medium transition-colors',
-            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b]',
-            'hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]',
+            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground',
+            'hover:text-foreground hover:border-[rgba(255,255,255,0.12)]',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
         >
@@ -132,7 +132,7 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
           disabled={loading || nodes.length === 0}
           className={cn(
             'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
-            'bg-[#22d3ee] text-white',
+            'bg-primary text-white',
             'hover:brightness-110 active:scale-[0.98]',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
diff --git a/frontend/src/components/kb-accelerator/SourcePanel.tsx b/frontend/src/components/kb-accelerator/SourcePanel.tsx
index 599832ef..d46a0c38 100644
--- a/frontend/src/components/kb-accelerator/SourcePanel.tsx
+++ b/frontend/src/components/kb-accelerator/SourcePanel.tsx
@@ -17,7 +17,7 @@ export function SourcePanel({ sourceText, sourceFormat, highlightExcerpt }: Sour
     return (
       <>
         <span>{sourceText.slice(0, idx)}</span>
-        <mark className="bg-primary/20 text-[#e2e5eb] rounded px-0.5">{highlightExcerpt}</mark>
+        <mark className="bg-primary/20 text-foreground rounded px-0.5">{highlightExcerpt}</mark>
         <span>{sourceText.slice(idx + highlightExcerpt.length)}</span>
       </>
     )
@@ -26,14 +26,14 @@ export function SourcePanel({ sourceText, sourceFormat, highlightExcerpt }: Sour
   return (
     <div className="card-flat flex flex-col h-full">
       <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
-        <FileText size={16} className="text-[#848b9b]" />
-        <span className="text-sm font-medium text-[#e2e5eb]">Source Document</span>
-        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] ml-auto">
+        <FileText size={16} className="text-muted-foreground" />
+        <span className="text-sm font-medium text-foreground">Source Document</span>
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
           {sourceFormat}
         </span>
       </div>
       <div className="flex-1 overflow-y-auto p-4">
-        <pre className="text-sm text-[#848b9b] whitespace-pre-wrap font-sans leading-relaxed">
+        <pre className="text-sm text-muted-foreground whitespace-pre-wrap font-sans leading-relaxed">
           {renderedText}
         </pre>
       </div>
diff --git a/frontend/src/components/kb-accelerator/SuccessScreen.tsx b/frontend/src/components/kb-accelerator/SuccessScreen.tsx
index caf5b87e..b85f2ed9 100644
--- a/frontend/src/components/kb-accelerator/SuccessScreen.tsx
+++ b/frontend/src/components/kb-accelerator/SuccessScreen.tsx
@@ -18,10 +18,10 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
       </div>
 
       <div>
-        <h2 className="text-xl font-heading font-semibold text-[#e2e5eb]">
+        <h2 className="text-xl font-heading font-semibold text-foreground">
           Flow Created Successfully
         </h2>
-        <p className="text-sm text-[#848b9b] mt-2">
+        <p className="text-sm text-muted-foreground mt-2">
           Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
           and added to your library.
         </p>
@@ -32,7 +32,7 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
           onClick={onViewFlow}
           className={cn(
             'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
-            'bg-[#22d3ee] text-white',
+            'bg-primary text-white',
             'hover:brightness-110 active:scale-[0.98]'
           )}
         >
@@ -43,7 +43,7 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
           onClick={onConvertAnother}
           className={cn(
             'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors',
-            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
             'hover:border-[rgba(255,255,255,0.12)]'
           )}
         >
diff --git a/frontend/src/components/kb-accelerator/UploadScreen.tsx b/frontend/src/components/kb-accelerator/UploadScreen.tsx
index a951ddf3..686e884f 100644
--- a/frontend/src/components/kb-accelerator/UploadScreen.tsx
+++ b/frontend/src/components/kb-accelerator/UploadScreen.tsx
@@ -84,14 +84,14 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
       {quota && (
         <div className="card-flat p-4 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Sparkles size={18} className="text-[#22d3ee]" />
+            <Sparkles size={18} className="text-primary" />
             <div>
-              <p className="text-sm font-medium text-[#e2e5eb]">
+              <p className="text-sm font-medium text-foreground">
                 {quota.lifetime_conversions_limit
                   ? `${quota.lifetime_conversions_limit - quota.lifetime_conversions_used} conversions remaining`
                   : 'Unlimited conversions'}
               </p>
-              <p className="text-xs text-[#848b9b]">
+              <p className="text-xs text-muted-foreground">
                 {quota.plan.charAt(0).toUpperCase() + quota.plan.slice(1)} plan
               </p>
             </div>
@@ -112,8 +112,8 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
           className={cn(
             'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
             mode === 'paste'
-              ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border border-primary/30'
-              : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
+              ? 'bg-accent-dim text-foreground border border-primary/30'
+              : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
           )}
         >
           <ClipboardPaste size={16} />
@@ -125,8 +125,8 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
             className={cn(
               'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
               mode === 'file'
-                ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border border-primary/30'
-                : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
+                ? 'bg-accent-dim text-foreground border border-primary/30'
+                : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
             )}
           >
             <FileUp size={16} />
@@ -140,7 +140,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
         {mode === 'paste' ? (
           <>
             <div>
-              <label htmlFor="kb-title" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5">
+              <label htmlFor="kb-title" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
                 Title (optional)
               </label>
               <Input
@@ -152,7 +152,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
               />
             </div>
             <div>
-              <label htmlFor="kb-content" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5">
+              <label htmlFor="kb-content" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
                 KB Article Content
               </label>
               <Textarea
@@ -163,7 +163,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
                 rows={12}
                 maxLength={500000}
               />
-              <p className="mt-1 text-xs text-[#848b9b]">
+              <p className="mt-1 text-xs text-muted-foreground">
                 {content.length.toLocaleString()} / 500,000 characters
               </p>
             </div>
@@ -183,15 +183,15 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
           >
             {file ? (
               <>
-                <FileText size={32} className="text-[#22d3ee]" />
+                <FileText size={32} className="text-primary" />
                 <div className="text-center">
-                  <p className="text-sm font-medium text-[#e2e5eb]">{file.name}</p>
-                  <p className="text-xs text-[#848b9b] mt-1">
+                  <p className="text-sm font-medium text-foreground">{file.name}</p>
+                  <p className="text-xs text-muted-foreground mt-1">
                     {(file.size / 1024).toFixed(1)} KB
                   </p>
                   <button
                     onClick={e => { e.stopPropagation(); setFile(null) }}
-                    className="mt-2 text-xs text-[#22d3ee] hover:underline"
+                    className="mt-2 text-xs text-primary hover:underline"
                   >
                     Remove
                   </button>
@@ -199,12 +199,12 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
               </>
             ) : (
               <>
-                <Upload size={32} className="text-[#848b9b]" />
+                <Upload size={32} className="text-muted-foreground" />
                 <div className="text-center">
-                  <p className="text-sm text-[#e2e5eb]">
-                    Drop a file here or <span className="text-[#22d3ee]">browse</span>
+                  <p className="text-sm text-foreground">
+                    Drop a file here or <span className="text-primary">browse</span>
                   </p>
-                  <p className="text-xs text-[#848b9b] mt-1">
+                  <p className="text-xs text-muted-foreground mt-1">
                     Supported: {fileFormats.map(f => FORMAT_LABELS[f] || f.toUpperCase()).join(', ')}
                   </p>
                 </div>
@@ -223,7 +223,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
 
       {/* Target type selector */}
       <div>
-        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
           Target Flow Type
         </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -238,8 +238,8 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
                   : 'hover:border-[rgba(255,255,255,0.12)]'
               )}
             >
-              <p className="text-sm font-medium text-[#e2e5eb]">{t.label}</p>
-              <p className="text-xs text-[#848b9b] mt-1">{t.description}</p>
+              <p className="text-sm font-medium text-foreground">{t.label}</p>
+              <p className="text-xs text-muted-foreground mt-1">{t.description}</p>
             </button>
           ))}
         </div>
@@ -251,7 +251,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
         disabled={!canSubmit || loading || (quota != null && !quota.can_convert)}
         className={cn(
           'w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg text-sm font-semibold transition-all',
-          'bg-[#22d3ee] text-white',
+          'bg-primary text-white',
           'hover:brightness-110 active:scale-[0.98]',
           'disabled:opacity-50 disabled:cursor-not-allowed'
         )}
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 0828ad50..52e79179 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -80,7 +80,7 @@ export function AppLayout() {
       <button
         type="button"
         onClick={() => setMobileMenuOpen(true)}
-        className="fixed left-4 top-3.5 z-50 rounded-lg p-2 text-[#848b9b] hover:bg-[#14161d] hover:text-[#e2e5eb] transition-colors md:hidden"
+        className="fixed left-4 top-3.5 z-50 rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors md:hidden"
         aria-label="Open menu"
       >
         <Menu size={20} />
@@ -101,12 +101,12 @@ export function AppLayout() {
             <div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid #1e2130' }}>
               <Link to="/" className="flex items-center gap-2.5">
                 <BrandLogo size="sm" />
-                <span className="text-sm font-heading font-bold text-[#f0f2f5]">ResolutionFlow</span>
+                <span className="text-sm font-heading font-bold text-text-heading">ResolutionFlow</span>
               </Link>
               <button
                 type="button"
                 onClick={() => setMobileMenuOpen(false)}
-                className="rounded-lg p-2 text-[#848b9b] hover:bg-[#14161d] hover:text-[#e2e5eb]"
+                className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground"
                 aria-label="Close menu"
               >
                 <X size={18} />
@@ -116,9 +116,9 @@ export function AppLayout() {
             <div className="flex flex-col p-3">
               {/* User info */}
               <div className="mb-3 pb-3 px-3" style={{ borderBottom: '1px solid #1e2130' }}>
-                <p className="text-sm font-medium text-[#e2e5eb]">{user?.name || user?.email}</p>
+                <p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
                 {effectiveRole && effectiveRole !== 'engineer' && (
-                  <span className="mt-1 inline-flex items-center gap-1 text-xs text-[#848b9b]">
+                  <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                     <Shield size={10} />
                     {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
                   </span>
@@ -139,8 +139,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-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                          : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+                          ? 'bg-accent-dim text-foreground'
+                          : 'text-muted-foreground hover:bg-input hover:text-foreground'
                       )}
                     >
                       <Icon size={18} />
@@ -155,7 +155,7 @@ export function AppLayout() {
                 <button
                   type="button"
                   onClick={handleLogout}
-                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb] 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-input 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 743b3db2..c7cf47bf 100644
--- a/frontend/src/components/layout/NavItem.tsx
+++ b/frontend/src/components/layout/NavItem.tsx
@@ -48,7 +48,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
         title={label}
       >
         {isActive && (
-          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-[#22d3ee]" />
+          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
         )}
         <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} style={iconColor ? { color: iconColor } : undefined} />
         {badge !== undefined && badge !== 0 && badge !== 'dot' && (
@@ -76,7 +76,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
       >
         {/* Active indicator bar */}
         {isActive && !isParentDimmed && (
-          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-[#22d3ee]" />
+          <div className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
         )}
 
         <Icon size={18} className={cn('shrink-0', isActive ? 'opacity-100' : 'opacity-70')} style={iconColor ? { color: iconColor } : undefined} />
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index c79999e1..29dd078f 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -254,15 +254,15 @@ export function Sidebar() {
           className={cn(
             'group relative flex flex-col items-center justify-center rounded-lg px-1 py-2 transition-all duration-150',
             active
-              ? 'bg-[rgba(34,211,238,0.10)] text-[#67e8f9]'
-              : 'text-[#6b7280] hover:text-[#848b9b]'
+              ? 'bg-accent-dim text-accent-text'
+              : 'text-text-rail-label hover:text-muted-foreground'
           )}
           title={item.label}
         >
           <span className="relative">
             <Icon size={20} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
             {item.badge !== undefined && item.badge > 0 && (
-              <span className="absolute -right-1.5 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-[#22d3ee] px-1 text-[0.5rem] font-bold text-[#0c0d10]">
+              <span className="absolute -right-1.5 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-[#0c0d10]">
                 {item.badge > 99 ? '99+' : item.badge}
               </span>
             )}
@@ -293,9 +293,9 @@ export function Sidebar() {
             'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium transition-all duration-150',
             active
               ? isParentDimmed
-                ? 'bg-[rgba(34,211,238,0.05)] text-[#e2e5eb]/70'
-                : 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-              : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+                ? 'bg-[rgba(34,211,238,0.05)] text-foreground/70'
+                : 'bg-accent-dim text-foreground'
+              : 'text-muted-foreground hover:bg-input hover:text-foreground'
           )}
         >
           {active && !isParentDimmed && (
@@ -307,7 +307,7 @@ export function Sidebar() {
           <Icon size={18} className={cn('shrink-0', active ? 'opacity-100' : 'opacity-70')} />
           <span className="truncate">{item.label}</span>
           {item.badge !== undefined && item.badge > 0 && (
-            <span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-[#4f5666]"
+            <span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
               style={{ background: '#14161d', border: '1px solid #1e2130' }}>
               {item.badge}
             </span>
@@ -331,13 +331,13 @@ export function Sidebar() {
                   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-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                      : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+                      ? 'bg-accent-dim text-foreground'
+                      : 'text-muted-foreground hover:bg-input hover:text-foreground'
                   )}
                 >
                   <span className="truncate">{child.label}</span>
                   {child.count !== undefined && (
-                    <span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-[#4f5666]"
+                    <span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
                       style={{ background: '#14161d', border: '1px solid #1e2130' }}>
                       {child.count}
                     </span>
@@ -373,7 +373,7 @@ export function Sidebar() {
           {sections.map((section, si) => (
             <div key={section.title}>
               {si > 0 && (
-                <div className="font-mono text-[0.5625rem] uppercase tracking-[0.12em] text-[#4f5666] px-3 pt-3 pb-1">
+                <div className="font-mono text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted px-3 pt-3 pb-1">
                   {section.title}
                 </div>
               )}
@@ -390,7 +390,7 @@ export function Sidebar() {
           <button
             type="button"
             onClick={toggleSidebarPinned}
-            className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb] transition-colors"
+            className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[0.8125rem] font-medium text-muted-foreground hover:bg-input hover:text-foreground transition-colors"
             title="Unpin sidebar"
           >
             <PinOff size={18} className="shrink-0" />
@@ -427,7 +427,7 @@ export function Sidebar() {
           <button
             type="button"
             onClick={toggleSidebarPinned}
-            className="flex flex-col items-center justify-center rounded-lg px-1 py-2 text-[#6b7280] hover:text-[#848b9b] transition-colors"
+            className="flex flex-col items-center justify-center rounded-lg px-1 py-2 text-text-rail-label hover:text-muted-foreground transition-colors"
             title="Pin sidebar"
           >
             <Pin size={18} className="opacity-60 hover:opacity-85" />
@@ -455,7 +455,7 @@ export function Sidebar() {
           >
             {/* Drawer header */}
             <div className="px-3 mb-3">
-              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-[#4f5666]">
+              <h3 className="text-[0.6875rem] font-mono uppercase tracking-[0.12em] text-text-muted">
                 {activeFlyoutGroup.label}
               </h3>
             </div>
@@ -469,13 +469,13 @@ export function Sidebar() {
                   className={cn(
                     'flex items-center justify-between rounded-md px-3 py-2 text-[0.8125rem] transition-colors',
                     isChildActive(child)
-                      ? 'bg-[rgba(34,211,238,0.10)] text-[#67e8f9]'
-                      : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+                      ? 'bg-accent-dim text-accent-text'
+                      : 'text-muted-foreground hover:bg-input hover:text-foreground'
                   )}
                 >
                   <span>{child.label}</span>
                   {child.count !== undefined && (
-                    <span className="text-[0.6875rem] font-mono text-[#4f5666]">{child.count}</span>
+                    <span className="text-[0.6875rem] font-mono text-text-muted">{child.count}</span>
                   )}
                 </Link>
               ))}
@@ -484,7 +484,7 @@ export function Sidebar() {
 
           {/* Resize handle */}
           <div
-            className="w-1 cursor-col-resize hover:bg-[#22d3ee]/20 active:bg-[#22d3ee]/30 transition-colors shrink-0"
+            className="w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors shrink-0"
             onPointerDown={handleResizeStart}
             title="Drag to resize"
           />
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index c463bdb5..0f161751 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -67,7 +67,7 @@ export function TopBar() {
           className="flex items-center gap-2.5 pr-4 transition-all duration-200"
         >
           <BrandLogo size="sm" />
-          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap text-[#f0f2f5]">
+          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap text-text-heading">
             ResolutionFlow
           </span>
         </Link>
@@ -81,9 +81,9 @@ export function TopBar() {
           className="hidden sm:relative sm:block w-full text-left"
           style={{ maxWidth: '480px' }}
         >
-          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-[#848b9b]" />
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
           <div
-            className="w-full rounded-md py-2 pl-9 pr-14 text-[0.8125rem] text-[#848b9b] cursor-pointer transition-colors"
+            className="w-full rounded-md py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer transition-colors"
             style={{
               background: '#14161d',
               border: '1px solid #1e2130',
@@ -94,7 +94,7 @@ export function TopBar() {
             Search flows, sessions, tags...
           </div>
           <span
-            className="absolute right-3 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 font-mono text-[0.625rem] text-[#4f5666]"
+            className="absolute right-3 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 font-mono text-[0.625rem] text-text-muted"
             style={{ background: '#0c0d10', border: '1px solid #1e2130' }}
           >
             {navigator.platform?.toLowerCase().includes('mac') ? '\u2318K' : 'Ctrl+K'}
@@ -102,7 +102,7 @@ export function TopBar() {
         </button>
         <button
           onClick={() => setCommandPaletteOpen(true)}
-          className="sm:hidden rounded-lg p-2 text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="sm:hidden rounded-lg p-2 text-muted-foreground hover:text-foreground transition-colors"
           title="Search"
         >
           <Search size={18} />
@@ -115,14 +115,14 @@ export function TopBar() {
         <div className="flex items-center gap-1">
           <button
             onClick={() => setQuickLaunchOpen(true)}
-            className="rounded-lg p-2 text-[#848b9b] hover:bg-[#14161d] hover:text-[#e2e5eb] transition-colors"
+            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
             title="Quick Launch"
           >
             <Zap size={18} />
           </button>
           <Link
             to="/guides"
-            className="rounded-lg p-2 text-[#848b9b] hover:bg-[#14161d] hover:text-[#e2e5eb] transition-colors"
+            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
             title="User Guides"
           >
             <HelpCircle size={18} />
@@ -146,9 +146,9 @@ export function TopBar() {
                 style={{ background: '#14161d', border: '1px solid #1e2130' }}
               >
                 <div className="px-3 py-2.5 mb-1" style={{ borderBottom: '1px solid #1e2130' }}>
-                  <p className="text-sm font-medium text-[#e2e5eb] truncate">{user?.name || user?.email}</p>
+                  <p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
                   {effectiveRole && effectiveRole !== 'engineer' && (
-                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-[#848b9b]">
+                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                       <Shield size={10} />
                       {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
                     </span>
@@ -157,7 +157,7 @@ export function TopBar() {
                 <Link
                   to="/account"
                   onClick={() => setUserMenuOpen(false)}
-                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]"
+                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-input hover:text-foreground"
                 >
                   <Settings size={14} />
                   Account
@@ -166,7 +166,7 @@ export function TopBar() {
                   <Link
                     to="/admin"
                     onClick={() => setUserMenuOpen(false)}
-                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]"
+                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-input hover:text-foreground"
                   >
                     <Shield size={14} />
                     Admin Panel
@@ -177,7 +177,7 @@ export function TopBar() {
                     onClick={handleLogout}
                     className={cn(
                       'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
-                      'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
+                      'text-muted-foreground hover:bg-input hover:text-foreground'
                     )}
                   >
                     <LogOut size={14} />
diff --git a/frontend/src/components/library/AddToFolderMenu.tsx b/frontend/src/components/library/AddToFolderMenu.tsx
index 7c5e19cc..6db60d9d 100644
--- a/frontend/src/components/library/AddToFolderMenu.tsx
+++ b/frontend/src/components/library/AddToFolderMenu.tsx
@@ -89,8 +89,8 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
           setIsOpen(!isOpen)
         }}
         className={cn(
-          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-          'hover:bg-accent hover:text-[#e2e5eb]'
+          'rounded-md border border-border p-1.5 text-muted-foreground',
+          'hover:bg-accent hover:text-foreground'
         )}
         title="Add to folder"
         aria-label="Add to folder"
@@ -101,14 +101,14 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
       {isOpen && (
         <div
           className={cn(
-            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-[#1e2130]',
-            'bg-[#14161d] py-1 shadow-lg'
+            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-border',
+            'bg-card py-1 shadow-lg'
           )}
         >
           {isLoading ? (
-            <div className="px-3 py-2 text-sm text-[#848b9b]">Loading...</div>
+            <div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
           ) : folders.length === 0 ? (
-            <div className="px-3 py-2 text-sm text-[#848b9b]">No folders yet</div>
+            <div className="px-3 py-2 text-sm text-muted-foreground">No folders yet</div>
           ) : (
             folders.map((folder) => (
               <button
@@ -117,7 +117,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                   e.stopPropagation()
                   toggleFolder(folder.id)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <div
                   className="h-3 w-3 rounded-sm"
@@ -125,13 +125,13 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                 />
                 <span className="flex-1 truncate text-left">{folder.name}</span>
                 {treeFolderIds.has(folder.id) && (
-                  <Check className="h-4 w-4 text-[#e2e5eb]" />
+                  <Check className="h-4 w-4 text-foreground" />
                 )}
               </button>
             ))
           )}
 
-          <div className="border-t border-[#1e2130] my-1" />
+          <div className="border-t border-border my-1" />
 
           <button
             onClick={(e) => {
@@ -139,7 +139,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
               setIsOpen(false)
               onFolderCreated?.()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-4 w-4" />
             Create new folder
diff --git a/frontend/src/components/library/ExportFlowModal.tsx b/frontend/src/components/library/ExportFlowModal.tsx
index 10d89357..905e25bc 100644
--- a/frontend/src/components/library/ExportFlowModal.tsx
+++ b/frontend/src/components/library/ExportFlowModal.tsx
@@ -53,19 +53,19 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
       onClick={onClose}
     >
       <div
-        className="w-full max-w-sm rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
+        className="w-full max-w-sm rounded-xl border border-border bg-card shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-2">
-            <Download className="h-4 w-4 text-[#848b9b]" />
-            <h2 className="text-sm font-semibold text-[#e2e5eb]">Export Flow</h2>
+            <Download className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold text-foreground">Export Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-4 w-4" />
           </button>
@@ -73,13 +73,13 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
 
         {/* Body */}
         <div className="px-5 py-4">
-          <p className="text-sm text-[#848b9b]">
-            Export <span className="font-medium text-[#e2e5eb]">{treeName}</span> as a <code className="text-xs font-sans text-xs">.rfflow</code> file (JSON format).
+          <p className="text-sm text-muted-foreground">
+            Export <span className="font-medium text-foreground">{treeName}</span> as a <code className="text-xs font-sans text-xs">.rfflow</code> file (JSON format).
           </p>
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-[#1e2130] px-5 py-3">
+        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
           <Button variant="secondary" onClick={onClose}>
             Cancel
           </Button>
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index ef31025f..03a87b83 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -178,12 +178,12 @@ export function FolderEditModal({
       <div className="absolute inset-0 bg-black/80" onClick={onClose} />
 
       {/* Modal */}
-      <div className="relative z-10 w-full max-w-md bg-[#14161d] border border-[#1e2130] rounded-2xl p-6 shadow-lg">
+      <div className="relative z-10 w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-lg">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">
+          <h2 className="text-lg font-semibold text-foreground">
             {isEditMode ? 'Edit Folder' : initialParentId ? 'Create Subfolder' : 'Create Folder'}
           </h2>
-          <button onClick={onClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]">
+          <button onClick={onClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground">
             <X className="h-5 w-5" />
           </button>
         </div>
@@ -191,7 +191,7 @@ export function FolderEditModal({
         <form onSubmit={handleSubmit}>
           {/* Name input */}
           <div className="mb-4">
-            <label htmlFor="folder-name" className="block text-sm font-medium text-[#e2e5eb]">
+            <label htmlFor="folder-name" className="block text-sm font-medium text-foreground">
               Name
             </label>
             <input
@@ -202,9 +202,9 @@ export function FolderEditModal({
               placeholder="e.g., Citrix Issues"
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'bg-card text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'border-[#1e2130]'
+                'border-border'
               )}
               autoFocus
             />
@@ -212,7 +212,7 @@ export function FolderEditModal({
 
           {/* Parent folder dropdown */}
           <div className="mb-4">
-            <label htmlFor="folder-parent" className="block text-sm font-medium text-[#e2e5eb]">
+            <label htmlFor="folder-parent" className="block text-sm font-medium text-foreground">
               Parent Folder
             </label>
             <select
@@ -221,9 +221,9 @@ export function FolderEditModal({
               onChange={(e) => setParentId(e.target.value || null)}
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-[#14161d] text-[#e2e5eb]',
+                'bg-card text-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'border-[#1e2130]'
+                'border-border'
               )}
             >
               <option value="">None (root level)</option>
@@ -233,14 +233,14 @@ export function FolderEditModal({
                 </option>
               ))}
             </select>
-            <p className="mt-1 text-xs text-[#848b9b]">
+            <p className="mt-1 text-xs text-muted-foreground">
               Folders can be nested up to 3 levels deep.
             </p>
           </div>
 
           {/* Color picker */}
           <div className="mb-6">
-            <label className="block text-sm font-medium text-[#e2e5eb]">Color</label>
+            <label className="block text-sm font-medium text-foreground">Color</label>
             <div className="mt-2 flex flex-wrap gap-2">
               {FOLDER_COLORS.map((c) => (
                 <button
diff --git a/frontend/src/components/library/FolderSidebar.tsx b/frontend/src/components/library/FolderSidebar.tsx
index 96922373..be4fa0e0 100644
--- a/frontend/src/components/library/FolderSidebar.tsx
+++ b/frontend/src/components/library/FolderSidebar.tsx
@@ -115,7 +115,7 @@ function FolderItem({
           className={cn(
             'flex w-full items-center gap-1 rounded-md py-1.5 text-sm',
             'transition-colors hover:bg-accent',
-            selectedFolderId === folder.id && 'bg-accent text-[#e2e5eb] font-medium'
+            selectedFolderId === folder.id && 'bg-accent text-foreground font-medium'
           )}
           style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '8px' }}
         >
@@ -139,7 +139,7 @@ function FolderItem({
           )}
           <Folder className="h-4 w-4 shrink-0" style={{ color: folder.color }} />
           <span className="flex-1 truncate text-left">{folder.name}</span>
-          <span className="text-xs text-[#848b9b] group-hover:hidden">{folder.tree_count}</span>
+          <span className="text-xs text-muted-foreground group-hover:hidden">{folder.tree_count}</span>
         </button>
 
         {/* Folder menu button - replaces tree count on hover */}
@@ -161,8 +161,8 @@ function FolderItem({
         {menuOpenId === folder.id && (
           <div
             className={cn(
-              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-[#1e2130]',
-              'bg-[#14161d] py-1 shadow-lg'
+              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-border',
+              'bg-card py-1 shadow-lg'
             )}
           >
             <button
@@ -171,7 +171,7 @@ function FolderItem({
                 onEditFolder(folder)
                 onMenuToggle(null)
               }}
-              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Pencil className="h-3 w-3" />
               Edit
@@ -183,7 +183,7 @@ function FolderItem({
                   onAddSubfolder(folder.id)
                   onMenuToggle(null)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <FolderPlus className="h-3 w-3" />
                 Add Subfolder
@@ -368,7 +368,7 @@ export function FolderSidebar({
       />
     )}
     <div className={cn(
-      'w-56 shrink-0 border-r border-[#1e2130] bg-transparent',
+      'w-56 shrink-0 border-r border-border bg-transparent',
       'hidden md:block',
       mobileOpen && 'fixed inset-y-0 left-0 z-50 block animate-slide-in-left md:relative md:animate-none'
     )}>
@@ -376,10 +376,10 @@ export function FolderSidebar({
         {/* Mobile close button */}
         {mobileOpen && (
           <div className="mb-3 flex items-center justify-between md:hidden">
-            <span className="text-sm font-medium text-[#e2e5eb]">Folders</span>
+            <span className="text-sm font-medium text-foreground">Folders</span>
             <button
               onClick={onMobileClose}
-              className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent"
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
               aria-label="Close folders"
             >
               <X className="h-4 w-4" />
@@ -388,7 +388,7 @@ export function FolderSidebar({
         )}
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex w-full items-center gap-2 text-sm font-medium text-[#e2e5eb]"
+          className="flex w-full items-center gap-2 text-sm font-medium text-foreground"
         >
           {isExpanded ? (
             <ChevronDown className="h-4 w-4" />
@@ -406,7 +406,7 @@ export function FolderSidebar({
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
                 'transition-colors hover:bg-accent',
-                selectedFolderId === null && 'bg-accent text-[#e2e5eb] font-medium'
+                selectedFolderId === null && 'bg-accent text-foreground font-medium'
               )}
             >
               <Folder className="h-4 w-4" />
@@ -415,7 +415,7 @@ export function FolderSidebar({
 
             {/* Loading state */}
             {isLoading ? (
-              <div className="px-2 py-1.5 text-sm text-[#848b9b]">Loading...</div>
+              <div className="px-2 py-1.5 text-sm text-muted-foreground">Loading...</div>
             ) : (
               <>
                 {/* User folders (hierarchical) */}
@@ -445,7 +445,7 @@ export function FolderSidebar({
               onClick={() => onCreateFolder(null)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-                'text-[#848b9b] transition-colors hover:bg-accent hover:text-[#e2e5eb]'
+                'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
               )}
             >
               <Plus className="h-4 w-4" />
@@ -460,8 +460,8 @@ export function FolderSidebar({
     {contextMenu && (
       <div
         className={cn(
-          'fixed z-50 w-44 rounded-md border border-[#1e2130]',
-          'bg-[#14161d] py-1 shadow-lg'
+          'fixed z-50 w-44 rounded-md border border-border',
+          'bg-card py-1 shadow-lg'
         )}
         style={{ left: contextMenu.x, top: contextMenu.y }}
         onClick={(e) => e.stopPropagation()}
@@ -471,7 +471,7 @@ export function FolderSidebar({
             onEditFolder(contextMenu.folder)
             closeContextMenu()
           }}
-          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <Pencil className="h-3 w-3" />
           Edit
@@ -482,7 +482,7 @@ export function FolderSidebar({
               handleAddSubfolder(contextMenu.folder.id)
               closeContextMenu()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <FolderPlus className="h-3 w-3" />
             Add Subfolder
diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
index bcab541d..7e7f1f31 100644
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -54,19 +54,19 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
       onClick={onClose}
     >
       <div
-        className="w-full max-w-md rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
+        className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-2">
-            <GitBranch className="h-4 w-4 text-[#848b9b]" />
-            <h2 className="text-sm font-semibold text-[#e2e5eb]">Fork Flow</h2>
+            <GitBranch className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold text-foreground">Fork Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-4 w-4" />
           </button>
@@ -75,7 +75,7 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
         {/* Body */}
         <form onSubmit={handleSubmit} className="space-y-4 px-5 py-4">
           <div>
-            <label htmlFor="fork-name" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
+            <label htmlFor="fork-name" className="mb-1.5 block text-xs font-medium text-muted-foreground">
               Name <span className="text-red-400">*</span>
             </label>
             <input
@@ -87,16 +87,16 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               autoFocus
               maxLength={255}
               className={cn(
-                'w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-                'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
 
           <div>
-            <label htmlFor="fork-reason" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
+            <label htmlFor="fork-reason" className="mb-1.5 block text-xs font-medium text-muted-foreground">
               Reason for Forking{' '}
-              <span className="text-[#848b9b]/60">(optional)</span>
+              <span className="text-muted-foreground/60">(optional)</span>
             </label>
             <textarea
               id="fork-reason"
@@ -105,8 +105,8 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               rows={3}
               placeholder="e.g. customizing for a specific client…"
               className={cn(
-                'w-full resize-none rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-                'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                'w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index 2b5ae17e..36d22bbd 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -95,19 +95,19 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
       onClick={onClose}
     >
       <div
-        className="w-full max-w-md rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
+        className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-2">
-            <FileUp className="h-4 w-4 text-[#848b9b]" />
-            <h2 className="text-sm font-semibold text-[#e2e5eb]">Import Flow</h2>
+            <FileUp className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold text-foreground">Import Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-4 w-4" />
           </button>
@@ -122,18 +122,18 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   'flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors cursor-pointer',
                   isDragging
                     ? 'border-primary/50 bg-primary/5'
-                    : 'border-[#1e2130] hover:border-[#2a2f3d]'
+                    : 'border-border hover:border-border-hover'
                 )}
                 onClick={() => fileInputRef.current?.click()}
                 onDragOver={(e) => { e.preventDefault(); setIsDragging(true) }}
                 onDragLeave={() => setIsDragging(false)}
                 onDrop={handleDrop}
               >
-                <FileUp className="mb-2 h-8 w-8 text-[#848b9b]" />
-                <p className="text-sm text-[#e2e5eb]">
-                  Drop .rfflow file here or <span className="text-[#22d3ee] cursor-pointer">browse</span>
+                <FileUp className="mb-2 h-8 w-8 text-muted-foreground" />
+                <p className="text-sm text-foreground">
+                  Drop .rfflow file here or <span className="text-primary cursor-pointer">browse</span>
                 </p>
-                <p className="mt-1 text-xs text-[#848b9b]">JSON format</p>
+                <p className="mt-1 text-xs text-muted-foreground">JSON format</p>
               </div>
               <input
                 ref={fileInputRef}
@@ -155,7 +155,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
             <div className="space-y-4">
               {/* Editable name */}
               <div>
-                <label htmlFor="import-name" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
+                <label htmlFor="import-name" className="mb-1.5 block text-xs font-medium text-muted-foreground">
                   Name
                 </label>
                 <input
@@ -165,8 +165,8 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   onChange={(e) => setNameOverride(e.target.value)}
                   maxLength={255}
                   className={cn(
-                    'w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-                    'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                    'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+                    'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
               </div>
@@ -174,31 +174,31 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
               {/* Flow info */}
               <div className="space-y-2 text-xs">
                 <div className="flex items-center gap-2">
-                  <span className="text-[#848b9b]">Type:</span>
-                  <span className="rounded bg-[rgba(34,211,238,0.10)] px-2 py-0.5 font-sans text-xs text-[#22d3ee]">
+                  <span className="text-muted-foreground">Type:</span>
+                  <span className="rounded bg-accent-dim px-2 py-0.5 font-sans text-xs text-primary">
                     {TYPE_LABELS[parsed.flow.tree_type] || parsed.flow.tree_type}
                   </span>
                 </div>
 
                 {parsed.flow.description && (
                   <div>
-                    <span className="text-[#848b9b]">Description:</span>
-                    <p className="mt-0.5 text-[#e2e5eb] line-clamp-2">{parsed.flow.description}</p>
+                    <span className="text-muted-foreground">Description:</span>
+                    <p className="mt-0.5 text-foreground line-clamp-2">{parsed.flow.description}</p>
                   </div>
                 )}
 
                 {parsed.flow.category && (
                   <div className="flex items-center gap-2">
-                    <span className="text-[#848b9b]">Category:</span>
-                    <span className="text-[#e2e5eb]">{parsed.flow.category.name}</span>
+                    <span className="text-muted-foreground">Category:</span>
+                    <span className="text-foreground">{parsed.flow.category.name}</span>
                   </div>
                 )}
 
                 {parsed.flow.tags.length > 0 && (
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="text-[#848b9b]">Tags:</span>
+                    <span className="text-muted-foreground">Tags:</span>
                     {parsed.flow.tags.map((tag) => (
-                      <span key={tag} className="rounded bg-[#14161d] border border-[#1e2130] px-2 py-0.5 font-sans text-xs text-[#e2e5eb]">
+                      <span key={tag} className="rounded bg-card border border-border px-2 py-0.5 font-sans text-xs text-foreground">
                         {tag}
                       </span>
                     ))}
@@ -207,26 +207,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
 
                 {parsed.flow.author_name && (
                   <div className="flex items-center gap-2">
-                    <span className="text-[#848b9b]">Original author:</span>
-                    <span className="text-[#e2e5eb]">{parsed.flow.author_name}</span>
+                    <span className="text-muted-foreground">Original author:</span>
+                    <span className="text-foreground">{parsed.flow.author_name}</span>
                   </div>
                 )}
 
                 <div className="flex items-center gap-2">
-                  <span className="text-[#848b9b]">Version:</span>
-                  <span className="text-[#e2e5eb]">v{parsed.flow.version}</span>
+                  <span className="text-muted-foreground">Version:</span>
+                  <span className="text-foreground">v{parsed.flow.version}</span>
                 </div>
               </div>
 
-              <p className="text-xs text-[#848b9b]">
-                Flow will be imported as a <span className="font-medium text-[#e2e5eb]">draft</span>.
+              <p className="text-xs text-muted-foreground">
+                Flow will be imported as a <span className="font-medium text-foreground">draft</span>.
               </p>
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-[#1e2130] px-5 py-3">
+        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
           {step === 'preview' && (
             <Button
               variant="secondary"
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index e0a163cb..64a8f31b 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -120,13 +120,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-full rounded-t-2xl bg-[#14161d] border border-[#1e2130] shadow-lg sm:max-w-lg sm:rounded-2xl">
+      <div className="relative w-full max-w-full rounded-t-2xl bg-card border border-border shadow-lg sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Share Tree</h2>
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -136,9 +136,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* Tree Info */}
           <div>
-            <h3 className="font-medium text-[#e2e5eb]">{tree.name}</h3>
+            <h3 className="font-medium text-foreground">{tree.name}</h3>
             {tree.description && (
-              <p className="mt-1 text-sm text-[#848b9b] line-clamp-2">
+              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                 {tree.description}
               </p>
             )}
@@ -146,7 +146,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
           {/* Visibility Settings */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+            <label className="mb-2 block text-sm font-medium text-foreground">
               Visibility
             </label>
             <div className="space-y-2">
@@ -157,14 +157,14 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === level
-                      ? 'border-[#1e2130] bg-accent text-[#e2e5eb]'
-                      : 'border-[#1e2130] bg-transparent text-[#848b9b] hover:border-primary/30 hover:bg-accent/50'
+                      ? 'border-border bg-accent text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-accent/50'
                   )}
                 >
                   {getVisibilityIcon(level)}
                   <div className="flex-1">
                     <div className="text-sm font-medium capitalize">{level}</div>
-                    <div className="text-xs text-[#848b9b]">
+                    <div className="text-xs text-muted-foreground">
                       {getVisibilityDescription(level)}
                     </div>
                   </div>
@@ -179,7 +179,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
           {/* Share Link Generation */}
           {visibility !== 'private' && (
             <div>
-              <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Share Link
               </label>
 
@@ -190,11 +190,11 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   id="allow-forking"
                   checked={allowForking}
                   onChange={(e) => setAllowForking(e.target.checked)}
-                  className="h-4 w-4 rounded border-[#1e2130] bg-[#14161d] text-[#e2e5eb] focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
+                  className="h-4 w-4 rounded border-border bg-card text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
                 />
                 <label
                   htmlFor="allow-forking"
-                  className="text-sm text-[#848b9b] cursor-pointer"
+                  className="text-sm text-muted-foreground cursor-pointer"
                 >
                   Allow recipients to fork this tree
                 </label>
@@ -214,20 +214,20 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
               {/* Active Share Link */}
               {activeShare && (
                 <div className="space-y-2">
-                  <div className="flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] p-3">
+                  <div className="flex items-center gap-2 rounded-md border border-border bg-card p-3">
                     <input
                       type="text"
                       value={activeShare.share_url}
                       readOnly
-                      className="flex-1 bg-transparent text-sm text-[#e2e5eb] outline-hidden"
+                      className="flex-1 bg-transparent text-sm text-foreground outline-hidden"
                     />
                     <button
                       onClick={handleCopyLink}
                       className={cn(
-                        'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm font-medium transition-colors',
+                        'flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
                         copied
                           ? 'border-green-500 bg-green-500/10 text-green-400'
-                          : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                       )}
                     >
                       {copied ? (
@@ -243,13 +243,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                       )}
                     </button>
                   </div>
-                  <p className="text-xs text-[#848b9b]">
+                  <p className="text-xs text-muted-foreground">
                     {activeShare.allow_forking
                       ? 'Recipients can fork this tree'
                       : 'Forking disabled for this share'}
                   </p>
                   {shares.length > 1 && (
-                    <p className="text-xs text-[#848b9b]">
+                    <p className="text-xs text-muted-foreground">
                       {shares.length} active share links
                     </p>
                   )}
@@ -260,7 +260,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-[#1e2130] px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
           <Button variant="secondary" onClick={onClose}>
             Close
           </Button>
diff --git a/frontend/src/components/library/SortDropdown.tsx b/frontend/src/components/library/SortDropdown.tsx
index a6e53c24..cea34d8b 100644
--- a/frontend/src/components/library/SortDropdown.tsx
+++ b/frontend/src/components/library/SortDropdown.tsx
@@ -21,7 +21,7 @@ const sortOptions: { value: SortBy; label: string }[] = [
 export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
   return (
     <div className={cn('relative inline-flex items-center', className)}>
-      <span className="mr-2 flex items-center gap-1.5 text-sm text-[#848b9b]">
+      <span className="mr-2 flex items-center gap-1.5 text-sm text-muted-foreground">
         <ArrowUpDown className="h-4 w-4" />
         <span className="hidden sm:inline">Sort:</span>
       </span>
@@ -29,8 +29,8 @@ export function SortDropdown({ value, onChange, className }: SortDropdownProps)
         value={value}
         onChange={(e) => onChange(e.target.value as SortBy)}
         className={cn(
-          'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm',
-          'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+          'rounded-md border border-border bg-card px-3 py-1.5 text-sm',
+          'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
         )}
       >
         {sortOptions.map((option) => (
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index 93d34d14..c95c7561 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -34,11 +34,11 @@ export function TreeGridView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="relative bg-[#14161d] border border-[#1e2130] rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
+          className="relative bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
         >
           <div className="mb-2 flex items-start justify-between gap-2">
             <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-[#e2e5eb]">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
                   <FileText className="h-3 w-3" />
@@ -60,21 +60,21 @@ export function TreeGridView({
             <div className="flex items-center gap-2">
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-4 w-4 text-[#848b9b]" />
+                  <Globe className="h-4 w-4 text-muted-foreground" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-4 w-4 text-[#848b9b]" />
+                  <Lock className="h-4 w-4 text-muted-foreground" />
                 </span>
               )}
               {tree.category_info && (
-                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                   {tree.category_info.name}
                 </span>
               )}
             </div>
           </div>
-          <p className="mb-3 text-sm text-[#848b9b] line-clamp-2">
+          <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
             {tree.description || 'No description available'}
           </p>
 
@@ -86,7 +86,7 @@ export function TreeGridView({
           )}
 
           <div className="flex items-center justify-between">
-            <span className="text-xs text-[#848b9b]">
+            <span className="text-xs text-muted-foreground">
               v{tree.version} · {tree.usage_count} uses
             </span>
             <div className="flex items-center gap-2">
@@ -95,8 +95,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onExportTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Export flow"
                   aria-label="Export flow"
@@ -109,8 +109,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -122,8 +122,8 @@ export function TreeGridView({
                 <Link
                   to={getTreeEditorPath(tree.id, tree.tree_type)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Edit tree"
                   aria-label="Edit tree"
@@ -136,7 +136,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onDeleteTree(tree)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
                     'hover:bg-red-400/10 hover:text-red-400'
                   )}
                   title="Delete tree"
@@ -150,7 +150,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onPrepareSession(tree)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+                    'rounded-md border border-border p-2 text-muted-foreground',
                     'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                   )}
                   title="Prepare session for engineer"
@@ -163,7 +163,7 @@ export function TreeGridView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-[#22d3ee] px-3 py-2 text-sm font-medium text-white',
+                  'rounded-md bg-primary px-3 py-2 text-sm font-medium text-white',
                   'hover:brightness-110'
                 )}
               >
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index 583caab0..b1add690 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -33,12 +33,12 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 bg-[#14161d] border border-[#1e2130] rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
+          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <h3 className="font-semibold text-[#e2e5eb] truncate">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 shrink-0">
                   <FileText className="h-3 w-3" />
@@ -58,15 +58,15 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               )}
             </div>
-            <p className="text-sm text-[#848b9b] truncate">
+            <p className="text-sm text-muted-foreground truncate">
               {tree.description || 'No description available'}
             </p>
           </div>
@@ -74,7 +74,7 @@ export function TreeListView({
           {/* Center: Category and Tags */}
           <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
             {tree.category_info && (
-              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b] whitespace-nowrap">
+              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
                 {tree.category_info.name}
               </span>
             )}
@@ -87,7 +87,7 @@ export function TreeListView({
 
           {/* Right: Metadata and Actions */}
           <div className="flex items-center gap-3 shrink-0">
-            <div className="hidden sm:flex flex-col items-end text-xs text-[#848b9b]">
+            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>
             </div>
@@ -98,8 +98,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onExportTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Export flow"
                   aria-label="Export flow"
@@ -112,8 +112,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -126,8 +126,8 @@ export function TreeListView({
                   <Link
                     to={getTreeEditorPath(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                      'hover:bg-accent hover:text-[#e2e5eb]'
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                     title="Edit tree"
                     aria-label="Edit tree"
@@ -138,7 +138,7 @@ export function TreeListView({
                     type="button"
                     onClick={() => onDeleteTree(tree)}
                     className={cn(
-                      'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
                       'hover:bg-red-500/20 hover:text-red-400'
                     )}
                     title="Delete tree"
@@ -153,7 +153,7 @@ export function TreeListView({
                   type="button"
                   onClick={() => onPrepareSession(tree)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
                     'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                   )}
                   title="Prepare session for engineer"
@@ -166,7 +166,7 @@ export function TreeListView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-[#22d3ee] px-3 py-1.5 text-sm font-medium text-white',
+                  'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white',
                   'hover:brightness-110 whitespace-nowrap'
                 )}
               >
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 1655498f..b941a747 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -73,12 +73,12 @@ export function TreeTableView({
   }
 
   return (
-    <div className="overflow-x-auto rounded-2xl border border-[#1e2130]">
+    <div className="overflow-x-auto rounded-2xl border border-border">
       <table className="w-full">
         <thead className="bg-accent/50 sticky top-0 z-10">
-          <tr className="border-b border-[#1e2130]">
+          <tr className="border-b border-border">
             <th
-              className="px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
+              className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('name')}
             >
               <div className="flex items-center gap-1">
@@ -86,11 +86,11 @@ export function TreeTableView({
                 {getSortIcon('name')}
               </div>
             </th>
-            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b]">
+            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
               Description
             </th>
             <th
-              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
+              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('category')}
             >
               <div className="flex items-center gap-1">
@@ -98,11 +98,11 @@ export function TreeTableView({
                 {getSortIcon('category')}
               </div>
             </th>
-            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b]">
+            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
               Tags
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('version')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -111,7 +111,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('usage')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -120,7 +120,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
+              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
               onClick={() => handleSort('updated')}
             >
               <div className="flex items-center gap-1">
@@ -128,17 +128,17 @@ export function TreeTableView({
                 {getSortIcon('updated')}
               </div>
             </th>
-            <th className="px-4 py-3 text-right text-sm font-medium text-[#848b9b]">
+            <th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">
               Actions
             </th>
           </tr>
         </thead>
         <tbody className="bg-transparent">
           {trees.map((tree) => (
-            <tr key={tree.id} className="border-b border-[#1e2130] last:border-0 hover:bg-accent/50">
+            <tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
               <td className="px-4 py-3">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-[#e2e5eb] truncate max-w-[200px]">
+                  <span className="font-medium text-foreground truncate max-w-[200px]">
                     {tree.name}
                   </span>
                   {tree.status === 'draft' && (
@@ -160,23 +160,23 @@ export function TreeTableView({
                   )}
                   {tree.is_public ? (
                     <span title="Public tree">
-                      <Globe className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+                      <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                     </span>
                   ) : (
                     <span title="Private tree">
-                      <Lock className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+                      <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                     </span>
                   )}
                 </div>
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-[#848b9b]">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
                 <span className="truncate block max-w-[250px]">
                   {tree.description || 'No description'}
                 </span>
               </td>
               <td className="hidden lg:table-cell px-4 py-3">
                 {tree.category_info && (
-                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
+                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                     {tree.category_info.name}
                   </span>
                 )}
@@ -186,13 +186,13 @@ export function TreeTableView({
                   <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
                 )}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-[#848b9b]">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
                 v{tree.version}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-[#848b9b]">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
                 {tree.usage_count}
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-[#848b9b]">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
                 {formatDate(tree.updated_at)}
               </td>
               <td className="px-4 py-3">
@@ -202,8 +202,8 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onExportTree(tree.id)}
                       className={cn(
-                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                        'hover:bg-accent hover:text-[#e2e5eb]'
+                        'rounded-md border border-border p-1.5 text-muted-foreground',
+                        'hover:bg-accent hover:text-foreground'
                       )}
                       title="Export flow"
                       aria-label="Export flow"
@@ -216,8 +216,8 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onForkTree(tree.id)}
                       className={cn(
-                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                        'hover:bg-accent hover:text-[#e2e5eb]'
+                        'rounded-md border border-border p-1.5 text-muted-foreground',
+                        'hover:bg-accent hover:text-foreground'
                       )}
                       title="Fork tree"
                       aria-label="Fork tree"
@@ -230,8 +230,8 @@ export function TreeTableView({
                       <Link
                         to={getTreeEditorPath(tree.id, tree.tree_type)}
                         className={cn(
-                          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
-                          'hover:bg-accent hover:text-[#e2e5eb]'
+                          'rounded-md border border-border p-1.5 text-muted-foreground',
+                          'hover:bg-accent hover:text-foreground'
                         )}
                         title="Edit tree"
                         aria-label="Edit tree"
@@ -242,7 +242,7 @@ export function TreeTableView({
                         type="button"
                         onClick={() => onDeleteTree(tree)}
                         className={cn(
-                          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                          'rounded-md border border-border p-1.5 text-muted-foreground',
                           'hover:bg-red-500/20 hover:text-red-400'
                         )}
                         title="Delete tree"
@@ -257,7 +257,7 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onPrepareSession(tree)}
                       className={cn(
-                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                        'rounded-md border border-border p-1.5 text-muted-foreground',
                         'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                       )}
                       title="Prepare session for engineer"
@@ -270,7 +270,7 @@ export function TreeTableView({
                     type="button"
                     onClick={() => onStartSession(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md bg-[#22d3ee] px-3 py-1.5 text-xs font-medium text-white',
+                      'rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white',
                       'hover:brightness-110 whitespace-nowrap'
                     )}
                   >
diff --git a/frontend/src/components/library/ViewToggle.tsx b/frontend/src/components/library/ViewToggle.tsx
index e559c653..88fe5b4b 100644
--- a/frontend/src/components/library/ViewToggle.tsx
+++ b/frontend/src/components/library/ViewToggle.tsx
@@ -11,15 +11,15 @@ interface ViewToggleProps {
 
 export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
   return (
-    <div className={cn('flex items-center gap-1 rounded-md border border-[#1e2130] p-1', className)}>
+    <div className={cn('flex items-center gap-1 rounded-md border border-border p-1', className)}>
       <button
         type="button"
         onClick={() => onChange('grid')}
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'grid'
-            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
-            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="Grid view"
         aria-label="Grid view"
@@ -32,8 +32,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'list'
-            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
-            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="List view"
         aria-label="List view"
@@ -46,8 +46,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'table'
-            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
-            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+            ? 'bg-accent text-foreground border-border'
+            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
         )}
         title="Table view"
         aria-label="Table view"
diff --git a/frontend/src/components/maintenance/BatchLaunchModal.tsx b/frontend/src/components/maintenance/BatchLaunchModal.tsx
index 55fe5184..787073fc 100644
--- a/frontend/src/components/maintenance/BatchLaunchModal.tsx
+++ b/frontend/src/components/maintenance/BatchLaunchModal.tsx
@@ -192,7 +192,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
           <button
             onClick={handleLaunch}
             disabled={isLaunching || targets.length === 0}
-            className="rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
+            className="rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
           >
             {isLaunching ? 'Launching\u2026' : targets.length > 0 ? `Launch ${targets.length} Sessions` : 'Launch'}
           </button>
diff --git a/frontend/src/components/maintenance/BatchStatusCard.tsx b/frontend/src/components/maintenance/BatchStatusCard.tsx
index 059bf097..71feafc9 100644
--- a/frontend/src/components/maintenance/BatchStatusCard.tsx
+++ b/frontend/src/components/maintenance/BatchStatusCard.tsx
@@ -132,7 +132,7 @@ export function BatchStatusCard({ session, targetLabel, treeId, batchId }: Batch
         {isNotStarted && (
           <button
             onClick={handleStart}
-            className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-3 py-1.5 text-[0.8125rem] font-medium text-white hover:brightness-110 transition-opacity"
+            className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-[0.8125rem] font-medium text-white hover:brightness-110 transition-opacity"
           >
             <Play className="h-3.5 w-3.5" />
             Start
diff --git a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
index a69a1e69..2325e4ff 100644
--- a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
+++ b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
@@ -35,7 +35,7 @@ export function CollapsibleEditorSection({
   }
 
   return (
-    <div className="border-b border-[#1e2130]">
+    <div className="border-b border-border">
       <button
         type="button"
         onClick={handleToggle}
@@ -45,14 +45,14 @@ export function CollapsibleEditorSection({
       >
         <ChevronRight
           className={cn(
-            'h-4 w-4 shrink-0 text-[#848b9b] transition-transform duration-200',
+            'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
             isExpanded && 'rotate-90'
           )}
         />
-        <span className="shrink-0 text-[#848b9b]">{icon}</span>
-        <span className="text-sm font-medium text-[#e2e5eb]">{title}</span>
+        <span className="shrink-0 text-muted-foreground">{icon}</span>
+        <span className="text-sm font-medium text-foreground">{title}</span>
         {!isExpanded && (
-          <span className="min-w-0 truncate text-sm text-[#848b9b]">
+          <span className="min-w-0 truncate text-sm text-muted-foreground">
             — {summary}
           </span>
         )}
diff --git a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
index cb204168..679a38ee 100644
--- a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
@@ -26,49 +26,49 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
   const needsOptions = field.field_type === 'select' || field.field_type === 'multi_select'
 
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
+    <div className="bg-card border border-border rounded-xl p-3">
       {/* Header row */}
       <div className="flex items-center gap-2">
-        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-[#848b9b]" />
+        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground" />
 
         <input
           type="text"
           value={field.label}
           onChange={(e) => onUpdate({ label: e.target.value })}
           placeholder="Field label"
-          className="min-w-0 flex-1 rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         />
 
         <select
           value={field.field_type}
           onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
-          className="rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FIELD_TYPE_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
 
-        <label className="flex items-center gap-1 text-xs text-[#848b9b]">
+        <label className="flex items-center gap-1 text-xs text-muted-foreground">
           <input
             type="checkbox"
             checked={field.required}
             onChange={(e) => onUpdate({ required: e.target.checked })}
-            className="rounded border-[#1e2130]"
+            className="rounded border-border"
           />
           Req
         </label>
 
         <button
           onClick={() => setExpanded(!expanded)}
-          className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
         </button>
 
         <button
           onClick={onRemove}
-          className="rounded p-1 text-[#848b9b] hover:bg-red-500/20 hover:text-red-400"
+          className="rounded p-1 text-muted-foreground hover:bg-red-500/20 hover:text-red-400"
         >
           <Trash2 className="h-3.5 w-3.5" />
         </button>
@@ -76,66 +76,66 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
 
       {/* Expanded details */}
       {expanded && (
-        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-[#1e2130] pt-3">
+        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
           <div>
-            <label className="mb-1 block text-xs text-[#848b9b]">Variable Name</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Variable Name</label>
             <input
               type="text"
               value={field.variable_name}
               onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
               placeholder="e.g. server_name"
-              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm font-mono text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
-            <p className="mt-0.5 text-[10px] text-[#848b9b]">Used as [VAR:{field.variable_name}]</p>
+            <p className="mt-0.5 text-[10px] text-muted-foreground">Used as [VAR:{field.variable_name}]</p>
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-[#848b9b]">Placeholder</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Placeholder</label>
             <input
               type="text"
               value={field.placeholder || ''}
               onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
               placeholder="Hint text"
-              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div className="col-span-2">
-            <label className="mb-1 block text-xs text-[#848b9b]">Help Text</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Help Text</label>
             <input
               type="text"
               value={field.help_text || ''}
               onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
               placeholder="Description or instructions"
-              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-[#848b9b]">Default Value</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Default Value</label>
             <input
               type="text"
               value={field.default_value || ''}
               onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
               placeholder="Pre-filled value"
-              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-[#848b9b]">Group Name</label>
+            <label className="mb-1 block text-xs text-muted-foreground">Group Name</label>
             <input
               type="text"
               value={field.group_name || ''}
               onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
               placeholder="e.g. Network Settings"
-              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           {needsOptions && (
             <div className="col-span-2">
-              <label className="mb-1 block text-xs text-[#848b9b]">Options (one per line)</label>
+              <label className="mb-1 block text-xs text-muted-foreground">Options (one per line)</label>
               <textarea
                 value={(field.options || []).join('\n')}
                 onChange={(e) => {
@@ -144,7 +144,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
                 }}
                 placeholder="Option 1&#10;Option 2&#10;Option 3"
                 rows={3}
-                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
           )}
diff --git a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
index 9e36984f..7efc9910 100644
--- a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
@@ -10,7 +10,7 @@ export function IntakeFormBuilder() {
       <div className="mb-3 flex items-center justify-end">
         <button
           onClick={addField}
-          className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <Plus className="h-3.5 w-3.5" />
           Add Field
@@ -18,10 +18,10 @@ export function IntakeFormBuilder() {
       </div>
 
       {intakeForm.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-[#1e2130] bg-white/2 py-8 text-center">
-          <FileText className="mx-auto mb-2 h-8 w-8 text-[#848b9b]" />
-          <p className="text-sm text-[#848b9b]">No intake form fields yet</p>
-          <p className="mt-1 text-xs text-[#848b9b]">
+        <div className="rounded-lg border border-dashed border-border bg-white/2 py-8 text-center">
+          <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">No intake form fields yet</p>
+          <p className="mt-1 text-xs text-muted-foreground">
             Add fields to collect project data before the procedure starts
           </p>
         </div>
diff --git a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
index 93aea285..793143fa 100644
--- a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
+++ b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
@@ -142,7 +142,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
 
   if (isLoading) {
     return (
-      <div className="py-3 text-sm text-[#848b9b]">Loading schedule...</div>
+      <div className="py-3 text-sm text-muted-foreground">Loading schedule...</div>
     )
   }
 
@@ -150,11 +150,11 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
     <div className="space-y-4">
       {/* Frequency */}
       <div>
-        <label className="mb-1 block text-sm font-medium text-[#848b9b]">Frequency</label>
+        <label className="mb-1 block text-sm font-medium text-muted-foreground">Frequency</label>
         <select
           value={frequency}
           onChange={(e) => setFrequency(e.target.value)}
-          className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FREQUENCY_OPTIONS.map(opt => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -165,36 +165,36 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
       {/* Time */}
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Hour</label>
+          <label className="mb-1 block text-sm font-medium text-muted-foreground">Hour</label>
           <input
             type="number"
             min={0}
             max={23}
             value={hour}
             onChange={(e) => setHour(Number(e.target.value))}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
         <div>
-          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Minute</label>
+          <label className="mb-1 block text-sm font-medium text-muted-foreground">Minute</label>
           <input
             type="number"
             min={0}
             max={59}
             value={minute}
             onChange={(e) => setMinute(Number(e.target.value))}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
 
       {/* Timezone */}
       <div>
-        <label className="mb-1 block text-sm font-medium text-[#848b9b]">Timezone</label>
+        <label className="mb-1 block text-sm font-medium text-muted-foreground">Timezone</label>
         <select
           value={timezone}
           onChange={(e) => setTimezone(e.target.value)}
-          className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {TIMEZONE_OPTIONS.map(tz => (
             <option key={tz} value={tz}>{tz}</option>
@@ -205,11 +205,11 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
       {/* Target List */}
       {targetLists.length > 0 && (
         <div>
-          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Target List (optional)</label>
+          <label className="mb-1 block text-sm font-medium text-muted-foreground">Target List (optional)</label>
           <select
             value={selectedTargetListId}
             onChange={(e) => setSelectedTargetListId(e.target.value)}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             <option value="">None — manual targets only</option>
             {targetLists.map(tl => (
@@ -226,15 +226,15 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
         className={cn(
           'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
           treeId
-            ? 'bg-[#22d3ee] text-white hover:brightness-110'
-            : 'cursor-not-allowed border border-[#1e2130] bg-[#14161d] text-[#848b9b] opacity-50'
+            ? 'bg-primary text-white hover:brightness-110'
+            : 'cursor-not-allowed border border-border bg-card text-muted-foreground opacity-50'
         )}
       >
         <Clock className="h-4 w-4" />
         {isSaving ? 'Saving...' : schedule ? 'Update Schedule' : 'Create Schedule'}
       </button>
       {!treeId && (
-        <p className="text-xs text-[#848b9b]">Save the flow first to configure a schedule.</p>
+        <p className="text-xs text-muted-foreground">Save the flow first to configure a schedule.</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index 7d090316..39d4506a 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -6,7 +6,7 @@ import { FallbackSteps } from '@/components/procedural/FallbackSteps'
 
 const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
   { value: 'action', label: 'Action', color: 'text-blue-400' },
-  { value: 'informational', label: 'Info', color: 'text-[#848b9b]' },
+  { value: 'informational', label: 'Info', color: 'text-muted-foreground' },
   { value: 'verification', label: 'Verify', color: 'text-emerald-400' },
   { value: 'warning', label: 'Warning', color: 'text-yellow-400' },
 ]
@@ -25,24 +25,24 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   // Section header steps get a minimal editor
   if (step.type === 'section_header') {
     return (
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+      <div className="bg-card border border-border rounded-xl p-4">
         <div className="mb-4 flex items-center justify-between">
-          <span className="text-sm font-medium text-[#848b9b]">Edit Section Header</span>
+          <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
           <button
             onClick={onCollapse}
-            className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <ChevronUp className="h-4 w-4" />
           </button>
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Section title"
-            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -50,18 +50,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   }
 
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+    <div className="bg-card border border-border rounded-xl p-4">
       {/* Header */}
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#e2e5eb]">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
             {stepNumber}
           </span>
-          <span className="text-sm font-medium text-[#e2e5eb]">Edit Step</span>
+          <span className="text-sm font-medium text-foreground">Edit Step</span>
         </div>
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ChevronUp className="h-4 w-4" />
         </button>
@@ -70,18 +70,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
       <div className="space-y-4">
         {/* Title */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
-            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Est. Minutes */}
         <div className="w-40">
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
             <Clock className="h-3 w-3" />
             Est. Minutes
           </label>
@@ -91,28 +91,28 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
             placeholder="—"
             min={1}
-            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Description */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Description / Instructions</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Description / Instructions</label>
           <textarea
             value={step.description || ''}
             onChange={(e) => onUpdate({ description: e.target.value })}
             placeholder="Step instructions. Use [VAR:name] for variables."
             rows={4}
-            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {availableVariables.length > 0 && (
             <div className="mt-1 flex flex-wrap gap-1">
-              <span className="text-[10px] text-[#848b9b]">Variables:</span>
+              <span className="text-[10px] text-muted-foreground">Variables:</span>
               {availableVariables.map((v) => (
                 <button
                   key={v.variable_name}
                   onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
-                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
+                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
                 >
                   {v.variable_name}
                 </button>
@@ -123,7 +123,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
 
         {/* Commands */}
         <div>
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
             <Terminal className="h-3 w-3" />
             Commands (optional)
           </label>
@@ -132,7 +132,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
             placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
             rows={3}
-            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 font-mono text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -140,7 +140,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         <button
           type="button"
           onClick={() => setShowMore(!showMore)}
-          className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#848b9b]"
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
         >
           <Settings2 className="h-3 w-3" />
           More Options
@@ -148,10 +148,10 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         </button>
 
         {showMore && (
-          <div className="space-y-4 border-t border-[#1e2130] pt-4">
+          <div className="space-y-4 border-t border-border pt-4">
             {/* Content Type */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Content Type</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
               <div className="flex gap-1">
                 {CONTENT_TYPE_OPTIONS.map((opt) => (
                   <button
@@ -161,7 +161,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                       'rounded px-2 py-1 text-xs font-medium transition-colors',
                       step.content_type === opt.value
                         ? 'bg-white/15 ' + opt.color
-                        : 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
+                        : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
                     )}
                   >
                     {opt.label}
@@ -182,27 +182,27 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
                   placeholder="Caution: This will restart the service..."
                   rows={2}
-                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
+                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
                 />
               </div>
             )}
 
             {/* Expected Outcome */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Expected Outcome (optional)</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Expected Outcome (optional)</label>
               <input
                 type="text"
                 value={step.expected_outcome || ''}
                 onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                 placeholder="Server should respond with..."
-                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             {/* Verification */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                   <CheckSquare className="h-3 w-3" />
                   Verification Prompt (optional)
                 </label>
@@ -211,15 +211,15 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.verification_prompt || ''}
                   onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                   placeholder="Confirm the role was installed"
-                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-[#848b9b]">Verification Type</label>
+                <label className="mb-1 block text-xs font-medium text-muted-foreground">Verification Type</label>
                 <select
                   value={step.verification_type || ''}
                   onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
-                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 >
                   <option value="">None</option>
                   <option value="checkbox">Checkbox (confirm done)</option>
@@ -231,7 +231,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             {/* Reference URL + Notes toggle */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
                   <ExternalLink className="h-3 w-3" />
                   Reference URL (optional)
                 </label>
@@ -240,16 +240,16 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.reference_url || ''}
                   onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                   placeholder="https://learn.microsoft.com/..."
-                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div className="flex items-end pb-1">
-                <label className="flex items-center gap-2 text-sm text-[#848b9b]">
+                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
                     checked={step.notes_enabled !== false}
                     onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
-                    className="rounded border-[#1e2130]"
+                    className="rounded border-border"
                   />
                   Allow tech notes
                 </label>
@@ -258,7 +258,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
 
             {/* Library Visibility — procedure_step nodes only */}
             {step.type === 'procedure_step' && <div>
-              <label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
+              <label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-muted-foreground">
                 Library Visibility
               </label>
               <select
@@ -267,13 +267,13 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 onChange={(e) => onUpdate({
                   library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
                 })}
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Inherit from flow</option>
                 <option value="team">Team only</option>
                 <option value="public">Public</option>
               </select>
-              <p className="mt-1 text-[10px] text-[#848b9b]">
+              <p className="mt-1 text-[10px] text-muted-foreground">
                 Controls visibility in the step library. Defaults to the flow's own visibility setting.
               </p>
             </div>}
diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index 6c8343cb..981d7dd6 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
-  informational: { icon: Info, color: 'text-[#848b9b]', label: 'Info' },
+  informational: { icon: Info, color: 'text-muted-foreground', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
 }
@@ -104,9 +104,9 @@ export function StepList({ onStepContextMenu }: StepListProps) {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Shield className="h-5 w-5 text-[#848b9b]" />
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Steps</h2>
-          <span className="text-sm text-[#848b9b]">
+          <Shield className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-lg font-semibold text-foreground">Steps</h2>
+          <span className="text-sm text-muted-foreground">
             ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
             {totalMinutes > 0 ? ` \u00b7 ~${totalMinutes} min` : ''})
           </span>
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
         <div className="flex items-center gap-2">
           <button
             onClick={() => addSectionHeader()}
-            className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <SeparatorHorizontal className="h-3.5 w-3.5" />
             Add Section
           </button>
           <button
             onClick={() => addStep()}
-            className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-3.5 w-3.5" />
             Add Step
@@ -138,17 +138,17 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <div
                     key={step.id}
-                    className="flex items-center gap-2 rounded-lg border border-dashed border-[#1e2130] bg-accent/50 px-3 py-2"
+                    className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
                   >
                     <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
                     <input
                       type="text"
                       value={step.title}
                       onChange={(e) => updateStep(step.id, { title: e.target.value })}
-                      className="flex-1 bg-transparent text-sm text-[#848b9b] focus:outline-hidden"
+                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-hidden"
                       placeholder="Procedure Complete"
                     />
-                    <span className="text-[10px] text-[#848b9b]">END</span>
+                    <span className="text-[10px] text-muted-foreground">END</span>
                   </div>
                 )
               }
@@ -178,24 +178,24 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <SortableStepWrapper key={step.id} id={step.id}>
                     {({ dragHandleProps }) => (
-                      <div className="group flex items-center gap-2 border-b border-[#1e2130] pb-1 pt-3" data-step-id={step.id}>
+                      <div className="group flex items-center gap-2 border-b border-border pb-1 pt-3" data-step-id={step.id}>
                         <button
                           type="button"
-                          className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
+                          className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
                           aria-label={`Drag to reorder section: ${step.title || 'Untitled Section'}`}
                           {...dragHandleProps}
                         >
                           <GripVertical className="h-4 w-4" />
                         </button>
                         <span
-                          className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-[#848b9b] hover:text-[#848b9b]"
+                          className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
                           onClick={() => setExpandedStepId(step.id)}
                         >
                           {step.title || 'Untitled Section'}
                         </span>
                         <button
                           onClick={() => removeStep(step.id)}
-                          className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                          className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
@@ -237,7 +237,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                   {({ dragHandleProps }) => (
                     <div
                       className={cn(
-                        'group flex flex-col rounded-xl border border-[#1e2130] px-3 py-2.5 transition-colors',
+                        'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
                         'hover:border-primary/30 hover:bg-accent/50',
                         isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
@@ -247,14 +247,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       <div className="flex items-center gap-2">
                         <button
                           type="button"
-                          className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
+                          className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
                           aria-label={`Drag to reorder step ${stepNumber}: ${step.title || 'Untitled step'}`}
                           {...dragHandleProps}
                         >
                           <GripVertical className="h-4 w-4" />
                         </button>
 
-                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#848b9b]">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
                           {stepNumber}
                         </span>
 
@@ -263,35 +263,35 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                         </span>
 
                         <span
-                          className="min-w-0 flex-1 cursor-pointer truncate text-sm text-[#e2e5eb]"
+                          className="min-w-0 flex-1 cursor-pointer truncate text-sm text-foreground"
                           onClick={() => setExpandedStepId(step.id)}
                         >
                           {step.title || 'Untitled step'}
                         </span>
 
                         {step.estimated_minutes && (
-                          <span className="shrink-0 text-[10px] text-[#848b9b]">
+                          <span className="shrink-0 text-[10px] text-muted-foreground">
                             ~{step.estimated_minutes}m
                           </span>
                         )}
 
                         <button
                           onClick={() => setExpandedStepId(step.id)}
-                          className="shrink-0 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                         >
                           <ChevronDown className="h-3.5 w-3.5" />
                         </button>
 
                         <button
                           onClick={() => removeStep(step.id)}
-                          className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                          className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
                       </div>
 
                       {isGhost && (
-                        <div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2">
+                        <div className="mt-2 flex gap-2 border-t border-border/50 pt-2">
                           <button
                             onClick={(e) => {
                               e.stopPropagation()
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
       {/* Add step button at bottom */}
       <button
         onClick={() => addStep()}
-        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-[#1e2130] py-2 text-sm text-[#848b9b] transition-colors hover:border-primary/30 hover:text-[#848b9b]"
+        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
       >
         <Plus className="h-3.5 w-3.5" />
         Add Step
diff --git a/frontend/src/components/procedural/CompletionSummary.tsx b/frontend/src/components/procedural/CompletionSummary.tsx
index 5877331c..0f283c5e 100644
--- a/frontend/src/components/procedural/CompletionSummary.tsx
+++ b/frontend/src/components/procedural/CompletionSummary.tsx
@@ -59,38 +59,38 @@ export function CompletionSummary({
         <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-400/10">
           <CheckCircle2 className="h-8 w-8 text-emerald-400" />
         </div>
-        <h1 className="text-2xl font-bold text-[#e2e5eb]">Procedure Complete</h1>
-        <p className="mt-1 text-[#848b9b]">{treeName}</p>
+        <h1 className="text-2xl font-bold text-foreground">Procedure Complete</h1>
+        <p className="mt-1 text-muted-foreground">{treeName}</p>
       </div>
 
       {/* Summary stats */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
           <CheckCircle2 className="mx-auto mb-1 h-5 w-5 text-emerald-400" />
-          <div className="text-lg font-semibold text-[#e2e5eb]">{procedureSteps.length}</div>
-          <div className="text-xs text-[#848b9b]">Steps Completed</div>
+          <div className="text-lg font-semibold text-foreground">{procedureSteps.length}</div>
+          <div className="text-xs text-muted-foreground">Steps Completed</div>
         </div>
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
-          <Clock className="mx-auto mb-1 h-5 w-5 text-[#848b9b]" />
-          <div className="text-lg font-semibold text-[#e2e5eb]">{formatTime(totalMinutes)}</div>
-          <div className="text-xs text-[#848b9b]">Total Time</div>
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
+          <Clock className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+          <div className="text-lg font-semibold text-foreground">{formatTime(totalMinutes)}</div>
+          <div className="text-xs text-muted-foreground">Total Time</div>
         </div>
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
-          <FileText className="mx-auto mb-1 h-5 w-5 text-[#848b9b]" />
-          <div className="text-lg font-semibold text-[#e2e5eb]">{Object.keys(variables).length}</div>
-          <div className="text-xs text-[#848b9b]">Parameters</div>
+        <div className="bg-card border border-border rounded-xl p-3 text-center">
+          <FileText className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
+          <div className="text-lg font-semibold text-foreground">{Object.keys(variables).length}</div>
+          <div className="text-xs text-muted-foreground">Parameters</div>
         </div>
       </div>
 
       {/* Project parameters */}
       {Object.keys(variables).length > 0 && (
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-          <h3 className="mb-3 text-sm font-semibold text-[#848b9b]">Project Parameters</h3>
+        <div className="bg-card border border-border rounded-xl p-4">
+          <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Project Parameters</h3>
           <div className="space-y-1.5">
             {Object.entries(variables).map(([key, value]) => (
               <div key={key} className="flex items-baseline justify-between gap-4 text-sm">
-                <span className="font-mono text-[#848b9b]">{key}</span>
-                <span className="text-right text-[#848b9b]">{value}</span>
+                <span className="font-mono text-muted-foreground">{key}</span>
+                <span className="text-right text-muted-foreground">{value}</span>
               </div>
             ))}
           </div>
@@ -98,8 +98,8 @@ export function CompletionSummary({
       )}
 
       {/* Step details */}
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
-        <h3 className="mb-3 text-sm font-semibold text-[#848b9b]">Step Summary</h3>
+      <div className="bg-card border border-border rounded-xl p-4">
+        <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Step Summary</h3>
         <div className="space-y-2">
           {procedureSteps.map((step, index) => {
             const completion = completions.get(step.id)
@@ -108,15 +108,15 @@ export function CompletionSummary({
                 <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
-                    <span className="text-[#848b9b]">
+                    <span className="text-muted-foreground">
                       {index + 1}. {step.title}
                     </span>
                   </div>
                   {completion?.notes && (
-                    <p className="mt-0.5 text-xs text-[#848b9b]">Note: {completion.notes}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">Note: {completion.notes}</p>
                   )}
                   {completion?.verificationValue && (
-                    <p className="mt-0.5 text-xs text-[#848b9b]">
+                    <p className="mt-0.5 text-xs text-muted-foreground">
                       Verified: {completion.verificationValue}
                     </p>
                   )}
diff --git a/frontend/src/components/procedural/FallbackSteps.tsx b/frontend/src/components/procedural/FallbackSteps.tsx
index 814d9ef9..07d679e7 100644
--- a/frontend/src/components/procedural/FallbackSteps.tsx
+++ b/frontend/src/components/procedural/FallbackSteps.tsx
@@ -42,7 +42,7 @@ export function FallbackSteps({
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-2 text-sm text-[#848b9b] hover:text-amber-400/80 transition-colors"
+        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-amber-400/80 transition-colors"
       >
         <AlertCircle className="h-4 w-4 text-amber-400/80 shrink-0" />
         <span>{toggleLabel}</span>
@@ -64,7 +64,7 @@ export function FallbackSteps({
                   key={fbStep.id}
                   className={cn(
                     'rounded-lg border p-3 transition-colors',
-                    'bg-[#14161d] border-[#1e2130]/50',
+                    'bg-card border-border/50',
                     isCompleted && 'border-emerald-500/30 bg-emerald-500/5'
                   )}
                 >
@@ -76,12 +76,12 @@ export function FallbackSteps({
                           value={fbStep.title}
                           onChange={(e) => onUpdate?.(index, { title: e.target.value })}
                           placeholder="Fallback step title"
-                          className="flex-1 rounded border border-[#1e2130] bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="flex-1 rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                         <button
                           type="button"
                           onClick={() => onRemove?.(index)}
-                          className="shrink-0 rounded p-1.5 text-[#848b9b] hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
+                          className="shrink-0 rounded p-1.5 text-muted-foreground hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
                           title="Remove fallback step"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
@@ -94,17 +94,17 @@ export function FallbackSteps({
                         }
                         placeholder="Describe this alternative approach..."
                         rows={2}
-                        className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                        className="w-full rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                       />
                     </div>
                   ) : (
                     // Execute mode
                     <div>
-                      <p className={cn('text-sm font-medium', isCompleted ? 'text-emerald-400' : 'text-[#e2e5eb]')}>
+                      <p className={cn('text-sm font-medium', isCompleted ? 'text-emerald-400' : 'text-foreground')}>
                         {fbStep.title}
                       </p>
                       {fbStep.description && (
-                        <p className="mt-1 text-xs text-[#848b9b]">{fbStep.description}</p>
+                        <p className="mt-1 text-xs text-muted-foreground">{fbStep.description}</p>
                       )}
                       {!isCompleted && (
                         <div className="mt-3 flex gap-2">
diff --git a/frontend/src/components/procedural/InlineVariablePrompt.tsx b/frontend/src/components/procedural/InlineVariablePrompt.tsx
index c7a58424..e516c243 100644
--- a/frontend/src/components/procedural/InlineVariablePrompt.tsx
+++ b/frontend/src/components/procedural/InlineVariablePrompt.tsx
@@ -88,7 +88,7 @@ export function InlineVariablePrompt({
           onBlur={() => {
             if (!value) setIsEditing(false)
           }}
-          className="rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-[#e2e5eb] shadow-[0_0_12px_rgba(6,182,212,0.15)] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+          className="rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
         >
           <option value="">{placeholder}</option>
           {options.map((opt) => (
@@ -117,10 +117,10 @@ export function InlineVariablePrompt({
           onBlur={handleSubmit}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
-          className="w-48 rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-[#e2e5eb] shadow-[0_0_12px_rgba(6,182,212,0.15)] placeholder:text-[#848b9b] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+          className="w-48 rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
         />
         {helpText && (
-          <span className="absolute -bottom-5 left-0 text-[0.625rem] text-[#848b9b] whitespace-nowrap">
+          <span className="absolute -bottom-5 left-0 text-[0.625rem] text-muted-foreground whitespace-nowrap">
             {helpText}
           </span>
         )}
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index 1a9f9cb4..363effda 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -72,10 +72,10 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
     const error = errors[field.variable_name]
 
     const baseInputClass = cn(
-      'w-full rounded-lg border bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-hidden focus:ring-1',
+      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1',
       error
         ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
-        : 'border-[#1e2130] focus:border-primary focus:ring-primary/20'
+        : 'border-border focus:border-primary focus:ring-primary/20'
     )
 
     let input: React.ReactNode
@@ -112,9 +112,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
               type="checkbox"
               checked={value === 'true'}
               onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
-              className="rounded border-[#1e2130]"
+              className="rounded border-border"
             />
-            <span className="text-sm text-[#848b9b]">{field.placeholder || field.label}</span>
+            <span className="text-sm text-muted-foreground">{field.placeholder || field.label}</span>
           </label>
         )
         break
@@ -162,9 +162,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
                         : [...selected, opt]
                       setValue(field.variable_name, next.join(','))
                     }}
-                    className="rounded border-[#1e2130]"
+                    className="rounded border-border"
                   />
-                  <span className="text-sm text-[#848b9b]">{opt}</span>
+                  <span className="text-sm text-muted-foreground">{opt}</span>
                 </label>
               )
             })}
@@ -198,12 +198,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
     return (
       <div key={field.variable_name}>
-        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-[#848b9b]">
+        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground">
           {field.label}
           {field.required && <span className="text-red-400">*</span>}
         </label>
         {field.help_text && (
-          <p className="mb-1.5 text-xs text-[#848b9b]">{field.help_text}</p>
+          <p className="mb-1.5 text-xs text-muted-foreground">{field.help_text}</p>
         )}
         {input}
         {error && <p className="mt-1 text-xs text-red-400">{error}</p>}
@@ -213,12 +213,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4 bg-black/60">
-      <div className="w-full max-w-full rounded-t-2xl border border-[#1e2130] bg-[#0c0d10] shadow-xl sm:max-w-lg sm:rounded-2xl">
+      <div className="w-full max-w-full rounded-t-2xl border border-border bg-background shadow-xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="border-b border-[#1e2130] px-6 py-4">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Project Information</h2>
-          <p className="mt-0.5 text-sm text-[#848b9b]">
-            Fill in the details for <span className="text-[#848b9b]">{treeName}</span>
+        <div className="border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Fill in the details for <span className="text-muted-foreground">{treeName}</span>
           </p>
         </div>
 
@@ -228,7 +228,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
             {Array.from(groups.entries()).map(([groupName, groupFields]) => (
               <div key={groupName}>
                 {groupName && (
-                  <h3 className="mb-3 border-b border-[#1e2130] pb-1 text-xs font-semibold uppercase tracking-wider text-[#848b9b]">
+                  <h3 className="mb-3 border-b border-border pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                     {groupName}
                   </h3>
                 )}
@@ -240,7 +240,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-[#1e2130] px-6 py-4">
+          <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
             <Button
               type="button"
               variant="secondary"
diff --git a/frontend/src/components/procedural/PrepareSessionModal.tsx b/frontend/src/components/procedural/PrepareSessionModal.tsx
index 9d2d72b7..6ffa01e0 100644
--- a/frontend/src/components/procedural/PrepareSessionModal.tsx
+++ b/frontend/src/components/procedural/PrepareSessionModal.tsx
@@ -89,17 +89,17 @@ export function PrepareSessionModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
-      <div className="absolute inset-0 bg-[#0c0d10]/60" onClick={onClose} />
-      <div className="relative w-full max-w-full rounded-t-2xl border border-[#1e2130] bg-[#14161d] shadow-2xl sm:max-w-lg sm:rounded-2xl">
+      <div className="absolute inset-0 bg-background/60" onClick={onClose} />
+      <div className="relative w-full max-w-full rounded-t-2xl border border-border bg-card shadow-2xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-2">
             <FileText className="h-4 w-4 text-cyan-400" />
-            <h3 className="text-sm font-semibold text-[#e2e5eb]">Prepare Session</h3>
+            <h3 className="text-sm font-semibold text-foreground">Prepare Session</h3>
           </div>
           <button
             onClick={onClose}
-            className="rounded-lg p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-4 w-4" />
           </button>
@@ -109,30 +109,30 @@ export function PrepareSessionModal({
         <div className="max-h-[70vh] overflow-y-auto p-4 space-y-5 sm:max-h-[60vh] sm:p-5">
           {/* Flow name */}
           <div className="rounded-lg bg-accent px-3 py-2">
-            <p className="text-xs text-[#848b9b]">Flow</p>
-            <p className="text-sm font-medium text-[#e2e5eb]">{treeName}</p>
+            <p className="text-xs text-muted-foreground">Flow</p>
+            <p className="text-sm font-medium text-foreground">{treeName}</p>
           </div>
 
           {/* Context fields */}
           <div className="space-y-3">
             <div>
-              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Ticket Number</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Ticket Number</label>
               <input
                 type="text"
                 value={ticketNumber}
                 onChange={(e) => setTicketNumber(e.target.value)}
                 placeholder="e.g. TKT-12345"
-                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Client Name</label>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">Client Name</label>
               <input
                 type="text"
                 value={clientName}
                 onChange={(e) => setClientName(e.target.value)}
                 placeholder="e.g. Acme Corp"
-                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
           </div>
@@ -140,14 +140,14 @@ export function PrepareSessionModal({
           {/* Assignee */}
           {teamMembers.length > 0 && (
             <div>
-              <label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-[#848b9b]">
+              <label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                 <UserPlus className="h-3.5 w-3.5" />
                 Assign to Engineer
               </label>
               <select
                 value={assignedToId}
                 onChange={(e) => setAssignedToId(e.target.value)}
-                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Unassigned (visible to all)</option>
                 {teamMembers.map(m => (
@@ -160,17 +160,17 @@ export function PrepareSessionModal({
           {/* Intake form fields */}
           {intakeFields.length > 0 && (
             <div className="space-y-4">
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Variables (optional — can be filled later)
               </h4>
               {Array.from(grouped.entries()).map(([groupName, fields]) => (
                 <div key={groupName} className="space-y-3">
                   {grouped.size > 1 && (
-                    <p className="text-xs font-medium text-[#848b9b]">{groupName}</p>
+                    <p className="text-xs font-medium text-muted-foreground">{groupName}</p>
                   )}
                   {fields.map(field => (
                     <div key={field.variable_name}>
-                      <label className="mb-1 block text-xs font-medium text-[#848b9b]">
+                      <label className="mb-1 block text-xs font-medium text-muted-foreground">
                         {field.label}
                         {field.required && <span className="ml-1 text-amber-400">*</span>}
                       </label>
@@ -178,7 +178,7 @@ export function PrepareSessionModal({
                         <select
                           value={values[field.variable_name] || ''}
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
-                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         >
                           <option value="">{field.placeholder || 'Select...'}</option>
                           {field.options.map(opt => (
@@ -191,7 +191,7 @@ export function PrepareSessionModal({
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
                           placeholder={field.placeholder}
                           rows={3}
-                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                       ) : (
                         <input
@@ -199,11 +199,11 @@ export function PrepareSessionModal({
                           value={values[field.variable_name] || ''}
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
                           placeholder={field.placeholder}
-                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                       )}
                       {field.help_text && (
-                        <p className="mt-1 text-[0.625rem] text-[#848b9b]">{field.help_text}</p>
+                        <p className="mt-1 text-[0.625rem] text-muted-foreground">{field.help_text}</p>
                       )}
                     </div>
                   ))}
@@ -214,10 +214,10 @@ export function PrepareSessionModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-3 border-t border-[#1e2130] px-5 py-4">
+        <div className="flex items-center justify-end gap-3 border-t border-border px-5 py-4">
           <button
             onClick={onClose}
-            className="rounded-lg px-4 py-2 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+            className="rounded-lg px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
           >
             Cancel
           </button>
@@ -225,7 +225,7 @@ export function PrepareSessionModal({
             onClick={handleSubmit}
             disabled={isSubmitting}
             className={cn(
-              'rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
+              'rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white',
               'hover:brightness-110 active:scale-[0.98]',
               'disabled:opacity-40'
             )}
diff --git a/frontend/src/components/procedural/ProgressBar.tsx b/frontend/src/components/procedural/ProgressBar.tsx
index 7220ecd2..869fcf4c 100644
--- a/frontend/src/components/procedural/ProgressBar.tsx
+++ b/frontend/src/components/procedural/ProgressBar.tsx
@@ -20,24 +20,24 @@ export function ProgressBar({ currentStep, totalSteps, elapsedMinutes, estimated
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between text-xs">
-        <span className="text-[#848b9b]">
+        <span className="text-muted-foreground">
           Step {currentStep} of {totalSteps}
         </span>
         <div className="flex items-center gap-3">
           {elapsedMinutes !== undefined && (
-            <span className="text-[#848b9b]">
+            <span className="text-muted-foreground">
               {formatTime(elapsed)}
               {estimatedTotalMinutes ? (
-                <span className="text-[#848b9b]"> / est. {formatTime(estimatedTotalMinutes)}</span>
+                <span className="text-muted-foreground"> / est. {formatTime(estimatedTotalMinutes)}</span>
               ) : null}
             </span>
           )}
-          <span className="font-medium text-[#848b9b]">{percentage}%</span>
+          <span className="font-medium text-muted-foreground">{percentage}%</span>
         </div>
       </div>
       <div className="h-1.5 overflow-hidden rounded-full bg-accent">
         <div
-          className="h-full rounded-full bg-[#22d3ee] transition-all duration-300"
+          className="h-full rounded-full bg-primary transition-all duration-300"
           style={{ width: `${percentage}%` }}
         />
       </div>
diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 1c26d187..3bdd4942 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -32,7 +32,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
         return (
           <div key={step.id}>
             {showSection && (
-              <div className="mb-1 mt-3 border-b border-[#1e2130] pb-1 text-[10px] font-semibold uppercase tracking-wider text-[#848b9b] first:mt-0">
+              <div className="mb-1 mt-3 border-b border-border pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:mt-0">
                 {'section_header' in step ? step.section_header : undefined}
               </div>
             )}
@@ -40,17 +40,17 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
               onClick={() => onStepClick(index)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
-                isCurrent && 'bg-accent text-[#e2e5eb]',
-                !isCurrent && isCompleted && 'text-[#848b9b]',
-                !isCurrent && !isCompleted && 'text-[#848b9b] hover:bg-accent/50'
+                isCurrent && 'bg-accent text-foreground',
+                !isCurrent && isCompleted && 'text-muted-foreground',
+                !isCurrent && !isCompleted && 'text-muted-foreground hover:bg-accent/50'
               )}
             >
               {isCompleted ? (
                 <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
               ) : isCurrent ? (
-                <ArrowRight className="h-4 w-4 shrink-0 text-[#e2e5eb]" />
+                <ArrowRight className="h-4 w-4 shrink-0 text-foreground" />
               ) : (
-                <Circle className="h-4 w-4 shrink-0 text-[#848b9b]" />
+                <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
               )}
               <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
                 {index + 1}
@@ -64,7 +64,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
                 )}
               </span>
               {'estimated_minutes' in step && step.estimated_minutes && (
-                <span className="shrink-0 text-[10px] text-[#848b9b]">~{step.estimated_minutes}m</span>
+                <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
               )}
             </button>
           </div>
diff --git a/frontend/src/components/procedural/StepDetail.tsx b/frontend/src/components/procedural/StepDetail.tsx
index 2331d60a..d64c8e72 100644
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; bg: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', bg: 'bg-blue-400/10', label: 'Action' },
-  informational: { icon: Info, color: 'text-[#848b9b]', bg: 'bg-accent', label: 'Info' },
+  informational: { icon: Info, color: 'text-muted-foreground', bg: 'bg-accent', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', bg: 'bg-emerald-400/10', label: 'Verification' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', bg: 'bg-yellow-400/10', label: 'Warning' },
 }
@@ -91,11 +91,11 @@ export function StepDetail({
     <div className="space-y-4">
       {/* Step header */}
       <div className="flex items-start gap-3">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-[#e2e5eb]">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-foreground">
           {stepNumber}
         </span>
         <div className="min-w-0 flex-1">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">{step.title}</h2>
+          <h2 className="text-lg font-semibold text-foreground">{step.title}</h2>
           <div className="mt-1 flex items-center gap-2">
             {isCustom ? (
               <span className="inline-flex items-center gap-1 rounded-full bg-amber-400/15 px-2 py-0.5 text-xs text-amber-400">
@@ -107,11 +107,11 @@ export function StepDetail({
                 {config.label}
               </span>
             )}
-            <span className="text-xs text-[#848b9b]">
+            <span className="text-xs text-muted-foreground">
               Step {stepNumber} of {totalSteps}
             </span>
             {'estimated_minutes' in step && step.estimated_minutes && (
-              <span className="text-xs text-[#848b9b]">~{step.estimated_minutes} min</span>
+              <span className="text-xs text-muted-foreground">~{step.estimated_minutes} min</span>
             )}
           </div>
         </div>
@@ -134,7 +134,7 @@ export function StepDetail({
 
       {/* Description */}
       {step.description && (
-        <div className="prose prose-invert prose-sm max-w-none text-[#848b9b]">
+        <div className="prose prose-invert prose-sm max-w-none text-muted-foreground">
           <p className="whitespace-pre-wrap">
             <ResolvedText
               text={step.description}
@@ -150,14 +150,14 @@ export function StepDetail({
       {commandBlocks.length > 0 && (
         <div className="space-y-3">
           {commandBlocks.map((cmd, i) => (
-            <div key={i} className="rounded-lg border border-[#1e2130] bg-[#14161d]">
-              <div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-1.5">
-                <span className="text-xs font-medium text-[#848b9b]">
+            <div key={i} className="rounded-lg border border-border bg-card">
+              <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
+                <span className="text-xs font-medium text-muted-foreground">
                   {cmd.label || (cmd.language ? cmd.language : 'Command')}
                 </span>
                 <button
                   onClick={() => handleCopyCommand(cmd.code, i)}
-                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
                   {copiedIndex === i ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
                   {copiedIndex === i ? 'Copied' : 'Copy'}
@@ -178,37 +178,37 @@ export function StepDetail({
 
       {/* Expected outcome */}
       {'expected_outcome' in step && step.expected_outcome && (
-        <div className="rounded-lg border border-[#1e2130] bg-white/2 p-3">
-          <h4 className="mb-1 text-xs font-medium text-[#848b9b]">Expected Outcome</h4>
-          <p className="text-sm text-[#848b9b]">{resolve(step.expected_outcome)}</p>
+        <div className="rounded-lg border border-border bg-white/2 p-3">
+          <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
+          <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
         </div>
       )}
 
       {/* Verification */}
       {verificationPrompt && (
-        <div className="rounded-lg border border-[#1e2130] bg-white/2 p-3">
-          <h4 className="mb-2 text-xs font-medium text-[#848b9b]">Verification</h4>
+        <div className="rounded-lg border border-border bg-white/2 p-3">
+          <h4 className="mb-2 text-xs font-medium text-muted-foreground">Verification</h4>
           {verificationType === 'checkbox' ? (
-            <label className="flex items-center gap-2 text-sm text-[#848b9b]">
+            <label className="flex items-center gap-2 text-sm text-muted-foreground">
               <input
                 type="checkbox"
                 checked={!!verificationValue}
                 onChange={(e) => onVerificationChange(e.target.checked ? 'confirmed' : '')}
                 disabled={isCompleted}
-                className="rounded border-[#1e2130]"
+                className="rounded border-border"
               />
               {resolve(verificationPrompt)}
             </label>
           ) : (
             <div>
-              <p className="mb-2 text-sm text-[#848b9b]">{resolve(verificationPrompt)}</p>
+              <p className="mb-2 text-sm text-muted-foreground">{resolve(verificationPrompt)}</p>
               <input
                 type="text"
                 value={verificationValue}
                 onChange={(e) => onVerificationChange(e.target.value)}
                 disabled={isCompleted}
                 placeholder="Enter observed value..."
-                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
               />
             </div>
           )}
@@ -218,13 +218,13 @@ export function StepDetail({
       {/* Notes */}
       {(!('notes_enabled' in step) || step.notes_enabled !== false) && (
         <div>
-          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Notes</label>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Notes</label>
           <textarea
             value={notes}
             onChange={(e) => onNotesChange(e.target.value)}
             placeholder="Add notes for this step..."
             rows={2}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       )}
@@ -235,7 +235,7 @@ export function StepDetail({
           href={resolve(step.reference_url)}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
         >
           <ExternalLink className="h-3.5 w-3.5" />
           Reference Documentation
@@ -251,7 +251,7 @@ export function StepDetail({
             'flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
             isCompleted
               ? 'bg-emerald-400/10 text-emerald-400'
-              : 'bg-[#22d3ee] text-white hover:brightness-110 disabled:opacity-40 disabled:hover:opacity-100'
+              : 'bg-primary text-white hover:brightness-110 disabled:opacity-40 disabled:hover:opacity-100'
           )}
         >
           {isCompleted ? (
diff --git a/frontend/src/components/public/FlowTemplateCard.tsx b/frontend/src/components/public/FlowTemplateCard.tsx
index 5f1fdc2b..fc4c6828 100644
--- a/frontend/src/components/public/FlowTemplateCard.tsx
+++ b/frontend/src/components/public/FlowTemplateCard.tsx
@@ -21,16 +21,16 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
       className="card-interactive text-left w-full flex flex-col gap-3 p-5"
     >
       <div className="flex items-start justify-between gap-2">
-        <h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
+        <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
           {template.name}
         </h3>
         <span className="shrink-0">
-          <GitBranch className="w-4 h-4 text-[#848b9b]" />
+          <GitBranch className="w-4 h-4 text-muted-foreground" />
         </span>
       </div>
 
       {template.description && (
-        <p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
+        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
           {template.description}
         </p>
       )}
@@ -40,26 +40,26 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
           {template.tags.slice(0, 3).map((tag) => (
             <span
               key={tag}
-              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
+              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
             >
               {tag}
             </span>
           ))}
           {template.tags.length > 3 && (
-            <span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] text-muted-foreground">
               +{template.tags.length - 3}
             </span>
           )}
         </div>
       )}
 
-      <div className="flex items-center gap-4 mt-auto pt-2 border-t border-[#1e2130]">
+      <div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
         {template.category && (
-          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
             {template.category}
           </span>
         )}
-        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] flex items-center gap-1">
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
           <Layers className="w-3 h-3" />
           {template.step_count} steps
         </span>
@@ -83,11 +83,11 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
       <div className="flex items-center justify-between">
         <span className={cn(
           'font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md border',
-          'bg-primary/5 border-primary/20 text-[#22d3ee]'
+          'bg-primary/5 border-primary/20 text-primary'
         )}>
           {typeLabels[template.tree_type] || template.tree_type}
         </span>
-        <span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
+        <span className="font-sans text-xs text-[0.625rem] text-text-muted">
           {template.usage_count.toLocaleString()} uses
         </span>
       </div>
diff --git a/frontend/src/components/public/ScriptTemplateCard.tsx b/frontend/src/components/public/ScriptTemplateCard.tsx
index 89c9c645..8492d5d1 100644
--- a/frontend/src/components/public/ScriptTemplateCard.tsx
+++ b/frontend/src/components/public/ScriptTemplateCard.tsx
@@ -22,20 +22,20 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
-          <h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
+          <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
             {template.name}
           </h3>
           {template.is_verified && (
-            <CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
+            <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
           )}
         </div>
         <span className="shrink-0">
-          <Terminal className="w-4 h-4 text-[#848b9b]" />
+          <Terminal className="w-4 h-4 text-muted-foreground" />
         </span>
       </div>
 
       {template.description && (
-        <p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
+        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
           {template.description}
         </p>
       )}
@@ -45,31 +45,31 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
           {template.tags.slice(0, 3).map((tag) => (
             <span
               key={tag}
-              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
+              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
             >
               {tag}
             </span>
           ))}
           {template.tags.length > 3 && (
-            <span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
+            <span className="font-sans text-xs text-[0.625rem] text-muted-foreground">
               +{template.tags.length - 3}
             </span>
           )}
         </div>
       )}
 
-      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-[#1e2130]">
+      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
         {template.complexity && (
           <span
             className={cn(
               'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
-              complexityColors[template.complexity] || 'text-[#848b9b] border-[#1e2130] bg-[#14161d]'
+              complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
             )}
           >
             {template.complexity}
           </span>
         )}
-        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
           {template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
         </span>
         {template.requires_elevation && (
@@ -82,7 +82,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
           {template.requires_modules.slice(0, 2).map((mod) => (
             <span
               key={mod}
-              className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
+              className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
             >
               <Package className="w-3 h-3" />
               {mod}
@@ -92,7 +92,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
       )}
 
       <div className="flex items-center justify-end">
-        <span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
+        <span className="font-sans text-xs text-[0.625rem] text-text-muted">
           {template.usage_count.toLocaleString()} uses
         </span>
       </div>
diff --git a/frontend/src/components/public/TemplateDetailModal.tsx b/frontend/src/components/public/TemplateDetailModal.tsx
index a9ba9e46..1ab855f5 100644
--- a/frontend/src/components/public/TemplateDetailModal.tsx
+++ b/frontend/src/components/public/TemplateDetailModal.tsx
@@ -66,21 +66,21 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-start justify-between gap-4 p-6 border-b border-[#1e2130]">
+        <div className="flex items-start justify-between gap-4 p-6 border-b border-border">
           <div className="flex items-center gap-3 min-w-0">
             {type === 'flow' ? (
-              <GitBranch className="w-5 h-5 text-[#22d3ee] shrink-0" />
+              <GitBranch className="w-5 h-5 text-primary shrink-0" />
             ) : (
-              <Terminal className="w-5 h-5 text-[#22d3ee] shrink-0" />
+              <Terminal className="w-5 h-5 text-primary shrink-0" />
             )}
             <div className="min-w-0">
-              <h2 className="font-heading text-[#e2e5eb] text-xl font-semibold leading-tight flex items-center gap-2">
+              <h2 className="font-heading text-foreground text-xl font-semibold leading-tight flex items-center gap-2">
                 {template.name}
                 {type === 'script' && (template as PublicScriptDetail).is_verified && (
-                  <CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
+                  <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
                 )}
               </h2>
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mt-1">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mt-1">
                 {type === 'flow' ? 'Flow Template' : 'Script Template'}
               </p>
             </div>
@@ -88,7 +88,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           <button
             type="button"
             onClick={onClose}
-            className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
@@ -97,7 +97,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
         {/* Body */}
         <div className="flex-1 overflow-y-auto p-6 space-y-6">
           {template.description && (
-            <p className="text-[#848b9b] text-sm leading-relaxed">
+            <p className="text-muted-foreground text-sm leading-relaxed">
               {template.description}
             </p>
           )}
@@ -139,7 +139,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
                     value={(template as PublicScriptDetail).complexity!}
                     valueClassName={
                       complexityColors[(template as PublicScriptDetail).complexity!] ||
-                      'text-[#e2e5eb]'
+                      'text-foreground'
                     }
                   />
                 )}
@@ -161,14 +161,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Tags */}
           {template.tags.length > 0 && (
             <div>
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Tags
               </h4>
               <div className="flex flex-wrap gap-1.5">
                 {template.tags.map((tag) => (
                   <span
                     key={tag}
-                    className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
+                    className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
                   >
                     {tag}
                   </span>
@@ -180,10 +180,10 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Flow preview structure */}
           {type === 'flow' && (template as PublicFlowDetail).preview_structure && (
             <div>
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Flow Preview
               </h4>
-              <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+              <div className="bg-card border border-border rounded-xl p-4">
                 <PreviewTree structure={(template as PublicFlowDetail).preview_structure!} />
               </div>
             </div>
@@ -192,22 +192,22 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Script parameters */}
           {type === 'script' && (template as PublicScriptDetail).parameters.length > 0 && (
             <div>
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Parameters
               </h4>
               <div className="space-y-2">
                 {(template as PublicScriptDetail).parameters.map((param) => (
                   <div
                     key={param.name}
-                    className="flex items-start gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-3"
+                    className="flex items-start gap-3 bg-card border border-border rounded-xl p-3"
                   >
-                    <code className="font-sans text-xs text-[#22d3ee] shrink-0">
+                    <code className="font-sans text-xs text-primary shrink-0">
                       {param.name}
                     </code>
-                    <span className="text-[#848b9b] text-sm flex-1">
+                    <span className="text-muted-foreground text-sm flex-1">
                       {param.description}
                     </span>
-                    <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
+                    <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-text-muted shrink-0">
                       {param.type}
                     </span>
                   </div>
@@ -219,14 +219,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Script modules */}
           {type === 'script' && (template as PublicScriptDetail).requires_modules.length > 0 && (
             <div>
-              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Required Modules
               </h4>
               <div className="flex flex-wrap gap-1.5">
                 {(template as PublicScriptDetail).requires_modules.map((mod) => (
                   <span
                     key={mod}
-                    className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
+                    className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
                   >
                     <Package className="w-3 h-3" />
                     {mod}
@@ -238,17 +238,17 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between gap-4 p-6 border-t border-[#1e2130]">
+        <div className="flex items-center justify-between gap-4 p-6 border-t border-border">
           <button
             type="button"
             onClick={onClose}
-            className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
+            className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
           >
             Close
           </button>
           <Link
             to="/register"
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-primary text-white hover:brightness-110 active:scale-[0.98] transition-all"
           >
             Sign Up to Use This
             <ChevronRight className="w-4 h-4" />
@@ -271,11 +271,11 @@ function MetaStat({
   valueClassName?: string
 }) {
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
-      <div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1">
+    <div className="bg-card border border-border rounded-xl p-3">
+      <div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
         {label}
       </div>
-      <div className={cn('text-[#e2e5eb] text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
+      <div className={cn('text-foreground text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
         {icon}
         {value}
       </div>
@@ -293,17 +293,17 @@ function PreviewTree({ structure }: { structure: Record<string, unknown> }) {
 
   return (
     <div className="text-sm">
-      <div className="flex items-center gap-2 text-[#e2e5eb]">
-        <ChevronRight className="w-3.5 h-3.5 text-[#22d3ee]" />
+      <div className="flex items-center gap-2 text-foreground">
+        <ChevronRight className="w-3.5 h-3.5 text-primary" />
         <span>{name}</span>
       </div>
       {children.length > 0 && (
-        <div className="ml-5 mt-1 space-y-1 border-l border-[#1e2130] pl-3">
+        <div className="ml-5 mt-1 space-y-1 border-l border-border pl-3">
           {children.slice(0, 8).map((child, i) => (
             <PreviewTree key={i} structure={child} />
           ))}
           {children.length > 8 && (
-            <span className="text-[#848b9b] text-xs">
+            <span className="text-muted-foreground text-xs">
               +{children.length - 8} more steps...
             </span>
           )}
diff --git a/frontend/src/components/script-builder/SaveToLibraryDialog.tsx b/frontend/src/components/script-builder/SaveToLibraryDialog.tsx
index 159c12b3..fc1f4120 100644
--- a/frontend/src/components/script-builder/SaveToLibraryDialog.tsx
+++ b/frontend/src/components/script-builder/SaveToLibraryDialog.tsx
@@ -69,10 +69,10 @@ export function SaveToLibraryDialog({
       <div className="card-flat max-w-md w-full mx-4 rounded-xl overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
-          <h3 className="text-sm font-heading font-bold text-[#e2e5eb]">Save to Library</h3>
+          <h3 className="text-sm font-heading font-bold text-foreground">Save to Library</h3>
           <button
             onClick={onClose}
-            className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
           >
             <X size={18} />
           </button>
@@ -82,7 +82,7 @@ export function SaveToLibraryDialog({
         <form onSubmit={handleSubmit} className="p-5 space-y-4">
           {/* Name */}
           <div>
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5 block">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5 block">
               Name *
             </label>
             <input
@@ -92,7 +92,7 @@ export function SaveToLibraryDialog({
               required
               className={cn(
                 "w-full rounded-lg px-3 py-2 text-sm",
-                "border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]",
+                "border border-border bg-card text-foreground placeholder:text-muted-foreground",
                 "focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
               )}
               placeholder="Script name"
@@ -101,7 +101,7 @@ export function SaveToLibraryDialog({
 
           {/* Description */}
           <div>
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5 block">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5 block">
               Description
             </label>
             <textarea
@@ -110,7 +110,7 @@ export function SaveToLibraryDialog({
               rows={3}
               className={cn(
                 "w-full rounded-lg px-3 py-2 text-sm resize-none",
-                "border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]",
+                "border border-border bg-card text-foreground placeholder:text-muted-foreground",
                 "focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
               )}
               placeholder="What does this script do?"
@@ -119,7 +119,7 @@ export function SaveToLibraryDialog({
 
           {/* Category */}
           <div>
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5 block">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5 block">
               Category
             </label>
             <select
@@ -127,7 +127,7 @@ export function SaveToLibraryDialog({
               onChange={(e) => setCategoryId(e.target.value)}
               className={cn(
                 "w-full rounded-lg px-3 py-2 text-sm",
-                "border border-[#1e2130] bg-[#14161d] text-[#e2e5eb]",
+                "border border-border bg-card text-foreground",
                 "focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
               )}
             >
@@ -144,9 +144,9 @@ export function SaveToLibraryDialog({
               type="checkbox"
               checked={shareWithTeam}
               onChange={(e) => setShareWithTeam(e.target.checked)}
-              className="w-4 h-4 rounded border-[#1e2130] bg-[#14161d] text-cyan-500 focus:ring-cyan-500/20"
+              className="w-4 h-4 rounded border-border bg-card text-cyan-500 focus:ring-cyan-500/20"
             />
-            <span className="text-sm text-[#e2e5eb]">Share with team</span>
+            <span className="text-sm text-foreground">Share with team</span>
           </label>
 
           {/* Error */}
@@ -161,7 +161,7 @@ export function SaveToLibraryDialog({
               onClick={onClose}
               className={cn(
                 "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
-                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]"
+                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
               )}
             >
               Cancel
@@ -171,7 +171,7 @@ export function SaveToLibraryDialog({
               disabled={!name.trim() || isSaving}
               className={cn(
                 "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all",
-                "bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]",
+                "bg-primary text-white hover:brightness-110 active:scale-[0.98]",
                 "disabled:opacity-50 disabled:cursor-not-allowed"
               )}
             >
diff --git a/frontend/src/components/script-builder/ScriptBuilderChat.tsx b/frontend/src/components/script-builder/ScriptBuilderChat.tsx
index 784dcaf8..0806a4bf 100644
--- a/frontend/src/components/script-builder/ScriptBuilderChat.tsx
+++ b/frontend/src/components/script-builder/ScriptBuilderChat.tsx
@@ -30,13 +30,13 @@ export function ScriptBuilderChat({
     return (
       <div className="flex-1 flex items-center justify-center p-8">
         <div className="text-center max-w-md">
-          <div className="w-14 h-14 rounded-2xl bg-[#22d3ee] flex items-center justify-center mx-auto mb-4">
+          <div className="w-14 h-14 rounded-2xl bg-primary flex items-center justify-center mx-auto mb-4">
             <Bot size={28} className="text-white" />
           </div>
-          <h2 className="text-lg font-heading font-bold text-[#e2e5eb] mb-2">
+          <h2 className="text-lg font-heading font-bold text-foreground mb-2">
             Script Builder
           </h2>
-          <p className="text-sm text-[#848b9b] leading-relaxed">
+          <p className="text-sm text-muted-foreground leading-relaxed">
             Describe the script you need and AI will generate it for you. You can iterate on the script,
             preview it, and save it to your library.
           </p>
@@ -65,7 +65,7 @@ export function ScriptBuilderChat({
             className={cn(
               "max-w-[85%] rounded-xl px-4 py-3 text-sm",
               msg.role === 'user'
-                ? "bg-[rgba(6,182,212,0.08)] border border-[rgba(6,182,212,0.15)] text-[#e2e5eb]"
+                ? "bg-[rgba(6,182,212,0.08)] border border-[rgba(6,182,212,0.15)] text-foreground"
                 : "card-flat"
             )}
           >
@@ -90,7 +90,7 @@ export function ScriptBuilderChat({
 
           {msg.role === 'user' && (
             <div className="shrink-0 w-8 h-8 rounded-lg bg-[rgba(255,255,255,0.06)] flex items-center justify-center mt-0.5">
-              <User size={16} className="text-[#848b9b]" />
+              <User size={16} className="text-muted-foreground" />
             </div>
           )}
         </div>
@@ -103,7 +103,7 @@ export function ScriptBuilderChat({
           </div>
           <div className="card-flat rounded-xl px-4 py-3 text-sm flex items-center gap-2">
             <Loader2 size={14} className="animate-spin text-cyan-400" />
-            <span className="text-[#848b9b]">Generating script...</span>
+            <span className="text-muted-foreground">Generating script...</span>
           </div>
         </div>
       )}
diff --git a/frontend/src/components/script-builder/ScriptBuilderInput.tsx b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
index 7639cd09..0a1cdb19 100644
--- a/frontend/src/components/script-builder/ScriptBuilderInput.tsx
+++ b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
@@ -55,7 +55,7 @@ export function ScriptBuilderInput({
         rows={1}
         className={cn(
           "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
-          "bg-[#14161d] border border-[#1e2130] text-[#e2e5eb] placeholder:text-[#848b9b]",
+          "bg-card border border-border text-foreground placeholder:text-muted-foreground",
           "focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors",
           "disabled:opacity-50"
         )}
@@ -67,8 +67,8 @@ export function ScriptBuilderInput({
         className={cn(
           "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
           canSend
-            ? "bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]"
-            : "bg-[rgba(255,255,255,0.04)] text-[#5a6170] cursor-not-allowed"
+            ? "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
+            : "bg-[rgba(255,255,255,0.04)] text-text-muted cursor-not-allowed"
         )}
       >
         <Send size={18} />
diff --git a/frontend/src/components/script-builder/ScriptCodeBlock.tsx b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
index 69283fd6..d7eabf0b 100644
--- a/frontend/src/components/script-builder/ScriptCodeBlock.tsx
+++ b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
@@ -59,7 +59,7 @@ export function ScriptCodeBlock({
           {filename || 'script'}
         </span>
         {lineCount != null && (
-          <span className="font-mono text-[0.625rem] text-[#848b9b] ml-2 shrink-0">
+          <span className="font-mono text-[0.625rem] text-muted-foreground ml-2 shrink-0">
             {lineCount} lines
           </span>
         )}
@@ -85,7 +85,7 @@ export function ScriptCodeBlock({
           {previewLines}
         </SyntaxHighlighter>
         {remainingLines > 0 && (
-          <div className="px-3 pb-2 font-mono text-[0.625rem] text-[#5a6170]">
+          <div className="px-3 pb-2 font-mono text-[0.625rem] text-text-muted">
             {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
           </div>
         )}
@@ -97,7 +97,7 @@ export function ScriptCodeBlock({
           onClick={onViewFull}
           className={cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all",
-            "bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]"
+            "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
           )}
         >
           <Eye size={14} />
@@ -107,7 +107,7 @@ export function ScriptCodeBlock({
           onClick={handleCopy}
           className={cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]"
+            "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
           )}
         >
           {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
diff --git a/frontend/src/components/script-builder/ScriptPreviewModal.tsx b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
index aeadbfeb..635e7f29 100644
--- a/frontend/src/components/script-builder/ScriptPreviewModal.tsx
+++ b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
@@ -58,14 +58,14 @@ export function ScriptPreviewModal({
       className="fixed inset-0 z-50 bg-black/80  flex items-center justify-center"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
-      <div className="bg-[#18191f] rounded-xl border border-[rgba(255,255,255,0.08)] max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
+      <div className="bg-card rounded-xl border border-[rgba(255,255,255,0.08)] max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
           <div className="flex items-center gap-3 min-w-0">
             <span className="font-mono text-sm text-cyan-400 truncate">
               {filename || 'script'}
             </span>
-            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-[#848b9b]">
+            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">
               {LANGUAGE_LABELS[language] || language}
             </span>
           </div>
@@ -74,7 +74,7 @@ export function ScriptPreviewModal({
               onClick={handleCopy}
               className={cn(
                 "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]"
+                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
               )}
             >
               {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
@@ -92,7 +92,7 @@ export function ScriptPreviewModal({
             </button>
             <button
               onClick={onClose}
-              className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+              className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
             >
               <X size={18} />
             </button>
@@ -126,14 +126,14 @@ export function ScriptPreviewModal({
 
         {/* Footer */}
         <div className="flex items-center justify-between px-5 py-3 border-t border-[rgba(255,255,255,0.06)]">
-          <span className="font-mono text-[0.625rem] text-[#848b9b]">
+          <span className="font-mono text-[0.625rem] text-muted-foreground">
             {lineCount} line{lineCount !== 1 ? 's' : ''}
           </span>
           <button
             onClick={onClose}
             className={cn(
               "px-4 py-1.5 rounded-lg text-xs font-medium transition-colors",
-              "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]"
+              "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
             )}
           >
             Close & Return to Chat
diff --git a/frontend/src/components/script-editor/ParameterCard.tsx b/frontend/src/components/script-editor/ParameterCard.tsx
index 22c1c9c6..979c5a7e 100644
--- a/frontend/src/components/script-editor/ParameterCard.tsx
+++ b/frontend/src/components/script-editor/ParameterCard.tsx
@@ -55,29 +55,29 @@ export function ParameterCard({
   }
 
   return (
-    <div className="border border-[#1e2130] rounded-xl overflow-hidden">
+    <div className="border border-border rounded-xl overflow-hidden">
       {/* Header */}
       <button
         type="button"
         onClick={() => setExpanded(v => !v)}
-        className="w-full flex items-center gap-2 px-3 py-2.5 bg-[#14161d] hover:bg-[#191c25] transition-colors"
+        className="w-full flex items-center gap-2 px-3 py-2.5 bg-card hover:bg-input transition-colors"
       >
-        <GripVertical size={14} className="text-[#848b9b]/50 shrink-0" />
-        {expanded ? <ChevronDown size={14} className="text-[#848b9b]" /> : <ChevronRight size={14} className="text-[#848b9b]" />}
-        <span className="text-sm font-medium text-[#e2e5eb] flex-1 text-left">
+        <GripVertical size={14} className="text-muted-foreground/50 shrink-0" />
+        {expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
+        <span className="text-sm font-medium text-foreground flex-1 text-left">
           {param.label || param.key || `Parameter ${index + 1}`}
         </span>
-        <span className="font-sans text-xs text-[0.625rem] text-[#848b9b] uppercase">{param.type}</span>
+        <span className="font-sans text-xs text-[0.625rem] text-muted-foreground uppercase">{param.type}</span>
         {param.required && <span className="text-red-400 text-xs">*</span>}
       </button>
 
       {/* Body */}
       {expanded && (
-        <div className="px-3 py-3 space-y-3 border-t border-[#1e2130]">
+        <div className="px-3 py-3 space-y-3 border-t border-border">
           {/* Row 1: key + label */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
               <Input
                 value={param.key}
                 onChange={e => update({ key: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })}
@@ -86,7 +86,7 @@ export function ParameterCard({
               />
             </div>
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Label</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Label</label>
               <Input
                 value={param.label}
                 onChange={e => update({ label: e.target.value })}
@@ -99,12 +99,12 @@ export function ParameterCard({
           {/* Row 2: type + group */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Type</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Type</label>
               <select
                 value={param.type}
                 onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
                 disabled={disabled}
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+                className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {PARAM_TYPES.map(t => (
                   <option key={t.value} value={t.value}>{t.label}</option>
@@ -112,7 +112,7 @@ export function ParameterCard({
               </select>
             </div>
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Group (optional)</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Group (optional)</label>
               <Input
                 value={param.group ?? ''}
                 onChange={e => update({ group: e.target.value || null })}
@@ -125,7 +125,7 @@ export function ParameterCard({
           {/* Row 3: placeholder + help text */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Placeholder</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Placeholder</label>
               <Input
                 value={param.placeholder ?? ''}
                 onChange={e => update({ placeholder: e.target.value || null })}
@@ -134,7 +134,7 @@ export function ParameterCard({
               />
             </div>
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Help text</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Help text</label>
               <Input
                 value={param.help_text ?? ''}
                 onChange={e => update({ help_text: e.target.value || null })}
@@ -146,23 +146,23 @@ export function ParameterCard({
 
           {/* Row 4: toggles */}
           <div className="flex items-center gap-4">
-            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+            <label className="flex items-center gap-2 text-sm text-foreground">
               <input
                 type="checkbox"
                 checked={param.required}
                 onChange={e => update({ required: e.target.checked })}
                 disabled={disabled}
-                className="rounded border-[#1e2130]"
+                className="rounded border-border"
               />
               Required
             </label>
-            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+            <label className="flex items-center gap-2 text-sm text-foreground">
               <input
                 type="checkbox"
                 checked={param.sensitive}
                 onChange={e => update({ sensitive: e.target.checked })}
                 disabled={disabled}
-                className="rounded border-[#1e2130]"
+                className="rounded border-border"
               />
               Sensitive (redacted in logs)
             </label>
@@ -170,7 +170,7 @@ export function ParameterCard({
 
           {/* Default value */}
           <div>
-            <label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
+            <label className="text-xs text-muted-foreground mb-1 block">Default value</label>
             <Input
               value={param.default !== null && param.default !== undefined ? String(param.default) : ''}
               onChange={e => update({ default: e.target.value || null })}
@@ -182,7 +182,7 @@ export function ParameterCard({
           {/* Select options (only for select type) */}
           {param.type === 'select' && (
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Options</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Options</label>
               <div className="space-y-1.5">
                 {(param.options ?? []).map((opt, i) => (
                   <div key={i} className="flex items-center gap-2">
@@ -202,7 +202,7 @@ export function ParameterCard({
                       type="button"
                       onClick={() => removeOption(i)}
                       disabled={disabled}
-                      className="p-1 text-[#848b9b] hover:text-rose-500 transition-colors"
+                      className="p-1 text-muted-foreground hover:text-rose-500 transition-colors"
                     >
                       <X size={14} />
                     </button>
@@ -212,7 +212,7 @@ export function ParameterCard({
                   type="button"
                   onClick={addOption}
                   disabled={disabled}
-                  className="flex items-center gap-1 text-xs text-[#22d3ee] hover:underline"
+                  className="flex items-center gap-1 text-xs text-primary hover:underline"
                 >
                   <Plus size={12} /> Add option
                 </button>
@@ -223,12 +223,12 @@ export function ParameterCard({
           {/* Validation (for text/number types) */}
           {(param.type === 'text' || param.type === 'number' || param.type === 'textarea') && (
             <div>
-              <label className="text-xs text-[#848b9b] mb-1 block">Validation (optional)</label>
+              <label className="text-xs text-muted-foreground mb-1 block">Validation (optional)</label>
               <div className="grid grid-cols-3 gap-2">
                 {param.type === 'number' ? (
                   <>
                     <div>
-                      <label className="text-[0.625rem] text-[#848b9b]">Min value</label>
+                      <label className="text-[0.625rem] text-muted-foreground">Min value</label>
                       <Input
                         type="number"
                         value={param.validation?.min_value ?? ''}
@@ -237,7 +237,7 @@ export function ParameterCard({
                       />
                     </div>
                     <div>
-                      <label className="text-[0.625rem] text-[#848b9b]">Max value</label>
+                      <label className="text-[0.625rem] text-muted-foreground">Max value</label>
                       <Input
                         type="number"
                         value={param.validation?.max_value ?? ''}
@@ -249,7 +249,7 @@ export function ParameterCard({
                 ) : (
                   <>
                     <div>
-                      <label className="text-[0.625rem] text-[#848b9b]">Min length</label>
+                      <label className="text-[0.625rem] text-muted-foreground">Min length</label>
                       <Input
                         type="number"
                         value={param.validation?.min_length ?? ''}
@@ -258,7 +258,7 @@ export function ParameterCard({
                       />
                     </div>
                     <div>
-                      <label className="text-[0.625rem] text-[#848b9b]">Max length</label>
+                      <label className="text-[0.625rem] text-muted-foreground">Max length</label>
                       <Input
                         type="number"
                         value={param.validation?.max_length ?? ''}
@@ -269,7 +269,7 @@ export function ParameterCard({
                   </>
                 )}
                 <div>
-                  <label className="text-[0.625rem] text-[#848b9b]">Pattern (regex)</label>
+                  <label className="text-[0.625rem] text-muted-foreground">Pattern (regex)</label>
                   <Input
                     value={param.validation?.pattern ?? ''}
                     onChange={e => updateValidation({ pattern: e.target.value || undefined })}
@@ -282,13 +282,13 @@ export function ParameterCard({
           )}
 
           {/* Actions row */}
-          <div className="flex items-center justify-between pt-1 border-t border-[#1e2130]">
+          <div className="flex items-center justify-between pt-1 border-t border-border">
             <div className="flex items-center gap-1">
               <button
                 type="button"
                 onClick={() => onMoveUp(index)}
                 disabled={isFirst || disabled}
-                className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
+                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
               >
                 ↑ Up
               </button>
@@ -296,7 +296,7 @@ export function ParameterCard({
                 type="button"
                 onClick={() => onMoveDown(index)}
                 disabled={isLast || disabled}
-                className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
+                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
               >
                 ↓ Down
               </button>
diff --git a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
index 8e652868..ee472a80 100644
--- a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
+++ b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
@@ -107,7 +107,7 @@ export function ParameterDetectorStepper({
     <div className="border border-primary/20 rounded-xl bg-primary/[0.03] p-4 space-y-3">
       {/* Progress */}
       <div className="flex items-center justify-between">
-        <p className="text-xs font-medium text-[#e2e5eb]">
+        <p className="text-xs font-medium text-foreground">
           Candidate {currentIndex + 1} of {candidates.length}
         </p>
         <div className="flex items-center gap-1">
@@ -130,7 +130,7 @@ export function ParameterDetectorStepper({
         <p className="font-sans text-xs text-amber-400 break-all">
           {current.matchedLine}
         </p>
-        <p className="font-sans text-xs text-[0.5rem] text-[#848b9b] mt-1">
+        <p className="font-sans text-xs text-[0.5rem] text-muted-foreground mt-1">
           Line {current.lineNumber} · {current.source === 'param_block' ? 'param() block' : 'variable assignment'}
         </p>
       </div>
@@ -138,7 +138,7 @@ export function ParameterDetectorStepper({
       {/* Editable fields */}
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="text-xs text-[#848b9b] mb-1 block">Key</label>
+          <label className="text-xs text-muted-foreground mb-1 block">Key</label>
           <Input
             value={key}
             onChange={e => setKey(e.target.value.replace(/[^a-zA-Z0-9_]/g, ''))}
@@ -149,7 +149,7 @@ export function ParameterDetectorStepper({
           )}
         </div>
         <div>
-          <label className="text-xs text-[#848b9b] mb-1 block">Label</label>
+          <label className="text-xs text-muted-foreground mb-1 block">Label</label>
           <Input
             value={label}
             onChange={e => setLabel(e.target.value)}
@@ -160,12 +160,12 @@ export function ParameterDetectorStepper({
 
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="text-xs text-[#848b9b] mb-1 flex items-center gap-1.5">
+          <label className="text-xs text-muted-foreground mb-1 flex items-center gap-1.5">
             Type
             <button
               type="button"
               onClick={() => setShowInferenceInfo(!showInferenceInfo)}
-              className="text-[#848b9b] hover:text-[#22d3ee] transition-colors"
+              className="text-muted-foreground hover:text-primary transition-colors"
               title={current.inferenceReason}
             >
               <Info size={11} />
@@ -174,20 +174,20 @@ export function ParameterDetectorStepper({
           <select
             value={type}
             onChange={e => setType(e.target.value as ScriptParameter['type'])}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
           >
             {PARAM_TYPES.map(t => (
               <option key={t.value} value={t.value}>{t.label}</option>
             ))}
           </select>
           {showInferenceInfo && (
-            <p className="text-[0.625rem] text-[#22d3ee]/80 mt-1 italic">
+            <p className="text-[0.625rem] text-primary/80 mt-1 italic">
               {current.inferenceReason}
             </p>
           )}
         </div>
         <div>
-          <label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
+          <label className="text-xs text-muted-foreground mb-1 block">Default value</label>
           <Input
             value={defaultValue}
             onChange={e => setDefaultValue(e.target.value)}
@@ -197,32 +197,32 @@ export function ParameterDetectorStepper({
       </div>
 
       <div className="flex items-center gap-4">
-        <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+        <label className="flex items-center gap-2 text-sm text-foreground">
           <input
             type="checkbox"
             checked={required}
             onChange={e => setRequired(e.target.checked)}
-            className="rounded border-[#1e2130]"
+            className="rounded border-border"
           />
           Required
         </label>
-        <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+        <label className="flex items-center gap-2 text-sm text-foreground">
           <input
             type="checkbox"
             checked={sensitive}
             onChange={e => setSensitive(e.target.checked)}
-            className="rounded border-[#1e2130]"
+            className="rounded border-border"
           />
           Sensitive
         </label>
       </div>
 
       {/* Actions */}
-      <div className="flex items-center justify-end gap-2 pt-1 border-t border-[#1e2130]">
+      <div className="flex items-center justify-end gap-2 pt-1 border-t border-border">
         <button
           type="button"
           onClick={handleSkip}
-          className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-3 py-1.5"
+          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-1.5"
         >
           <SkipForward size={13} />
           {isLast ? 'Skip & Finish' : 'Skip'}
@@ -231,7 +231,7 @@ export function ParameterDetectorStepper({
           type="button"
           onClick={handleAccept}
           disabled={!key.trim() || !label.trim()}
-          className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-1.5 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex items-center gap-1.5 bg-primary text-white font-semibold text-sm px-4 py-1.5 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {isLast ? (
             <><Check size={13} /> Accept &amp; Finish</>
diff --git a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
index 7e109d11..45151cd8 100644
--- a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
+++ b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
@@ -99,8 +99,8 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
           className={cn(
             'flex items-center gap-1.5 font-sans text-xs px-3 py-1.5 rounded-full border transition-all',
             mode === 'visual'
-              ? 'bg-[rgba(34,211,238,0.10)] border-primary/30 text-[#e2e5eb]'
-              : 'border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb]'
+              ? 'bg-accent-dim border-primary/30 text-foreground'
+              : 'border-border text-muted-foreground hover:text-foreground'
           )}
         >
           <List size={12} /> Visual
@@ -111,8 +111,8 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
           className={cn(
             'flex items-center gap-1.5 font-sans text-xs px-3 py-1.5 rounded-full border transition-all',
             mode === 'json'
-              ? 'bg-[rgba(34,211,238,0.10)] border-primary/30 text-[#e2e5eb]'
-              : 'border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb]'
+              ? 'bg-accent-dim border-primary/30 text-foreground'
+              : 'border-border text-muted-foreground hover:text-foreground'
           )}
         >
           <Code size={12} /> JSON
@@ -122,7 +122,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
       {mode === 'visual' ? (
         <>
           {parameters.length === 0 ? (
-            <p className="text-sm text-[#848b9b] py-4 text-center">
+            <p className="text-sm text-muted-foreground py-4 text-center">
               No parameters defined. Add one to create dynamic form fields.
             </p>
           ) : (
@@ -147,7 +147,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
             type="button"
             onClick={handleAdd}
             disabled={disabled}
-            className="flex items-center gap-1.5 text-sm text-[#22d3ee] hover:underline self-start"
+            className="flex items-center gap-1.5 text-sm text-primary hover:underline self-start"
           >
             <Plus size={14} /> Add Parameter
           </button>
@@ -159,7 +159,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
             onChange={e => { setJsonText(e.target.value); setJsonError(null) }}
             disabled={disabled}
             spellCheck={false}
-            className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-[#14161d] border border-[#1e2130] rounded-xl p-4 text-[#e2e5eb] focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
             placeholder='{ "parameters": [...] }'
           />
           {jsonError && (
diff --git a/frontend/src/components/script-editor/ScriptBodyEditor.tsx b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
index 4c70fbeb..c4c505be 100644
--- a/frontend/src/components/script-editor/ScriptBodyEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
@@ -16,7 +16,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
   }, [])
 
   return (
-    <div className="rounded-xl border border-[#1e2130] overflow-hidden">
+    <div className="rounded-xl border border-border overflow-hidden">
       <Editor
         height="300px"
         language="powershell"
@@ -25,7 +25,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
         onChange={v => onChange(v ?? '')}
         beforeMount={handleBeforeMount}
         loading={
-          <div className="flex h-[300px] items-center justify-center bg-[#14161d]">
+          <div className="flex h-[300px] items-center justify-center bg-card">
             <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
           </div>
         }
diff --git a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
index cd9d401a..f0818f33 100644
--- a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
@@ -291,7 +291,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <Loader2 size={28} className="text-[#22d3ee] animate-spin" />
+        <Loader2 size={28} className="text-primary animate-spin" />
       </div>
     )
   }
@@ -302,22 +302,22 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
       <button
         type="button"
         onClick={handleBack}
-        className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors w-fit"
+        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors w-fit"
       >
         <ArrowLeft size={12} />
         Back to templates
       </button>
 
-      <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">
+      <h1 className="text-2xl font-heading font-bold text-foreground">
         {templateId ? 'Edit Template' : 'New Template'}
       </h1>
 
       {/* ── Metadata ──────────────────────────────────────────────── */}
       <section className="card-flat p-5 space-y-4">
-        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Metadata</p>
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Metadata</p>
 
         <div>
-          <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
+          <label className="text-sm font-medium text-foreground mb-1 block">
             Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -329,7 +329,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Description</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Description</label>
             <Textarea
               value={form.description}
               onChange={e => updateField('description', e.target.value)}
@@ -338,7 +338,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             />
           </div>
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Use Case</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Use Case</label>
             <Textarea
               value={form.use_case}
               onChange={e => updateField('use_case', e.target.value)}
@@ -350,13 +350,13 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-3 gap-4">
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
+            <label className="text-sm font-medium text-foreground mb-1 block">
               Category <span className="text-red-400">*</span>
             </label>
             <select
               value={form.category_id}
               onChange={e => updateField('category_id', e.target.value)}
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
             >
               <option value="">Select category…</option>
               {categories.map(c => (
@@ -365,11 +365,11 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             </select>
           </div>
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Complexity</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Complexity</label>
             <select
               value={form.complexity}
               onChange={e => updateField('complexity', e.target.value as FormState['complexity'])}
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
             >
               <option value="beginner">Beginner</option>
               <option value="intermediate">Intermediate</option>
@@ -377,7 +377,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             </select>
           </div>
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Estimated Runtime</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Estimated Runtime</label>
             <Input
               value={form.estimated_runtime}
               onChange={e => updateField('estimated_runtime', e.target.value)}
@@ -388,7 +388,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Tags (comma-separated)</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Tags (comma-separated)</label>
             <Input
               value={form.tags}
               onChange={e => updateField('tags', e.target.value)}
@@ -396,7 +396,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             />
           </div>
           <div>
-            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Required Modules (comma-separated)</label>
+            <label className="text-sm font-medium text-foreground mb-1 block">Required Modules (comma-separated)</label>
             <Input
               value={form.requires_modules}
               onChange={e => updateField('requires_modules', e.target.value)}
@@ -406,27 +406,27 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
         </div>
 
         <div className="flex items-center gap-6">
-          <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+          <label className="flex items-center gap-2 text-sm text-foreground">
             <input
               type="checkbox"
               checked={form.requires_elevation}
               onChange={e => updateField('requires_elevation', e.target.checked)}
-              className="rounded border-[#1e2130]"
+              className="rounded border-border"
             />
             Requires elevation (Run as Administrator)
           </label>
 
           {/* Share toggle — only for owners/admins editing an existing template */}
           {templateId && template && canShareScriptTemplate && (
-            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
+            <label className="flex items-center gap-2 text-sm text-foreground">
               <input
                 type="checkbox"
                 checked={template.team_id !== null}
                 onChange={e => handleShare(e.target.checked)}
-                className="rounded border-[#1e2130]"
+                className="rounded border-border"
               />
               Share with team
-              <span className="text-xs text-[#848b9b]">(visible to all team members)</span>
+              <span className="text-xs text-muted-foreground">(visible to all team members)</span>
             </label>
           )}
         </div>
@@ -434,10 +434,10 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
       {/* ── Script Body ───────────────────────────────────────────── */}
       <section className="card-flat p-5 space-y-3">
-        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
           Script Body <span className="text-red-400">*</span>
         </p>
-        <p className="text-xs text-[#848b9b]">
+        <p className="text-xs text-muted-foreground">
           Use <code className="font-sans text-xs text-amber-400">{'{{param_key}}'}</code> for parameter placeholders.
           Supports <code className="font-sans text-xs text-amber-400">{'{% if param %} ... {% endif %}'}</code> conditionals
           and filters like <code className="font-sans text-xs text-amber-400">{'{{ param | as_secure_string }}'}</code>.
@@ -452,7 +452,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
           <button
             type="button"
             onClick={handleDetectParameters}
-            className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-lg transition-all"
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-lg transition-all"
           >
             <Scan size={14} />
             Detect Parameters
@@ -460,7 +460,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
         )}
 
         {detectionSummary && (
-          <p className="text-xs text-[#848b9b] italic">{detectionSummary}</p>
+          <p className="text-xs text-muted-foreground italic">{detectionSummary}</p>
         )}
 
         {showStepper && detectedCandidates.length > 0 && (
@@ -476,8 +476,8 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
       {/* ── Parameters Schema ─────────────────────────────────────── */}
       <section className="card-flat p-5 space-y-3">
-        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Parameters</p>
-        <p className="text-xs text-[#848b9b]">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Parameters</p>
+        <p className="text-xs text-muted-foreground">
           Define form fields that users fill in when generating a script. Each parameter maps to a <code className="font-sans text-xs text-amber-400">{'{{key}}'}</code> placeholder in the script body.
         </p>
         <ParameterSchemaBuilder
@@ -487,14 +487,14 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
       </section>
 
       {/* ── Fixed Action Bar ──────────────────────────────────────── */}
-      <div className="fixed bottom-0 left-0 right-0 z-20 border-t border-[#1e2130] bg-[#0c0d10]/80 px-6 py-3">
+      <div className="fixed bottom-0 left-0 right-0 z-20 border-t border-border bg-background/80 px-6 py-3">
         <div className="max-w-5xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-3">
             <button
               type="button"
               onClick={handleSave}
               disabled={isSaving}
-              className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-5 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center gap-1.5 bg-primary text-white font-semibold text-sm px-5 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
               {templateId ? 'Save Changes' : 'Create Template'}
@@ -502,7 +502,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             <button
               type="button"
               onClick={handleBack}
-              className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-4 py-2"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors px-4 py-2"
             >
               Cancel
             </button>
@@ -522,7 +522,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
                 <button
                   type="button"
                   onClick={() => setDeleteConfirm(false)}
-                  className="text-xs font-sans text-xs text-[#848b9b] hover:text-[#e2e5eb] px-2 py-1"
+                  className="text-xs font-sans text-xs text-muted-foreground hover:text-foreground px-2 py-1"
                 >
                   Cancel
                 </button>
diff --git a/frontend/src/components/script-editor/ScriptTemplateListView.tsx b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
index 8c0bb38c..c195e6ef 100644
--- a/frontend/src/components/script-editor/ScriptTemplateListView.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
@@ -71,7 +71,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
       {/* Back link */}
       <Link
         to="/scripts"
-        className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors w-fit"
+        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors w-fit"
       >
         <ArrowLeft size={12} />
         Back to Script Library
@@ -80,8 +80,8 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
       {/* Header row */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">Manage Templates</h1>
-          <p className="text-sm text-[#848b9b] mt-1">
+          <h1 className="text-2xl font-heading font-bold text-foreground">Manage Templates</h1>
+          <p className="text-sm text-muted-foreground mt-1">
             Create and edit PowerShell script templates.
           </p>
         </div>
@@ -89,7 +89,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
           <button
             type="button"
             onClick={onCreate}
-            className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all"
+            className="flex items-center gap-1.5 bg-primary text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all"
           >
             <Plus size={16} />
             New Template
@@ -99,25 +99,25 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
 
       {/* Search */}
       <div className="relative w-64">
-        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#848b9b] pointer-events-none" />
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
         <input
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
           placeholder="Search templates…"
-          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
+          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
         />
       </div>
 
       {/* Template list */}
       {isLoading ? (
         <div className="flex items-center justify-center py-12">
-          <Loader2 size={28} className="text-[#22d3ee] animate-spin" />
+          <Loader2 size={28} className="text-primary animate-spin" />
         </div>
       ) : templates.length === 0 ? (
         <div className="card-flat flex flex-col items-center justify-center gap-3 py-12 text-center">
-          <FileCode size={32} className="text-[#848b9b]/40" />
-          <p className="text-sm text-[#848b9b]">
+          <FileCode size={32} className="text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
             {searchQuery ? 'No templates match your search' : 'No templates yet. Create your first one!'}
           </p>
         </div>
@@ -125,28 +125,28 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
         <div className="card-flat overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-[#1e2130]">
-                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Name</th>
-                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Category</th>
-                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Complexity</th>
-                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Scope</th>
-                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Uses</th>
-                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Actions</th>
+              <tr className="border-b border-border">
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Name</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Category</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Complexity</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Scope</th>
+                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Uses</th>
+                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Actions</th>
               </tr>
             </thead>
             <tbody>
               {templates.map(t => (
                 <tr
                   key={t.id}
-                  className="border-b border-[#1e2130] last:border-b-0 hover:bg-[#14161d] transition-colors"
+                  className="border-b border-border last:border-b-0 hover:bg-card transition-colors"
                 >
                   <td className="px-4 py-3">
-                    <span className="text-[#e2e5eb] font-medium">{t.name}</span>
+                    <span className="text-foreground font-medium">{t.name}</span>
                     {t.description && (
-                      <p className="text-xs text-[#848b9b] line-clamp-1 mt-0.5">{t.description}</p>
+                      <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{t.description}</p>
                     )}
                   </td>
-                  <td className="px-4 py-3 text-[#848b9b]">{getCategoryName(t.category_id)}</td>
+                  <td className="px-4 py-3 text-muted-foreground">{getCategoryName(t.category_id)}</td>
                   <td className="px-4 py-3">
                     <span className={cn('font-sans text-xs text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[t.complexity])}>
                       {t.complexity}
@@ -156,13 +156,13 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                     <span className={cn(
                       'inline-flex items-center gap-1 font-sans text-xs text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
                       t.team_id
-                        ? 'text-[#22d3ee] bg-[rgba(34,211,238,0.10)] border-primary/20'
-                        : 'text-[#848b9b] bg-white/5 border-[#1e2130]'
+                        ? 'text-primary bg-accent-dim border-primary/20'
+                        : 'text-muted-foreground bg-white/5 border-border'
                     )}>
                       {t.team_id ? <><Users size={10} /> Team</> : <><UserIcon size={10} /> Personal</>}
                     </span>
                   </td>
-                  <td className="px-4 py-3 text-right text-[#848b9b]">{t.usage_count}</td>
+                  <td className="px-4 py-3 text-right text-muted-foreground">{t.usage_count}</td>
                   <td className="px-4 py-3 text-right">
                     <div className="flex items-center justify-end gap-1">
                       {canManageScriptTemplate(t) && (
@@ -170,7 +170,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                           <button
                             type="button"
                             onClick={() => onEdit(t.id)}
-                            className="p-1.5 rounded-md text-[#848b9b] hover:text-[#e2e5eb] hover:bg-white/5 transition-colors"
+                            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-white/5 transition-colors"
                             title="Edit template"
                           >
                             <Pencil size={14} />
@@ -187,7 +187,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                               <button
                                 type="button"
                                 onClick={() => setDeleteConfirm(null)}
-                                className="text-[0.625rem] font-sans text-xs text-[#848b9b] hover:text-[#e2e5eb] px-1.5 py-0.5"
+                                className="text-[0.625rem] font-sans text-xs text-muted-foreground hover:text-foreground px-1.5 py-0.5"
                               >
                                 Cancel
                               </button>
@@ -196,7 +196,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                             <button
                               type="button"
                               onClick={() => setDeleteConfirm(t.id)}
-                              className="p-1.5 rounded-md text-[#848b9b] hover:text-rose-500 hover:bg-white/5 transition-colors"
+                              className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-white/5 transition-colors"
                               title="Delete template"
                             >
                               <Trash2 size={14} />
diff --git a/frontend/src/components/scripts/PowerShellHighlighter.tsx b/frontend/src/components/scripts/PowerShellHighlighter.tsx
index faf5c2e9..632e6299 100644
--- a/frontend/src/components/scripts/PowerShellHighlighter.tsx
+++ b/frontend/src/components/scripts/PowerShellHighlighter.tsx
@@ -40,7 +40,7 @@ const TOKEN_CLASSES: Record<string, string> = {
   string: 'text-[#a5d6ff]',
   placeholder: 'text-amber-400 underline decoration-dashed',
   variable: 'text-[#79c0ff]',
-  cmdlet: 'text-[#22d3ee]',
+  cmdlet: 'text-primary',
   parameter: 'text-[#d2a8ff]',
   keyword: 'text-[#ff7b72]',
 }
diff --git a/frontend/src/components/scripts/ScriptConfigurePane.tsx b/frontend/src/components/scripts/ScriptConfigurePane.tsx
index d82fbc21..d9bfd6b2 100644
--- a/frontend/src/components/scripts/ScriptConfigurePane.tsx
+++ b/frontend/src/components/scripts/ScriptConfigurePane.tsx
@@ -171,7 +171,7 @@ export function ScriptConfigurePane({ canGenerate, onBack }: Props) {
             type="button"
             onClick={() => generate()}
             disabled={isGenerating || !canGenerate}
-            className="w-full flex items-center justify-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
+            className="w-full flex items-center justify-center gap-1.5 bg-primary text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100"
           >
             {isGenerating && <Loader2 size={14} className="animate-spin" />}
             Generate Script
diff --git a/frontend/src/components/scripts/ScriptParameterForm.tsx b/frontend/src/components/scripts/ScriptParameterForm.tsx
index 14fb5748..b741f509 100644
--- a/frontend/src/components/scripts/ScriptParameterForm.tsx
+++ b/frontend/src/components/scripts/ScriptParameterForm.tsx
@@ -43,7 +43,7 @@ export function ScriptParameterForm({ canGenerate }: Props) {
 
   if (parameters.length === 0) {
     return (
-      <div className="flex items-center gap-2 rounded-lg border border-border bg-[#14161d] px-3 py-3">
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-3">
         <Terminal size={14} className="text-muted-foreground shrink-0" />
         <p className="text-xs text-muted-foreground">
           This template has no parameters — click <span className="text-foreground font-medium">Generate</span> to produce the script.
diff --git a/frontend/src/components/session/AddSupportingDataModal.tsx b/frontend/src/components/session/AddSupportingDataModal.tsx
index a0b82e85..23a85883 100644
--- a/frontend/src/components/session/AddSupportingDataModal.tsx
+++ b/frontend/src/components/session/AddSupportingDataModal.tsx
@@ -130,8 +130,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
           className={cn(
             'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
             activeTab === 'text_snippet'
-              ? 'bg-[#14161d] text-[#e2e5eb] shadow-sm'
-              : 'text-[#848b9b] hover:text-[#e2e5eb]'
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
           )}
         >
           <Code2 className="h-4 w-4" />
@@ -143,8 +143,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
           className={cn(
             'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
             activeTab === 'screenshot'
-              ? 'bg-[#14161d] text-[#e2e5eb] shadow-sm'
-              : 'text-[#848b9b] hover:text-[#e2e5eb]'
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
           )}
         >
           <ImageIcon className="h-4 w-4" />
@@ -154,7 +154,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
 
       {/* Label */}
       <div className="mb-4">
-        <label htmlFor="sd-label" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="sd-label" className="mb-1 block text-sm font-medium text-foreground">
           Label
         </label>
         <input
@@ -164,8 +164,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
           onChange={(e) => setLabel(e.target.value)}
           placeholder={activeTab === 'text_snippet' ? 'e.g. Error log output' : 'e.g. Blue screen photo'}
           className={cn(
-            'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-            'text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'w-full rounded-md border border-border bg-card px-3 py-2 text-sm',
+            'text-foreground placeholder:text-muted-foreground',
             'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
           )}
         />
@@ -174,7 +174,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
       {/* Text Snippet Tab Content */}
       {activeTab === 'text_snippet' && (
         <div className="mb-4">
-          <label htmlFor="sd-content" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+          <label htmlFor="sd-content" className="mb-1 block text-sm font-medium text-foreground">
             Content
           </label>
           <textarea
@@ -184,8 +184,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
             placeholder="Paste log output, error messages, config snippets..."
             rows={8}
             className={cn(
-              'w-full resize-y rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-              'font-mono text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'w-full resize-y rounded-md border border-border bg-card px-3 py-2 text-sm',
+              'font-mono text-foreground placeholder:text-muted-foreground',
               'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
@@ -195,17 +195,17 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
       {/* Screenshot Tab Content */}
       {activeTab === 'screenshot' && (
         <div className="mb-4" onPaste={handlePaste}>
-          <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+          <label className="mb-1 block text-sm font-medium text-foreground">
             Image
           </label>
           {imageBase64 ? (
-            <div className="relative rounded-md border border-[#1e2130] bg-[#14161d] p-2">
+            <div className="relative rounded-md border border-border bg-card p-2">
               <img
                 src={`data:${imageContentType};base64,${imageBase64}`}
                 alt="Preview"
                 className="mx-auto max-h-48 rounded object-contain"
               />
-              <p className="mt-2 text-center text-xs text-[#848b9b]">{imageFileName}</p>
+              <p className="mt-2 text-center text-xs text-muted-foreground">{imageFileName}</p>
               <button
                 type="button"
                 onClick={() => {
@@ -214,7 +214,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
                   setImageFileName(null)
                   if (fileInputRef.current) fileInputRef.current.value = ''
                 }}
-                className="mt-2 w-full text-center text-xs text-[#848b9b] hover:text-[#e2e5eb]"
+                className="mt-2 w-full text-center text-xs text-muted-foreground hover:text-foreground"
               >
                 Remove and choose another
               </button>
@@ -223,13 +223,13 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
             <div
               onClick={() => fileInputRef.current?.click()}
               className={cn(
-                'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-[#1e2130]',
-                'bg-[#14161d]/50 py-10 transition-colors hover:border-muted-foreground'
+                'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-border',
+                'bg-card/50 py-10 transition-colors hover:border-muted-foreground'
               )}
             >
-              <Upload className="h-8 w-8 text-[#848b9b]" />
-              <p className="text-sm text-[#848b9b]">Click to upload or paste from clipboard</p>
-              <p className="text-xs text-[#848b9b]">PNG, JPEG, or SVG - max 2MB</p>
+              <Upload className="h-8 w-8 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Click to upload or paste from clipboard</p>
+              <p className="text-xs text-muted-foreground">PNG, JPEG, or SVG - max 2MB</p>
             </div>
           )}
           <input
diff --git a/frontend/src/components/session/CSATModal.tsx b/frontend/src/components/session/CSATModal.tsx
index 7592c69d..f080c232 100644
--- a/frontend/src/components/session/CSATModal.tsx
+++ b/frontend/src/components/session/CSATModal.tsx
@@ -40,7 +40,7 @@ export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={handleSkip} title="How was this flow?" size="sm">
       <div className="space-y-4">
-        <p className="text-sm text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
           Your feedback helps flow authors improve troubleshooting paths.
         </p>
 
@@ -60,7 +60,7 @@ export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
                   'transition-colors',
                   (hoveredRating || rating) >= value
                     ? 'fill-yellow-400 text-yellow-400'
-                    : 'fill-none text-[#848b9b]'
+                    : 'fill-none text-muted-foreground'
                 )}
               />
             </button>
@@ -74,21 +74,21 @@ export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
           placeholder="Any comments? (optional)"
           maxLength={500}
           rows={3}
-          className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 resize-none"
+          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 resize-none"
         />
 
         {/* Actions */}
         <div className="flex items-center justify-between">
           <button
             onClick={handleSkip}
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             Skip
           </button>
           <button
             onClick={handleSubmit}
             disabled={rating === 0 || submitting}
-            className="rounded-lg bg-[#22d3ee] text-white px-4 py-2 text-sm font-semibold hover:brightness-110 transition-opacity disabled:opacity-50"
+            className="rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 transition-opacity disabled:opacity-50"
           >
             {submitting ? 'Submitting...' : 'Submit'}
           </button>
diff --git a/frontend/src/components/session/ContinuationModal.tsx b/frontend/src/components/session/ContinuationModal.tsx
index 4a734cb1..07ec81d2 100644
--- a/frontend/src/components/session/ContinuationModal.tsx
+++ b/frontend/src/components/session/ContinuationModal.tsx
@@ -47,7 +47,7 @@ export function ContinuationModal({
         {/* Descendant Selection */}
         {hasDescendants && (
           <div>
-            <p className="mb-4 text-sm text-[#848b9b]">
+            <p className="mb-4 text-sm text-muted-foreground">
               Select the next step in your troubleshooting path:
             </p>
 
@@ -58,20 +58,20 @@ export function ContinuationModal({
                   onClick={() => onSelectNode(node.id)}
                   title={`From: ${node.parentOptionLabel}`}
                   className={cn(
-                    'flex w-full items-center gap-3 rounded-lg border border-[#1e2130] p-3 text-left transition-colors',
-                    'hover:border-[#1e2130] hover:bg-accent'
+                    'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
+                    'hover:border-border hover:bg-accent'
                   )}
                 >
                   <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent">
                     {nodeTypeIcons[node.type]}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-[#e2e5eb]">{node.label}</p>
-                    <p className="text-xs text-[#848b9b]">
+                    <p className="truncate font-medium text-foreground">{node.label}</p>
+                    <p className="text-xs text-muted-foreground">
                       {nodeTypeLabels[node.type]}
                     </p>
                   </div>
-                  <ArrowRight className="h-4 w-4 shrink-0 text-[#848b9b]" />
+                  <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
                 </button>
               ))}
             </div>
@@ -81,11 +81,11 @@ export function ContinuationModal({
         {/* Divider */}
         {hasDescendants && (
           <div className="flex items-center gap-4">
-            <div className="h-px flex-1 bg-[#1e2130]" />
-            <span className="text-xs font-medium uppercase tracking-wide text-[#848b9b]">
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               Or
             </span>
-            <div className="h-px flex-1 bg-[#1e2130]" />
+            <div className="h-px flex-1 bg-border" />
           </div>
         )}
 
@@ -102,8 +102,8 @@ export function ContinuationModal({
               <GitBranch className="h-5 w-5 text-amber-500" />
             </div>
             <div className="flex-1">
-              <p className="font-medium text-[#e2e5eb]">Build Custom Branch</p>
-              <p className="text-sm text-[#848b9b]">
+              <p className="font-medium text-foreground">Build Custom Branch</p>
+              <p className="text-sm text-muted-foreground">
                 Create your own troubleshooting path with custom steps
               </p>
             </div>
diff --git a/frontend/src/components/session/ExportPreviewModal.tsx b/frontend/src/components/session/ExportPreviewModal.tsx
index c2a4d8a5..a35bd0b4 100644
--- a/frontend/src/components/session/ExportPreviewModal.tsx
+++ b/frontend/src/components/session/ExportPreviewModal.tsx
@@ -73,9 +73,9 @@ export function ExportPreviewModal({
     <Modal isOpen={isOpen} onClose={handleClose} title="Export Preview" size="xl">
       {/* Filename, format info, and controls */}
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm text-[#848b9b]">
-          Filename: <span className="font-mono text-[#e2e5eb]">{filename}</span>
-          <span className="ml-3 rounded bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
+          Filename: <span className="font-mono text-foreground">{filename}</span>
+          <span className="ml-3 rounded bg-accent px-2 py-0.5 text-xs text-muted-foreground">
             {format === 'markdown' ? 'Markdown' : format === 'html' ? 'HTML' : format === 'psa' ? 'PSA' : format === 'pdf' ? 'PDF' : 'Plain Text'}
           </span>
           {isModified && (
@@ -85,23 +85,23 @@ export function ExportPreviewModal({
         <div className="flex flex-col items-end gap-1">
           <div className="flex items-center gap-3">
             {onToggleSummary && (
-              <label className="flex items-center gap-2 text-sm text-[#848b9b] cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
                 <input
                   type="checkbox"
                   checked={includeSummary}
                   onChange={(e) => onToggleSummary(e.target.checked)}
-                  className="h-4 w-4 rounded border-[#1e2130] bg-[#14161d]"
+                  className="h-4 w-4 rounded border-border bg-card"
                 />
                 Include Summary
               </label>
             )}
             {onToggleRedaction && (
-              <label className="flex items-center gap-2 text-sm text-[#848b9b] cursor-pointer">
+              <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
                 <input
                   type="checkbox"
                   checked={redactionEnabled}
                   onChange={(e) => onToggleRedaction(e.target.checked)}
-                  className="h-4 w-4 rounded border-[#1e2130] bg-[#14161d]"
+                  className="h-4 w-4 rounded border-border bg-card"
                 />
                 Mask Sensitive Data
               </label>
@@ -118,13 +118,13 @@ export function ExportPreviewModal({
             </p>
           )}
           {redactionEnabled && redactionSummary && redactionSummary.total === 0 && (
-            <p className="text-xs text-[#848b9b]">No sensitive data detected</p>
+            <p className="text-xs text-muted-foreground">No sensitive data detected</p>
           )}
           {isModified && (
             <button
               type="button"
               onClick={handleReset}
-              className="flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
               title="Reset to original"
             >
               <RotateCcw className="h-3 w-3" />
@@ -137,14 +137,14 @@ export function ExportPreviewModal({
       {format === 'pdf' ? (
         /* PDF download-only UI */
         <div className="flex flex-col items-center justify-center py-12">
-          <FileDown className="mb-4 h-12 w-12 text-[#848b9b]" />
-          <p className="text-[#848b9b] mb-4">PDF exports are generated server-side with your team&apos;s branding.</p>
+          <FileDown className="mb-4 h-12 w-12 text-muted-foreground" />
+          <p className="text-muted-foreground mb-4">PDF exports are generated server-side with your team&apos;s branding.</p>
           <button
             type="button"
             onClick={onDownloadPdf}
             disabled={pdfLoading}
             className={cn(
-              'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] text-white px-6 py-3 text-sm font-semibold',
+              'inline-flex items-center gap-2 rounded-lg bg-primary text-white px-6 py-3 text-sm font-semibold',
               'hover:brightness-110 active:scale-[0.98] transition-all',
               'disabled:opacity-60 disabled:cursor-not-allowed'
             )}
@@ -168,8 +168,8 @@ export function ExportPreviewModal({
             value={editedContent}
             onChange={(e) => setEditedContent(e.target.value)}
             className={cn(
-              'h-96 w-full resize-y rounded-md border border-[#1e2130] bg-[#14161d] p-4',
-              'font-mono text-sm text-[#e2e5eb]',
+              'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
+              'font-mono text-sm text-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
@@ -180,8 +180,8 @@ export function ExportPreviewModal({
               type="button"
               onClick={handleCopy}
               className={cn(
-                'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium',
-                'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+                'text-muted-foreground hover:bg-accent hover:text-foreground',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
             >
@@ -201,7 +201,7 @@ export function ExportPreviewModal({
               type="button"
               onClick={handleDownload}
               className={cn(
-                'flex items-center gap-2 rounded-md bg-[#22d3ee] text-white px-3 py-2 text-sm font-medium',
+                'flex items-center gap-2 rounded-md bg-primary text-white px-3 py-2 text-sm font-medium',
                 'hover:brightness-110 focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
             >
diff --git a/frontend/src/components/session/ForkTreeModal.tsx b/frontend/src/components/session/ForkTreeModal.tsx
index a70e3499..61731ad8 100644
--- a/frontend/src/components/session/ForkTreeModal.tsx
+++ b/frontend/src/components/session/ForkTreeModal.tsx
@@ -69,11 +69,11 @@ export function ForkTreeModal({
       <div className="space-y-4">
         <div className="flex items-start gap-3 rounded-lg bg-accent/50 p-4">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent">
-            <GitFork className="h-5 w-5 text-[#e2e5eb]" />
+            <GitFork className="h-5 w-5 text-foreground" />
           </div>
           <div>
-            <p className="font-medium text-[#e2e5eb]">You've created a custom troubleshooting path!</p>
-            <p className="mt-1 text-sm text-[#848b9b]">
+            <p className="font-medium text-foreground">You've created a custom troubleshooting path!</p>
+            <p className="mt-1 text-sm text-muted-foreground">
               Save it as your own personal tree to reuse this troubleshooting flow in the future.
             </p>
           </div>
@@ -81,7 +81,7 @@ export function ForkTreeModal({
 
         <div className="space-y-4">
           <div>
-            <label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
+            <label htmlFor="tree-name" className="mb-1.5 block text-sm font-medium text-foreground">
               Tree Name <span className="text-red-400">*</span>
             </label>
             <Input
@@ -94,8 +94,8 @@ export function ForkTreeModal({
           </div>
 
           <div>
-            <label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
-              Description <span className="text-[#848b9b]">(optional)</span>
+            <label htmlFor="tree-description" className="mb-1.5 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <Textarea
               id="tree-description"
@@ -112,7 +112,7 @@ export function ForkTreeModal({
           <p className="text-sm text-red-400">{error}</p>
         )}
 
-        <p className="text-xs text-[#848b9b]">
+        <p className="text-xs text-muted-foreground">
           The new tree will include your custom steps and will be saved to your personal tree library.
         </p>
       </div>
diff --git a/frontend/src/components/session/PostStepActionModal.tsx b/frontend/src/components/session/PostStepActionModal.tsx
index 7ab53c48..efca4230 100644
--- a/frontend/src/components/session/PostStepActionModal.tsx
+++ b/frontend/src/components/session/PostStepActionModal.tsx
@@ -28,8 +28,8 @@ export function PostStepActionModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="What would you like to do?">
       <div className="space-y-3">
-        <p className="mb-4 text-sm text-[#848b9b]">
-          You've created: <strong className="text-[#e2e5eb]">{step.title}</strong>
+        <p className="mb-4 text-sm text-muted-foreground">
+          You've created: <strong className="text-foreground">{step.title}</strong>
         </p>
 
         {/* Save for Later - Only show if not already from library */}
@@ -38,7 +38,7 @@ export function PostStepActionModal({
             onClick={onSaveForLater}
             disabled={isSaving}
             className={cn(
-              'w-full rounded-lg border border-[#1e2130] p-4 text-left transition-colors',
+              'w-full rounded-lg border border-border p-4 text-left transition-colors',
               'hover:border-primary hover:bg-accent',
               'disabled:cursor-not-allowed disabled:opacity-50'
             )}
@@ -48,8 +48,8 @@ export function PostStepActionModal({
                 <Bookmark className="h-5 w-5 text-blue-500" />
               </div>
               <div>
-                <p className="font-medium text-[#e2e5eb]">Save for Later</p>
-                <p className="text-sm text-[#848b9b]">
+                <p className="font-medium text-foreground">Save for Later</p>
+                <p className="text-sm text-muted-foreground">
                   Add to your step library for future use
                 </p>
               </div>
@@ -62,8 +62,8 @@ export function PostStepActionModal({
           onClick={onUseNow}
           disabled={isSaving}
           className={cn(
-            'w-full rounded-lg border border-[#1e2130] p-4 text-left transition-colors',
-            'hover:border-[#1e2130] hover:bg-accent',
+            'w-full rounded-lg border border-border p-4 text-left transition-colors',
+            'hover:border-border hover:bg-accent',
             'disabled:cursor-not-allowed disabled:opacity-50'
           )}
         >
@@ -73,7 +73,7 @@ export function PostStepActionModal({
             </div>
             <div>
               <p className="font-medium">Use Now</p>
-              <p className="text-sm text-[#848b9b]">
+              <p className="text-sm text-muted-foreground">
                 Insert into this session and continue troubleshooting
               </p>
             </div>
@@ -86,7 +86,7 @@ export function PostStepActionModal({
             onClick={onBoth}
             disabled={isSaving}
             className={cn(
-              'w-full rounded-lg border border-[#1e2130] p-4 text-left transition-colors',
+              'w-full rounded-lg border border-border p-4 text-left transition-colors',
               'hover:border-primary hover:bg-accent',
               'disabled:cursor-not-allowed disabled:opacity-50'
             )}
@@ -96,8 +96,8 @@ export function PostStepActionModal({
                 <BookmarkPlus className="h-5 w-5 text-purple-500" />
               </div>
               <div>
-                <p className="font-medium text-[#e2e5eb]">Do Both</p>
-                <p className="text-sm text-[#848b9b]">
+                <p className="font-medium text-foreground">Do Both</p>
+                <p className="text-sm text-muted-foreground">
                   Save to library AND use in this session
                 </p>
               </div>
@@ -106,7 +106,7 @@ export function PostStepActionModal({
         )}
 
         {isSaving && (
-          <p className="text-center text-sm text-[#848b9b]">Saving...</p>
+          <p className="text-center text-sm text-muted-foreground">Saving...</p>
         )}
       </div>
     </Modal>
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index a23d80bd..24e7ff3f 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -36,21 +36,21 @@ export function SaveSessionAsTreeModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="bg-[#14161d] border border-[#1e2130] w-full max-w-lg rounded-lg p-6 shadow-lg">
+      <div className="bg-card border border-border w-full max-w-lg rounded-lg p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Save Session as Tree</h2>
+          <h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
         </div>
 
         {/* Info */}
-        <p className="mb-4 text-sm text-[#848b9b]">
+        <p className="mb-4 text-sm text-muted-foreground">
           Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
         </p>
 
@@ -58,8 +58,8 @@ export function SaveSessionAsTreeModal({
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Tree Name */}
           <div>
-            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
-              Tree Name <span className="text-[#848b9b]">(optional)</span>
+            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
+              Tree Name <span className="text-muted-foreground">(optional)</span>
             </label>
             <Input
               id="treeName"
@@ -74,8 +74,8 @@ export function SaveSessionAsTreeModal({
 
           {/* Description */}
           <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
-              Description <span className="text-[#848b9b]">(optional)</span>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <Textarea
               id="description"
@@ -89,7 +89,7 @@ export function SaveSessionAsTreeModal({
 
           {/* Status */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">Status</label>
+            <label className="mb-2 block text-sm font-medium text-foreground">Status</label>
             <div className="flex gap-4">
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -99,9 +99,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'draft'}
                   onChange={() => setStatus('draft')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-[#1e2130] text-[#e2e5eb] focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-[#e2e5eb]">Draft</span>
+                <span className="text-sm text-foreground">Draft</span>
               </label>
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -111,9 +111,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'published'}
                   onChange={() => setStatus('published')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-[#1e2130] text-[#e2e5eb] focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-[#e2e5eb]">Published</span>
+                <span className="text-sm text-foreground">Published</span>
               </label>
             </div>
           </div>
diff --git a/frontend/src/components/session/ScratchpadSidebar.tsx b/frontend/src/components/session/ScratchpadSidebar.tsx
index db196a29..3c27ecbb 100644
--- a/frontend/src/components/session/ScratchpadSidebar.tsx
+++ b/frontend/src/components/session/ScratchpadSidebar.tsx
@@ -124,8 +124,8 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
         onClick={() => setIsCollapsed(false)}
         className={cn(
           'fixed right-2 top-1/2 z-40 -translate-y-1/2 rounded-md p-2.5',
-          'bg-[#14161d] border border-[#1e2130] shadow-md',
-          'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+          'bg-card border border-border shadow-md',
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
           'transition-opacity duration-200',
           isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
         )}
@@ -153,29 +153,29 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
           'fixed z-40',
           'inset-0 sm:inset-auto sm:right-2 sm:top-1/2 sm:-translate-y-1/2',
           'flex w-full flex-col sm:h-[55vh] sm:w-[420px]',
-          'border-[#1e2130] bg-[#14161d]/95  shadow-xl sm:rounded-lg sm:border',
+          'border-border bg-card/95  shadow-xl sm:rounded-lg sm:border',
           'transition-transform duration-200 ease-out',
           isCollapsed ? 'translate-x-full' : 'translate-x-0'
         )}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-2">
+        <div className="flex items-center justify-between border-b border-border px-3 py-2">
           <div className="flex items-center gap-2">
-            <StickyNote className="h-4 w-4 text-[#848b9b]" />
-            <span className="text-sm font-medium text-[#e2e5eb]">Scratchpad</span>
-            <span className="text-xs text-[#848b9b]">Ctrl+/</span>
+            <StickyNote className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">Scratchpad</span>
+            <span className="text-xs text-muted-foreground">Ctrl+/</span>
           </div>
           <div className="flex items-center gap-1">
             <button
               onClick={() => setShowPreview(!showPreview)}
-              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title={showPreview ? 'Edit' : 'Preview'}
             >
               {showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
             </button>
             <button
               onClick={() => setIsCollapsed(true)}
-              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Close scratchpad"
               aria-label="Close scratchpad"
             >
@@ -191,7 +191,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               {content.trim() ? (
                 <MarkdownContent content={content} className="text-sm" />
               ) : (
-                <p className="text-sm italic text-[#848b9b]">Nothing to preview</p>
+                <p className="text-sm italic text-muted-foreground">Nothing to preview</p>
               )}
             </div>
           ) : (
@@ -202,7 +202,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               placeholder={"Capture IPs, error codes, server names, user info...\n\nSupports markdown formatting."}
               className={cn(
                 'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
-                'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'text-foreground placeholder:text-muted-foreground',
                 'focus:outline-hidden focus:ring-0'
               )}
             />
@@ -210,15 +210,15 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
         </div>
 
         {/* Save Indicator */}
-        <div className="border-t border-[#1e2130] px-3 py-1.5">
+        <div className="border-t border-border px-3 py-1.5">
           <div className="flex items-center gap-1.5 text-xs">
             {saveStatus === 'unsaved' && (
-              <span className="text-[#848b9b]">Unsaved changes</span>
+              <span className="text-muted-foreground">Unsaved changes</span>
             )}
             {saveStatus === 'saving' && (
               <>
-                <Loader2 className="h-3 w-3 animate-spin text-[#848b9b]" />
-                <span className="text-[#848b9b]">Saving...</span>
+                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                <span className="text-muted-foreground">Saving...</span>
               </>
             )}
             {saveStatus === 'saved' && (
@@ -228,7 +228,7 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenCha
               <span className="text-red-400">Save failed</span>
             )}
             {saveStatus === 'idle' && (
-              <span className="text-[#848b9b]">Markdown supported</span>
+              <span className="text-muted-foreground">Markdown supported</span>
             )}
           </div>
         </div>
diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx
index 944fc1ad..ac4c14f5 100644
--- a/frontend/src/components/session/SessionFilters.tsx
+++ b/frontend/src/components/session/SessionFilters.tsx
@@ -93,15 +93,15 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       <div className="flex flex-col gap-3 sm:flex-row">
         {/* Ticket Number Search */}
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search by ticket number..."
             value={filters.ticketNumber}
             onChange={(e) => handleFilterChange('ticketNumber', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-[#1e2130] bg-[#14161d] py-2 pl-9 pr-3',
-              'text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
@@ -109,15 +109,15 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
 
         {/* Client Name Search */}
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search by client name..."
             value={filters.clientName}
             onChange={(e) => handleFilterChange('clientName', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-[#1e2130] bg-[#14161d] py-2 pl-9 pr-3',
-              'text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
@@ -128,8 +128,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           value={filters.treeName}
           onChange={(e) => handleFilterChange('treeName', e.target.value)}
           className={cn(
-            'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-            'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
+            'rounded-md border border-border bg-card px-3 py-2',
+            'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
             'sm:min-w-[200px]'
           )}
         >
@@ -148,19 +148,19 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={() => setShowDatePicker(!showDatePicker)}
             className={cn(
-              'flex w-full items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-              'text-[#e2e5eb] hover:bg-accent',
+              'flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm',
+              'text-foreground hover:bg-accent',
               filters.dateRange?.from && 'border-primary/30'
             )}
           >
-            <Calendar className="h-4 w-4 text-[#848b9b]" />
-            <span className={cn(!filters.dateRange?.from && 'text-[#848b9b]')}>
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className={cn(!filters.dateRange?.from && 'text-muted-foreground')}>
               {formatDateRange(filters.dateRange)}
             </span>
           </button>
 
           {showDatePicker && (
-            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-[#1e2130] bg-[#0c0d10] p-4 shadow-lg">
+            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-background p-4 shadow-lg">
               {/* Date Type Toggle */}
               <div className="mb-3 flex gap-2">
                 <button
@@ -168,8 +168,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'started'
-                      ? 'bg-[#22d3ee] text-white'
-                      : 'border border-[#1e2130] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                      ? 'bg-primary text-white'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Started
@@ -179,8 +179,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'completed'
-                      ? 'bg-[#22d3ee] text-white'
-                      : 'border border-[#1e2130] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                      ? 'bg-primary text-white'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Completed
@@ -194,8 +194,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     key={preset.value}
                     onClick={() => applyDatePreset(preset.value)}
                     className={cn(
-                      'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-[#848b9b]',
-                      'hover:bg-accent/80 hover:text-[#e2e5eb]'
+                      'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent/80 hover:text-foreground'
                     )}
                   >
                     {preset.label}
@@ -227,7 +227,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     setShowDatePicker(false)
                   }}
                   className={cn(
-                    'flex-1 rounded-md bg-[#22d3ee] px-3 py-1.5 text-sm font-medium text-white',
+                    'flex-1 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white',
                     'hover:brightness-110'
                   )}
                 >
@@ -236,8 +236,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                 <button
                   onClick={() => setShowDatePicker(false)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] px-3 py-1.5 text-sm font-medium text-[#848b9b]',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Cancel
@@ -252,8 +252,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={onClear}
             className={cn(
-              'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium',
-              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+              'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Filter className="h-4 w-4" />
@@ -265,9 +265,9 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       {/* Active Filter Chips */}
       {hasActiveFilters && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm text-[#848b9b]">Active filters:</span>
+          <span className="text-sm text-muted-foreground">Active filters:</span>
           {filters.ticketNumber && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#848b9b]">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Ticket: {filters.ticketNumber}
               <button
                 onClick={() => handleFilterChange('ticketNumber', '')}
@@ -278,7 +278,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
             </span>
           )}
           {filters.clientName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#848b9b]">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Client: {filters.clientName}
               <button
                 onClick={() => handleFilterChange('clientName', '')}
@@ -289,7 +289,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
             </span>
           )}
           {filters.treeName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#848b9b]">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Tree: {filters.treeName}
               <button
                 onClick={() => handleFilterChange('treeName', '')}
@@ -300,7 +300,7 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
             </span>
           )}
           {filters.dateRange?.from && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#848b9b]">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               {formatDateRange(filters.dateRange)} ({filters.dateType})
               <button
                 onClick={clearDateRange}
diff --git a/frontend/src/components/session/SessionOutcomeModal.tsx b/frontend/src/components/session/SessionOutcomeModal.tsx
index 9c04cafa..b011444e 100644
--- a/frontend/src/components/session/SessionOutcomeModal.tsx
+++ b/frontend/src/components/session/SessionOutcomeModal.tsx
@@ -66,7 +66,7 @@ export function SessionOutcomeModal({
       )}
     >
       <form key={String(isOpen)} ref={formRef} className="space-y-4">
-        <p className="text-sm text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
           Select the session outcome before completion.
         </p>
         <div className="space-y-2">
@@ -74,7 +74,7 @@ export function SessionOutcomeModal({
             <label
               key={option.value}
               className={cn(
-                'block cursor-pointer rounded-lg border border-[#1e2130] p-3 transition-colors',
+                'block cursor-pointer rounded-lg border border-border p-3 transition-colors',
                 'hover:bg-accent/50'
               )}
             >
@@ -87,8 +87,8 @@ export function SessionOutcomeModal({
                   className="mt-1 h-4 w-4"
                 />
                 <div>
-                  <p className="text-sm font-medium text-[#e2e5eb]">{option.label}</p>
-                  <p className="text-xs text-[#848b9b]">{option.description}</p>
+                  <p className="text-sm font-medium text-foreground">{option.label}</p>
+                  <p className="text-xs text-muted-foreground">{option.description}</p>
                 </div>
               </div>
             </label>
@@ -96,30 +96,30 @@ export function SessionOutcomeModal({
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-[#e2e5eb]">Outcome Notes (optional)</label>
+          <label className="block text-sm font-medium text-foreground">Outcome Notes (optional)</label>
           <textarea
             name="outcome-notes"
             defaultValue=""
             rows={3}
             placeholder="Add context for this outcome..."
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-              'text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-sm text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-[#e2e5eb]">Next Steps / Follow-Up (optional)</label>
+          <label className="block text-sm font-medium text-foreground">Next Steps / Follow-Up (optional)</label>
           <textarea
             name="next-steps"
             defaultValue=""
             rows={3}
             placeholder="Actions to take after this session..."
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-              'text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-sm text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
diff --git a/frontend/src/components/session/SessionTimeline.tsx b/frontend/src/components/session/SessionTimeline.tsx
index 67923ce9..6abbcdde 100644
--- a/frontend/src/components/session/SessionTimeline.tsx
+++ b/frontend/src/components/session/SessionTimeline.tsx
@@ -53,7 +53,7 @@ export function SessionTimeline({
   if (treeType === 'procedural') {
     return (
       <div className="mb-8">
-        <h2 className="mb-4 text-lg font-semibold text-[#e2e5eb]">Procedure Steps</h2>
+        <h2 className="mb-4 text-lg font-semibold text-foreground">Procedure Steps</h2>
         <div className="space-y-2">
           {decisions.map((decision, index) => {
             const isCompleted = decision.answer === 'completed'
@@ -61,31 +61,31 @@ export function SessionTimeline({
               <div
                 key={index}
                 className={cn(
-                  'bg-[#14161d] border border-[#1e2130] rounded-xl p-4',
+                  'bg-card border border-border rounded-xl p-4',
                   isCompleted && 'border-l-2 border-emerald-400/50'
                 )}
               >
                 <div className="flex items-start gap-3">
                   <span className={cn(
                     'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
-                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-[#848b9b]'
+                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-muted-foreground'
                   )}>
                     {isCompleted ? '\u2713' : index + 1}
                   </span>
                   <div className="min-w-0 flex-1">
-                    <p className="font-medium text-[#e2e5eb]">{decision.question || 'Step'}</p>
+                    <p className="font-medium text-foreground">{decision.question || 'Step'}</p>
                     {decision.notes && (
-                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-[#848b9b]">
+                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
-                      <p className="mt-1 text-sm text-[#848b9b]">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Verification: {decision.command_output}
                       </p>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-1 text-xs text-[#848b9b]">
+                      <p className="mt-1 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
@@ -94,7 +94,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
@@ -123,52 +123,52 @@ export function SessionTimeline({
   // Default: troubleshooting decision timeline
   return (
     <div className="mb-8">
-      <h2 className="mb-4 text-lg font-semibold text-[#e2e5eb]">Decision Timeline</h2>
+      <h2 className="mb-4 text-lg font-semibold text-foreground">Decision Timeline</h2>
       <div className="space-y-4">
         <div className="flex items-center gap-3 text-sm">
           <span className="h-3 w-3 rounded-full bg-[#e2e5eb]" />
-          <span className="text-[#848b9b]">
+          <span className="text-muted-foreground">
             Session started: {formatDate(startedAt)}
           </span>
         </div>
 
         {decisions.map((decision, index) => (
-          <div key={index} className="ml-1 border-l-2 border-[#1e2130] pl-6">
+          <div key={index} className="ml-1 border-l-2 border-border pl-6">
             <div className="relative">
               <span className="absolute -left-6.5 top-1 h-2 w-2 rounded-full bg-[#848b9b]" />
-              <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+              <div className="bg-card border border-border rounded-xl p-4">
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex-1">
                     {decision.question && (
-                      <p className="font-medium text-[#e2e5eb]">{decision.question}</p>
+                      <p className="font-medium text-foreground">{decision.question}</p>
                     )}
                     {decision.answer && (
-                      <p className="mt-1 text-sm text-[#e2e5eb]">Answer: {decision.answer}</p>
+                      <p className="mt-1 text-sm text-foreground">Answer: {decision.answer}</p>
                     )}
                     {decision.action_performed && (
-                      <p className="mt-1 text-sm text-[#848b9b]">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Action: {decision.action_performed}
                       </p>
                     )}
                     {decision.notes && (
-                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-[#848b9b]">
+                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
                       <div className="mt-2">
-                        <p className="mb-1 text-xs font-medium text-[#848b9b]">Command Output</p>
-                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-[#848b9b] whitespace-pre-wrap">
+                        <p className="mb-1 text-xs font-medium text-muted-foreground">Command Output</p>
+                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
                           {decision.command_output}
                         </pre>
                       </div>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-2 text-xs text-[#848b9b]">
+                      <p className="mt-2 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
-                    <p className="mt-2 text-xs text-[#848b9b]">
+                    <p className="mt-2 text-xs text-muted-foreground">
                       {formatDate(decision.timestamp)}
                     </p>
                   </div>
@@ -176,7 +176,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
diff --git a/frontend/src/components/session/ShareSessionModal.tsx b/frontend/src/components/session/ShareSessionModal.tsx
index a09f069d..0191e47e 100644
--- a/frontend/src/components/session/ShareSessionModal.tsx
+++ b/frontend/src/components/session/ShareSessionModal.tsx
@@ -191,14 +191,14 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
       }
     >
       {/* Subtitle */}
-      <p className="-mt-2 mb-4 text-sm text-[#848b9b]">{sessionLabel}</p>
+      <p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
 
       <div className="space-y-6">
         {/* Create Share Form */}
         <div className="space-y-4">
           {/* Visibility */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+            <label className="mb-2 block text-sm font-medium text-foreground">
               Visibility
             </label>
             <div className="space-y-2">
@@ -207,14 +207,14 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 className={cn(
                   'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                   visibility === 'account'
-                    ? 'border-primary/30 bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                    : 'border-[#1e2130] bg-transparent text-[#848b9b] hover:border-[#1e2130] hover:bg-accent'
+                    ? 'border-primary/30 bg-accent-dim text-foreground'
+                    : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                 )}
               >
                 <Users className="h-4 w-4" />
                 <div className="flex-1">
                   <div className="text-sm font-medium">Account Only</div>
-                  <div className="text-xs text-[#848b9b]">Visible to your team</div>
+                  <div className="text-xs text-muted-foreground">Visible to your team</div>
                 </div>
                 {visibility === 'account' && (
                   <div className="h-2 w-2 rounded-full bg-primary" />
@@ -225,14 +225,14 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 className={cn(
                   'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                   visibility === 'public'
-                    ? 'border-primary/30 bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                    : 'border-[#1e2130] bg-transparent text-[#848b9b] hover:border-[#1e2130] hover:bg-accent'
+                    ? 'border-primary/30 bg-accent-dim text-foreground'
+                    : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
                 )}
               >
                 <Globe className="h-4 w-4" />
                 <div className="flex-1">
                   <div className="text-sm font-medium">Public</div>
-                  <div className="text-xs text-[#848b9b]">Anyone with the link</div>
+                  <div className="text-xs text-muted-foreground">Anyone with the link</div>
                 </div>
                 {visibility === 'public' && (
                   <div className="h-2 w-2 rounded-full bg-primary" />
@@ -246,8 +246,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
           {/* Share Name */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
-              Share Name <span className="text-[#848b9b]">(optional)</span>
+            <label className="mb-2 block text-sm font-medium text-foreground">
+              Share Name <span className="text-muted-foreground">(optional)</span>
             </label>
             <Input
               type="text"
@@ -260,7 +260,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
 
           {/* Expiration */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+            <label className="mb-2 block text-sm font-medium text-foreground">
               Expiration
             </label>
             <div className="flex flex-wrap gap-2">
@@ -271,8 +271,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                   className={cn(
                     'rounded-md border px-3 py-1.5 text-sm transition-colors',
                     expirationPreset === preset.value
-                      ? 'border-primary/30 bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                      : 'border-[#1e2130] text-[#848b9b] hover:border-[#1e2130] hover:bg-accent'
+                      ? 'border-primary/30 bg-accent-dim text-foreground'
+                      : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
                   )}
                 >
                   {preset.label}
@@ -285,7 +285,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 value={customDatetime}
                 onChange={(e) => setCustomDatetime(e.target.value)}
                 className={cn(
-                  'mt-2 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                  'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'scheme-dark'
                 )}
@@ -308,7 +308,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
         {/* Existing Shares */}
         {shares.length > 0 && (
           <div>
-            <h3 className="mb-3 text-sm font-medium text-[#e2e5eb]">
+            <h3 className="mb-3 text-sm font-medium text-foreground">
               Active Shares ({shares.length})
             </h3>
             <div className="space-y-3">
@@ -318,7 +318,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                 return (
                   <div
                     key={share.id}
-                    className="bg-[#14161d] border border-[#1e2130] rounded-lg p-4 space-y-2"
+                    className="bg-card border border-border rounded-lg p-4 space-y-2"
                   >
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1 min-w-0">
@@ -326,8 +326,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                           <span className={cn(
                             'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
                             share.visibility === 'public'
-                              ? 'bg-accent text-[#848b9b]'
-                              : 'bg-accent text-[#848b9b]'
+                              ? 'bg-accent text-muted-foreground'
+                              : 'bg-accent text-muted-foreground'
                           )}>
                             {share.visibility === 'public' ? (
                               <Globe className="h-3 w-3" />
@@ -336,11 +336,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                             )}
                             {share.visibility === 'public' ? 'Public' : 'Account'}
                           </span>
-                          <span className="truncate text-sm font-medium text-[#e2e5eb]">
+                          <span className="truncate text-sm font-medium text-foreground">
                             {share.share_name || 'Untitled share'}
                           </span>
                         </div>
-                        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[#848b9b]">
+                        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
                           <span>{getRelativeTime(share.created_at)}</span>
                           <span>
                             {share.view_count > 0
@@ -361,10 +361,10 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                           onClick={() => handleCopyUrl(share)}
                           title="Copy share URL"
                           className={cn(
-                            'rounded-md border border-[#1e2130] p-1.5 text-sm transition-colors',
+                            'rounded-md border border-border p-1.5 text-sm transition-colors',
                             isCopied
                               ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
-                              : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                              : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                           )}
                         >
                           {isCopied ? (
@@ -376,7 +376,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
                         <button
                           onClick={() => handleRevoke(share.id)}
                           title="Revoke share"
-                          className="rounded-md border border-[#1e2130] p-1.5 text-[#848b9b] hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
+                          className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
diff --git a/frontend/src/components/session/SharedSessionTreePreview.tsx b/frontend/src/components/session/SharedSessionTreePreview.tsx
index 679e7033..4b0fceb2 100644
--- a/frontend/src/components/session/SharedSessionTreePreview.tsx
+++ b/frontend/src/components/session/SharedSessionTreePreview.tsx
@@ -44,8 +44,8 @@ function TreeNode({
         className={cn(
           'flex items-center gap-2 px-3 py-1.5 text-sm',
           isInPath
-            ? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-[#e2e5eb]'
-            : 'text-[#848b9b]'
+            ? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-foreground'
+            : 'text-muted-foreground'
         )}
         style={{ paddingLeft: `${depth * 16 + 12}px` }}
       >
@@ -75,9 +75,9 @@ export function SharedSessionTreePreview({
   }
 
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-lg">
-      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-[#1e2130] bg-black/80 px-6 py-4 ">
-        <h3 className="text-sm font-semibold text-[#e2e5eb]">Tree Structure</h3>
+    <div className="bg-card border border-border rounded-lg">
+      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 ">
+        <h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
       </div>
       <div className="max-h-[600px] overflow-y-auto py-2">
         <TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} />
diff --git a/frontend/src/components/session/StepFeedback.tsx b/frontend/src/components/session/StepFeedback.tsx
index be64f7e2..bc34a244 100644
--- a/frontend/src/components/session/StepFeedback.tsx
+++ b/frontend/src/components/session/StepFeedback.tsx
@@ -44,7 +44,7 @@ export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
   return (
     <div className="flex items-center gap-2">
       {showHint && (
-        <span className="text-xs text-[#848b9b]">Was this step helpful?</span>
+        <span className="text-xs text-muted-foreground">Was this step helpful?</span>
       )}
       <button
         onClick={() => handleFeedback(true)}
@@ -53,7 +53,7 @@ export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
           'rounded-md p-1.5 transition-colors',
           feedback === true
             ? 'text-emerald-400 bg-emerald-400/10'
-            : 'text-[#848b9b] hover:text-emerald-400 hover:bg-accent'
+            : 'text-muted-foreground hover:text-emerald-400 hover:bg-accent'
         )}
         title="Helpful"
       >
@@ -66,7 +66,7 @@ export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
           'rounded-md p-1.5 transition-colors',
           feedback === false
             ? 'text-red-400 bg-red-400/10'
-            : 'text-[#848b9b] hover:text-red-400 hover:bg-accent'
+            : 'text-muted-foreground hover:text-red-400 hover:bg-accent'
         )}
         title="Not helpful"
       >
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 462f3b4c..367bd42d 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -80,19 +80,19 @@ export function StepRatingModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
-      <div className="bg-[#14161d] border border-[#1e2130] w-full max-w-2xl max-h-[90vh] flex flex-col rounded-lg shadow-lg">
+      <div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-lg shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div>
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">Rate Your Experience</h2>
-            <p className="mt-1 text-sm text-[#848b9b]">
+            <h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
               Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
             </p>
           </div>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
@@ -104,14 +104,14 @@ export function StepRatingModal({
             {librarySteps.map((step) => {
               const rating = getRating(step.id)
               return (
-                <div key={step.id} className="rounded-lg border border-[#1e2130] bg-[#0c0d10] p-4">
+                <div key={step.id} className="rounded-lg border border-border bg-background p-4">
                   {/* Step Title */}
-                  <h3 className="font-medium text-[#e2e5eb]">{step.title}</h3>
-                  <p className="mt-1 text-sm text-[#848b9b] capitalize">{step.step_type}</p>
+                  <h3 className="font-medium text-foreground">{step.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
 
                   {/* Star Rating */}
                   <div className="mt-3">
-                    <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+                    <label className="mb-1 block text-sm font-medium text-foreground">
                       Rating
                     </label>
                     <StarRating
@@ -123,7 +123,7 @@ export function StepRatingModal({
 
                   {/* Was this helpful? */}
                   <div className="mt-3">
-                    <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+                    <label className="mb-2 block text-sm font-medium text-foreground">
                       Was this helpful?
                     </label>
                     <div className="flex gap-2">
@@ -135,7 +135,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === true
                             ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
-                            : 'border-[#1e2130] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -150,7 +150,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === false
                             ? 'border-red-400/20 bg-red-400/10 text-red-400'
-                            : 'border-[#1e2130] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -162,8 +162,8 @@ export function StepRatingModal({
 
                   {/* Optional Review */}
                   <div className="mt-3">
-                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-[#e2e5eb]">
-                      Review <span className="text-[#848b9b]">(optional)</span>
+                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
+                      Review <span className="text-muted-foreground">(optional)</span>
                     </label>
                     <Textarea
                       id={`review-${step.id}`}
@@ -174,7 +174,7 @@ export function StepRatingModal({
                       rows={2}
                       placeholder="Share your experience with this step..."
                     />
-                    <p className="mt-1 text-xs text-[#848b9b] text-right">
+                    <p className="mt-1 text-xs text-muted-foreground text-right">
                       {rating?.review?.length || 0}/500
                     </p>
                   </div>
@@ -185,7 +185,7 @@ export function StepRatingModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-[#1e2130] px-6 py-4">
+        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
           <Button
             type="button"
             variant="secondary"
diff --git a/frontend/src/components/session/SupportingDataPanel.tsx b/frontend/src/components/session/SupportingDataPanel.tsx
index 5ae44b85..8385f39d 100644
--- a/frontend/src/components/session/SupportingDataPanel.tsx
+++ b/frontend/src/components/session/SupportingDataPanel.tsx
@@ -49,22 +49,22 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
   }
 
   return (
-    <div className="rounded-xl border border-[#1e2130] bg-card/50">
+    <div className="rounded-xl border border-border bg-card/50">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3">
         <button
           type="button"
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center gap-2 text-sm font-medium text-[#e2e5eb] hover:text-[#e2e5eb]/80"
+          className="flex items-center gap-2 text-sm font-medium text-foreground hover:text-foreground/80"
         >
           {isExpanded ? (
-            <ChevronDown className="h-4 w-4 text-[#848b9b]" />
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
           ) : (
-            <ChevronRight className="h-4 w-4 text-[#848b9b]" />
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
           )}
           Supporting Data
           {items.length > 0 && (
-            <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
               {items.length}
             </span>
           )}
@@ -74,7 +74,7 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
           onClick={() => setShowAddModal(true)}
           className={cn(
             'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium',
-            'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all'
+            'bg-primary text-white hover:brightness-110 active:scale-[0.98] transition-all'
           )}
         >
           <Plus className="h-3.5 w-3.5" />
@@ -84,11 +84,11 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
 
       {/* Items list */}
       {isExpanded && (
-        <div className="border-t border-[#1e2130] px-4 py-2">
+        <div className="border-t border-border px-4 py-2">
           {isLoading && items.length === 0 ? (
-            <p className="py-4 text-center text-xs text-[#848b9b]">Loading...</p>
+            <p className="py-4 text-center text-xs text-muted-foreground">Loading...</p>
           ) : items.length === 0 ? (
-            <p className="py-4 text-center text-xs text-[#848b9b]">
+            <p className="py-4 text-center text-xs text-muted-foreground">
               No supporting data yet. Add text snippets or screenshots to include in exports.
             </p>
           ) : (
@@ -97,11 +97,11 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
                 <div
                   key={item.id}
                   className={cn(
-                    'flex items-start gap-3 rounded-lg border border-[#1e2130] bg-card/30 px-3 py-2.5',
+                    'flex items-start gap-3 rounded-lg border border-border bg-card/30 px-3 py-2.5',
                     'group transition-colors hover:border-[rgba(255,255,255,0.12)]'
                   )}
                 >
-                  <span className="mt-0.5 shrink-0 text-[#848b9b]">
+                  <span className="mt-0.5 shrink-0 text-muted-foreground">
                     {item.data_type === 'text_snippet' ? (
                       <Code2 className="h-4 w-4" />
                     ) : (
@@ -109,9 +109,9 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
                     )}
                   </span>
                   <div className="min-w-0 flex-1">
-                    <p className="text-sm font-medium text-[#e2e5eb]">{item.label}</p>
+                    <p className="text-sm font-medium text-foreground">{item.label}</p>
                     {item.data_type === 'text_snippet' && item.content && (
-                      <p className="mt-0.5 truncate text-xs font-mono text-[#848b9b]">
+                      <p className="mt-0.5 truncate text-xs font-mono text-muted-foreground">
                         {item.content.length > 120 ? item.content.slice(0, 120) + '...' : item.content}
                       </p>
                     )}
@@ -119,14 +119,14 @@ export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
                       <img
                         src={`data:${item.content_type || 'image/png'};base64,${item.content}`}
                         alt={item.label}
-                        className="mt-1 max-h-16 rounded border border-[#1e2130] object-contain"
+                        className="mt-1 max-h-16 rounded border border-border object-contain"
                       />
                     )}
                   </div>
                   <button
                     type="button"
                     onClick={() => handleDelete(item.id)}
-                    className="shrink-0 text-[#848b9b] opacity-0 transition-opacity hover:text-rose-500 group-hover:opacity-100"
+                    className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-rose-500 group-hover:opacity-100"
                     title="Remove"
                   >
                     <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/components/session/TicketContextPanel.tsx b/frontend/src/components/session/TicketContextPanel.tsx
index a71f20ff..f6a41234 100644
--- a/frontend/src/components/session/TicketContextPanel.tsx
+++ b/frontend/src/components/session/TicketContextPanel.tsx
@@ -38,14 +38,14 @@ function AccordionSection({ label, icon, count, children }: AccordionSectionProp
         onClick={() => setOpen(!open)}
         className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-[rgba(255,255,255,0.03)] transition-colors"
       >
-        <span className="text-[#848b9b]">{icon}</span>
-        <span className="flex-1 text-xs font-medium text-[#e2e5eb]">{label}</span>
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="flex-1 text-xs font-medium text-foreground">{label}</span>
         {count !== undefined && count > 0 && (
-          <span className="rounded-full bg-[rgba(34,211,238,0.10)] px-1.5 py-0.5 text-[0.6rem] font-sans text-xs text-[#22d3ee]">
+          <span className="rounded-full bg-accent-dim px-1.5 py-0.5 text-[0.6rem] font-sans text-xs text-primary">
             {count}
           </span>
         )}
-        <span className="text-[#848b9b]">
+        <span className="text-muted-foreground">
           {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
         </span>
       </button>
@@ -63,15 +63,15 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
     <div className="card-flat overflow-hidden rounded-lg">
       {/* Header */}
       <div className="flex items-center gap-2 bg-[rgba(34,211,238,0.05)] px-3 py-2.5">
-        <Ticket className="h-3.5 w-3.5 text-[#22d3ee]" />
-        <span className="flex-1 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#22d3ee]">
+        <Ticket className="h-3.5 w-3.5 text-primary" />
+        <span className="flex-1 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-primary">
           Ticket Context
         </span>
         <button
           onClick={onRefresh}
           disabled={loading}
           title="Refresh ticket context"
-          className="rounded p-0.5 text-[#848b9b] hover:text-[#e2e5eb] disabled:cursor-not-allowed transition-colors"
+          className="rounded p-0.5 text-muted-foreground hover:text-foreground disabled:cursor-not-allowed transition-colors"
         >
           <RefreshCw className={cn('h-3 w-3', loading && 'animate-spin')} />
         </button>
@@ -80,7 +80,7 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
       {/* Loading */}
       {loading && !context && (
         <div className="flex items-center justify-center py-6">
-          <Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
         </div>
       )}
 
@@ -98,14 +98,14 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
           {/* Compact summary */}
           <div className="px-3 py-2.5">
             <div className="flex items-baseline gap-2">
-              <span className="font-sans text-xs text-xs font-medium text-[#22d3ee]">#{context.ticket.id}</span>
-              <span className="flex-1 truncate text-xs text-[#e2e5eb]">{context.ticket.summary}</span>
+              <span className="font-sans text-xs text-xs font-medium text-primary">#{context.ticket.id}</span>
+              <span className="flex-1 truncate text-xs text-foreground">{context.ticket.summary}</span>
             </div>
             <div className="mt-1.5 flex flex-wrap gap-1.5">
-              <span className="rounded-md bg-[#14161d] px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-[#848b9b] border border-[rgba(255,255,255,0.06)]">
+              <span className="rounded-md bg-card px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-muted-foreground border border-[rgba(255,255,255,0.06)]">
                 {context.ticket.status}
               </span>
-              <span className="rounded-md bg-[#14161d] px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-[#848b9b] border border-[rgba(255,255,255,0.06)]">
+              <span className="rounded-md bg-card px-1.5 py-0.5 font-sans text-xs text-[0.6rem] text-muted-foreground border border-[rgba(255,255,255,0.06)]">
                 {context.ticket.priority}
               </span>
               {context.ticket.sla && (
@@ -114,27 +114,27 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
                 </span>
               )}
             </div>
-            <p className="mt-1 text-[0.6875rem] text-[#848b9b]">{context.company.name}</p>
+            <p className="mt-1 text-[0.6875rem] text-muted-foreground">{context.company.name}</p>
           </div>
 
           {/* Client */}
           <AccordionSection label="Client" icon={<Building2 className="h-3.5 w-3.5" />}>
             <div className="space-y-1 text-xs">
-              <p className="font-medium text-[#e2e5eb]">{context.company.name}</p>
+              <p className="font-medium text-foreground">{context.company.name}</p>
               {context.company.type && (
-                <p className="text-[#848b9b]">Type: {context.company.type}</p>
+                <p className="text-muted-foreground">Type: {context.company.type}</p>
               )}
               {context.company.territory && (
-                <p className="text-[#848b9b]">Territory: {context.company.territory}</p>
+                <p className="text-muted-foreground">Territory: {context.company.territory}</p>
               )}
               {context.company.site && (
-                <p className="text-[#848b9b]">Site: {context.company.site}</p>
+                <p className="text-muted-foreground">Site: {context.company.site}</p>
               )}
               {context.company.address && (
-                <p className="text-[#848b9b]">{context.company.address}</p>
+                <p className="text-muted-foreground">{context.company.address}</p>
               )}
               {context.company.phone && (
-                <p className="text-[#848b9b]">{context.company.phone}</p>
+                <p className="text-muted-foreground">{context.company.phone}</p>
               )}
             </div>
           </AccordionSection>
@@ -143,15 +143,15 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
           {context.contact && (
             <AccordionSection label="Contact" icon={<UserCircle className="h-3.5 w-3.5" />}>
               <div className="space-y-1 text-xs">
-                <p className="font-medium text-[#e2e5eb]">{context.contact.name}</p>
+                <p className="font-medium text-foreground">{context.contact.name}</p>
                 {context.contact.title && (
-                  <p className="text-[#848b9b]">{context.contact.title}</p>
+                  <p className="text-muted-foreground">{context.contact.title}</p>
                 )}
                 {context.contact.email && (
-                  <p className="text-[#848b9b]">{context.contact.email}</p>
+                  <p className="text-muted-foreground">{context.contact.email}</p>
                 )}
                 {context.contact.phone && (
-                  <p className="text-[#848b9b]">{context.contact.phone}</p>
+                  <p className="text-muted-foreground">{context.contact.phone}</p>
                 )}
               </div>
             </AccordionSection>
@@ -166,9 +166,9 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
             >
               <div className="space-y-2">
                 {context.configurations.map((cfg, i) => (
-                  <div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] p-2">
-                    <p className="text-xs font-medium text-[#e2e5eb]">{cfg.device_identifier}</p>
-                    <div className="mt-0.5 space-y-0.5 text-[0.6875rem] text-[#848b9b]">
+                  <div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card p-2">
+                    <p className="text-xs font-medium text-foreground">{cfg.device_identifier}</p>
+                    <div className="mt-0.5 space-y-0.5 text-[0.6875rem] text-muted-foreground">
                       {cfg.type && <p>Type: {cfg.type}</p>}
                       {cfg.os_type && <p>OS: {cfg.os_type}</p>}
                       {cfg.ip_address && <p>IP: {cfg.ip_address}</p>}
@@ -190,16 +190,16 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
             >
               <div className="space-y-2">
                 {context.notes.map((note, i) => (
-                  <div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] p-2">
+                  <div key={i} className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card p-2">
                     <div className="mb-1 flex items-center justify-between gap-2">
                       {note.member && (
-                        <span className="text-[0.6rem] font-sans text-xs text-[#848b9b]">{note.member}</span>
+                        <span className="text-[0.6rem] font-sans text-xs text-muted-foreground">{note.member}</span>
                       )}
-                      <span className="ml-auto text-[0.6rem] font-sans text-xs text-[#848b9b]">
+                      <span className="ml-auto text-[0.6rem] font-sans text-xs text-muted-foreground">
                         {new Date(note.date_created).toLocaleDateString()}
                       </span>
                     </div>
-                    <p className="whitespace-pre-wrap text-[0.6875rem] text-[#e2e5eb] line-clamp-4">
+                    <p className="whitespace-pre-wrap text-[0.6875rem] text-foreground line-clamp-4">
                       {note.text}
                     </p>
                   </div>
@@ -219,16 +219,16 @@ export function TicketContextPanel({ context, loading, error, onRefresh }: Ticke
                 {context.related_tickets.map((rt) => (
                   <div
                     key={rt.id}
-                    className="rounded-md border border-[rgba(255,255,255,0.06)] bg-[#14161d] px-2 py-1.5"
+                    className="rounded-md border border-[rgba(255,255,255,0.06)] bg-card px-2 py-1.5"
                   >
                     <div className="flex items-baseline gap-1.5">
-                      <span className="font-sans text-xs text-[0.6rem] text-[#22d3ee]">#{rt.id}</span>
-                      <span className="flex-1 truncate text-[0.6875rem] text-[#e2e5eb]">{rt.summary}</span>
+                      <span className="font-sans text-xs text-[0.6rem] text-primary">#{rt.id}</span>
+                      <span className="flex-1 truncate text-[0.6875rem] text-foreground">{rt.summary}</span>
                     </div>
                     <div className="mt-0.5 flex gap-1">
-                      <span className="text-[0.6rem] text-[#848b9b]">{rt.status}</span>
-                      <span className="text-[0.6rem] text-[#848b9b]">·</span>
-                      <span className="text-[0.6rem] text-[#848b9b]">{rt.priority}</span>
+                      <span className="text-[0.6rem] text-muted-foreground">{rt.status}</span>
+                      <span className="text-[0.6rem] text-muted-foreground">·</span>
+                      <span className="text-[0.6rem] text-muted-foreground">{rt.priority}</span>
                     </div>
                   </div>
                 ))}
diff --git a/frontend/src/components/session/TicketLinkIndicator.tsx b/frontend/src/components/session/TicketLinkIndicator.tsx
index 74a89a7b..134b7581 100644
--- a/frontend/src/components/session/TicketLinkIndicator.tsx
+++ b/frontend/src/components/session/TicketLinkIndicator.tsx
@@ -23,8 +23,8 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
         type="button"
         onClick={onLinkClick}
         className={cn(
-          'inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-[#848b9b] transition-colors',
-          'hover:bg-accent hover:text-[#e2e5eb]'
+          'inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors',
+          'hover:bg-accent hover:text-foreground'
         )}
       >
         <Link2 className="h-3.5 w-3.5" />
@@ -35,27 +35,27 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
 
   // Ticket linked
   return (
-    <div className="card-flat inline-flex items-start gap-2.5 rounded-lg border border-[#1e2130] px-3 py-2">
+    <div className="card-flat inline-flex items-start gap-2.5 rounded-lg border border-border px-3 py-2">
       <Ticket className="mt-0.5 h-4 w-4 shrink-0 text-cyan-400" />
       <div className="min-w-0">
-        <p className="text-sm font-medium text-[#e2e5eb]">
+        <p className="text-sm font-medium text-foreground">
           CW #{session.psa_ticket_id}
           {ticketInfo?.summary && (
-            <span className="text-[#848b9b]"> — {ticketInfo.summary}</span>
+            <span className="text-muted-foreground"> — {ticketInfo.summary}</span>
           )}
         </p>
         {ticketInfo && (
-          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[#848b9b]">
+          <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
             {ticketInfo.company_name && <span>{ticketInfo.company_name}</span>}
             {ticketInfo.board_name && (
               <>
-                <span className="text-[#5a6170]">&bull;</span>
+                <span className="text-text-muted">&bull;</span>
                 <span>{ticketInfo.board_name}</span>
               </>
             )}
             {ticketInfo.status_name && (
               <>
-                <span className="text-[#5a6170]">&bull;</span>
+                <span className="text-text-muted">&bull;</span>
                 <span>{ticketInfo.status_name}</span>
               </>
             )}
@@ -68,8 +68,8 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
             type="button"
             onClick={onUpdateClick}
             className={cn(
-              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-[#848b9b] transition-colors',
-              'hover:bg-[rgba(34,211,238,0.10)] hover:text-[#e2e5eb]'
+              'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors',
+              'hover:bg-accent-dim hover:text-foreground'
             )}
             title="Update ticket"
           >
@@ -80,7 +80,7 @@ export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnl
         <button
           type="button"
           onClick={onUnlink}
-          className="shrink-0 rounded p-0.5 text-xs text-[#848b9b] transition-colors hover:text-[#e2e5eb]"
+          className="shrink-0 rounded p-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
           title="Unlink ticket"
         >
           <Unlink className="h-3.5 w-3.5" />
diff --git a/frontend/src/components/session/TicketPickerModal.tsx b/frontend/src/components/session/TicketPickerModal.tsx
index db7c49a8..b7bf711d 100644
--- a/frontend/src/components/session/TicketPickerModal.tsx
+++ b/frontend/src/components/session/TicketPickerModal.tsx
@@ -219,8 +219,8 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
             className={cn(
               'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
               mode === 'search'
-                ? 'bg-white/[0.08] text-[#e2e5eb] shadow-sm'
-                : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             <Search className="h-3.5 w-3.5" />
@@ -232,8 +232,8 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
             className={cn(
               'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
               mode === 'manual'
-                ? 'bg-white/[0.08] text-[#e2e5eb] shadow-sm'
-                : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                ? 'bg-white/[0.08] text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             <Hash className="h-3.5 w-3.5" />
@@ -257,12 +257,12 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
             </div>
 
             {/* Include closed toggle */}
-            <label className="flex cursor-pointer items-center gap-2 text-xs text-[#848b9b]">
+            <label className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
               <input
                 type="checkbox"
                 checked={includeClosed}
                 onChange={(e) => setIncludeClosed(e.target.checked)}
-                className="rounded border-[#1e2130] bg-[#14161d] accent-primary"
+                className="rounded border-border bg-card accent-primary"
               />
               Include closed tickets
             </label>
@@ -270,12 +270,12 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
             {/* Search results */}
             {isSearching && (
               <div className="flex items-center justify-center py-6">
-                <Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
               </div>
             )}
 
             {!isSearching && hasSearched && searchResults.length === 0 && (
-              <div className="py-6 text-center text-sm text-[#848b9b]">
+              <div className="py-6 text-center text-sm text-muted-foreground">
                 No tickets found
               </div>
             )}
@@ -290,28 +290,28 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
                     disabled={isLooking}
                     className={cn(
                       'w-full rounded-lg border border-transparent px-3 py-2.5 text-left transition-all',
-                      'hover:border-[#1e2130] hover:bg-[#191c25]',
+                      'hover:border-border hover:bg-input',
                       'disabled:opacity-50',
                       result.closed && 'opacity-60'
                     )}
                   >
-                    <p className="truncate text-sm font-medium text-[#e2e5eb]">
-                      <span className="text-[#848b9b]">#{result.id}</span>
+                    <p className="truncate text-sm font-medium text-foreground">
+                      <span className="text-muted-foreground">#{result.id}</span>
                       {' — '}
                       {result.summary}
                     </p>
-                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-[#848b9b]">
+                    <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
                       {result.company_name && <span>{result.company_name}</span>}
                       {result.board_name && (
                         <>
-                          <span className="text-[#5a6170]">&bull;</span>
+                          <span className="text-text-muted">&bull;</span>
                           <span>{result.board_name}</span>
                         </>
                       )}
                       {result.status_name && (
                         <>
-                          <span className="text-[#5a6170]">&bull;</span>
-                          <span className={result.closed ? 'text-[#5a6170]' : ''}>
+                          <span className="text-text-muted">&bull;</span>
+                          <span className={result.closed ? 'text-text-muted' : ''}>
                             {result.status_name}
                           </span>
                         </>
@@ -324,8 +324,8 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
 
             {isLooking && (
               <div className="flex items-center justify-center py-3">
-                <Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
-                <span className="ml-2 text-sm text-[#848b9b]">Loading ticket details...</span>
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading ticket details...</span>
               </div>
             )}
           </div>
@@ -334,7 +334,7 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
         {/* Manual mode */}
         {mode === 'manual' && !selectedTicket && (
           <div>
-            <label className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
+            <label className="mb-1.5 block text-sm font-medium text-foreground">
               Ticket Number
             </label>
             <div className="flex gap-2">
@@ -376,32 +376,32 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
 
         {/* Selected ticket confirmation card */}
         {selectedTicket && selectedTicketId && (
-          <div className="card-flat space-y-3 rounded-xl border border-[#1e2130] p-4">
+          <div className="card-flat space-y-3 rounded-xl border border-border p-4">
             <div className="flex items-start gap-2">
               <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
               <div className="min-w-0">
-                <p className="text-sm font-semibold text-[#e2e5eb]">
+                <p className="text-sm font-semibold text-foreground">
                   CW #{selectedTicketId} — {selectedTicket.summary}
                 </p>
-                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#848b9b]">
+                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
                   {selectedTicket.company_name && (
                     <span>{selectedTicket.company_name}</span>
                   )}
                   {selectedTicket.board_name && (
                     <>
-                      <span className="text-[#5a6170]">&bull;</span>
+                      <span className="text-text-muted">&bull;</span>
                       <span>{selectedTicket.board_name}</span>
                     </>
                   )}
                   {selectedTicket.status_name && (
                     <>
-                      <span className="text-[#5a6170]">&bull;</span>
+                      <span className="text-text-muted">&bull;</span>
                       <span>{selectedTicket.status_name}</span>
                     </>
                   )}
                   {selectedTicket.priority_name && (
                     <>
-                      <span className="text-[#5a6170]">&bull;</span>
+                      <span className="text-text-muted">&bull;</span>
                       <span>{selectedTicket.priority_name}</span>
                     </>
                   )}
@@ -437,8 +437,8 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
             type="button"
             onClick={handleClose}
             className={cn(
-              'text-sm text-[#848b9b] transition-colors',
-              'hover:text-[#e2e5eb]'
+              'text-sm text-muted-foreground transition-colors',
+              'hover:text-foreground'
             )}
           >
             Skip
diff --git a/frontend/src/components/session/UpdateTicketModal.tsx b/frontend/src/components/session/UpdateTicketModal.tsx
index b1187c2e..5a923615 100644
--- a/frontend/src/components/session/UpdateTicketModal.tsx
+++ b/frontend/src/components/session/UpdateTicketModal.tsx
@@ -134,7 +134,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
         <button
           type="button"
           onClick={onClose}
-          className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
         >
           Cancel
         </button>
@@ -144,7 +144,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           disabled={isPosting || !content.trim()}
           className={cn(
             'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-            'bg-[#22d3ee] text-white',
+            'bg-primary text-white',
             'hover:brightness-110 active:scale-[0.98] transition-all',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
@@ -160,7 +160,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
     <Modal isOpen={open} onClose={onClose} title="Update Ticket" size="xl" footer={footer}>
       {isLoading && (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
 
@@ -172,7 +172,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           </div>
           <button
             onClick={loadPreview}
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             Try again
           </button>
@@ -184,13 +184,13 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           {/* Left panel - Content editor */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                 Note Content
               </p>
               <button
                 type="button"
                 onClick={handleCopyContent}
-                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
                 title="Copy content"
               >
                 <Copy className="h-3 w-3" />
@@ -214,7 +214,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
               ) : (
                 <span />
               )}
-              <span className="text-[#848b9b]">
+              <span className="text-muted-foreground">
                 {content.length.toLocaleString()} characters
               </span>
             </div>
@@ -223,15 +223,15 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
           {/* Right panel - Controls */}
           <div className="space-y-6">
             {/* Ticket info summary */}
-            <div className="card-flat rounded-lg border border-[#1e2130] p-3">
-              <p className="text-sm font-medium text-[#e2e5eb]">
+            <div className="card-flat rounded-lg border border-border p-3">
+              <p className="text-sm font-medium text-foreground">
                 CW #{preview.ticket.id}
                 {preview.ticket.summary && (
-                  <span className="text-[#848b9b]"> — {preview.ticket.summary}</span>
+                  <span className="text-muted-foreground"> — {preview.ticket.summary}</span>
                 )}
               </p>
               {(preview.ticket.company_name || preview.ticket.board_name) && (
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   {[preview.ticket.company_name, preview.ticket.board_name].filter(Boolean).join(' / ')}
                 </p>
               )}
@@ -239,7 +239,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Note Type */}
             <div>
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
                 Note Type
               </p>
               <div className="space-y-2">
@@ -250,7 +250,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
                       'flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors',
                       noteType === opt.value
                         ? 'border-primary/30 bg-primary/5'
-                        : 'border-[#1e2130] hover:border-[rgba(255,255,255,0.12)]'
+                        : 'border-border hover:border-[rgba(255,255,255,0.12)]'
                     )}
                   >
                     <input
@@ -262,8 +262,8 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
                       className="mt-0.5 accent-cyan-400"
                     />
                     <div className="min-w-0">
-                      <span className="text-sm font-medium text-[#e2e5eb]">{opt.label}</span>
-                      <p className="text-xs text-[#848b9b]">{opt.description}</p>
+                      <span className="text-sm font-medium text-foreground">{opt.label}</span>
+                      <p className="text-xs text-muted-foreground">{opt.description}</p>
                       {opt.warning && noteType === opt.value && (
                         <p className="mt-1 flex items-center gap-1 text-xs text-amber-400">
                           <AlertTriangle className="h-3 w-3 shrink-0" />
@@ -278,14 +278,14 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Ticket Status */}
             <div>
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
                 Ticket Status
               </p>
               <select
                 value={selectedStatusId ?? ''}
                 onChange={(e) => setSelectedStatusId(e.target.value ? Number(e.target.value) : null)}
                 className={cn(
-                  'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                  'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                   'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
               >
@@ -301,7 +301,7 @@ export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props)
 
             {/* Previous posts */}
             {preview.previous_posts > 0 && (
-              <p className="text-xs text-[#848b9b]">
+              <p className="text-xs text-muted-foreground">
                 This session has been posted {preview.previous_posts} time{preview.previous_posts > 1 ? 's' : ''} before.
               </p>
             )}
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index db3717e8..2f6a40ae 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -23,14 +23,14 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="bg-[#14161d] border border-[#1e2130] w-full max-w-md rounded-lg p-6 shadow-lg">
-        <h2 className="mb-1 text-lg font-semibold text-[#e2e5eb]">Input Required</h2>
-        <p className="mb-4 text-sm text-[#848b9b]">
+      <div className="bg-card border border-border w-full max-w-md rounded-lg p-6 shadow-lg">
+        <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
+        <p className="mb-4 text-sm text-muted-foreground">
           This step requires you to provide a value.
         </p>
 
         <form onSubmit={handleSubmit}>
-          <label className="mb-2 block text-sm font-medium text-[#848b9b]">
+          <label className="mb-2 block text-sm font-medium text-muted-foreground">
             {prompt}
           </label>
           <input
@@ -40,8 +40,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
             placeholder="Enter value..."
             autoFocus
             className={cn(
-              'w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-              'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+              'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
 
diff --git a/frontend/src/components/sidebar/ActivityItem.tsx b/frontend/src/components/sidebar/ActivityItem.tsx
index d5f2d071..cf7f58ec 100644
--- a/frontend/src/components/sidebar/ActivityItem.tsx
+++ b/frontend/src/components/sidebar/ActivityItem.tsx
@@ -49,7 +49,7 @@ export function ActivityItem({
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
         'hover:bg-[rgba(255,255,255,0.03)]',
-        isRecent ? 'text-[#6b7280] text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
+        isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
       )}
       title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
       aria-label={
@@ -83,7 +83,7 @@ export function ActivityItem({
         />
       )}
       {status === 'recent' && (
-        <span className="h-1 w-1 shrink-0 rounded-full bg-[#3d4350]" />
+        <span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground" />
       )}
 
       {/* Flow name */}
@@ -96,7 +96,7 @@ export function ActivityItem({
         </span>
       )}
       {isRecent && timestamp && (
-        <span className="shrink-0 font-label text-[0.5625rem] text-[#5a6170]">
+        <span className="shrink-0 font-label text-[0.5625rem] text-text-muted">
           {formatRelativeTime(timestamp)}
         </span>
       )}
diff --git a/frontend/src/components/sidebar/SidebarActivityFeed.tsx b/frontend/src/components/sidebar/SidebarActivityFeed.tsx
index ddfe6999..e952a41c 100644
--- a/frontend/src/components/sidebar/SidebarActivityFeed.tsx
+++ b/frontend/src/components/sidebar/SidebarActivityFeed.tsx
@@ -22,7 +22,7 @@ export function SidebarActivityFeed({
       {/* Header */}
       <div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
         <Clock size={10} style={{ color: '#34d399' }} />
-        <span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170]">
+        <span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
           Activity
         </span>
       </div>
diff --git a/frontend/src/components/sidebar/SidebarStatsBar.tsx b/frontend/src/components/sidebar/SidebarStatsBar.tsx
index 423a1b79..5081b492 100644
--- a/frontend/src/components/sidebar/SidebarStatsBar.tsx
+++ b/frontend/src/components/sidebar/SidebarStatsBar.tsx
@@ -61,7 +61,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
         >
           {resolved}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
+        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Resolved
         </div>
       </div>
@@ -73,7 +73,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
         >
           {active}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
+        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Active
         </div>
       </div>
@@ -84,7 +84,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
         >
           {formatDuration(totalSeconds)}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
+        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Total Time
         </div>
       </div>
diff --git a/frontend/src/components/step-library/CustomStepModal.tsx b/frontend/src/components/step-library/CustomStepModal.tsx
index e64770a9..e1d2ab9c 100644
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -66,13 +66,13 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
 
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 sm:items-center sm:p-4">
-      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-[#1e2130] bg-[#14161d] shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
+      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-border bg-card shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] p-4">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Add Custom Step</h2>
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <h2 className="text-lg font-semibold text-foreground">Add Custom Step</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -80,15 +80,15 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         </div>
 
         {/* Tabs */}
-        <div className="flex border-b border-[#1e2130]">
+        <div className="flex border-b border-border">
           {canCreateSteps && (
             <button
               onClick={() => setActiveTab('create')}
               className={cn(
                 'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                 activeTab === 'create'
-                  ? 'border-b-2 border-primary bg-primary/5 text-[#e2e5eb]'
-                  : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                  ? 'border-b-2 border-primary bg-primary/5 text-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               Type My Own
@@ -99,8 +99,8 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
             className={cn(
               'flex-1 px-4 py-3 text-sm font-medium transition-colors',
               activeTab === 'browse'
-                ? 'border-b-2 border-primary bg-primary/5 text-[#22d3ee]'
-                : 'text-[#848b9b] hover:bg-muted/50 hover:text-[#e2e5eb]'
+                ? 'border-b-2 border-primary bg-primary/5 text-primary'
+                : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
             )}
           >
             Browse Library
@@ -136,7 +136,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
           <div className="absolute inset-0 flex items-center justify-center bg-black/80">
             <div className="flex flex-col items-center gap-3">
               <Spinner className="border-t-foreground" />
-              <p className="text-sm text-[#848b9b]">Creating step...</p>
+              <p className="text-sm text-muted-foreground">Creating step...</p>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/step-library/StepCard.tsx b/frontend/src/components/step-library/StepCard.tsx
index 68af3243..cb42bebc 100644
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -33,7 +33,7 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
   const isOwn = currentUserId ? step.created_by === currentUserId : false
 
   return (
-    <div className="group rounded-lg border border-[#1e2130] bg-[#14161d] p-4 transition-shadow hover:shadow-md">
+    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
       {/* Header */}
       <div className="mb-3 flex items-start justify-between gap-2">
         <div className="flex-1">
@@ -65,12 +65,12 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           </div>
 
           {/* Title */}
-          <h3 className="font-semibold text-[#e2e5eb] line-clamp-2">{step.title}</h3>
+          <h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
         </div>
       </div>
 
       {/* Metadata */}
-      <div className="mb-3 space-y-1.5 text-sm text-[#848b9b]">
+      <div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
         {/* Category */}
         {step.category_name && (
           <div className="flex items-center gap-1.5">
@@ -116,13 +116,13 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           {visibleTags.map(tag => (
             <span
               key={tag}
-              className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]"
+              className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground"
             >
               {tag}
             </span>
           ))}
           {remainingTags > 0 && (
-            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-[#848b9b]">
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
               +{remainingTags} more
             </span>
           )}
@@ -138,14 +138,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
               <>
                 <button
                   onClick={() => onPreview(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 >
                   <Eye className="h-4 w-4" />
                   Preview
                 </button>
                 <span
                   title="Managed by source flow — fork to customize"
-                  className="flex items-center justify-center rounded-md border border-[#1e2130] px-3 py-2 text-[#848b9b] opacity-50 cursor-default"
+                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
                 >
                   <Lock className="h-4 w-4" />
                 </span>
@@ -155,21 +155,21 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
               <>
                 <button
                   onClick={() => onPreview(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 >
                   <Eye className="h-4 w-4" />
                   Preview
                 </button>
                 <button
                   onClick={() => onEdit?.(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 >
                   <Pencil className="h-4 w-4" />
                   Edit
                 </button>
                 <button
                   onClick={() => onDelete?.(step)}
-                  className="flex items-center justify-center rounded-md border border-[#1e2130] px-3 py-2 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
+                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
                   aria-label="Delete step"
                 >
                   <Trash2 className="h-4 w-4" />
@@ -181,14 +181,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
             <>
               <button
                 onClick={() => onPreview(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
               >
                 <Eye className="h-4 w-4" />
                 Preview
               </button>
               <button
                 onClick={() => onSave?.(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-[#22d3ee] text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
+                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-primary text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
               >
                 <Bookmark className="h-4 w-4" />
                 Save
@@ -200,14 +200,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           <>
             <button
               onClick={() => onPreview(step)}
-              className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+              className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
             >
               <Eye className="h-4 w-4" />
               Preview
             </button>
             <button
               onClick={() => onInsert?.(step)}
-              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-[#22d3ee] text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
+              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-primary text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
             >
               <Plus className="h-4 w-4" />
               Insert
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index a1cb7bc6..36e6139c 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -77,9 +77,9 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
-      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
+      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-start justify-between border-b border-[#1e2130] p-6 pb-4">
+        <div className="flex items-start justify-between border-b border-border p-6 pb-4">
           {isLoading ? (
             <div className="h-6 w-48 animate-pulse rounded bg-accent" />
           ) : error ? (
@@ -97,7 +97,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   {step.step_type}
                 </span>
                 {step.category_name && (
-                  <span className="text-xs text-[#848b9b]">{step.category_name}</span>
+                  <span className="text-xs text-muted-foreground">{step.category_name}</span>
                 )}
                 {step.is_featured && (
                   <span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
@@ -110,12 +110,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   </span>
                 )}
               </div>
-              <h2 className="text-xl font-semibold text-[#e2e5eb]">{step.title}</h2>
+              <h2 className="text-xl font-semibold text-foreground">{step.title}</h2>
             </div>
           ) : null}
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -131,13 +131,13 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               <div className="h-4 w-5/6 animate-pulse rounded bg-accent" />
             </div>
           ) : error ? (
-            <p className="text-sm text-[#848b9b]">{error}</p>
+            <p className="text-sm text-muted-foreground">{error}</p>
           ) : step ? (
             <div className="space-y-6">
               {/* Rating */}
               {hasRating && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Rating</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Rating</h3>
                   <div className="flex items-center gap-2">
                     <div className="flex items-center gap-1">
                       {[1, 2, 3, 4, 5].map(i => (
@@ -147,12 +147,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             'h-4 w-4',
                             i <= Math.round(step.rating_average)
                               ? 'fill-yellow-400 text-yellow-400'
-                              : 'text-[#848b9b]'
+                              : 'text-muted-foreground'
                           )}
                         />
                       ))}
                     </div>
-                    <span className="text-sm text-[#848b9b]">
+                    <span className="text-sm text-muted-foreground">
                       {step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
                     </span>
                   </div>
@@ -162,12 +162,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Tags */}
               {step.tags.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Tags</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Tags</h3>
                   <div className="flex flex-wrap gap-1.5">
                     {step.tags.map(tag => (
                       <span
                         key={tag}
-                        className="rounded-full bg-accent px-2 py-1 text-xs text-[#848b9b]"
+                        className="rounded-full bg-accent px-2 py-1 text-xs text-muted-foreground"
                       >
                         {tag}
                       </span>
@@ -179,7 +179,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Instructions */}
               <div>
                 <h3 className="mb-2 text-sm font-semibold">Instructions</h3>
-                <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
+                <div className="rounded-lg border border-border bg-accent/50 p-4">
                   <MarkdownContent content={step.content.instructions} />
                 </div>
               </div>
@@ -187,8 +187,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Help Text */}
               {step.content.help_text && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Help Text</h3>
-                  <div className="rounded-lg border border-[#1e2130] bg-blue-400/5 p-4 text-sm">
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Help Text</h3>
+                  <div className="rounded-lg border border-border bg-blue-400/5 p-4 text-sm">
                     <MarkdownContent content={step.content.help_text} />
                   </div>
                 </div>
@@ -197,19 +197,19 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Commands */}
               {step.content.commands && step.content.commands.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Commands</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-foreground">Commands</h3>
                   <div className="space-y-2">
                     {step.content.commands.map((cmd, index) => (
                       <div key={index} className="group relative">
                         <div className="mb-1 flex items-center justify-between">
-                          <span className="text-xs font-medium text-[#848b9b]">{cmd.label}</span>
+                          <span className="text-xs font-medium text-muted-foreground">{cmd.label}</span>
                           <button
                             onClick={() => handleCopyCommand(cmd.command, index)}
                             className={cn(
                               'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                               copiedCommandIndex === index
                                 ? 'bg-emerald-400/10 text-emerald-400'
-                                : 'bg-accent text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                                : 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
                             )}
                           >
                             {copiedCommandIndex === index ? (
@@ -225,7 +225,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             )}
                           </button>
                         </div>
-                        <pre className="overflow-x-auto rounded bg-[#14161d] p-3 text-xs text-[#e2e5eb]">
+                        <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-foreground">
                           <code>{cmd.command}</code>
                         </pre>
                       </div>
@@ -238,11 +238,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {visibleReviews.length > 0 && (
                 <div>
                   <div className="mb-2 flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-[#e2e5eb]">Reviews</h3>
+                    <h3 className="text-sm font-semibold text-foreground">Reviews</h3>
                     {allTextReviews.length > 3 && (
                       <button
                         onClick={() => setShowAllReviews(v => !v)}
-                        className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+                        className="text-xs text-muted-foreground hover:text-foreground hover:underline"
                       >
                         {showAllReviews ? 'Show less' : `See all ${allTextReviews.length} reviews`}
                       </button>
@@ -250,11 +250,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   </div>
                   <div className="space-y-3">
                     {visibleReviews.map(review => (
-                      <div key={review.id} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
+                      <div key={review.id} className="rounded-lg border border-border bg-accent/50 p-3">
                         <div className="mb-2 flex items-center justify-between">
                           <div className="flex items-center gap-2 text-sm">
                             <User className="h-3.5 w-3.5" />
-                            <span className="font-medium text-[#e2e5eb]">{review.user_name || 'Anonymous'}</span>
+                            <span className="font-medium text-foreground">{review.user_name || 'Anonymous'}</span>
                             {review.verified_use && (
                               <span className="rounded bg-emerald-400/10 px-1.5 py-0.5 text-xs text-emerald-400">
                                 Verified Use
@@ -269,14 +269,14 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                                   'h-3 w-3',
                                   i <= review.rating
                                     ? 'fill-yellow-400 text-yellow-400'
-                                    : 'text-[#848b9b]'
+                                    : 'text-muted-foreground'
                                 )}
                               />
                             ))}
                           </div>
                         </div>
-                        <p className="text-sm text-[#848b9b]">{review.review_text}</p>
-                        <div className="mt-2 flex items-center gap-2 text-xs text-[#848b9b]">
+                        <p className="text-sm text-muted-foreground">{review.review_text}</p>
+                        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
                           <Calendar className="h-3 w-3" />
                           {new Date(review.created_at).toLocaleDateString()}
                         </div>
@@ -287,28 +287,28 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               )}
 
               {/* Metadata */}
-              <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
+              <div className="rounded-lg border border-border bg-accent/50 p-4">
                 <div className="grid grid-cols-2 gap-3 text-sm">
                   <div>
-                    <span className="text-[#848b9b]">Author:</span>
-                    <span className="ml-2 font-medium text-[#e2e5eb]">{step.author_name || 'Unknown'}</span>
+                    <span className="text-muted-foreground">Author:</span>
+                    <span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
                   </div>
                   {step.is_flow_synced && step.source_tree_name && (
-                    <div className="col-span-2 flex items-center gap-1.5 text-[#848b9b]">
+                    <div className="col-span-2 flex items-center gap-1.5 text-muted-foreground">
                       <GitBranch className="h-3.5 w-3.5 shrink-0" />
-                      <span>Sourced from <span className="font-medium text-[#e2e5eb]">{step.source_tree_name}</span></span>
+                      <span>Sourced from <span className="font-medium text-foreground">{step.source_tree_name}</span></span>
                     </div>
                   )}
                   <div>
-                    <span className="text-[#848b9b]">Usage Count:</span>
-                    <span className="ml-2 font-medium text-[#e2e5eb]">{step.usage_count}</span>
+                    <span className="text-muted-foreground">Usage Count:</span>
+                    <span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
                   </div>
                   <div>
-                    <span className="text-[#848b9b]">Created:</span>
-                    <span className="ml-2 font-medium text-[#e2e5eb]">{new Date(step.created_at).toLocaleDateString()}</span>
+                    <span className="text-muted-foreground">Created:</span>
+                    <span className="ml-2 font-medium text-foreground">{new Date(step.created_at).toLocaleDateString()}</span>
                   </div>
                   <div>
-                    <span className="text-[#848b9b]">Visibility:</span>
+                    <span className="text-muted-foreground">Visibility:</span>
                     <span className="ml-2 font-medium capitalize">{step.visibility}</span>
                   </div>
                 </div>
@@ -318,7 +318,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
         </div>
 
         {/* Footer - Actions */}
-        <div className="flex gap-2 border-t border-[#1e2130] p-4">
+        <div className="flex gap-2 border-t border-border p-4">
           <Button
             variant="secondary"
             onClick={onClose}
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 86755b9e..0611f5b6 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -141,7 +141,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Step Type */}
       <div>
-        <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+        <label className="mb-2 block text-sm font-medium text-foreground">
           Step Type <span className="text-red-400">*</span>
         </label>
         <div className="grid grid-cols-3 gap-2">
@@ -155,15 +155,15 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
                 className={cn(
                   'rounded-lg border p-3 text-left transition-colors',
                   stepType === option.value
-                    ? 'border-[#1e2130] bg-accent ring-2 ring-primary/20'
-                    : 'border-[#1e2130] hover:border-[#1e2130]'
+                    ? 'border-border bg-accent ring-2 ring-primary/20'
+                    : 'border-border hover:border-border'
                 )}
               >
                 <div className="mb-1 flex items-center gap-2">
                   <Icon className="h-4 w-4" />
-                  <span className="font-medium text-sm text-[#e2e5eb]">{option.label}</span>
+                  <span className="font-medium text-sm text-foreground">{option.label}</span>
                 </div>
-                <p className="text-xs text-[#848b9b]">{option.description}</p>
+                <p className="text-xs text-muted-foreground">{option.description}</p>
               </button>
             )
           })}
@@ -172,7 +172,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Title */}
       <div>
-        <label htmlFor="title" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="title" className="mb-2 block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <Input
@@ -187,9 +187,9 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Instructions */}
       <div>
-        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-foreground">
           Instructions <span className="text-red-400">*</span>
-          <span className="ml-2 text-xs font-normal text-[#848b9b]">(Markdown supported)</span>
+          <span className="ml-2 text-xs font-normal text-muted-foreground">(Markdown supported)</span>
         </label>
         <Textarea
           id="instructions"
@@ -203,8 +203,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Help Text */}
       <div>
-        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
-          Help Text <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
+        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-foreground">
+          Help Text <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <Textarea
           id="helpText"
@@ -218,13 +218,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
       {/* Commands */}
       <div>
         <div className="mb-2 flex items-center justify-between">
-          <label className="text-sm font-medium text-[#e2e5eb]">
-            Commands <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
+          <label className="text-sm font-medium text-foreground">
+            Commands <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
           </label>
           <button
             type="button"
             onClick={addCommand}
-            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <Plus className="h-3 w-3" />
             Add Command
@@ -233,13 +233,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
         {commands.length > 0 && (
           <div className="space-y-3">
             {commands.map((cmd, index) => (
-              <div key={index} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
+              <div key={index} className="rounded-lg border border-border bg-accent/50 p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-[#848b9b]">Command {index + 1}</span>
+                  <span className="text-xs font-medium text-muted-foreground">Command {index + 1}</span>
                   <button
                     type="button"
                     onClick={() => removeCommand(index)}
-                    className="rounded p-1 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400"
+                    className="rounded p-1 text-muted-foreground hover:bg-red-400/10 hover:text-red-400"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -270,14 +270,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Category */}
       <div>
-        <label htmlFor="category" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
-          Category <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
+        <label htmlFor="category" className="mb-2 block text-sm font-medium text-foreground">
+          Category <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <select
           id="category"
           value={categoryId}
           onChange={(e) => setCategoryId(e.target.value)}
-          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="">None</option>
           {categories.map(cat => (
@@ -288,8 +288,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Tags */}
       <div>
-        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
-          Tags <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
+        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-foreground">
+          Tags <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
         </label>
         <div className="flex gap-2">
           <Input
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addTag}
-            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Add
           </button>
@@ -314,7 +314,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
             {tags.map(tag => (
               <span
                 key={tag}
-                className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-[#848b9b]"
+                className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-muted-foreground"
               >
                 {tag}
                 <button
@@ -333,14 +333,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Visibility */}
       <div>
-        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-foreground">
           Visibility
         </label>
         <select
           id="visibility"
           value={visibility}
           onChange={(e) => setVisibility(e.target.value as 'private' | 'team' | 'public')}
-          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="private">Private (only me)</option>
           <option value="team">Team (my team members)</option>
diff --git a/frontend/src/components/step-library/StepFormModal.tsx b/frontend/src/components/step-library/StepFormModal.tsx
index 195e3ee0..8213843a 100644
--- a/frontend/src/components/step-library/StepFormModal.tsx
+++ b/frontend/src/components/step-library/StepFormModal.tsx
@@ -50,16 +50,16 @@ export function StepFormModal({ isOpen, onClose, onSuccess, editingStep }: StepF
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
-      <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
+      <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] p-6 pb-4">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">
+        <div className="flex items-center justify-between border-b border-border p-6 pb-4">
+          <h2 className="text-lg font-semibold text-foreground">
             {isEditMode ? 'Edit Step' : 'Create Step'}
           </h2>
           <button
             onClick={onClose}
             disabled={isSubmitting}
-            className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 2aeffe91..9426ce57 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -145,16 +145,16 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
   return (
     <div className="flex h-full flex-col">
       {/* Header - Filters */}
-      <div className="space-y-4 border-b border-[#1e2130] p-4">
+      <div className="space-y-4 border-b border-border p-4">
         {/* Search */}
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search steps..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full rounded-md border border-[#1e2130] bg-[#14161d] py-2 pl-10 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -165,7 +165,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by category"
             value={selectedCategoryId || ''}
             onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
-            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Categories</option>
             {categories.map(cat => (
@@ -178,7 +178,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by step type"
             value={selectedStepType || ''}
             onChange={(e) => setSelectedStepType((e.target.value as 'decision' | 'action' | 'solution') || undefined)}
-            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Types</option>
             <option value="decision">Decision</option>
@@ -191,7 +191,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by minimum rating"
             value={minRating?.toString() || ''}
             onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
-            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">Any Rating</option>
             <option value="4">4+ Stars</option>
@@ -204,7 +204,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Sort steps by"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as 'recent' | 'popular' | 'highest_rated' | 'most_used')}
-            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="recent">Most Recent</option>
             <option value="popular">Most Popular</option>
@@ -216,7 +216,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {/* Popular Tags */}
         {popularTags.length > 0 && (
           <div>
-            <div className="mb-2 text-xs font-medium text-[#848b9b]">Popular Tags:</div>
+            <div className="mb-2 text-xs font-medium text-muted-foreground">Popular Tags:</div>
             <div className="flex flex-wrap gap-1.5">
               {popularTags.map(tag => (
                 <button
@@ -225,8 +225,8 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   className={cn(
                     'rounded-full px-2.5 py-1 text-xs transition-colors',
                     selectedTag === tag.tag
-                      ? 'bg-[#22d3ee] text-white'
-                      : 'bg-accent text-[#848b9b] hover:bg-accent'
+                      ? 'bg-primary text-white'
+                      : 'bg-accent text-muted-foreground hover:bg-accent'
                   )}
                 >
                   {tag.tag} ({tag.count})
@@ -240,7 +240,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {hasActiveFilters && (
           <button
             onClick={clearFilters}
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+            className="text-sm text-muted-foreground hover:text-foreground hover:underline"
           >
             Clear all filters
           </button>
@@ -251,7 +251,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
       <div className="flex-1 overflow-y-auto p-4">
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         ) : error ? (
           <div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
@@ -262,9 +262,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
           </div>
         ) : steps.length === 0 ? (
           hasActiveFilters ? (
-            <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-12 text-center">
-              <p className="mb-2 text-lg font-medium text-[#e2e5eb]">No steps found</p>
-              <p className="text-sm text-[#848b9b]">Try adjusting your filters</p>
+            <div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
+              <p className="mb-2 text-lg font-medium text-foreground">No steps found</p>
+              <p className="text-sm text-muted-foreground">Try adjusting your filters</p>
             </div>
           ) : (
             <EmptyState
@@ -288,7 +288,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('private')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-[#e2e5eb]">My Steps ({groupedSteps.private.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">My Steps ({groupedSteps.private.length})</h3>
                   {collapsedSections.private ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -321,7 +321,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('team')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-[#e2e5eb]">Team Steps ({groupedSteps.team.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">Team Steps ({groupedSteps.team.length})</h3>
                   {collapsedSections.team ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -354,7 +354,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('public')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-[#e2e5eb]">Community ({groupedSteps.public.length})</h3>
+                  <h3 className="text-sm font-semibold text-foreground">Community ({groupedSteps.public.length})</h3>
                   {collapsedSections.public ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -385,7 +385,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
 
       {/* Footer - Optional Create Button */}
       {showCreateButton && onCreateNew && (
-        <div className="border-t border-[#1e2130] p-4">
+        <div className="border-t border-border p-4">
           <Button onClick={onCreateNew} className="w-full">
             + Create New Step
           </Button>
diff --git a/frontend/src/components/tree-editor/AIFixReviewModal.tsx b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
index 029250d2..3a7e1971 100644
--- a/frontend/src/components/tree-editor/AIFixReviewModal.tsx
+++ b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
@@ -41,18 +41,18 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
-      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
+      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div className="flex items-center gap-2">
-            <Sparkles className="h-5 w-5 text-[#22d3ee]" />
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">
+            <Sparkles className="h-5 w-5 text-primary" />
+            <h2 className="text-lg font-semibold text-foreground">
               AI Fix Proposals ({fixes.length})
             </h2>
           </div>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -73,16 +73,16 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                   isApplied
                     ? 'border-emerald-400/30 bg-emerald-400/5'
                     : isSkipped
-                      ? 'border-[#1e2130] bg-accent/30 opacity-60'
-                      : 'border-[#1e2130] bg-[#14161d]'
+                      ? 'border-border bg-accent/30 opacity-60'
+                      : 'border-border bg-card'
                 )}
               >
                 {/* Fix header */}
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex-1">
                     <p className="text-sm text-red-400 mb-1">{fix.error_message}</p>
-                    <p className="text-sm text-[#e2e5eb]">{fix.description}</p>
-                    <p className="text-xs text-[#848b9b] mt-1">
+                    <p className="text-sm text-foreground">{fix.description}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
                       Node: {fix.target_node_id}
                     </p>
                   </div>
@@ -92,7 +92,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                     </span>
                   )}
                   {isSkipped && (
-                    <span className="text-xs text-[#848b9b]">Skipped</span>
+                    <span className="text-xs text-muted-foreground">Skipped</span>
                   )}
                 </div>
 
@@ -101,7 +101,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                   <>
                     <button
                       onClick={() => toggleExpanded(fix.target_node_id)}
-                      className="mt-2 flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
+                      className="mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                     >
                       {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
                       {isExpanded ? 'Hide' : 'Show'} details
@@ -110,14 +110,14 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                     {isExpanded && (
                       <div className="mt-3 grid grid-cols-2 gap-3">
                         <div>
-                          <p className="text-xs font-medium text-[#848b9b] mb-1">Before</p>
-                          <pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-[#848b9b] max-h-48 overflow-y-auto">
+                          <p className="text-xs font-medium text-muted-foreground mb-1">Before</p>
+                          <pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-muted-foreground max-h-48 overflow-y-auto">
                             {JSON.stringify(fix.original_node, null, 2)}
                           </pre>
                         </div>
                         <div>
                           <p className="text-xs font-medium text-emerald-400 mb-1">After</p>
-                          <pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-[#e2e5eb] max-h-48 overflow-y-auto">
+                          <pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-foreground max-h-48 overflow-y-auto">
                             {JSON.stringify(fix.fixed_node, null, 2)}
                           </pre>
                         </div>
@@ -150,7 +150,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between border-t border-[#1e2130] px-6 py-4">
+        <div className="flex items-center justify-between border-t border-border px-6 py-4">
           <Button variant="secondary" onClick={onClose}>
             {allHandled ? 'Done' : 'Cancel'}
           </Button>
diff --git a/frontend/src/components/tree-editor/AnswerStubCard.tsx b/frontend/src/components/tree-editor/AnswerStubCard.tsx
index 79389951..e520c81a 100644
--- a/frontend/src/components/tree-editor/AnswerStubCard.tsx
+++ b/frontend/src/components/tree-editor/AnswerStubCard.tsx
@@ -32,7 +32,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
     <div
       ref={cardRef}
       className={cn(
-        'relative min-w-[180px] max-w-[280px] rounded-xl border-2 border-dashed border-[#1e2130] bg-[#14161d]/50',
+        'relative min-w-[180px] max-w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50',
         'transition-all duration-150',
         !picking && !confirming && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30'
       )}
@@ -43,7 +43,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
         <button
           type="button"
           onClick={(e) => { e.stopPropagation(); setConfirming(true) }}
-          className="absolute top-1.5 right-1.5 rounded p-0.5 text-[#848b9b]/40 hover:bg-red-500/10 hover:text-red-400 transition-colors"
+          className="absolute top-1.5 right-1.5 rounded p-0.5 text-muted-foreground/40 hover:bg-red-500/10 hover:text-red-400 transition-colors"
           title="Delete stub"
         >
           <Trash2 className="h-3 w-3" />
@@ -51,14 +51,14 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
       )}
 
       {/* Label */}
-      <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-[#e2e5eb] text-center">
+      <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
         {label}
       </div>
 
       {/* Confirm delete */}
       {confirming ? (
         <div className="px-2 pb-2.5 text-center space-y-1.5">
-          <p className="text-[10px] text-[#848b9b]">Delete this stub?</p>
+          <p className="text-[10px] text-muted-foreground">Delete this stub?</p>
           <div className="flex items-center justify-center gap-1.5">
             <button
               type="button"
@@ -70,14 +70,14 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); setConfirming(false) }}
-              className="rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-[#1e2130] text-[#848b9b] hover:bg-accent"
+              className="rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-border text-muted-foreground hover:bg-accent"
             >
               Cancel
             </button>
           </div>
         </div>
       ) : !picking ? (
-        <div className="pb-2.5 text-center text-[10px] text-[#848b9b] font-sans text-xs">
+        <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-sans text-xs">
           + Choose Type
         </div>
       ) : (
diff --git a/frontend/src/components/tree-editor/DynamicArrayField.tsx b/frontend/src/components/tree-editor/DynamicArrayField.tsx
index dd1f4a0f..e004d4f1 100644
--- a/frontend/src/components/tree-editor/DynamicArrayField.tsx
+++ b/frontend/src/components/tree-editor/DynamicArrayField.tsx
@@ -51,7 +51,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveUp(index)}
                 disabled={index === 0}
-                className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-30"
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                 title="Move up"
                 aria-label="Move up"
               >
@@ -61,7 +61,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveDown(index)}
                 disabled={index === items.length - 1}
-                className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-30"
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
                 title="Move down"
                 aria-label="Move down"
               >
@@ -78,7 +78,7 @@ export function DynamicArrayField<T>({
             <button
               type="button"
               onClick={() => onRemove(index)}
-              className="mt-1 rounded p-1 text-[#848b9b] hover:bg-red-400/20 hover:text-red-400"
+              className="mt-1 rounded p-1 text-muted-foreground hover:bg-red-400/20 hover:text-red-400"
               title="Remove"
               aria-label="Remove"
             >
@@ -94,9 +94,9 @@ export function DynamicArrayField<T>({
           type="button"
           onClick={onAdd}
           className={cn(
-            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-[#1e2130]',
-            'px-3 py-2 text-sm text-[#848b9b]',
-            'hover:border-[#1e2130] hover:text-[#e2e5eb]'
+            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border',
+            'px-3 py-2 text-sm text-muted-foreground',
+            'hover:border-border hover:text-foreground'
           )}
         >
           <Plus className="h-4 w-4" />
@@ -106,7 +106,7 @@ export function DynamicArrayField<T>({
 
       {/* Empty state */}
       {items.length === 0 && !canAdd && (
-        <p className="text-center text-sm text-[#848b9b]">No items</p>
+        <p className="text-center text-sm text-muted-foreground">No items</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 2dfc7ef9..05a5b83c 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -147,13 +147,13 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
       >
         <GlowEdgeDefs />
         <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="oklch(0.63 0.02 260 / 0.25)" />
-        <Controls showInteractive={false} className="bg-[#14161d]! border-[#1e2130]! shadow-lg!" />
+        <Controls showInteractive={false} className="bg-card! border-border! shadow-lg!" />
         {minimapVisible && (
           <MiniMap
             pannable
             zoomable
             nodeColor={minimapNodeColor}
-            className="bg-[#14161d]! border-[#1e2130]!"
+            className="bg-card! border-border!"
             nodeStrokeWidth={2}
           />
         )}
@@ -163,7 +163,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
       <button
         onClick={() => setMinimapVisible(v => !v)}
         className={cn(
-          'absolute bottom-2 right-2 z-10 rounded-lg border border-[#1e2130] bg-[#14161d] p-2 text-[#848b9b] shadow-lg hover:bg-accent hover:text-[#e2e5eb] transition-colors',
+          'absolute bottom-2 right-2 z-10 rounded-lg border border-border bg-card p-2 text-muted-foreground shadow-lg hover:bg-accent hover:text-foreground transition-colors',
           minimapVisible && 'bottom-[170px]'
         )}
         title={minimapVisible ? 'Hide minimap' : 'Show minimap'}
diff --git a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
index 4b1f0944..9d98e47e 100644
--- a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
@@ -20,18 +20,18 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
 
       <div
         className={cn(
-          'w-[280px] rounded-xl border-2 border-dashed border-[#1e2130] bg-[#14161d]/50 transition-all',
+          'w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50 transition-all',
           !picking && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30',
           selected && 'ring-1 ring-primary'
         )}
         onClick={() => !picking && setPicking(true)}
       >
-        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-[#e2e5eb] text-center">
+        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
           {label}
         </div>
 
         {!picking ? (
-          <div className="pb-2.5 text-center text-[10px] text-[#848b9b] font-sans text-xs">
+          <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-sans text-xs">
             + Choose Type
           </div>
         ) : (
diff --git a/frontend/src/components/tree-editor/FlowCanvasNode.tsx b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
index 14014447..63969bc4 100644
--- a/frontend/src/components/tree-editor/FlowCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
@@ -69,7 +69,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
       <div
         onContextMenu={(e) => onContextMenu?.(e, node.id)}
         className={cn(
-          'group w-[280px] rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs cursor-pointer transition-all',
+          'group w-[280px] rounded-xl border border-border bg-card shadow-xs cursor-pointer transition-all',
           config.borderClass,
           selected && 'ring-1 ring-primary shadow-md',
           isGhost && 'border-dashed border-primary/40! opacity-60'
@@ -83,7 +83,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
           </span>
 
           {/* Title */}
-          <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">
+          <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
             {title}
           </span>
 
@@ -105,7 +105,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
                 e.stopPropagation()
                 onDelete(node.id)
               }}
-              className="shrink-0 rounded-md p-1 text-[#848b9b] opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
+              className="shrink-0 rounded-md p-1 text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
               title="Delete node"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -115,19 +115,19 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Decision options preview */}
         {node.type === 'decision' && optionCount > 0 && (
-          <div className="border-t border-[#1e2130] px-3 py-1.5">
-            <div className="flex items-center gap-1.5 text-xs text-[#848b9b]">
+          <div className="border-t border-border px-3 py-1.5">
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
               <span className="font-sans text-xs">{optionCount} option{optionCount !== 1 ? 's' : ''}</span>
             </div>
             <div className="mt-1 space-y-0.5">
               {node.options!.slice(0, 3).map((opt, i) => (
-                <div key={opt.id} className="truncate text-xs text-[#848b9b]">
-                  <span className="font-sans text-xs text-[#e2e5eb]/60">{String.fromCharCode(65 + i)}</span>{' '}
+                <div key={opt.id} className="truncate text-xs text-muted-foreground">
+                  <span className="font-sans text-xs text-foreground/60">{String.fromCharCode(65 + i)}</span>{' '}
                   {opt.label || '(empty)'}
                 </div>
               ))}
               {optionCount > 3 && (
-                <div className="text-xs text-[#848b9b]">+{optionCount - 3} more</div>
+                <div className="text-xs text-muted-foreground">+{optionCount - 3} more</div>
               )}
             </div>
           </div>
@@ -135,21 +135,21 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Description preview for action/solution */}
         {(node.type === 'action' || node.type === 'solution') && node.description && (
-          <div className="border-t border-[#1e2130] px-3 py-1.5">
-            <div className="line-clamp-2 text-xs text-[#848b9b]">{node.description}</div>
+          <div className="border-t border-border px-3 py-1.5">
+            <div className="line-clamp-2 text-xs text-muted-foreground">{node.description}</div>
           </div>
         )}
 
         {/* Collapse chevron */}
         {hasChildren && (
-          <div className="flex justify-center border-t border-[#1e2130] py-1">
+          <div className="flex justify-center border-t border-border py-1">
             <button
               type="button"
               onClick={(e) => {
                 e.stopPropagation()
                 onToggleCollapse(node.id)
               }}
-              className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+              className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
             >
               {isCollapsed ? (
                 <>
@@ -168,7 +168,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Ghost node accept/dismiss overlay */}
         {isGhost && (
-          <div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2 px-3 pb-2">
+          <div className="mt-2 flex gap-2 border-t border-border/50 pt-2 px-3 pb-2">
             <button
               onClick={(e) => {
                 e.stopPropagation()
diff --git a/frontend/src/components/tree-editor/MetadataSidePanel.tsx b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
index e811239c..f2b1420a 100644
--- a/frontend/src/components/tree-editor/MetadataSidePanel.tsx
+++ b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
@@ -28,26 +28,26 @@ export function MetadataSidePanel({ isOpen, onClose }: MetadataSidePanelProps) {
     <>
       {/* Backdrop — click to close */}
       <div
-        className="fixed inset-0 z-40 bg-[#0c0d10]/40"
+        className="fixed inset-0 z-40 bg-background/40"
         onClick={onClose}
         aria-hidden="true"
       />
 
       {/* Side panel — slides in from right */}
       <div
-        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-[#1e2130] bg-[#14161d] shadow-xl"
+        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-border bg-card shadow-xl"
         role="dialog"
         aria-label="Flow metadata"
       >
         {/* Panel header */}
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-4 py-3">
-          <h2 className="text-sm font-semibold text-[#e2e5eb] font-heading">
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <h2 className="text-sm font-semibold text-foreground font-heading">
             Flow Details
           </h2>
           <button
             type="button"
             onClick={onClose}
-            className="rounded p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
             aria-label="Close metadata panel"
           >
             <X className="h-4 w-4" />
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index f81a455f..43312d96 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -85,7 +85,7 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
   return (
     <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent} allowFullScreen={true}>
       {/* Node ID display */}
-      <div className="mb-4 text-xs text-[#848b9b]">
+      <div className="mb-4 text-xs text-muted-foreground">
         Node ID: <code className="rounded bg-accent px-1 py-0.5">{node.id}</code>
       </div>
 
diff --git a/frontend/src/components/tree-editor/NodeEditorPanel.tsx b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
index 4e2e8c7a..9a170a01 100644
--- a/frontend/src/components/tree-editor/NodeEditorPanel.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
@@ -135,17 +135,17 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
   // Answer stub: show type picker instead of form
   if (node.type === 'answer') {
     return (
-      <div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-[#1e2130] bg-[#14161d]">
-        <div className="flex items-center justify-between border-b border-[#1e2130] px-4 py-3">
-          <span className="text-sm font-heading font-medium text-[#e2e5eb]">
+      <div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <span className="text-sm font-heading font-medium text-foreground">
             {node.title || 'Answer Placeholder'}
           </span>
-          <button onClick={handleClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
+          <button onClick={handleClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
             <X className="h-4 w-4" />
           </button>
         </div>
         <div className="flex flex-1 flex-col items-center justify-center gap-4 px-4">
-          <p className="text-sm text-[#848b9b] text-center">Choose a type for this node:</p>
+          <p className="text-sm text-muted-foreground text-center">Choose a type for this node:</p>
           <div className="flex gap-2">
             {(['decision', 'action', 'solution'] as const).map(type => {
               const cfg = TYPE_CONFIG[type]
@@ -178,14 +178,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
   const isRoot = treeStructure?.id === nodeId
 
   return (
-    <div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-[#1e2130] bg-[#14161d]">
+    <div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-border bg-card">
       {/* Header */}
-      <div className="flex items-center gap-2 border-b border-[#1e2130] px-4 py-3 shrink-0">
+      <div className="flex items-center gap-2 border-b border-border px-4 py-3 shrink-0">
         <span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
           <TypeIcon className="h-3 w-3" />
         </span>
-        <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">{title}</span>
-        <button onClick={handleClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
+        <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">{title}</span>
+        <button onClick={handleClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
           <X className="h-4 w-4" />
         </button>
       </div>
@@ -198,20 +198,20 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
       </div>
 
       {/* Footer */}
-      <div className="sticky bottom-0 flex items-center gap-2 border-t border-[#1e2130] bg-[#14161d] px-4 py-3 shrink-0">
+      <div className="sticky bottom-0 flex items-center gap-2 border-t border-border bg-card px-4 py-3 shrink-0">
         <button
           onClick={handleSave}
           disabled={!isDirty}
           className={cn(
             'flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-opacity',
-            isDirty ? 'bg-[#22d3ee] hover:brightness-110' : 'bg-[#22d3ee] opacity-50 cursor-not-allowed'
+            isDirty ? 'bg-primary hover:brightness-110' : 'bg-primary opacity-50 cursor-not-allowed'
           )}
         >
           <Save className="h-3.5 w-3.5" /> Save
         </button>
         <button
           onClick={handleClose}
-          className="rounded-lg border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           Cancel
         </button>
@@ -220,7 +220,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
           <>
             <button
               onClick={handleDuplicate}
-              className="rounded-md p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Duplicate"
             >
               <Copy className="h-4 w-4" />
@@ -235,7 +235,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
                 </button>
                 <button
                   onClick={() => setShowDeleteConfirm(false)}
-                  className="rounded-md px-2 py-1 text-xs text-[#848b9b] hover:bg-accent"
+                  className="rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
                 >
                   Cancel
                 </button>
@@ -243,7 +243,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
             ) : (
               <button
                 onClick={() => setShowDeleteConfirm(true)}
-                className="rounded-md p-2 text-[#848b9b] hover:bg-accent hover:text-red-400"
+                className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
                 title="Delete"
               >
                 <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/components/tree-editor/NodeFormAction.tsx b/frontend/src/components/tree-editor/NodeFormAction.tsx
index b86a3cdb..7fe6d886 100644
--- a/frontend/src/components/tree-editor/NodeFormAction.tsx
+++ b/frontend/src/components/tree-editor/NodeFormAction.tsx
@@ -51,7 +51,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">
+        <label className="block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -61,9 +61,9 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           placeholder="e.g., Restart the Service"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'bg-card text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            titleError ? 'border-red-400' : 'border-[#1e2130]'
+            titleError ? 'border-red-400' : 'border-border'
           )}
         />
         {titleError && (
@@ -74,7 +74,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+          <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
             Description
             <InfoTip text="Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`" />
           </label>
@@ -82,14 +82,14 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-[#1e2130] bg-accent/50 p-3 text-sm">
+          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -105,8 +105,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 **Note:** Important information here"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-              'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-background text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
@@ -115,7 +115,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Commands */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
           Commands
           <InfoTip text="PowerShell or CLI commands to execute" />
         </label>
@@ -132,8 +132,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               onChange={(e) => handleUpdateCommand(index, e.target.value)}
               placeholder="e.g., Get-Service BrokerAgent"
               className={cn(
-                'block w-full rounded-md border border-[#1e2130] px-3 py-2 font-mono text-sm',
-                'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'block w-full rounded-md border border-border px-3 py-2 font-mono text-sm',
+                'bg-background text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
               )}
             />
@@ -143,7 +143,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Expected Outcome */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">
+        <label className="block text-sm font-medium text-foreground">
           Expected Outcome
         </label>
         <input
@@ -152,8 +152,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           onChange={(e) => onUpdate({ expected_outcome: e.target.value })}
           placeholder="e.g., Service should show as Running"
           className={cn(
-            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-            'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
@@ -161,13 +161,13 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Link to existing node */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
           <Link2 className="h-3.5 w-3.5" />
           Next Step
         </label>
         {hasNextNode ? (
           <div className="mt-1 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2">
-            <span className="flex-1 truncate text-sm text-[#e2e5eb]">
+            <span className="flex-1 truncate text-sm text-foreground">
               Linked to: {(() => {
                 const treeStructure = useTreeEditorStore.getState().treeStructure
                 const allNodes = collectAllNodesFlat(treeStructure)
@@ -178,7 +178,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             <button
               type="button"
               onClick={() => onUpdate({ next_node_id: undefined })}
-              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Remove link"
             >
               <X className="h-3.5 w-3.5" />
@@ -193,8 +193,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               }
             }}
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-              'bg-[#14161d] text-[#e2e5eb]',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-card text-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
@@ -212,7 +212,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             })()}
           </select>
         )}
-        <p className="mt-1 text-xs text-[#848b9b]">
+        <p className="mt-1 text-xs text-muted-foreground">
           {hasNextNode
             ? 'This action will navigate to the linked node.'
             : 'Select a node to navigate to after this action, or save to create a new placeholder.'}
diff --git a/frontend/src/components/tree-editor/NodeFormDecision.tsx b/frontend/src/components/tree-editor/NodeFormDecision.tsx
index b595414d..eb84019a 100644
--- a/frontend/src/components/tree-editor/NodeFormDecision.tsx
+++ b/frontend/src/components/tree-editor/NodeFormDecision.tsx
@@ -91,7 +91,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Question */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">
+        <label className="block text-sm font-medium text-foreground">
           {isRootNode ? 'Starting Question' : 'Question'} <span className="text-red-400">*</span>
         </label>
         <input
@@ -103,9 +103,9 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
             : "e.g., Can you ping the server?"}
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'bg-card text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            questionError ? 'border-red-400' : 'border-[#1e2130]'
+            questionError ? 'border-red-400' : 'border-border'
           )}
         />
         {questionError && (
@@ -115,7 +115,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Help Text */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">
+        <label className="block text-sm font-medium text-foreground">
           Help Text
         </label>
         <textarea
@@ -124,8 +124,8 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
           placeholder="Additional context or instructions for this decision..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-            'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
@@ -133,13 +133,13 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Options */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
           {isRootNode ? 'Answer Options (Branches)' : 'Options'} <span className="text-red-400">*</span>
           <InfoTip text={isRootNode
             ? "Add as many options as needed (A, B, C, D...). Each option leads to a different troubleshooting path."
             : "Each option can branch to a different next step."} />
         </label>
-        <p className="text-xs text-[#848b9b] mt-1">Options become answer placeholders you can fill in later.</p>
+        <p className="text-xs text-muted-foreground mt-1">Options become answer placeholders you can fill in later.</p>
         {optionsError && (
           <p className="mt-1 text-xs text-red-400">{optionsError.message}</p>
         )}
@@ -162,7 +162,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                 <div className="flex items-center gap-2">
                   <span className={cn(
                     'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold',
-                    isRootNode ? 'bg-blue-500/20 text-blue-400' : 'bg-accent text-[#848b9b]'
+                    isRootNode ? 'bg-blue-500/20 text-blue-400' : 'bg-accent text-muted-foreground'
                   )}>
                     {letter}
                   </span>
@@ -186,9 +186,9 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                       }}
                       className={cn(
                         'block w-full rounded-md border px-3 py-2 text-sm',
-                        'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                        'bg-background text-foreground placeholder:text-muted-foreground',
                         'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary',
-                        optionLabelError ? 'border-red-400' : 'border-[#1e2130]'
+                        optionLabelError ? 'border-red-400' : 'border-border'
                       )}
                     />
                     {optionLabelError && (
@@ -205,7 +205,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                     const target = allNodes.find(n => n.id === option.next_node_id)
                     if (!target) return null
                     return (
-                      <div className="flex items-center gap-1 text-xs text-[#22d3ee]" title={`Links to: ${target.label}`}>
+                      <div className="flex items-center gap-1 text-xs text-primary" title={`Links to: ${target.label}`}>
                         <Link2 className="h-3 w-3" />
                       </div>
                     )
@@ -218,20 +218,20 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
         {/* Quick-link: assign an option to an existing node */}
         <details className="mt-2">
-          <summary className="cursor-pointer text-xs text-[#848b9b] hover:text-[#e2e5eb]">
+          <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
             <Link2 className="inline h-3 w-3 mr-1" />
             Link an option to an existing node (cross-reference)
           </summary>
-          <div className="mt-2 space-y-2 rounded-md border border-[#1e2130] bg-accent/30 p-3">
-            <p className="text-xs text-[#848b9b]">
+          <div className="mt-2 space-y-2 rounded-md border border-border bg-accent/30 p-3">
+            <p className="text-xs text-muted-foreground">
               Select an option, then pick a target node. This creates a loop-back or cross-reference.
             </p>
             <div className="flex gap-2">
               <select
                 id="xref-option-select"
                 className={cn(
-                  'flex-1 rounded-md border border-[#1e2130] px-2 py-1.5 text-xs',
-                  'bg-[#14161d] text-[#e2e5eb]'
+                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
+                  'bg-card text-foreground'
                 )}
                 defaultValue=""
               >
@@ -245,8 +245,8 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
               <select
                 id="xref-target-select"
                 className={cn(
-                  'flex-1 rounded-md border border-[#1e2130] px-2 py-1.5 text-xs',
-                  'bg-[#14161d] text-[#e2e5eb]'
+                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
+                  'bg-card text-foreground'
                 )}
                 defaultValue=""
                 onChange={(e) => {
@@ -280,7 +280,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
         {/* Example hint for root node */}
         {isRootNode && (node.options?.length || 0) < 2 && (
-          <div className="mt-3 rounded-md border border-dashed border-[#1e2130] bg-accent/50 p-3 text-xs text-[#848b9b]">
+          <div className="mt-3 rounded-md border border-dashed border-border bg-accent/50 p-3 text-xs text-muted-foreground">
             <strong>Tip:</strong> Most troubleshooting trees start with 2-5 main branches.
             For example: "Connection Issues", "Performance Problems", "Error Messages", "Other".
           </div>
diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx
index 084459af..4541813a 100644
--- a/frontend/src/components/tree-editor/NodeFormResolution.tsx
+++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx
@@ -48,7 +48,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">
+        <label className="block text-sm font-medium text-foreground">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -58,9 +58,9 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
           placeholder="e.g., VDA Successfully Registered"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'bg-card text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            titleError ? 'border-red-400' : 'border-[#1e2130]'
+            titleError ? 'border-red-400' : 'border-border'
           )}
         />
         {titleError && (
@@ -71,7 +71,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+          <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
             Description
             <InfoTip text="Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`" />
           </label>
@@ -79,14 +79,14 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-[#1e2130] bg-accent/50 p-3 text-sm">
+          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -101,8 +101,8 @@ Document what was done and the outcome.
 **Close ticket as:** Resolved"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-              'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-background text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
@@ -111,7 +111,7 @@ Document what was done and the outcome.
 
       {/* Resolution Steps */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
           Resolution Steps
           <InfoTip text="Step-by-step instructions for resolving the issue" />
         </label>
@@ -132,8 +132,8 @@ Document what was done and the outcome.
                 onChange={(e) => handleUpdateStep(index, e.target.value)}
                 placeholder={`Step ${index + 1}`}
                 className={cn(
-                  'block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-                  'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-md border border-border px-3 py-2 text-sm',
+                  'bg-background text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
                 )}
               />
diff --git a/frontend/src/components/tree-editor/NodeList.tsx b/frontend/src/components/tree-editor/NodeList.tsx
index 8769804a..9149197d 100644
--- a/frontend/src/components/tree-editor/NodeList.tsx
+++ b/frontend/src/components/tree-editor/NodeList.tsx
@@ -99,7 +99,7 @@ function NodeListItem({
     decision: 'bg-blue-500/20 text-blue-400',
     action: 'bg-yellow-500/20 text-yellow-400',
     solution: 'bg-green-500/20 text-green-400',
-    answer: 'bg-muted text-[#848b9b] border border-dashed border-[#1e2130]'
+    answer: 'bg-muted text-muted-foreground border border-dashed border-border'
   }
 
   const getNodeLabel = () => {
@@ -132,7 +132,7 @@ function NodeListItem({
           <span
             key={i}
             className={cn(
-              'inline-block w-5 text-center text-[#848b9b]/50',
+              'inline-block w-5 text-center text-muted-foreground/50',
               showLine ? 'border-l border-muted-foreground/30' : ''
             )}
           >
@@ -140,10 +140,10 @@ function NodeListItem({
           </span>
         ))}
         {/* Render current level connector */}
-        <span className="inline-block w-5 text-center text-[#848b9b]/50 font-mono text-xs">
+        <span className="inline-block w-5 text-center text-muted-foreground/50 font-mono text-xs">
           {isLast ? '└' : '├'}
         </span>
-        <span className="inline-block w-3 text-[#848b9b]/50 font-mono text-xs">──</span>
+        <span className="inline-block w-3 text-muted-foreground/50 font-mono text-xs">──</span>
       </div>
     )
   }
@@ -187,7 +187,7 @@ function NodeListItem({
               ? 'bg-blue-500/20 ring-2 ring-blue-500 shadow-xs'
               : 'bg-blue-500/10 border border-blue-500/30 hover:bg-blue-500/15'
             : isSelected
-            ? 'bg-[rgba(34,211,238,0.10)] ring-1 ring-primary'
+            ? 'bg-accent-dim ring-1 ring-primary'
             : 'hover:bg-accent',
           hasError && 'ring-1 ring-destructive',
           hasWarning && !hasError && 'ring-1 ring-yellow-500'
@@ -204,9 +204,9 @@ function NodeListItem({
             className="rounded p-0.5 hover:bg-muted"
           >
             {isCollapsed ? (
-              <ChevronRight className="h-3.5 w-3.5 text-[#848b9b]" />
+              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
             ) : (
-              <ChevronDown className="h-3.5 w-3.5 text-[#848b9b]" />
+              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
             )}
           </button>
         ) : (
@@ -216,7 +216,7 @@ function NodeListItem({
         {/* Drag handle */}
         {node.id !== 'root' && (
           <GripVertical
-            className="h-4 w-4 cursor-grab text-[#848b9b] opacity-0 group-hover:opacity-100"
+            className="h-4 w-4 cursor-grab text-muted-foreground opacity-0 group-hover:opacity-100"
             onMouseDown={() => { gripInitiated.current = true }}
             onMouseUp={() => { gripInitiated.current = false }}
           />
@@ -238,13 +238,13 @@ function NodeListItem({
 
         {/* From option label */}
         {fromOption && (
-          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-[#848b9b]">
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
             {fromOption}
           </span>
         )}
 
         {/* Node label */}
-        <span className="flex-1 truncate text-[#e2e5eb]">
+        <span className="flex-1 truncate text-foreground">
           {getNodeLabel()}
         </span>
 
@@ -272,7 +272,7 @@ function NodeListItem({
 
         {/* Node ID */}
         <span
-          className="hidden text-xs text-[#848b9b] sm:inline cursor-help"
+          className="hidden text-xs text-muted-foreground sm:inline cursor-help"
           title={`Full ID: ${node.id}`}
         >
           {node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
@@ -289,7 +289,7 @@ function NodeListItem({
               }}
               title="Add child node"
               aria-label="Add child node"
-              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
             >
               <Plus className="h-3 w-3" />
             </button>
@@ -302,7 +302,7 @@ function NodeListItem({
             }}
             title="Edit node"
             aria-label="Edit node"
-            className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
           >
             <Pencil className="h-3 w-3" />
           </button>
@@ -316,7 +316,7 @@ function NodeListItem({
                 }}
                 title="Duplicate node"
                 aria-label="Duplicate node"
-                className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
+                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
               >
                 <Copy className="h-3 w-3" />
               </button>
@@ -328,7 +328,7 @@ function NodeListItem({
                 }}
                 title="Delete node"
                 aria-label="Delete node"
-                className="rounded p-1 text-[#848b9b] hover:bg-destructive/20 hover:text-destructive"
+                className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
               >
                 <Trash2 className="h-3 w-3" />
               </button>
@@ -340,7 +340,7 @@ function NodeListItem({
       {/* Collapsed indicator */}
       {hasChildren && isCollapsed && (
         <div
-          className="text-xs text-[#848b9b] py-1"
+          className="text-xs text-muted-foreground py-1"
           style={{ marginLeft: `${(depth + 1) * 20 + 32}px` }}
         >
           <span className="rounded bg-muted px-2 py-0.5">
@@ -536,22 +536,22 @@ export function NodeList() {
 
   if (!treeStructure) {
     return (
-      <div className="rounded-lg border border-[#1e2130] bg-[#14161d] p-4 text-center text-sm text-[#848b9b]">
+      <div className="rounded-lg border border-border bg-card p-4 text-center text-sm text-muted-foreground">
         No tree structure. Add a root node to get started.
       </div>
     )
   }
 
   return (
-    <div className="rounded-lg border border-[#1e2130] bg-[#14161d]">
-      <div className="flex items-center justify-between border-b border-[#1e2130] p-3">
+    <div className="rounded-lg border border-border bg-card">
+      <div className="flex items-center justify-between border-b border-border p-3">
         <h2 className="text-sm font-semibold text-card-foreground">Nodes</h2>
         <button
           type="button"
           onClick={() => setAddingToParent(treeStructure.id)}
           className={cn(
             'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium',
-            'bg-primary text-[#22d3ee]-foreground hover:bg-primary/90'
+            'bg-primary text-primary-foreground hover:bg-primary/90'
           )}
         >
           <Plus className="h-3 w-3" />
@@ -581,8 +581,8 @@ export function NodeList() {
 
       {/* Add Node Type Selector */}
       {addingToParent && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0c0d10]/80">
-          <div className="w-full max-w-xs rounded-lg border border-[#1e2130] bg-[#14161d] p-4 shadow-lg">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80">
+          <div className="w-full max-w-xs rounded-lg border border-border bg-card p-4 shadow-lg">
             <h3 className="mb-3 text-sm font-semibold">Select Node Type</h3>
             <div className="space-y-2">
               <button
@@ -596,7 +596,7 @@ export function NodeList() {
                 <HelpCircle className="h-4 w-4 text-blue-500" />
                 <div>
                   <div className="font-medium">Decision</div>
-                  <div className="text-xs text-[#848b9b]">Question with options</div>
+                  <div className="text-xs text-muted-foreground">Question with options</div>
                 </div>
               </button>
               <button
@@ -610,7 +610,7 @@ export function NodeList() {
                 <Zap className="h-4 w-4 text-yellow-500" />
                 <div>
                   <div className="font-medium">Action</div>
-                  <div className="text-xs text-[#848b9b]">Task to perform</div>
+                  <div className="text-xs text-muted-foreground">Task to perform</div>
                 </div>
               </button>
               <button
@@ -624,7 +624,7 @@ export function NodeList() {
                 <CheckCircle className="h-4 w-4 text-green-500" />
                 <div>
                   <div className="font-medium">Solution</div>
-                  <div className="text-xs text-[#848b9b]">Resolution endpoint</div>
+                  <div className="text-xs text-muted-foreground">Resolution endpoint</div>
                 </div>
               </button>
             </div>
diff --git a/frontend/src/components/tree-editor/NodePicker.tsx b/frontend/src/components/tree-editor/NodePicker.tsx
index 32a18d64..ed137a0d 100644
--- a/frontend/src/components/tree-editor/NodePicker.tsx
+++ b/frontend/src/components/tree-editor/NodePicker.tsx
@@ -145,7 +145,7 @@ export function NodePicker({
   return (
     <div className={className}>
       {label && (
-        <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+        <label className="mb-1 block text-sm font-medium text-foreground">
           {label}
         </label>
       )}
@@ -153,8 +153,8 @@ export function NodePicker({
       {/* Inline node creation UI */}
       {creatingNodeType ? (
         <div className="space-y-2">
-          <div className="flex items-center gap-2 rounded-md border border-[#1e2130] bg-accent/50 p-2">
-            <span className="text-xs font-medium text-[#e2e5eb]">
+          <div className="flex items-center gap-2 rounded-md border border-border bg-accent/50 p-2">
+            <span className="text-xs font-medium text-foreground">
               New {NODE_TYPE_LABELS[creatingNodeType]}:
             </span>
             <input
@@ -165,8 +165,8 @@ export function NodePicker({
               onKeyDown={handleKeyDown}
               placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
               className={cn(
-                'flex-1 rounded-md border border-[#1e2130] px-2 py-1 text-sm',
-                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'flex-1 rounded-md border border-border px-2 py-1 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
@@ -175,7 +175,7 @@ export function NodePicker({
             <button
               type="button"
               onClick={handleCancelCreate}
-              className="flex-1 rounded-md border border-[#1e2130] px-3 py-1.5 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -185,7 +185,7 @@ export function NodePicker({
               disabled={!newNodeTitle.trim()}
               className={cn(
                 'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
-                'bg-[#22d3ee] text-white hover:brightness-110',
+                'bg-primary text-white hover:brightness-110',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
@@ -200,9 +200,9 @@ export function NodePicker({
             onChange={(e) => handleChange(e.target.value)}
             className={cn(
               'block w-full rounded-md border px-3 py-2 text-sm',
-              'bg-[#14161d] text-[#e2e5eb]',
+              'bg-card text-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              error ? 'border-red-400' : 'border-[#1e2130]'
+              error ? 'border-red-400' : 'border-border'
             )}
           >
             <option value="">{placeholder}</option>
@@ -250,7 +250,7 @@ export function NodePicker({
 
           {/* Show what's selected */}
           {value && selectedNode && (
-            <p className="mt-1 text-xs text-[#848b9b]">
+            <p className="mt-1 text-xs text-muted-foreground">
               → {selectedNode.label}
             </p>
           )}
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index dd6eb458..8fc4f5b0 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -64,8 +64,8 @@ interface AddNodePickerProps {
 
 function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
   return (
-    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-[#14161d] px-3 py-2 shadow-xs">
-      <span className="text-xs text-[#848b9b] shrink-0">Add:</span>
+    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-xs">
+      <span className="text-xs text-muted-foreground shrink-0">Add:</span>
 
       <button
         type="button"
@@ -106,7 +106,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
       <button
         type="button"
         onClick={onCancel}
-        className="ml-1 rounded p-0.5 text-[#848b9b] hover:bg-accent"
+        className="ml-1 rounded p-0.5 text-muted-foreground hover:bg-accent"
       >
         <X className="h-3 w-3" />
       </button>
@@ -128,8 +128,8 @@ function AddNodeButton({ label = 'Add node', onClick }: AddNodeButtonProps) {
       onClick={onClick}
       className={cn(
         'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-sans text-xs',
-        'border border-dashed border-[#1e2130] text-[#848b9b]',
-        'hover:border-primary/40 hover:text-[#e2e5eb] hover:bg-accent/50',
+        'border border-dashed border-border text-muted-foreground',
+        'hover:border-primary/40 hover:text-foreground hover:bg-accent/50',
         'transition-all duration-150'
       )}
     >
@@ -505,7 +505,7 @@ export function TreeCanvas() {
 
           {/* Option label tag (above card, shown when this is a branch from a decision) */}
           {optionLabel && (
-            <div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-[#848b9b] font-sans text-xs">
+            <div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground font-sans text-xs">
               {optionLabel}
             </div>
           )}
@@ -547,7 +547,7 @@ export function TreeCanvas() {
                 return (
                   <div key={opt.id} className="flex flex-col items-center gap-1">
                     <div className="h-4 w-px bg-border" />
-                    <span className="text-[10px] text-[#848b9b] font-sans text-xs">
+                    <span className="text-[10px] text-muted-foreground font-sans text-xs">
                       {opt.label || '(unlabeled option)'}
                     </span>
                     {pendingAddKey === key ? (
@@ -594,7 +594,7 @@ export function TreeCanvas() {
               <button
                 type="button"
                 onClick={() => handleToggleSubtreeCollapse(node.id)}
-                className="rounded-full border border-dashed border-[#1e2130] bg-[#14161d] px-3 py-1 text-[10px] text-[#848b9b] font-sans text-xs hover:border-primary/40 hover:text-[#e2e5eb] transition-colors"
+                className="rounded-full border border-dashed border-border bg-card px-3 py-1 text-[10px] text-muted-foreground font-sans text-xs hover:border-primary/40 hover:text-foreground transition-colors"
               >
                 {orderedChildren.length} node{orderedChildren.length !== 1 ? 's' : ''} hidden — click to expand
               </button>
@@ -676,7 +676,7 @@ export function TreeCanvas() {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <div className="mb-2 text-[#848b9b] text-sm">
+          <div className="mb-2 text-muted-foreground text-sm">
             No tree structure. Start by saving a tree name.
           </div>
         </div>
@@ -698,7 +698,7 @@ export function TreeCanvas() {
       <div className="flex min-h-full min-w-full items-start justify-center p-8 pb-24">
         <div className="flex flex-col items-center">
           {/* START badge above root */}
-          <div className="mb-2 rounded-full border border-[#1e2130] bg-[#14161d] px-3 py-1 text-xs font-sans text-xs text-[#848b9b]">
+          <div className="mb-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-sans text-xs text-muted-foreground">
             START
           </div>
           <div className="mb-1 h-4 w-px bg-border" />
diff --git a/frontend/src/components/tree-editor/TreeCanvasNode.tsx b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
index e745b74c..a9eb4320 100644
--- a/frontend/src/components/tree-editor/TreeCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
@@ -168,7 +168,7 @@ export function TreeCanvasNode({
   return (
     <div
       className={cn(
-        'relative rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs transition-all duration-150',
+        'relative rounded-xl border border-border bg-card shadow-xs transition-all duration-150',
         config.borderClass,
         isExpanded && 'ring-1 ring-primary shadow-md',
         isSelected && !isExpanded && 'ring-1 ring-primary/50',
@@ -186,7 +186,7 @@ export function TreeCanvasNode({
           'flex items-center gap-2 px-3 py-2.5',
           !isExpanded && 'cursor-pointer hover:bg-accent/50 rounded-t-xl',
           !isExpanded && 'rounded-xl',
-          isExpanded && 'sticky top-0 z-10 bg-[#14161d] rounded-t-xl'
+          isExpanded && 'sticky top-0 z-10 bg-card rounded-t-xl'
         )}
         onClick={!isExpanded ? handleCardClick : undefined}
       >
@@ -200,7 +200,7 @@ export function TreeCanvasNode({
               onDragStart(e, node.id)
             }}
           >
-            <GripVertical className="h-4 w-4 text-[#848b9b]/50" />
+            <GripVertical className="h-4 w-4 text-muted-foreground/50" />
           </span>
         )}
 
@@ -224,21 +224,21 @@ export function TreeCanvasNode({
 
         {/* From-option label */}
         {fromOption && (
-          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-[#848b9b] truncate max-w-[80px]">
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground truncate max-w-[80px]">
             {fromOption}
           </span>
         )}
 
         {/* Title text (compact mode) */}
         {!isExpanded && (
-          <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">
+          <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
             {getTitle()}
           </span>
         )}
 
         {/* Options count badge */}
         {!isExpanded && getOptionsSummary() && (
-          <span className="text-[10px] text-[#848b9b] shrink-0 font-sans text-xs">
+          <span className="text-[10px] text-muted-foreground shrink-0 font-sans text-xs">
             {getOptionsSummary()}
           </span>
         )}
@@ -276,7 +276,7 @@ export function TreeCanvasNode({
             type="button"
             onClick={(e) => { e.stopPropagation(); onToggleSubtreeCollapse() }}
             title={isSubtreeCollapsed ? 'Expand subtree' : 'Collapse subtree'}
-            className="rounded p-0.5 text-[#848b9b]/50 hover:bg-accent hover:text-[#e2e5eb] shrink-0"
+            className="rounded p-0.5 text-muted-foreground/50 hover:bg-accent hover:text-foreground shrink-0"
           >
             {isSubtreeCollapsed
               ? <ChevronsUpDown className="h-3.5 w-3.5" />
@@ -287,9 +287,9 @@ export function TreeCanvasNode({
 
         {/* Expand/collapse chevron */}
         {!isExpanded ? (
-          <ChevronRight className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
         ) : (
-          <ChevronDown className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
         )}
 
         {/* Editing action buttons (expanded state) */}
@@ -311,7 +311,7 @@ export function TreeCanvasNode({
                   onDuplicate(node.id)
                 }}
                 title="Duplicate node"
-                className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <Copy className="h-3.5 w-3.5" />
               </button>
@@ -326,7 +326,7 @@ export function TreeCanvasNode({
                   onDelete(node.id)
                 }}
                 title="Delete node"
-                className="rounded p-1 text-[#848b9b] hover:bg-destructive/20 hover:text-destructive"
+                className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
@@ -337,7 +337,7 @@ export function TreeCanvasNode({
               type="button"
               onClick={handleCancel}
               title={isNew ? 'Cancel (deletes this node)' : 'Cancel changes'}
-              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <X className="h-3.5 w-3.5" />
             </button>
@@ -347,7 +347,7 @@ export function TreeCanvasNode({
               type="button"
               onClick={handleSave}
               title="Save changes"
-              className="rounded p-1 bg-[#22d3ee] text-white hover:brightness-110"
+              className="rounded p-1 bg-primary text-white hover:brightness-110"
             >
               <Check className="h-3.5 w-3.5" />
             </button>
@@ -357,7 +357,7 @@ export function TreeCanvasNode({
 
       {/* Expanded editing area */}
       {isExpanded && (
-        <div className="border-t border-[#1e2130] px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
+        <div className="border-t border-border px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
           {/* Validation errors */}
           {(hasError || hasWarning) && (
             <div className="mb-3 space-y-1">
diff --git a/frontend/src/components/tree-editor/TreeEditorLayout.tsx b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
index 49199160..c2e81d7b 100644
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
@@ -46,11 +46,11 @@ export function TreeEditorLayout({
         <>
           {/* Code Mode: Monaco editor (60%) + Preview (40%) — unchanged */}
           <div className={cn(
-            'flex flex-col overflow-hidden border-[#1e2130]',
+            'flex flex-col overflow-hidden border-border',
             isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
           )}>
             <Suspense fallback={
-              <div className="flex h-full items-center justify-center bg-[#14161d]">
+              <div className="flex h-full items-center justify-center bg-card">
                 <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
               </div>
             }>
diff --git a/frontend/src/components/tree-editor/TreeMetadataForm.tsx b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
index 2894856d..53b441a7 100644
--- a/frontend/src/components/tree-editor/TreeMetadataForm.tsx
+++ b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
@@ -56,12 +56,12 @@ export function TreeMetadataForm() {
   )
 
   return (
-    <div className="space-y-4 bg-[#14161d] border border-[#1e2130] rounded-2xl p-4">
-      <h2 className="text-sm font-semibold text-[#e2e5eb]">Tree Details</h2>
+    <div className="space-y-4 bg-card border border-border rounded-2xl p-4">
+      <h2 className="text-sm font-semibold text-foreground">Tree Details</h2>
 
       {/* Name */}
       <div>
-        <label htmlFor="tree-name" className="block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
           Name <span className="text-red-400">*</span>
         </label>
         <input
@@ -72,9 +72,9 @@ export function TreeMetadataForm() {
           placeholder="e.g., VDA Registration Troubleshooting"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'bg-card text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            nameError ? 'border-red-400' : 'border-[#1e2130]'
+            nameError ? 'border-red-400' : 'border-border'
           )}
         />
         {nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>}
@@ -82,7 +82,7 @@ export function TreeMetadataForm() {
 
       {/* Description */}
       <div>
-        <label htmlFor="tree-description" className="block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
           Description
         </label>
         <textarea
@@ -92,8 +92,8 @@ export function TreeMetadataForm() {
           placeholder="Brief description of what this tree troubleshoots..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+            'bg-card text-foreground placeholder:text-muted-foreground',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
           )}
         />
@@ -101,7 +101,7 @@ export function TreeMetadataForm() {
 
       {/* Category */}
       <div>
-        <label htmlFor="tree-category" className="block text-sm font-medium text-[#e2e5eb]">
+        <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
           Category
         </label>
         {!customCategory ? (
@@ -110,8 +110,8 @@ export function TreeMetadataForm() {
             value={categoryId || ''}
             onChange={(e) => handleCategoryChange(e.target.value)}
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-              'bg-[#14161d] text-[#e2e5eb]',
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-card text-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
@@ -132,8 +132,8 @@ export function TreeMetadataForm() {
               onChange={(e) => setCategory(e.target.value)}
               placeholder="Enter new category"
               className={cn(
-                'block min-w-0 flex-1 rounded-md border border-[#1e2130] px-3 py-2 text-sm',
-                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'block min-w-0 flex-1 rounded-md border border-border px-3 py-2 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
               autoFocus
@@ -145,7 +145,7 @@ export function TreeMetadataForm() {
                 setCategory('')
                 setCategoryId(null)
               }}
-              className="shrink-0 rounded-md border border-[#1e2130] px-2.5 py-2 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="shrink-0 rounded-md border border-border px-2.5 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -155,7 +155,7 @@ export function TreeMetadataForm() {
 
       {/* Tags */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">Tags</label>
+        <label className="block text-sm font-medium text-foreground">Tags</label>
         <div className="mt-1">
           <TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." />
         </div>
@@ -163,13 +163,13 @@ export function TreeMetadataForm() {
 
       {/* Visibility */}
       <div>
-        <label className="block text-sm font-medium text-[#e2e5eb]">Visibility</label>
+        <label className="block text-sm font-medium text-foreground">Visibility</label>
         <div className="mt-2 flex gap-4">
           <label
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              !isPublic ? 'border-primary/30 bg-accent text-[#e2e5eb]' : 'border-[#1e2130] text-[#848b9b] hover:bg-accent/50'
+              !isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -186,7 +186,7 @@ export function TreeMetadataForm() {
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              isPublic ? 'border-primary/30 bg-accent text-[#e2e5eb]' : 'border-[#1e2130] text-[#848b9b] hover:bg-accent/50'
+              isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -200,7 +200,7 @@ export function TreeMetadataForm() {
             <span className="text-sm">Public</span>
           </label>
         </div>
-        <p className="mt-1 text-xs text-[#848b9b]">
+        <p className="mt-1 text-xs text-muted-foreground">
           {isPublic
             ? 'Anyone can view this tree'
             : 'Only you and your team can view this tree'}
diff --git a/frontend/src/components/tree-editor/ValidationSummary.tsx b/frontend/src/components/tree-editor/ValidationSummary.tsx
index e899fe05..2ffb49f0 100644
--- a/frontend/src/components/tree-editor/ValidationSummary.tsx
+++ b/frontend/src/components/tree-editor/ValidationSummary.tsx
@@ -76,8 +76,8 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
             className={cn(
               'flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',
               isFixing
-                ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] cursor-wait'
-                : 'bg-[#22d3ee] text-white hover:brightness-110'
+                ? 'bg-accent-dim text-primary cursor-wait'
+                : 'bg-primary text-white hover:brightness-110'
             )}
           >
             {isFixing ? (
@@ -114,7 +114,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
               <div className="flex-1">
                 <p className="text-red-400">{error.message}</p>
                 {error.nodeId && (
-                  <p className="mt-0.5 text-xs text-[#848b9b]">
+                  <p className="mt-0.5 text-xs text-muted-foreground">
                     Click to select {itemLabel}: {error.nodeId}
                   </p>
                 )}
@@ -138,7 +138,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
               <div className="flex-1">
                 <p className="text-yellow-400">{warning.message}</p>
                 {warning.nodeId && (
-                  <p className="mt-0.5 text-xs text-[#848b9b]">
+                  <p className="mt-0.5 text-xs text-muted-foreground">
                     Click to select {itemLabel}: {warning.nodeId}
                   </p>
                 )}
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
index 29ce19e2..8f046c07 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
@@ -167,7 +167,7 @@ export function CodeModeEditor() {
           beforeMount={handleEditorWillMount}
           onMount={handleEditorDidMount}
           loading={
-            <div className="flex h-full items-center justify-center bg-[#14161d]">
+            <div className="flex h-full items-center justify-center bg-card">
               <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
             </div>
           }
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
index 733e2c16..b2a65638 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
@@ -91,15 +91,15 @@ export function CodeModeToolbar({
   }, [])
 
   return (
-    <div className="flex items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-3 py-1.5">
+    <div className="flex items-center justify-between border-b border-border bg-card px-3 py-1.5">
       <div className="flex items-center gap-2">
         {/* Insert Node dropdown */}
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setInsertOpen(!insertOpen)}
             className={cn(
-              'flex items-center gap-1 rounded-md border border-[#1e2130] px-2.5 py-1 text-xs font-medium text-[#848b9b]',
-              'hover:bg-accent hover:text-[#e2e5eb]'
+              'flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             <Plus className="h-3 w-3" />
@@ -107,24 +107,24 @@ export function CodeModeToolbar({
             <ChevronDown className="h-3 w-3" />
           </button>
           {insertOpen && (
-            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-[#1e2130] bg-[#14161d] py-1 shadow-xl">
+            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.decision); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-blue-400" />
                 Decision
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.action); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-amber-400" />
                 Action
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.solution); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-emerald-400" />
                 Solution
@@ -139,8 +139,8 @@ export function CodeModeToolbar({
         <div className="flex items-center gap-1.5 text-xs">
           {isValidating ? (
             <>
-              <Loader2 className="h-3 w-3 animate-spin text-[#848b9b]" />
-              <span className="text-[#848b9b]">Validating...</span>
+              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+              <span className="text-muted-foreground">Validating...</span>
             </>
           ) : isValid ? (
             <>
@@ -173,8 +173,8 @@ export function CodeModeToolbar({
           className={cn(
             'flex items-center gap-1 rounded-md px-2 py-1 text-xs',
             syntaxHelpOpen
-              ? 'bg-accent text-[#e2e5eb]'
-              : 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
+              ? 'bg-accent text-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
           )}
         >
           <HelpCircle className="h-3 w-3" />
diff --git a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
index a0911ca9..77b06cc0 100644
--- a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
+++ b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
@@ -10,17 +10,17 @@ export function SyntaxHelpPanel({ open, onClose }: SyntaxHelpPanelProps) {
   if (!open) return null
 
   return (
-    <div className="flex h-full flex-col border-l border-[#1e2130] bg-[#14161d]">
-      <div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-2">
-        <span className="text-xs font-medium text-[#848b9b]">Syntax Reference</span>
+    <div className="flex h-full flex-col border-l border-border bg-card">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="text-xs font-medium text-muted-foreground">Syntax Reference</span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
+          className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-muted-foreground"
         >
           <X className="h-3.5 w-3.5" />
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-[#848b9b]">
+      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-muted-foreground">
         <Section title="Node Structure">
           <Code>{`---
 id: node_id
@@ -82,7 +82,7 @@ Description paragraph.
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="mb-4">
-      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[#848b9b]">{title}</h4>
+      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h4>
       {children}
     </div>
   )
@@ -91,8 +91,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function Code({ children }: { children: string }) {
   return (
     <pre className={cn(
-      'mb-2 overflow-x-auto rounded-md border border-[#1e2130] bg-[#14161d] px-2 py-1.5',
-      'text-[10px] leading-relaxed text-[#848b9b] whitespace-pre'
+      'mb-2 overflow-x-auto rounded-md border border-border bg-card px-2 py-1.5',
+      'text-[10px] leading-relaxed text-muted-foreground whitespace-pre'
     )}>
       {children}
     </pre>
@@ -102,8 +102,8 @@ function Code({ children }: { children: string }) {
 function Row({ label, code }: { label: string; code: string }) {
   return (
     <div className="flex items-center justify-between py-0.5">
-      <span className="text-[#848b9b]">{label}</span>
-      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-[#848b9b]">{code}</code>
+      <span className="text-muted-foreground">{label}</span>
+      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
     </div>
   )
 }
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 457b5802..abc69e20 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -8,15 +8,15 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-[#22d3ee] text-white font-semibold hover:brightness-110',
+          'bg-primary text-white font-semibold hover:brightness-110',
         secondary:
-          'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb] hover:border-[#2a2f3d] hover:bg-[#1e2130]',
+          'bg-input border border-border text-foreground hover:border-border-hover hover:bg-border',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:
-          'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
         link:
-          'text-[#22d3ee] underline-offset-4 hover:underline p-0 h-auto',
+          'text-primary underline-offset-4 hover:underline p-0 h-auto',
       },
       size: {
         sm: 'h-8 px-3 text-xs rounded-lg',
diff --git a/frontend/src/components/ui/FormField.tsx b/frontend/src/components/ui/FormField.tsx
index 4cc4015a..6e5faae3 100644
--- a/frontend/src/components/ui/FormField.tsx
+++ b/frontend/src/components/ui/FormField.tsx
@@ -11,13 +11,13 @@ interface FormFieldProps {
 export function FormField({ label, htmlFor, required, hint, children }: FormFieldProps) {
   return (
     <div className="space-y-1.5">
-      <label htmlFor={htmlFor} className="text-sm font-medium text-[#e2e5eb]">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
         {label}
         {required && <span className="ml-0.5 text-red-400">*</span>}
       </label>
       {children}
       {hint && (
-        <p className="text-xs text-[#848b9b]">{hint}</p>
+        <p className="text-xs text-muted-foreground">{hint}</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
index 63fdd993..98f75c83 100644
--- a/frontend/src/components/ui/Input.tsx
+++ b/frontend/src/components/ui/Input.tsx
@@ -10,8 +10,8 @@ export function Input({ className, error, id, ...props }: InputProps) {
       <input
         id={id}
         className={cn(
-          'flex h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-          'placeholder:text-[#848b9b]',
+          'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+          'placeholder:text-muted-foreground',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
diff --git a/frontend/src/components/ui/MarkdownContent.tsx b/frontend/src/components/ui/MarkdownContent.tsx
index 82cafd56..ac7596e1 100644
--- a/frontend/src/components/ui/MarkdownContent.tsx
+++ b/frontend/src/components/ui/MarkdownContent.tsx
@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style bold text
         strong: ({ children }) => (
-          <strong className="font-semibold text-[#e2e5eb]">{children}</strong>
+          <strong className="font-semibold text-foreground">{children}</strong>
         ),
         // Style ordered lists
         ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style list items
         li: ({ children }) => (
-          <li className="text-[#848b9b]">{children}</li>
+          <li className="text-muted-foreground">{children}</li>
         ),
         // Style inline code
         code: ({ className, children, ...props }) => {
@@ -69,19 +69,19 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style headers
         h1: ({ children }) => (
-          <h1 className="mb-3 text-lg font-bold text-[#e2e5eb]">{children}</h1>
+          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
         ),
         h2: ({ children }) => (
-          <h2 className="mb-2 text-base font-bold text-[#e2e5eb]">{children}</h2>
+          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
         ),
         h3: ({ children }) => (
-          <h3 className="mb-2 text-sm font-bold text-[#e2e5eb]">{children}</h3>
+          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
         ),
         // Style horizontal rules
-        hr: () => <hr className="my-4 border-[#1e2130]" />,
+        hr: () => <hr className="my-4 border-border" />,
         // Style blockquotes
         blockquote: ({ children }) => (
-          <blockquote className="mb-3 border-l-4 border-[#1e2130] pl-4 italic text-[#848b9b] last:mb-0">
+          <blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
             {children}
           </blockquote>
         ),
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index eb86275e..9890d317 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -47,7 +47,7 @@ export function ListSkeleton({ count = 5, className }: { count?: number; classNa
   return (
     <div className={cn('space-y-3', className)}>
       {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-[#14161d]">
+        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-card">
           <Skeleton className="size-8 rounded-full shrink-0" />
           <div className="flex-1 space-y-2">
             <Skeleton className="h-4 w-2/3" />
diff --git a/frontend/src/components/ui/Textarea.tsx b/frontend/src/components/ui/Textarea.tsx
index 3e8b05d5..6109dd1b 100644
--- a/frontend/src/components/ui/Textarea.tsx
+++ b/frontend/src/components/ui/Textarea.tsx
@@ -10,8 +10,8 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
       <textarea
         id={id}
         className={cn(
-          'flex w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-          'placeholder:text-[#848b9b]',
+          'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+          'placeholder:text-muted-foreground',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
diff --git a/frontend/src/pages/AccountSettingsPage.tsx b/frontend/src/pages/AccountSettingsPage.tsx
index 7f89e402..530236d7 100644
--- a/frontend/src/pages/AccountSettingsPage.tsx
+++ b/frontend/src/pages/AccountSettingsPage.tsx
@@ -167,23 +167,23 @@ export function AccountSettingsPage() {
     <div>
       <div className="mb-8">
         <div className="flex items-center gap-3">
-          <Building2 className="h-8 w-8 text-[#848b9b]" />
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Account Settings</h1>
+          <Building2 className="h-8 w-8 text-muted-foreground" />
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Account Settings</h1>
         </div>
-        <p className="mt-2 text-[#848b9b]">
+        <p className="mt-2 text-muted-foreground">
           Manage your account, subscription, and team
         </p>
       </div>
 
       <div className="max-w-3xl space-y-6">
         {/* Account Info Section */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Account Information</h2>
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
+          <h2 className="text-lg font-semibold text-foreground">Account Information</h2>
 
           <div className="mt-4 space-y-4">
             {/* Account Name */}
             <div>
-              <label className="block text-sm font-medium text-[#e2e5eb]">
+              <label className="block text-sm font-medium text-foreground">
                 Account Name
               </label>
               {isEditingName ? (
@@ -193,8 +193,8 @@ export function AccountSettingsPage() {
                     value={editedName}
                     onChange={(e) => setEditedName(e.target.value)}
                     className={cn(
-                      'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                      'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                      'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                      'text-foreground placeholder:text-muted-foreground',
                       'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                     )}
                     autoFocus
@@ -226,11 +226,11 @@ export function AccountSettingsPage() {
                 </div>
               ) : (
                 <div className="mt-1 flex items-center gap-2">
-                  <span className="text-sm text-[#e2e5eb]">{account?.name}</span>
+                  <span className="text-sm text-foreground">{account?.name}</span>
                   {isAccountOwner && (
                     <button
                       onClick={() => setIsEditingName(true)}
-                      className="text-xs text-[#e2e5eb] hover:underline"
+                      className="text-xs text-foreground hover:underline"
                     >
                       Edit
                     </button>
@@ -241,10 +241,10 @@ export function AccountSettingsPage() {
 
             {/* Display Code */}
             <div>
-              <label className="block text-sm font-medium text-[#e2e5eb]">
+              <label className="block text-sm font-medium text-foreground">
                 Display Code
               </label>
-              <p className="mt-1 text-sm font-mono text-[#848b9b]">
+              <p className="mt-1 text-sm font-mono text-muted-foreground">
                 {account?.display_code}
               </p>
             </div>
@@ -252,8 +252,8 @@ export function AccountSettingsPage() {
         </div>
 
         {/* Subscription Section */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Subscription</h2>
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
+          <h2 className="text-lg font-semibold text-foreground">Subscription</h2>
 
           <div className="mt-4 space-y-4">
             {/* Plan & Status */}
@@ -261,9 +261,9 @@ export function AccountSettingsPage() {
               <span
                 className={cn(
                   'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
-                  plan === 'free' && 'bg-accent text-[#848b9b]',
-                  plan === 'pro' && 'bg-accent text-[#e2e5eb]',
-                  plan === 'team' && 'bg-accent text-[#e2e5eb]'
+                  plan === 'free' && 'bg-accent text-muted-foreground',
+                  plan === 'pro' && 'bg-accent text-foreground',
+                  plan === 'team' && 'bg-accent text-foreground'
                 )}
               >
                 <Crown className="h-3.5 w-3.5" />
@@ -277,7 +277,7 @@ export function AccountSettingsPage() {
                     sub.status === 'trialing' && 'bg-blue-500/10 text-blue-400',
                     sub.status === 'past_due' && 'bg-yellow-500/10 text-yellow-400',
                     sub.status === 'canceled' && 'bg-red-400/10 text-red-400',
-                    sub.status === 'orphaned' && 'bg-accent text-[#848b9b]'
+                    sub.status === 'orphaned' && 'bg-accent text-muted-foreground'
                   )}
                 >
                   {sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')}
@@ -286,7 +286,7 @@ export function AccountSettingsPage() {
             </div>
 
             {sub?.current_period_end && (
-              <p className="text-sm text-[#848b9b]">
+              <p className="text-sm text-muted-foreground">
                 Current period ends: {new Date(sub.current_period_end).toLocaleDateString()}
               </p>
             )}
@@ -329,14 +329,14 @@ export function AccountSettingsPage() {
 
         {/* Team Members Section (owners only) */}
         {isAccountOwner && (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
+          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
             <div className="flex items-center gap-2">
-              <Users className="h-5 w-5 text-[#848b9b]" />
-              <h2 className="text-lg font-semibold text-[#e2e5eb]">Team Members</h2>
+              <Users className="h-5 w-5 text-muted-foreground" />
+              <h2 className="text-lg font-semibold text-foreground">Team Members</h2>
             </div>
 
             {members.length === 0 ? (
-              <p className="mt-4 text-sm text-[#848b9b]">No team members yet.</p>
+              <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
             ) : (
               <div className="mt-4 divide-y divide-border">
                 {members.map((member) => (
@@ -345,12 +345,12 @@ export function AccountSettingsPage() {
                     className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
                   >
                     <div>
-                      <p className="text-sm font-medium text-[#e2e5eb]">{member.name}</p>
-                      <p className="text-xs text-[#848b9b]">{member.email}</p>
+                      <p className="text-sm font-medium text-foreground">{member.name}</p>
+                      <p className="text-xs text-muted-foreground">{member.email}</p>
                     </div>
                     <div className="flex items-center gap-3">
                       {member.account_role === 'owner' ? (
-                        <span className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent text-[#e2e5eb]">
+                        <span className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-accent text-foreground">
                           owner
                         </span>
                       ) : (
@@ -366,8 +366,8 @@ export function AccountSettingsPage() {
                             }
                           }}
                           className={cn(
-                            'rounded-md border border-[#1e2130] bg-[#14161d] px-2 py-0.5 text-xs',
-                            'text-[#e2e5eb] focus:border-primary focus:outline-hidden'
+                            'rounded-md border border-border bg-card px-2 py-0.5 text-xs',
+                            'text-foreground focus:border-primary focus:outline-hidden'
                           )}
                         >
                           <option value="engineer">engineer</option>
@@ -382,7 +382,7 @@ export function AccountSettingsPage() {
                       {member.account_role !== 'owner' && (
                         <button
                           onClick={() => handleRemoveMember(member.id)}
-                          className="text-[#848b9b] hover:text-red-400"
+                          className="text-muted-foreground hover:text-red-400"
                           title="Remove member"
                         >
                           <X className="h-4 w-4" />
@@ -398,10 +398,10 @@ export function AccountSettingsPage() {
 
         {/* Invite Member Section (owners only) */}
         {isAccountOwner && (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
+          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
             <div className="flex items-center gap-2">
-              <Mail className="h-5 w-5 text-[#848b9b]" />
-              <h2 className="text-lg font-semibold text-[#e2e5eb]">Invite Member</h2>
+              <Mail className="h-5 w-5 text-muted-foreground" />
+              <h2 className="text-lg font-semibold text-foreground">Invite Member</h2>
             </div>
 
             <form onSubmit={handleInvite} className="mt-4 space-y-3">
@@ -413,8 +413,8 @@ export function AccountSettingsPage() {
                   onChange={(e) => setInviteEmail(e.target.value)}
                   required
                   className={cn(
-                    'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
@@ -422,8 +422,8 @@ export function AccountSettingsPage() {
                   value={inviteRole}
                   onChange={(e) => setInviteRole(e.target.value)}
                   className={cn(
-                    'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                    'rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 >
                   <option value="engineer">Engineer</option>
@@ -449,7 +449,7 @@ export function AccountSettingsPage() {
             {/* Pending Invites */}
             {invites.length > 0 && (
               <div className="mt-6">
-                <h3 className="text-sm font-medium text-[#e2e5eb]">Pending Invites</h3>
+                <h3 className="text-sm font-medium text-foreground">Pending Invites</h3>
                 <div className="mt-2 divide-y divide-border">
                   {invites
                     .filter((inv) => !inv.used_at)
@@ -459,21 +459,21 @@ export function AccountSettingsPage() {
                         className="flex items-center justify-between py-2"
                       >
                         <div>
-                          <p className="text-sm text-[#e2e5eb]">{invite.email}</p>
-                          <p className="text-xs text-[#848b9b]">
+                          <p className="text-sm text-foreground">{invite.email}</p>
+                          <p className="text-xs text-muted-foreground">
                             {invite.expires_at
                               ? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
                               : 'No expiration'}
                           </p>
                         </div>
                         <div className="flex items-center gap-2">
-                          <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-[#848b9b]">
+                          <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-muted-foreground">
                             {invite.role}
                           </span>
                           <button
                             onClick={() => handleResendInvite(invite.id)}
                             disabled={resendingId === invite.id}
-                            className="text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-50"
+                            className="text-muted-foreground hover:text-foreground disabled:opacity-50"
                             title="Resend invite"
                           >
                             {resendingId === invite.id ? (
@@ -494,32 +494,32 @@ export function AccountSettingsPage() {
         {/* Profile Settings Link */}
         <Link
           to="/account/profile"
-          className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+          className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
         >
           <div className="flex items-center gap-3">
-            <UserCog className="h-5 w-5 text-[#848b9b]" />
+            <UserCog className="h-5 w-5 text-muted-foreground" />
             <div>
-              <h2 className="text-lg font-semibold text-[#e2e5eb]">Profile Settings</h2>
-              <p className="text-sm text-[#848b9b]">Update your name, email, and personal details</p>
+              <h2 className="text-lg font-semibold text-foreground">Profile Settings</h2>
+              <p className="text-sm text-muted-foreground">Update your name, email, and personal details</p>
             </div>
           </div>
-          <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+          <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
         </Link>
 
         {/* Team Categories Link (owners only) */}
         {isAccountOwner && (
           <Link
             to="/account/categories"
-            className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <FolderTree className="h-5 w-5 text-[#848b9b]" />
+              <FolderTree className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Team Categories</h2>
-                <p className="text-sm text-[#848b9b]">Manage tree categories for your team</p>
+                <h2 className="text-lg font-semibold text-foreground">Team Categories</h2>
+                <p className="text-sm text-muted-foreground">Manage tree categories for your team</p>
               </div>
             </div>
-            <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
@@ -527,16 +527,16 @@ export function AccountSettingsPage() {
         {isAccountOwner && (
           <Link
             to="/account/target-lists"
-            className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <Server className="h-5 w-5 text-[#848b9b]" />
+              <Server className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Target Lists</h2>
-                <p className="text-sm text-[#848b9b]">Saved server lists for maintenance flow batch launching</p>
+                <h2 className="text-lg font-semibold text-foreground">Target Lists</h2>
+                <p className="text-sm text-muted-foreground">Saved server lists for maintenance flow batch launching</p>
               </div>
             </div>
-            <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
@@ -544,16 +544,16 @@ export function AccountSettingsPage() {
         {isAccountOwner && (
           <Link
             to="/account/chat-retention"
-            className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <Clock className="h-5 w-5 text-[#848b9b]" />
+              <Clock className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Chat Retention</h2>
-                <p className="text-sm text-[#848b9b]">Configure AI assistant conversation retention policies</p>
+                <h2 className="text-lg font-semibold text-foreground">Chat Retention</h2>
+                <p className="text-sm text-muted-foreground">Configure AI assistant conversation retention policies</p>
               </div>
             </div>
-            <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
@@ -561,16 +561,16 @@ export function AccountSettingsPage() {
         {isAccountOwner && (
           <Link
             to="/account/integrations"
-            className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <Plug className="h-5 w-5 text-[#848b9b]" />
+              <Plug className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Integrations</h2>
-                <p className="text-sm text-[#848b9b]">Connect your PSA to sync session documentation to tickets</p>
+                <h2 className="text-lg font-semibold text-foreground">Integrations</h2>
+                <p className="text-sm text-muted-foreground">Connect your PSA to sync session documentation to tickets</p>
               </div>
             </div>
-            <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
@@ -578,32 +578,32 @@ export function AccountSettingsPage() {
         {isAccountOwner && (
           <Link
             to="/account/branding"
-            className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+            className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
           >
             <div className="flex items-center gap-3">
-              <Palette className="h-5 w-5 text-[#848b9b]" />
+              <Palette className="h-5 w-5 text-muted-foreground" />
               <div>
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Branding</h2>
-                <p className="text-sm text-[#848b9b]">Customize logo, accent color, and company name</p>
+                <h2 className="text-lg font-semibold text-foreground">Branding</h2>
+                <p className="text-sm text-muted-foreground">Customize logo, accent color, and company name</p>
               </div>
             </div>
-            <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+            <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
           </Link>
         )}
 
         {/* Feedback Link (all users) */}
         <Link
           to="/feedback"
-          className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-[#1e2130] transition-all"
+          className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
         >
           <div className="flex items-center gap-3">
-            <MessageSquareText className="h-5 w-5 text-[#848b9b]" />
+            <MessageSquareText className="h-5 w-5 text-muted-foreground" />
             <div>
-              <h2 className="text-lg font-semibold text-[#e2e5eb]">Send Feedback</h2>
-              <p className="text-sm text-[#848b9b]">Report bugs, request features, or share your thoughts</p>
+              <h2 className="text-lg font-semibold text-foreground">Send Feedback</h2>
+              <p className="text-sm text-muted-foreground">Report bugs, request features, or share your thoughts</p>
             </div>
           </div>
-          <span className="text-[#848b9b] group-hover:text-[#e2e5eb] transition-colors">&rarr;</span>
+          <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
         </Link>
 
         {/* Branding Section (owners only) */}
@@ -612,20 +612,20 @@ export function AccountSettingsPage() {
         )}
 
         {/* Preferences Section */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
+        <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
           <div className="flex items-center gap-2">
-            <Settings className="h-5 w-5 text-[#848b9b]" />
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">Preferences</h2>
+            <Settings className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Preferences</h2>
           </div>
 
           <div className="mt-4">
             <label
               htmlFor="export-format"
-              className="block text-sm font-medium text-[#e2e5eb]"
+              className="block text-sm font-medium text-foreground"
             >
               Default Export Format
             </label>
-            <p className="text-sm text-[#848b9b]">
+            <p className="text-sm text-muted-foreground">
               This format will be pre-selected when exporting sessions
             </p>
             <select
@@ -636,8 +636,8 @@ export function AccountSettingsPage() {
                 toast.success('Preference saved')
               }}
               className={cn(
-                'mt-2 block w-full max-w-xs rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                'text-sm text-[#e2e5eb]',
+                'mt-2 block w-full max-w-xs rounded-xl border border-border bg-card px-3 py-2',
+                'text-sm text-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             >
@@ -649,15 +649,15 @@ export function AccountSettingsPage() {
         </div>
         {/* SSO Section (Task 11) */}
         {isAccountOwner && (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6">
+          <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
             <div className="flex items-center gap-2 mb-3">
-              <ShieldCheck className="h-5 w-5 text-[#848b9b]" />
-              <h2 className="text-lg font-semibold text-[#e2e5eb]">Single Sign-On (SSO)</h2>
-              <span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-[#22d3ee]">
+              <ShieldCheck className="h-5 w-5 text-muted-foreground" />
+              <h2 className="text-lg font-semibold text-foreground">Single Sign-On (SSO)</h2>
+              <span className="inline-flex items-center rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-primary">
                 Enterprise
               </span>
             </div>
-            <p className="text-sm text-[#848b9b] mb-4">
+            <p className="text-sm text-muted-foreground mb-4">
               SAML and OIDC single sign-on is available for enterprise plans. Contact us to enable SSO for
               your organization.
             </p>
@@ -665,7 +665,7 @@ export function AccountSettingsPage() {
               href="mailto:support@resolutionflow.com?subject=SSO%20Setup%20Request"
               className={cn(
                 'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+                'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
                 'hover:border-[rgba(255,255,255,0.12)] transition-all'
               )}
             >
@@ -678,7 +678,7 @@ export function AccountSettingsPage() {
         <div className="rounded-xl border border-rose-500/20 p-4 sm:p-6">
           <div className="flex items-center gap-2 mb-4">
             <AlertTriangle className="h-5 w-5 text-rose-500" />
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">Danger Zone</h2>
+            <h2 className="text-lg font-semibold text-foreground">Danger Zone</h2>
           </div>
 
           <div className="space-y-3">
@@ -686,8 +686,8 @@ export function AccountSettingsPage() {
               <>
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm font-medium text-[#e2e5eb]">Transfer Ownership</p>
-                    <p className="text-xs text-[#848b9b]">Make another member the account owner</p>
+                    <p className="text-sm font-medium text-foreground">Transfer Ownership</p>
+                    <p className="text-xs text-muted-foreground">Make another member the account owner</p>
                   </div>
                   <Button
                     variant="secondary"
@@ -698,10 +698,10 @@ export function AccountSettingsPage() {
                     Transfer
                   </Button>
                 </div>
-                <div className="flex items-center justify-between border-t border-[#1e2130] pt-3">
+                <div className="flex items-center justify-between border-t border-border pt-3">
                   <div>
-                    <p className="text-sm font-medium text-[#e2e5eb]">Delete Account</p>
-                    <p className="text-xs text-[#848b9b]">Permanently delete your account and all data</p>
+                    <p className="text-sm font-medium text-foreground">Delete Account</p>
+                    <p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
                   </div>
                   <Button
                     variant="destructive"
@@ -715,8 +715,8 @@ export function AccountSettingsPage() {
             ) : (
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium text-[#e2e5eb]">Leave Account</p>
-                  <p className="text-xs text-[#848b9b]">Leave this account and create a personal one</p>
+                  <p className="text-sm font-medium text-foreground">Leave Account</p>
+                  <p className="text-xs text-muted-foreground">Leave this account and create a personal one</p>
                 </div>
                 <Button
                   variant="destructive"
@@ -769,16 +769,16 @@ function UsageStat({
   const isAtLimit = !isUnlimited && current >= max
 
   return (
-    <div className="rounded-md border border-[#1e2130] bg-[#14161d] p-3">
-      <p className="text-xs font-medium text-[#848b9b]">{label}</p>
+    <div className="rounded-md border border-border bg-card p-3">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
       <p
         className={cn(
           'mt-1 text-lg font-semibold',
-          isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-[#e2e5eb]'
+          isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-foreground'
         )}
       >
         {current}
-        <span className="text-sm font-normal text-[#848b9b]">
+        <span className="text-sm font-normal text-muted-foreground">
           {' '}/ {isUnlimited ? 'Unlimited' : max}
         </span>
       </p>
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index 5eb35f08..0aa6aa92 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -250,13 +250,13 @@ export default function AssistantChatPage() {
             <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
               {messages.length === 0 && !loading && (
                 <div className="flex flex-col items-center justify-center h-full text-center">
-                  <div className="w-16 h-16 rounded-full bg-[rgba(34,211,238,0.10)] flex items-center justify-center mb-4">
-                    <Sparkles size={28} className="text-[#22d3ee]" />
+                  <div className="w-16 h-16 rounded-full bg-accent-dim flex items-center justify-center mb-4">
+                    <Sparkles size={28} className="text-primary" />
                   </div>
-                  <h2 className="text-lg font-heading font-semibold text-[#e2e5eb] mb-2">
+                  <h2 className="text-lg font-heading font-semibold text-foreground mb-2">
                     AI Assistant
                   </h2>
-                  <p className="text-sm text-[#848b9b] max-w-md">
+                  <p className="text-sm text-muted-foreground max-w-md">
                     Ask me anything about IT infrastructure, networking, Active Directory,
                     cloud platforms, or troubleshooting. I'll also suggest relevant flows from your team's library.
                   </p>
@@ -273,10 +273,10 @@ export default function AssistantChatPage() {
               {loading && (
                 <div className="flex gap-3">
                   <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
-                    <Sparkles size={14} className="text-[#22d3ee]" />
+                    <Sparkles size={14} className="text-primary" />
                   </div>
-                  <div className="bg-[#191c25] border border-[#1e2130] rounded-2xl px-4 py-3">
-                    <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
+                  <div className="bg-input border border-border rounded-2xl px-4 py-3">
+                    <Loader2 size={16} className="animate-spin text-primary" />
                   </div>
                 </div>
               )}
@@ -294,7 +294,7 @@ export default function AssistantChatPage() {
                     onKeyDown={handleKeyDown}
                     placeholder="Ask about IT, networking, troubleshooting..."
                     rows={3}
-                    className="flex-1 resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm placeholder:text-[#848b9b] px-4 py-3 focus:outline-hidden focus:border-primary/30"
+                    className="flex-1 resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
                     style={{ borderColor: 'var(--glass-border)' }}
                     disabled={loading}
                   />
@@ -302,7 +302,7 @@ export default function AssistantChatPage() {
                     <button
                       onClick={handleSend}
                       disabled={!input.trim() || loading}
-                      className="bg-[#22d3ee] text-white p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
+                      className="bg-primary text-white p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
                       title="Send message"
                     >
                       <Send size={18} />
@@ -311,7 +311,7 @@ export default function AssistantChatPage() {
                       <button
                         onClick={() => setShowConclude(true)}
                         disabled={loading}
-                        className="p-3 rounded-xl border text-[#848b9b] hover:text-amber-400 hover:border-amber-400/30 hover:bg-amber-400/10 transition-all disabled:opacity-40"
+                        className="p-3 rounded-xl border text-muted-foreground hover:text-amber-400 hover:border-amber-400/30 hover:bg-amber-400/10 transition-all disabled:opacity-40"
                         style={{ borderColor: 'var(--glass-border)' }}
                         title="Conclude session"
                       >
@@ -320,25 +320,25 @@ export default function AssistantChatPage() {
                     )}
                   </div>
                 </div>
-                <p className="text-[0.625rem] text-[#848b9b] mt-1.5 px-1">Shift + Enter for a new line</p>
+                <p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
               </div>
             </div>
           </>
         ) : (
           <div className="flex flex-col items-center justify-center h-full text-center">
-            <div className="w-20 h-20 rounded-full bg-[rgba(34,211,238,0.10)] flex items-center justify-center mb-4">
-              <Sparkles size={32} className="text-[#22d3ee]" />
+            <div className="w-20 h-20 rounded-full bg-accent-dim flex items-center justify-center mb-4">
+              <Sparkles size={32} className="text-primary" />
             </div>
-            <h2 className="text-xl font-heading font-semibold text-[#e2e5eb] mb-2">
+            <h2 className="text-xl font-heading font-semibold text-foreground mb-2">
               AI Assistant
             </h2>
-            <p className="text-sm text-[#848b9b] max-w-md mb-6">
+            <p className="text-sm text-muted-foreground max-w-md mb-6">
               Your Senior Systems & Network Engineer. Ask anything about IT infrastructure,
               or start a new chat to get personalized help with your team's flows.
             </p>
             <button
               onClick={handleNewChat}
-              className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
+              className="bg-primary text-white font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
             >
               Start a Conversation
             </button>
diff --git a/frontend/src/pages/BatchStatusPage.tsx b/frontend/src/pages/BatchStatusPage.tsx
index 83b7dbc5..171e66b9 100644
--- a/frontend/src/pages/BatchStatusPage.tsx
+++ b/frontend/src/pages/BatchStatusPage.tsx
@@ -104,7 +104,7 @@ export default function BatchStatusPage() {
       <div className="flex items-center justify-between">
         <button
           onClick={() => treeId && navigate(`/flows/${treeId}/maintenance`)}
-          className="flex items-center gap-1.5 text-[0.875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="flex items-center gap-1.5 text-[0.875rem] text-muted-foreground hover:text-foreground transition-colors"
         >
           <ChevronLeft className="h-4 w-4" />
           {tree?.name ?? 'Maintenance Flow'}
@@ -112,7 +112,7 @@ export default function BatchStatusPage() {
         <button
           onClick={() => loadSessions(true)}
           disabled={isRefreshing}
-          className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors disabled:opacity-50"
+          className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-50"
         >
           <RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
           Refresh
@@ -125,9 +125,9 @@ export default function BatchStatusPage() {
           <Wrench className="h-5 w-5" />
         </div>
         <div>
-          <h1 className="text-xl font-semibold text-[#e2e5eb]">Batch Run</h1>
+          <h1 className="text-xl font-semibold text-foreground">Batch Run</h1>
           {batchDate && (
-            <p className="text-[0.875rem] text-[#848b9b]">
+            <p className="text-[0.875rem] text-muted-foreground">
               {batchDate.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
             </p>
           )}
@@ -136,9 +136,9 @@ export default function BatchStatusPage() {
 
       {/* Progress bar */}
       {total > 0 && (
-        <div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5 space-y-3">
+        <div className="rounded-xl border border-border bg-card p-5 space-y-3">
           <div className="flex items-center justify-between text-[0.875rem]">
-            <span className="font-medium text-[#e2e5eb]">
+            <span className="font-medium text-foreground">
               {completed} of {total} complete
             </span>
             <span className={cn(
@@ -147,7 +147,7 @@ export default function BatchStatusPage() {
                 ? 'text-emerald-400 bg-emerald-500/10'
                 : inProgress > 0
                   ? 'text-amber-400 bg-amber-500/10'
-                  : 'text-[#848b9b] bg-muted'
+                  : 'text-muted-foreground bg-muted'
             )}>
               {allDone ? 'Complete' : inProgress > 0 ? `${inProgress} in progress` : 'Not started'}
             </span>
@@ -175,7 +175,7 @@ export default function BatchStatusPage() {
                 <span className="text-[0.8125rem] text-amber-400">{outcomeCounts.workaround} workaround</span>
               )}
               {outcomeCounts.unresolved && (
-                <span className="text-[0.8125rem] text-[#848b9b]">{outcomeCounts.unresolved} unresolved</span>
+                <span className="text-[0.8125rem] text-muted-foreground">{outcomeCounts.unresolved} unresolved</span>
               )}
             </div>
           )}
@@ -189,13 +189,13 @@ export default function BatchStatusPage() {
             <p className="text-sm text-red-400 mb-3">{loadError}</p>
             <button
               onClick={() => loadSessions(true)}
-              className="rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+              className="rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
             >
               Try again
             </button>
           </div>
         ) : sessions.length === 0 ? (
-          <p className="text-center text-[0.875rem] text-[#848b9b] py-8">
+          <p className="text-center text-[0.875rem] text-muted-foreground py-8">
             No sessions found for this batch.
           </p>
         ) : (
diff --git a/frontend/src/pages/ChangePasswordPage.tsx b/frontend/src/pages/ChangePasswordPage.tsx
index 28493641..19945c70 100644
--- a/frontend/src/pages/ChangePasswordPage.tsx
+++ b/frontend/src/pages/ChangePasswordPage.tsx
@@ -66,7 +66,7 @@ export function ChangePasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold font-heading text-[#e2e5eb] tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Change Password
           </h1>
           {isForced && (
@@ -77,7 +77,7 @@ export function ChangePasswordPage() {
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {error && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {error}
@@ -85,7 +85,7 @@ export function ChangePasswordPage() {
             )}
 
             <div>
-              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
                 Current Password
               </label>
               <PasswordInput
@@ -95,8 +95,8 @@ export function ChangePasswordPage() {
                 value={currentPassword}
                 onChange={(e) => setCurrentPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
@@ -104,7 +104,7 @@ export function ChangePasswordPage() {
             </div>
 
             <div>
-              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                 New Password
               </label>
               <PasswordInput
@@ -114,20 +114,20 @@ export function ChangePasswordPage() {
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
                 placeholder="At least 10 characters"
               />
-              <p className="mt-1 text-xs text-[#848b9b]">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must include uppercase, lowercase, and a digit.
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                 Confirm New Password
               </label>
               <PasswordInput
@@ -137,8 +137,8 @@ export function ChangePasswordPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
@@ -150,7 +150,7 @@ export function ChangePasswordPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-[#22d3ee] text-white hover:brightness-110',
+                'bg-primary text-white hover:brightness-110',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
diff --git a/frontend/src/pages/EscalationQueuePage.tsx b/frontend/src/pages/EscalationQueuePage.tsx
index 04b6582b..0945f147 100644
--- a/frontend/src/pages/EscalationQueuePage.tsx
+++ b/frontend/src/pages/EscalationQueuePage.tsx
@@ -9,8 +9,8 @@ export default function EscalationQueuePage() {
           <AlertTriangle size={16} className="text-amber-400" />
         </span>
         <div>
-          <h1 className="font-heading text-xl font-bold text-[#e2e5eb]">Escalation Queue</h1>
-          <p className="text-sm text-[#848b9b]">Sessions from your team waiting for pickup</p>
+          <h1 className="font-heading text-xl font-bold text-foreground">Escalation Queue</h1>
+          <p className="text-sm text-muted-foreground">Sessions from your team waiting for pickup</p>
         </div>
       </div>
 
diff --git a/frontend/src/pages/FeedbackPage.tsx b/frontend/src/pages/FeedbackPage.tsx
index d30e0788..25171838 100644
--- a/frontend/src/pages/FeedbackPage.tsx
+++ b/frontend/src/pages/FeedbackPage.tsx
@@ -137,34 +137,34 @@ export function FeedbackPage() {
       {/* Page header */}
       <div className="mb-8">
         <div className="flex items-center gap-3">
-          <MessageSquareText className="h-8 w-8 text-[#848b9b]" />
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Send Feedback</h1>
+          <MessageSquareText className="h-8 w-8 text-muted-foreground" />
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Send Feedback</h1>
         </div>
-        <p className="mt-2 text-[#848b9b]">
+        <p className="mt-2 text-muted-foreground">
           Help us improve ResolutionFlow. Report bugs, request features, or share your thoughts.
         </p>
       </div>
 
       <div className="max-w-2xl">
         {submitted ? (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-8 text-center">
+          <div className="bg-card border border-border rounded-xl p-8 text-center">
             <CheckCircle2 className="mx-auto h-12 w-12 text-green-500 mb-4" />
-            <h2 className="text-xl font-semibold text-[#e2e5eb] mb-2">Thank you for your feedback!</h2>
-            <p className="text-[#848b9b] mb-6">
+            <h2 className="text-xl font-semibold text-foreground mb-2">Thank you for your feedback!</h2>
+            <p className="text-muted-foreground mb-6">
               We've received your submission and will review it shortly. Check your email for a confirmation.
             </p>
             <button
               onClick={handleNewFeedback}
-              className="bg-[#22d3ee] text-white font-medium px-6 py-2.5 rounded-lg hover:brightness-110 transition-opacity"
+              className="bg-primary text-white font-medium px-6 py-2.5 rounded-lg hover:brightness-110 transition-opacity"
             >
               Send More Feedback
             </button>
           </div>
         ) : (
-          <form onSubmit={handleSubmit} className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 sm:p-6 space-y-5">
+          <form onSubmit={handleSubmit} className="bg-card border border-border rounded-xl p-4 sm:p-6 space-y-5">
             {/* Email */}
             <div>
-              <label htmlFor="feedback-email" className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
+              <label htmlFor="feedback-email" className="block text-sm font-medium text-foreground mb-1.5">
                 Email Address
               </label>
               <input
@@ -174,14 +174,14 @@ export function FeedbackPage() {
                 onChange={e => setEmail(e.target.value)}
                 placeholder="your@email.com"
                 required
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden"
               />
-              <p className="mt-1 text-xs text-[#848b9b]">We'll reply to this address if we need more details.</p>
+              <p className="mt-1 text-xs text-muted-foreground">We'll reply to this address if we need more details.</p>
             </div>
 
             {/* Feedback Type — custom selector with descriptions */}
             <div>
-              <label className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
+              <label className="block text-sm font-medium text-foreground mb-1.5">
                 Feedback Type
               </label>
               <div className="relative">
@@ -196,8 +196,8 @@ export function FeedbackPage() {
                   onClick={() => setTypeDropdownOpen(!typeDropdownOpen)}
                   onKeyDown={handleDropdownKeyDown}
                   className={cn(
-                    "w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden",
-                    feedbackType ? "text-[#e2e5eb]" : "text-[#848b9b]"
+                    "w-full rounded-lg border border-border bg-card px-3 py-2 text-left flex items-center justify-between focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden",
+                    feedbackType ? "text-foreground" : "text-muted-foreground"
                   )}
                 >
                   <span>{selectedType?.value ?? 'Select a type...'}</span>
@@ -208,7 +208,7 @@ export function FeedbackPage() {
                     ref={listboxRef}
                     id="feedback-type-listbox"
                     role="listbox"
-                    className="absolute z-10 mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] shadow-lg overflow-hidden"
+                    className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-lg overflow-hidden"
                   >
                     {FEEDBACK_TYPES.map((type, index) => (
                       <button
@@ -225,8 +225,8 @@ export function FeedbackPage() {
                           highlightedIndex === index && feedbackType !== type.value && "bg-accent/50"
                         )}
                       >
-                        <div className="text-sm font-medium text-[#e2e5eb]">{type.value}</div>
-                        <div className="text-xs text-[#848b9b] mt-0.5">{type.description}</div>
+                        <div className="text-sm font-medium text-foreground">{type.value}</div>
+                        <div className="text-xs text-muted-foreground mt-0.5">{type.description}</div>
                       </button>
                     ))}
                   </div>
@@ -236,7 +236,7 @@ export function FeedbackPage() {
 
             {/* Message */}
             <div>
-              <label htmlFor="feedback-message" className="block text-sm font-medium text-[#e2e5eb] mb-1.5">
+              <label htmlFor="feedback-message" className="block text-sm font-medium text-foreground mb-1.5">
                 Your Feedback
               </label>
               <textarea
@@ -247,9 +247,9 @@ export function FeedbackPage() {
                 required
                 minLength={10}
                 rows={6}
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden resize-y"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-1 focus:ring-primary/20 focus:outline-hidden resize-y"
               />
-              <p className="mt-1 text-xs text-[#848b9b]">
+              <p className="mt-1 text-xs text-muted-foreground">
                 {message.trim().length < 10
                   ? `Minimum 10 characters (${message.trim().length}/10)`
                   : `${message.trim().length} characters`}
@@ -264,8 +264,8 @@ export function FeedbackPage() {
                 className={cn(
                   "flex items-center gap-2 rounded-lg px-6 py-2.5 font-medium text-white transition-opacity",
                   canSubmit && !isSubmitting
-                    ? "bg-[#22d3ee] hover:brightness-110"
-                    : "bg-[#22d3ee] opacity-50 cursor-not-allowed"
+                    ? "bg-primary hover:brightness-110"
+                    : "bg-primary opacity-50 cursor-not-allowed"
                 )}
               >
                 <Send size={16} />
diff --git a/frontend/src/pages/FlowAssistPage.tsx b/frontend/src/pages/FlowAssistPage.tsx
index 99d990c7..5fba490d 100644
--- a/frontend/src/pages/FlowAssistPage.tsx
+++ b/frontend/src/pages/FlowAssistPage.tsx
@@ -4,23 +4,23 @@ export default function FlowAssistPage() {
   return (
     <div className="p-6">
       <div className="mb-6">
-        <h1 className="font-heading text-2xl font-bold tracking-tight text-[#e2e5eb]">
+        <h1 className="font-heading text-2xl font-bold tracking-tight text-foreground">
           <span className="inline-flex items-center gap-2">
             <WandSparkles size={24} style={{ color: '#f472b6' }} />
             Flow Assist
           </span>
         </h1>
-        <p className="mt-1 text-sm text-[#848b9b]">
+        <p className="mt-1 text-sm text-muted-foreground">
           Build flows from natural language — describe what you need and Flow Assist will generate the decision tree or procedural steps.
         </p>
       </div>
 
       <div className="card-flat p-8 text-center">
-        <WandSparkles size={40} className="mx-auto mb-4 text-[#848b9b]" />
-        <h2 className="font-heading text-lg font-semibold text-[#e2e5eb] mb-2">
+        <WandSparkles size={40} className="mx-auto mb-4 text-muted-foreground" />
+        <h2 className="font-heading text-lg font-semibold text-foreground mb-2">
           Coming Soon
         </h2>
-        <p className="text-sm text-[#848b9b] max-w-md mx-auto">
+        <p className="text-sm text-muted-foreground max-w-md mx-auto">
           Flow Assist will be available here as a dedicated conversational flow builder.
           In the meantime, use the AI panel in the Flow Editor to generate flows.
         </p>
diff --git a/frontend/src/pages/FlowPilotAnalyticsPage.tsx b/frontend/src/pages/FlowPilotAnalyticsPage.tsx
index 75f52952..24811316 100644
--- a/frontend/src/pages/FlowPilotAnalyticsPage.tsx
+++ b/frontend/src/pages/FlowPilotAnalyticsPage.tsx
@@ -144,7 +144,7 @@ export default function FlowPilotAnalyticsPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <Loader2 size={24} className="animate-spin text-[#848b9b]" />
+        <Loader2 size={24} className="animate-spin text-muted-foreground" />
       </div>
     )
   }
@@ -152,7 +152,7 @@ export default function FlowPilotAnalyticsPage() {
   if (!dashboard) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-sm text-[#848b9b]">Failed to load analytics</p>
+        <p className="text-sm text-muted-foreground">Failed to load analytics</p>
       </div>
     )
   }
@@ -165,21 +165,21 @@ export default function FlowPilotAnalyticsPage() {
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <span title="FlowPilot Analytics">
-            <BarChart3 size={24} className="text-[#e2e5eb]" />
+            <BarChart3 size={24} className="text-foreground" />
           </span>
-          <h1 className="text-xl sm:text-2xl font-bold font-heading text-[#e2e5eb]">FlowPilot Analytics</h1>
+          <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">FlowPilot Analytics</h1>
         </div>
         <div className="flex items-center gap-3">
           <Link
             to="/analytics"
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             Team Analytics
           </Link>
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value)}
-            className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-primary/20 [&>option]:bg-[#1a1c21] [&>option]:text-[#e2e5eb]"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20 [&>option]:bg-card [&>option]:text-foreground"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -189,7 +189,7 @@ export default function FlowPilotAnalyticsPage() {
       </div>
 
       {/* Tab bar */}
-      <div className="flex gap-1 border-b border-[#1e2130] overflow-x-auto">
+      <div className="flex gap-1 border-b border-border overflow-x-auto">
         {TABS.map((tab) => (
           <button
             key={tab.id}
@@ -197,8 +197,8 @@ export default function FlowPilotAnalyticsPage() {
             className={cn(
               'px-4 py-2 text-sm transition-colors',
               activeTab === tab.id
-                ? 'border-b-2 border-primary text-[#e2e5eb] font-medium'
-                : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                ? 'border-b-2 border-primary text-foreground font-medium'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             {tab.label}
@@ -247,7 +247,7 @@ export default function FlowPilotAnalyticsPage() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             {/* MTTR Trend */}
             <div className="card-flat p-3 sm:p-5">
-              <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
                 MTTR Trend
               </h3>
               {dashboard.mttr_trend.length > 0 ? (
@@ -284,7 +284,7 @@ export default function FlowPilotAnalyticsPage() {
                   </AreaChart>
                 </ResponsiveContainer>
               ) : (
-                <div className="flex items-center justify-center h-[220px] text-sm text-[#848b9b]">
+                <div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
                   No data for this period
                 </div>
               )}
@@ -292,7 +292,7 @@ export default function FlowPilotAnalyticsPage() {
 
             {/* Domain Breakdown */}
             <div className="card-flat p-3 sm:p-5">
-              <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
                 Sessions by Domain
               </h3>
               {dashboard.sessions_by_domain.length > 0 ? (
@@ -315,7 +315,7 @@ export default function FlowPilotAnalyticsPage() {
                   </BarChart>
                 </ResponsiveContainer>
               ) : (
-                <div className="flex items-center justify-center h-[220px] text-sm text-[#848b9b]">
+                <div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
                   No domain data
                 </div>
               )}
@@ -326,7 +326,7 @@ export default function FlowPilotAnalyticsPage() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             {/* Confidence Breakdown */}
             <div className="card-flat p-3 sm:p-5">
-              <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
                 Confidence Tiers
               </h3>
               <div className="space-y-3">
@@ -356,31 +356,31 @@ export default function FlowPilotAnalyticsPage() {
 
             {/* Knowledge Coverage */}
             <div className="card-flat p-3 sm:p-5">
-              <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
+              <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
                 Knowledge Coverage
               </h3>
               <div className="grid grid-cols-2 gap-3 mb-4">
-                <div className="rounded-lg bg-[#14161d]/50 p-3">
-                  <p className="text-xs text-[#848b9b]">Total Flows</p>
-                  <p className="text-lg font-semibold text-[#e2e5eb]">{dashboard.knowledge_coverage.total_flows}</p>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Total Flows</p>
+                  <p className="text-lg font-semibold text-foreground">{dashboard.knowledge_coverage.total_flows}</p>
                 </div>
-                <div className="rounded-lg bg-[#14161d]/50 p-3">
-                  <p className="text-xs text-[#848b9b]">AI-Generated</p>
-                  <p className="text-lg font-semibold text-[#67e8f9]">{dashboard.knowledge_coverage.ai_generated_flows}</p>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">AI-Generated</p>
+                  <p className="text-lg font-semibold text-accent-text">{dashboard.knowledge_coverage.ai_generated_flows}</p>
                 </div>
-                <div className="rounded-lg bg-[#14161d]/50 p-3">
-                  <p className="text-xs text-[#848b9b]">Pending Review</p>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Pending Review</p>
                   <p className="text-lg font-semibold text-amber-400">{dashboard.knowledge_coverage.total_proposals_pending}</p>
                 </div>
-                <div className="rounded-lg bg-[#14161d]/50 p-3">
-                  <p className="text-xs text-[#848b9b]">Approved This Period</p>
+                <div className="rounded-lg bg-card/50 p-3">
+                  <p className="text-xs text-muted-foreground">Approved This Period</p>
                   <p className="text-lg font-semibold text-emerald-400">{dashboard.knowledge_coverage.proposals_approved_this_period}</p>
                 </div>
               </div>
               {dashboard.knowledge_coverage.total_proposals_pending > 0 && (
                 <Link
                   to="/review-queue"
-                  className="flex items-center gap-2 text-xs text-[#22d3ee] hover:underline"
+                  className="flex items-center gap-2 text-xs text-primary hover:underline"
                 >
                   <ArrowUpRight size={12} />
                   Review {dashboard.knowledge_coverage.total_proposals_pending} pending proposals
@@ -394,7 +394,7 @@ export default function FlowPilotAnalyticsPage() {
             <div className="space-y-3">
               <div className="flex items-center gap-2 px-1">
                 <AlertTriangle size={14} className="text-amber-400" />
-                <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">
+                <h3 className="font-heading text-sm font-semibold text-foreground">
                   Knowledge Gaps ({gaps.gaps.length})
                 </h3>
               </div>
@@ -408,8 +408,8 @@ export default function FlowPilotAnalyticsPage() {
             <div className="card-flat p-4 flex items-center gap-3">
               <CheckCircle2 size={20} className="text-emerald-400 shrink-0" />
               <div>
-                <p className="text-sm text-[#e2e5eb]">No knowledge gaps detected</p>
-                <p className="text-xs text-[#848b9b]">Your flow coverage looks healthy for this period.</p>
+                <p className="text-sm text-foreground">No knowledge gaps detected</p>
+                <p className="text-xs text-muted-foreground">Your flow coverage looks healthy for this period.</p>
               </div>
             </div>
           )}
@@ -422,7 +422,7 @@ export default function FlowPilotAnalyticsPage() {
             <ErrorRetry label="coverage data" onRetry={() => { setCoverageError(false); coveragePeriodRef.current = null; setRetryKey((k) => k + 1) }} />
           ) : coverageLoading ? (
             <div className="flex items-center justify-center min-h-[200px]">
-              <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
             </div>
           ) : coverageData ? (
             <CoverageHeatmap data={coverageData} />
@@ -436,7 +436,7 @@ export default function FlowPilotAnalyticsPage() {
             <ErrorRetry label="flow quality data" onRetry={() => { setQualityError(false); qualityPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
           ) : qualityLoading ? (
             <div className="flex items-center justify-center min-h-[200px]">
-              <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
             </div>
           ) : qualityData ? (
             <FlowQualityTable data={qualityData} />
@@ -450,7 +450,7 @@ export default function FlowPilotAnalyticsPage() {
             <ErrorRetry label="PSA metrics" onRetry={() => { setPsaError(false); psaPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
           ) : psaLoading ? (
             <div className="flex items-center justify-center min-h-[200px]">
-              <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
             </div>
           ) : psaData ? (
             <PsaMetricsPanel data={psaData} />
@@ -484,8 +484,8 @@ function MetricCard({
           <Icon size={16} style={{ color: iconColor }} />
         </span>
         <div>
-          <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-[#5a6170]">{label}</p>
-          <p className="text-lg font-semibold text-[#e2e5eb]">{value}</p>
+          <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-wider text-text-muted">{label}</p>
+          <p className="text-lg font-semibold text-foreground">{value}</p>
         </div>
       </div>
     </div>
@@ -509,12 +509,12 @@ function ConfidenceTierRow({
   return (
     <div className="space-y-1">
       <div className="flex items-center justify-between text-xs">
-        <span className="text-[#e2e5eb] font-medium">{label}</span>
-        <span className="text-[#848b9b]">
+        <span className="text-foreground font-medium">{label}</span>
+        <span className="text-muted-foreground">
           {count} sessions · {rate.toFixed(1)}% resolved
         </span>
       </div>
-      <div className="h-2 rounded-full bg-[#14161d]/80 overflow-hidden">
+      <div className="h-2 rounded-full bg-card/80 overflow-hidden">
         <div
           className="h-full rounded-full transition-all"
           style={{ width: `${pct}%`, background: color }}
@@ -526,12 +526,12 @@ function ConfidenceTierRow({
 
 function ErrorRetry({ label, onRetry }: { label: string; onRetry: () => void }) {
   return (
-    <div className="flex flex-col items-center justify-center py-12 text-[#848b9b]">
+    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
       <AlertTriangle size={24} className="mb-2 text-amber-400" />
       <p className="text-sm mb-3">Failed to load {label}</p>
       <button
         onClick={onRetry}
-        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
+        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
       >
         <RotateCcw size={12} />
         Retry
@@ -545,15 +545,15 @@ function GapCard({ gap }: { gap: KnowledgeGap }) {
   return (
     <div className="card-flat p-4 space-y-2">
       <div className="flex items-start justify-between gap-2">
-        <p className="text-sm font-semibold text-[#e2e5eb]">{gap.title}</p>
+        <p className="text-sm font-semibold text-foreground">{gap.title}</p>
         <span className={`shrink-0 rounded-md border px-1.5 py-0.5 font-sans text-xs text-[0.5625rem] uppercase tracking-wider ${severityStyle}`}>
           {gap.severity}
         </span>
       </div>
-      <p className="text-xs text-[#848b9b]">{gap.description}</p>
+      <p className="text-xs text-muted-foreground">{gap.description}</p>
       <div className="flex items-start gap-1.5 pt-1">
-        <Lightbulb size={12} className="text-[#22d3ee] shrink-0 mt-0.5" />
-        <p className="text-xs text-[#22d3ee]">{gap.suggested_action}</p>
+        <Lightbulb size={12} className="text-primary shrink-0 mt-0.5" />
+        <p className="text-xs text-primary">{gap.suggested_action}</p>
       </div>
     </div>
   )
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index 36bc52b5..02c9510b 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -81,7 +81,7 @@ export default function FlowPilotSessionPage() {
           <p className="text-sm text-rose-400">{fp.error}</p>
           <button
             onClick={() => window.location.reload()}
-            className="mt-3 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="mt-3 text-xs text-muted-foreground hover:text-foreground transition-colors"
           >
             Try again
           </button>
@@ -94,7 +94,7 @@ export default function FlowPilotSessionPage() {
   if (fp.isLoading && !fp.session) {
     return (
       <div className="flex items-center justify-center min-h-[50vh]">
-        <Loader2 size={24} className="animate-spin text-[#848b9b]" />
+        <Loader2 size={24} className="animate-spin text-muted-foreground" />
       </div>
     )
   }
@@ -134,7 +134,7 @@ export default function FlowPilotSessionPage() {
             <Sparkles size={14} className="text-amber-400" />
           </span>
           <div className="flex-1 min-w-0">
-            <h1 className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">
+            <h1 className="font-heading text-sm font-semibold text-foreground truncate">
               Escalation Pickup — {fp.session.problem_summary || 'FlowPilot Session'}
             </h1>
           </div>
@@ -164,14 +164,14 @@ export default function FlowPilotSessionPage() {
       {/* Navigation guard modal */}
       {blocker.state === 'blocked' && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl w-full max-w-md p-6 shadow-lg">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
             <div className="flex items-center gap-3 mb-3">
               <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-500/10">
                 <AlertTriangle size={18} className="text-amber-400" />
               </span>
-              <h2 className="text-lg font-heading font-semibold text-[#e2e5eb]">Active Session</h2>
+              <h2 className="text-lg font-heading font-semibold text-foreground">Active Session</h2>
             </div>
-            <p className="mb-4 text-sm text-[#848b9b]">
+            <p className="mb-4 text-sm text-muted-foreground">
               You have an active troubleshooting session. If you leave, your session will be paused and you can resume it later.
             </p>
             <div className="flex gap-2">
@@ -186,7 +186,7 @@ export default function FlowPilotSessionPage() {
                   fp.pauseSession()
                   blocker.proceed()
                 }}
-                className="flex-1 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 text-sm font-medium text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="flex-1 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2.5 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-all"
               >
                 Pause & Leave
               </button>
@@ -200,15 +200,15 @@ export default function FlowPilotSessionPage() {
         className="flex items-center gap-3 border-b px-5 py-3 shrink-0"
         style={{ borderColor: 'var(--glass-border)' }}
       >
-        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-[rgba(34,211,238,0.10)]">
-          <Sparkles size={14} className="text-[#22d3ee]" />
+        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-accent-dim">
+          <Sparkles size={14} className="text-primary" />
         </span>
         <div className="flex-1 min-w-0">
-          <h1 className="font-heading text-sm font-semibold text-[#e2e5eb] truncate">
+          <h1 className="font-heading text-sm font-semibold text-foreground truncate">
             {fp.session.problem_summary || 'FlowPilot Session'}
           </h1>
         </div>
-        <span className="font-sans text-xs rounded-md bg-[#14161d] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#848b9b] border border-[#1e2130]">
+        <span className="font-sans text-xs rounded-md bg-card px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-muted-foreground border border-border">
           {fp.session.status}
         </span>
       </div>
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index 5b8b00cc..24253954 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -28,26 +28,26 @@ export function ForgotPasswordPage() {
   return (
     <>
     <PageMeta title="Forgot Password" description="Reset your ResolutionFlow password" />
-    <div className="flex min-h-screen items-center justify-center bg-[#14161d] px-4">
+    <div className="flex min-h-screen items-center justify-center bg-card px-4">
       <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
 
       <div className="relative w-full max-w-md space-y-8">
         <div className="text-center">
           <div className="mb-4 flex justify-center sm:mb-6">
-            <div className="w-16 h-16 rounded-2xl bg-[#22d3ee] flex items-center justify-center sm:w-20 sm:h-20">
+            <div className="w-16 h-16 rounded-2xl bg-primary flex items-center justify-center sm:w-20 sm:h-20">
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold font-heading text-[#e2e5eb] tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Reset Password
           </h1>
-          <p className="mt-2 text-sm text-[#848b9b]">
+          <p className="mt-2 text-sm text-muted-foreground">
             Enter your email and we'll send you a link to reset your password.
           </p>
         </div>
 
         {submitted ? (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             <div className="rounded-xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-400">
               If an account with that email exists, we've sent a password reset link.
               Check your inbox and follow the instructions.
@@ -55,7 +55,7 @@ export function ForgotPasswordPage() {
             <div className="text-center">
               <Link
                 to="/login"
-                className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Back to sign in
               </Link>
@@ -63,9 +63,9 @@ export function ForgotPasswordPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-            <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
               <div>
-                <label htmlFor="email" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+                <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                   Email Address
                 </label>
                 <input
@@ -76,8 +76,8 @@ export function ForgotPasswordPage() {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
@@ -90,7 +90,7 @@ export function ForgotPasswordPage() {
                 disabled={isLoading || !email}
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                  'bg-[#22d3ee] text-white hover:brightness-110',
+                  'bg-primary text-white hover:brightness-110',
                   'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
@@ -102,7 +102,7 @@ export function ForgotPasswordPage() {
               <div className="text-center">
                 <Link
                   to="/login"
-                  className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Back to sign in
                 </Link>
diff --git a/frontend/src/pages/GuideDetailPage.tsx b/frontend/src/pages/GuideDetailPage.tsx
index a83f9f13..3dc0e873 100644
--- a/frontend/src/pages/GuideDetailPage.tsx
+++ b/frontend/src/pages/GuideDetailPage.tsx
@@ -10,11 +10,11 @@ export default function GuideDetailPage() {
   if (!guide) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-center p-6 overflow-y-auto">
-        <h2 className="text-lg font-heading font-semibold text-[#e2e5eb] mb-2">Guide Not Found</h2>
-        <p className="text-sm text-[#848b9b] mb-4">The guide you're looking for doesn't exist.</p>
+        <h2 className="text-lg font-heading font-semibold text-foreground mb-2">Guide Not Found</h2>
+        <p className="text-sm text-muted-foreground mb-4">The guide you're looking for doesn't exist.</p>
         <Link
           to="/guides"
-          className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
+          className="bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           Back to Guides
         </Link>
@@ -27,30 +27,30 @@ export default function GuideDetailPage() {
   return (
     <div className="overflow-y-auto h-full p-6 max-w-3xl mx-auto">
       {/* Breadcrumb */}
-      <nav className="flex items-center gap-1.5 text-xs text-[#848b9b] mb-6">
-        <Link to="/guides" className="hover:text-[#22d3ee] transition-colors">
+      <nav className="flex items-center gap-1.5 text-xs text-muted-foreground mb-6">
+        <Link to="/guides" className="hover:text-primary transition-colors">
           User Guides
         </Link>
         <ChevronRight size={12} />
-        <span className="text-[#e2e5eb]">{guide.title}</span>
+        <span className="text-foreground">{guide.title}</span>
       </nav>
 
       {/* Header */}
       <div className="card-flat rounded-2xl p-6 mb-6">
         <div className="flex items-center gap-3 mb-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[rgba(34,211,238,0.10)]">
-            <Icon size={20} className="text-[#22d3ee]" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
+            <Icon size={20} className="text-primary" />
           </div>
           <div>
-            <h1 className="text-xl font-heading font-bold text-[#e2e5eb]">{guide.title}</h1>
-            <p className="text-sm text-[#848b9b]">{guide.summary}</p>
+            <h1 className="text-xl font-heading font-bold text-foreground">{guide.title}</h1>
+            <p className="text-sm text-muted-foreground">{guide.summary}</p>
           </div>
         </div>
         <div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--glass-border)' }}>
-          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
             {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
           </span>
-          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
             {guide.sections.reduce((acc, s) => acc + s.steps.length, 0)} steps
           </span>
         </div>
@@ -67,7 +67,7 @@ export default function GuideDetailPage() {
       <div className="mt-6">
         <Link
           to="/guides"
-          className="inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#22d3ee] transition-colors"
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-primary transition-colors"
         >
           <ArrowLeft size={14} />
           Back to all guides
diff --git a/frontend/src/pages/GuidesHubPage.tsx b/frontend/src/pages/GuidesHubPage.tsx
index 9a811149..9d135ef4 100644
--- a/frontend/src/pages/GuidesHubPage.tsx
+++ b/frontend/src/pages/GuidesHubPage.tsx
@@ -11,12 +11,12 @@ export default function GuidesHubPage() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-3 mb-2">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[rgba(34,211,238,0.10)]">
-            <BookOpen size={20} className="text-[#22d3ee]" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-dim">
+            <BookOpen size={20} className="text-primary" />
           </div>
-          <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">User Guides</h1>
+          <h1 className="text-2xl font-heading font-bold text-foreground">User Guides</h1>
         </div>
-        <p className="text-sm text-[#848b9b] ml-[52px]">
+        <p className="text-sm text-muted-foreground ml-[52px]">
           Learn how to use ResolutionFlow with step-by-step instructions for every feature.
         </p>
       </div>
diff --git a/frontend/src/pages/KBAcceleratorPage.tsx b/frontend/src/pages/KBAcceleratorPage.tsx
index 60e86c8f..efc65b3f 100644
--- a/frontend/src/pages/KBAcceleratorPage.tsx
+++ b/frontend/src/pages/KBAcceleratorPage.tsx
@@ -180,8 +180,8 @@ export default function KBAcceleratorPage() {
     <div className="flex flex-col h-full min-h-0 p-6">
       {/* Page title */}
       <div className="shrink-0 flex items-center gap-3 mb-6">
-        <Sparkles size={24} className="text-[#22d3ee]" />
-        <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">KB Accelerator</h1>
+        <Sparkles size={24} className="text-primary" />
+        <h1 className="text-2xl font-heading font-bold text-foreground">KB Accelerator</h1>
       </div>
 
       {/* Phases */}
@@ -196,12 +196,12 @@ export default function KBAcceleratorPage() {
 
       {phase === 'processing' && (
         <div className="flex-1 flex flex-col items-center justify-center gap-4">
-          <Loader2 size={40} className="text-[#22d3ee] animate-spin" />
+          <Loader2 size={40} className="text-primary animate-spin" />
           <div className="text-center">
-            <p className="text-lg font-heading font-semibold text-[#e2e5eb]">
+            <p className="text-lg font-heading font-semibold text-foreground">
               Converting your KB article...
             </p>
-            <p className="text-sm text-[#848b9b] mt-1">
+            <p className="text-sm text-muted-foreground mt-1">
               AI is analyzing your content and generating an interactive flow.
             </p>
           </div>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 81292bbf..1b014d1c 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -43,7 +43,7 @@ export function LoginPage() {
   return (
     <>
     <PageMeta title="Sign In" description="Sign in to your ResolutionFlow account" />
-    <div className="flex min-h-screen items-center justify-center bg-[#0c0d10] px-4">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
       {/* Atmosphere orbs */}
       <div
         className="pointer-events-none fixed z-0"
@@ -75,13 +75,13 @@ export function LoginPage() {
           <div className="mb-4 flex justify-center sm:mb-6">
             <BrandLogo size="lg" />
           </div>
-          <h1 className="text-3xl font-bold font-heading text-[#e2e5eb] tracking-tight">
-            <span>Resolution</span><span className="text-[#67e8f9]">Flow</span>
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
+            <span>Resolution</span><span className="text-accent-text">Flow</span>
           </h1>
-          <p className="mt-2 text-base font-medium text-[#848b9b] sm:mt-3 sm:text-lg">
+          <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
             AI-Powered Troubleshooting for MSPs
           </p>
-          <p className="mt-1 text-sm text-[#848b9b]/70 sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground/70 sm:mt-2">
             Sign in to your account
           </p>
         </div>
@@ -95,7 +95,7 @@ export function LoginPage() {
             )}
 
             <div>
-              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -107,8 +107,8 @@ export function LoginPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2.5',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-lg border border-border bg-card px-3 py-2.5',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
@@ -117,7 +117,7 @@ export function LoginPage() {
             </div>
 
             <div>
-              <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -128,8 +128,8 @@ export function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2.5',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'block w-full rounded-lg border border-border bg-card px-3 py-2.5',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                   'transition-colors'
                 )}
@@ -138,7 +138,7 @@ export function LoginPage() {
             </div>
 
             <div className="text-right">
-              <Link to="/forgot-password" className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
+              <Link to="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
                 Forgot password?
               </Link>
             </div>
@@ -149,7 +149,7 @@ export function LoginPage() {
               data-testid="login-submit"
               className={cn(
                 'w-full rounded-lg px-4 py-2.5 text-sm font-semibold',
-                'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]',
+                'bg-primary text-white hover:brightness-110 active:scale-[0.98]',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
@@ -159,9 +159,9 @@ export function LoginPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-[#848b9b]">
+          <p className="text-center text-sm text-muted-foreground">
             Don't have an account?{' '}
-            <Link to="/register" className="font-medium text-[#e2e5eb] hover:underline">
+            <Link to="/register" className="font-medium text-foreground hover:underline">
               Register
             </Link>
           </p>
diff --git a/frontend/src/pages/MaintenanceFlowDetailPage.tsx b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
index d1d951e9..1d7f41b7 100644
--- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx
+++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx
@@ -101,7 +101,7 @@ export default function MaintenanceFlowDetailPage() {
           action={(
             <button
               onClick={() => navigate('/trees?type=maintenance')}
-              className="rounded-md border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Back to Maintenance Flows
             </button>
@@ -148,7 +148,7 @@ export default function MaintenanceFlowDetailPage() {
           <div className="flex gap-2">
             <button
               onClick={() => navigate(`/flows/${id}/edit`)}
-              className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Settings className="h-3.5 w-3.5" />
               Edit Flow
@@ -156,7 +156,7 @@ export default function MaintenanceFlowDetailPage() {
             <button
               onClick={handleRun}
               disabled={isRunning}
-              className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-70"
+              className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-70"
             >
               {isRunning
                 ? <Spinner size="sm" className="h-3.5 w-3.5 border-white border-t-transparent" />
@@ -165,7 +165,7 @@ export default function MaintenanceFlowDetailPage() {
             </button>
             <button
               onClick={() => setShowBatchModal(true)}
-              className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Batch Launch
             </button>
@@ -174,10 +174,10 @@ export default function MaintenanceFlowDetailPage() {
       />
 
       {/* Schedule Panel */}
-      <div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
+      <div className="rounded-xl border border-border bg-card p-5">
         <div className="flex items-center gap-2 mb-3">
-          <Calendar className="h-4 w-4 text-[#848b9b]" />
-          <h2 className="font-semibold text-[#e2e5eb]">Schedule</h2>
+          <Calendar className="h-4 w-4 text-muted-foreground" />
+          <h2 className="font-semibold text-foreground">Schedule</h2>
         </div>
         {schedule ? (
           <div className="space-y-2 text-[0.875rem]">
@@ -186,39 +186,39 @@ export default function MaintenanceFlowDetailPage() {
                 "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide",
                 schedule.is_active
                   ? "bg-emerald-500/10 text-emerald-400"
-                  : "bg-muted text-[#848b9b]"
+                  : "bg-muted text-muted-foreground"
               )}>
                 {schedule.is_active
                   ? <CheckCircle className="h-3 w-3" />
                   : <AlertCircle className="h-3 w-3" />}
                 {schedule.is_active ? 'Active' : 'Paused'}
               </span>
-              <code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-[#e2e5eb]">
+              <code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
                 {schedule.cron_expression}
               </code>
-              <span className="text-[#848b9b]">({schedule.timezone})</span>
+              <span className="text-muted-foreground">({schedule.timezone})</span>
             </div>
             {schedule.next_run_at && (
-              <p className="text-[#848b9b]">
+              <p className="text-muted-foreground">
                 Next run: {new Date(schedule.next_run_at).toLocaleString()}
               </p>
             )}
           </div>
         ) : (
-          <p className="text-[0.875rem] text-[#848b9b]">
+          <p className="text-[0.875rem] text-muted-foreground">
             No schedule configured. Sessions can still be launched manually via Batch Launch.
           </p>
         )}
       </div>
 
       {/* Run History */}
-      <div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5">
+      <div className="rounded-xl border border-border bg-card p-5">
         <div className="flex items-center gap-2 mb-4">
-          <Clock className="h-4 w-4 text-[#848b9b]" />
-          <h2 className="font-semibold text-[#e2e5eb]">Run History</h2>
+          <Clock className="h-4 w-4 text-muted-foreground" />
+          <h2 className="font-semibold text-foreground">Run History</h2>
         </div>
         {batches.length === 0 ? (
-          <p className="text-[0.875rem] text-[#848b9b]">No runs yet. Launch a batch to get started.</p>
+          <p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
         ) : (
           <div className="space-y-2">
             {batches.map(([batchKey, batchSessions]) => {
@@ -253,25 +253,25 @@ export default function MaintenanceFlowDetailPage() {
                 <button
                   key={batchKey}
                   onClick={handleRowClick}
-                  className="w-full flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3 hover:bg-accent transition-colors text-left"
+                  className="w-full flex items-center justify-between rounded-lg border border-border px-4 py-3 hover:bg-accent transition-colors text-left"
                 >
                   <div>
                     <div className="flex items-center gap-2">
                       {isActive && (
                         <span className="inline-block h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
                       )}
-                      <p className="text-[0.875rem] font-medium text-[#e2e5eb]">
+                      <p className="text-[0.875rem] font-medium text-foreground">
                         {isSingleRun ? 'Manual run' : `${total} target${total !== 1 ? 's' : ''}`}
                       </p>
                     </div>
                     <div className="flex items-center gap-2 mt-0.5">
                       {date && (
-                        <p className="text-[0.8125rem] text-[#848b9b]">
+                        <p className="text-[0.8125rem] text-muted-foreground">
                           {new Date(date).toLocaleDateString()}
                         </p>
                       )}
                       {outcomeParts.length > 0 && (
-                        <p className="text-[0.8125rem] text-[#848b9b]">
+                        <p className="text-[0.8125rem] text-muted-foreground">
                           · {outcomeParts.join(' · ')}
                         </p>
                       )}
@@ -290,13 +290,13 @@ export default function MaintenanceFlowDetailPage() {
                           />
                         ))}
                         {extraDots > 0 && (
-                          <span className="ml-1 text-[0.6875rem] text-[#848b9b]">+{extraDots}</span>
+                          <span className="ml-1 text-[0.6875rem] text-muted-foreground">+{extraDots}</span>
                         )}
                       </div>
                     )}
                     <span className={cn(
                       "font-sans text-xs text-[0.75rem] uppercase tracking-wide",
-                      isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-[#848b9b]"
+                      isActive ? "text-amber-400" : completed === total ? "text-emerald-400" : "text-muted-foreground"
                     )}>
                       {isActive ? 'In Progress' : `${completed}/${total}`}
                     </span>
diff --git a/frontend/src/pages/MyAnalyticsPage.tsx b/frontend/src/pages/MyAnalyticsPage.tsx
index cf130619..90eb81c9 100644
--- a/frontend/src/pages/MyAnalyticsPage.tsx
+++ b/frontend/src/pages/MyAnalyticsPage.tsx
@@ -76,7 +76,7 @@ export default function MyAnalyticsPage() {
           action={
             <Link
               to="/trees"
-              className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
             >
               Run Your First Session
             </Link>
@@ -96,16 +96,16 @@ export default function MyAnalyticsPage() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span title="My Analytics">
-            <BarChart3 size={24} className="text-[#e2e5eb]" />
+            <BarChart3 size={24} className="text-foreground" />
           </span>
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb]">My Analytics</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground">My Analytics</h1>
         </div>
 
         <div className="flex items-center gap-3">
           {(isAccountOwner || isSuperAdmin) && (
             <Link
               to="/analytics"
-              className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               Team Analytics
             </Link>
@@ -113,7 +113,7 @@ export default function MyAnalyticsPage() {
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
@@ -149,8 +149,8 @@ export default function MyAnalyticsPage() {
       </div>
 
       {/* Area Chart — Sessions over Time */}
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-        <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+      <div className="bg-card border border-border rounded-xl p-6">
+        <h2 className="text-sm font-semibold text-foreground mb-4">
           My Sessions Over Time
         </h2>
         <ResponsiveContainer width="100%" height={300}>
@@ -236,7 +236,7 @@ export default function MyAnalyticsPage() {
                 className="h-2.5 w-2.5 rounded-full"
                 style={{ backgroundColor: color }}
               />
-              <span className="text-xs text-[#848b9b] capitalize">
+              <span className="text-xs text-muted-foreground capitalize">
                 {key}
               </span>
             </div>
@@ -247,27 +247,27 @@ export default function MyAnalyticsPage() {
       {/* Two-Column: Top Flows & Outcome Distribution */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* My Top Flows */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
             My Top Flows
           </h2>
           {top_flows.length === 0 ? (
-            <p className="text-sm text-[#848b9b]">No flow data for this period.</p>
+            <p className="text-sm text-muted-foreground">No flow data for this period.</p>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-[#1e2130]">
-                    <th className="text-left py-2 text-[#e2e5eb] font-medium">
+                  <tr className="border-b border-border">
+                    <th className="text-left py-2 text-foreground font-medium">
                       Name
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Sessions
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Completion
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Median
                     </th>
                   </tr>
@@ -276,18 +276,18 @@ export default function MyAnalyticsPage() {
                   {top_flows.map((flow) => (
                     <tr
                       key={flow.tree_id}
-                      className="border-b border-[#1e2130] last:border-0"
+                      className="border-b border-border last:border-0"
                     >
-                      <td className="py-2 text-[#848b9b] truncate max-w-[200px]">
+                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
                         {flow.name}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {flow.sessions}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {(flow.completion_rate * 100).toFixed(1)}%
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {flow.median_duration_minutes} min
                       </td>
                     </tr>
@@ -299,12 +299,12 @@ export default function MyAnalyticsPage() {
         </div>
 
         {/* Outcome Distribution */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
             Outcome Distribution
           </h2>
           {summary.total_sessions === 0 ? (
-            <p className="text-sm text-[#848b9b]">No session data for this period.</p>
+            <p className="text-sm text-muted-foreground">No session data for this period.</p>
           ) : (
             <div className="space-y-3">
               {(
@@ -327,11 +327,11 @@ export default function MyAnalyticsPage() {
                               OUTCOME_COLORS[outcome] ?? '#94a3b8',
                           }}
                         />
-                        <span className="text-sm text-[#848b9b] capitalize">
+                        <span className="text-sm text-muted-foreground capitalize">
                           {outcome}
                         </span>
                       </div>
-                      <span className="text-sm text-[#e2e5eb] font-medium">
+                      <span className="text-sm text-foreground font-medium">
                         {count} ({pct.toFixed(1)}%)
                       </span>
                     </div>
@@ -366,12 +366,12 @@ function StatCard({
   value: string
 }) {
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
+    <div className="bg-card border border-border rounded-xl p-6">
       <div className="flex items-center gap-2 mb-2">
-        <Icon size={16} className="text-[#848b9b]" />
-        <span className="text-sm text-[#848b9b]">{label}</span>
+        <Icon size={16} className="text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">{label}</span>
       </div>
-      <p className="text-3xl font-bold text-[#e2e5eb]">{value}</p>
+      <p className="text-3xl font-bold text-foreground">{value}</p>
     </div>
   )
 }
diff --git a/frontend/src/pages/MySharesPage.tsx b/frontend/src/pages/MySharesPage.tsx
index 8e815eff..6feb4fdd 100644
--- a/frontend/src/pages/MySharesPage.tsx
+++ b/frontend/src/pages/MySharesPage.tsx
@@ -110,7 +110,7 @@ export default function MySharesPage() {
   if (error) {
     return (
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-        <div className="bg-[#14161d] border border-red-400/20 rounded-xl p-6">
+        <div className="bg-card border border-red-400/20 rounded-xl p-6">
           <div className="text-center">
             <p className="text-red-400 text-sm mb-4">{error}</p>
             <Button onClick={fetchShares}>
@@ -129,7 +129,7 @@ export default function MySharesPage() {
       {/* Back link */}
       <Link
         to="/sessions"
-        className="inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors mb-6"
+        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
       >
         <ArrowLeft className="h-4 w-4" />
         Back to sessions
@@ -137,8 +137,8 @@ export default function MySharesPage() {
 
       {/* Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">My Shared Sessions</h1>
-        <p className="text-[#848b9b] mt-1">Manage your session share links</p>
+        <h1 className="text-2xl font-heading font-bold text-foreground">My Shared Sessions</h1>
+        <p className="text-muted-foreground mt-1">Manage your session share links</p>
       </div>
 
       {/* Empty state */}
@@ -161,10 +161,10 @@ export default function MySharesPage() {
             const isCopied = copiedId === share.id
 
             return (
-              <div key={share.id} className="bg-[#14161d] border border-[#1e2130] rounded-xl p-5">
+              <div key={share.id} className="bg-card border border-border rounded-xl p-5">
                 {/* Top row: badge + name */}
                 <div className="flex items-center gap-3 mb-3">
-                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-accent text-[#848b9b]">
+                  <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-accent text-muted-foreground">
                     {share.visibility === 'public' ? (
                       <Globe className="h-3 w-3" />
                     ) : (
@@ -172,18 +172,18 @@ export default function MySharesPage() {
                     )}
                     {share.visibility === 'public' ? 'Public' : 'Account Only'}
                   </span>
-                  <span className="text-sm font-medium text-[#e2e5eb]">
+                  <span className="text-sm font-medium text-foreground">
                     {share.share_name || 'Untitled share'}
                   </span>
                 </div>
 
                 {/* Session info */}
-                <p className="text-sm text-[#848b9b] mb-2">
+                <p className="text-sm text-muted-foreground mb-2">
                   Session ID: {share.session_id.slice(0, 8)}...
                 </p>
 
                 {/* Meta row */}
-                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[#848b9b] mb-4">
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground mb-4">
                   <span>Created {formatRelativeTime(share.created_at)}</span>
                   <span className="hidden sm:inline">·</span>
                   <span>
@@ -214,7 +214,7 @@ export default function MySharesPage() {
 
                   <Link
                     to={`/sessions/${share.session_id}`}
-                    className="inline-flex items-center gap-1.5 border border-[#1e2130] text-[#848b9b] hover:bg-accent rounded-md px-3 py-1.5 text-sm transition-colors"
+                    className="inline-flex items-center gap-1.5 border border-border text-muted-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm transition-colors"
                   >
                     <ExternalLink className="h-3.5 w-3.5" />
                     View Session
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index a9b68e93..1ac2251a 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -123,8 +123,8 @@ export function MyTreesPage() {
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-6 flex items-center justify-between sm:mb-8">
         <div>
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">My Flows</h1>
-          <p className="mt-2 text-[#848b9b]">
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">My Flows</h1>
+          <p className="mt-2 text-muted-foreground">
             Your forked and custom flows
           </p>
         </div>
@@ -140,38 +140,38 @@ export function MyTreesPage() {
             {showCreateMenu && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
-                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
+                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl">
                   <Link
                     to="/trees/new"
                     onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                   >
-                    <FolderTree className="h-4 w-4 text-[#848b9b]" />
+                    <FolderTree className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="font-medium">Troubleshooting Tree</div>
-                      <div className="text-xs text-[#848b9b]">Branching decision flow</div>
+                      <div className="text-xs text-muted-foreground">Branching decision flow</div>
                     </div>
                   </Link>
                   <Link
                     to="/flows/new"
                     onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                   >
-                    <ListOrdered className="h-4 w-4 text-[#848b9b]" />
+                    <ListOrdered className="h-4 w-4 text-muted-foreground" />
                     <div>
                       <div className="font-medium">Procedural Flow</div>
-                      <div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
+                      <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
                     </div>
                   </Link>
                   <Link
                     to="/flows/new?type=maintenance"
                     onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
+                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                   >
                     <Wrench className="h-4 w-4 text-amber-400" />
                     <div>
                       <div className="font-medium">Maintenance Flow</div>
-                      <div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
+                      <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
                     </div>
                   </Link>
                 </div>
@@ -187,17 +187,17 @@ export function MyTreesPage() {
           <Spinner />
         </div>
       ) : trees.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-[#1e2130] bg-accent px-4 py-12 text-center">
-          <FolderTree className="mx-auto mb-4 h-12 w-12 text-[#848b9b]" />
-          <h2 className="mb-2 text-lg font-semibold text-[#e2e5eb]">No personal flows yet</h2>
-          <p className="mb-4 text-sm text-[#848b9b]">
+        <div className="rounded-lg border border-dashed border-border bg-accent px-4 py-12 text-center">
+          <FolderTree className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
+          <h2 className="mb-2 text-lg font-semibold text-foreground">No personal flows yet</h2>
+          <p className="mb-4 text-sm text-muted-foreground">
             Fork a flow from the library to customize it for your workflow
           </p>
           <div className="flex items-center justify-center gap-3">
             <Link
               to="/trees"
               className={cn(
-                'inline-flex items-center gap-2 rounded-md bg-[#22d3ee] text-white px-4 py-2 text-sm font-medium',
+                'inline-flex items-center gap-2 rounded-md bg-primary text-white px-4 py-2 text-sm font-medium',
                 'hover:brightness-110'
               )}
             >
@@ -207,8 +207,8 @@ export function MyTreesPage() {
               <Link
                 to="/trees/new"
                 className={cn(
-                  'inline-flex items-center gap-2 rounded-md border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#848b9b]',
-                  'hover:bg-accent hover:text-[#e2e5eb]'
+                  'inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                  'hover:bg-accent hover:text-foreground'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -222,18 +222,18 @@ export function MyTreesPage() {
           {trees.map((tree) => (
             <div
               key={tree.id}
-              className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 transition-all hover:border-[#1e2130]/80 sm:p-6"
+              className="bg-card border border-border rounded-xl p-4 transition-all hover:border-border/80 sm:p-6"
             >
               {/* Header */}
               <div className="mb-3 flex items-start justify-between gap-2">
                 <div className="flex items-center gap-2">
                   {tree.tree_type === 'procedural' && (
-                    <ListOrdered className="h-4 w-4 shrink-0 text-[#848b9b]" />
+                    <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
                   )}
                   {tree.tree_type === 'maintenance' && (
                     <Wrench className="h-4 w-4 shrink-0 text-amber-400" />
                   )}
-                  <h3 className="font-semibold text-[#e2e5eb]">{tree.name}</h3>
+                  <h3 className="font-semibold text-foreground">{tree.name}</h3>
                   {tree.parent_tree_id && (
                     <span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
                       Fork
@@ -252,7 +252,7 @@ export function MyTreesPage() {
                     </span>
                   )}
                   {tree.category_info && (
-                    <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
+                    <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                       {tree.category_info.name}
                     </span>
                   )}
@@ -260,19 +260,19 @@ export function MyTreesPage() {
               </div>
 
               {/* Description */}
-              <p className="mb-3 text-sm text-[#848b9b] line-clamp-2">
+              <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
                 {tree.description || 'No description available'}
               </p>
 
               {/* Fork Badge */}
               {tree.parent_tree_id && (
                 <div className="mb-3 flex items-center gap-2 rounded-md bg-accent px-2 py-1.5 text-sm">
-                  <GitBranch className="h-4 w-4 text-[#848b9b]" />
-                  <span className="text-[#848b9b]">
+                  <GitBranch className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">
                     Forked from{' '}
                     <Link
                       to={`/trees/${tree.parent_tree_id}/navigate`}
-                      className="font-medium text-[#e2e5eb] hover:underline"
+                      className="font-medium text-foreground hover:underline"
                     >
                       original
                     </Link>
@@ -288,7 +288,7 @@ export function MyTreesPage() {
               )}
 
               {/* Stats */}
-              <div className="mb-4 flex items-center gap-4 text-xs text-[#848b9b]">
+              <div className="mb-4 flex items-center gap-4 text-xs text-muted-foreground">
                 <div className="flex items-center gap-1">
                   <Clock className="h-3.5 w-3.5" />
                   <span>{formatDate(tree.lastUsed)}</span>
@@ -312,8 +312,8 @@ export function MyTreesPage() {
                   <Link
                     to={getEditPath(tree)}
                     className={cn(
-                      'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
-                      'hover:bg-accent hover:text-[#e2e5eb]'
+                      'rounded-md border border-border p-2 text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                     title="Edit tree"
                   >
diff --git a/frontend/src/pages/PrivacyPage.tsx b/frontend/src/pages/PrivacyPage.tsx
index 40b95b82..8e7662a5 100644
--- a/frontend/src/pages/PrivacyPage.tsx
+++ b/frontend/src/pages/PrivacyPage.tsx
@@ -5,36 +5,36 @@ export default function PrivacyPage() {
   return (
     <>
       <PageMeta title="Privacy Policy" description="ResolutionFlow Privacy Policy" />
-      <div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-[#848b9b] hover:text-[#e2e5eb] mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
           <h1 className="text-3xl font-bold font-heading mb-8">Privacy Policy</h1>
-          <p className="text-[#848b9b] mb-6">Last updated: March 21, 2026</p>
+          <p className="text-muted-foreground mb-6">Last updated: March 21, 2026</p>
 
-          <div className="space-y-6 text-[#848b9b] leading-relaxed">
+          <div className="space-y-6 text-muted-foreground leading-relaxed">
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">1. Information We Collect</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">1. Information We Collect</h2>
               <p>When you use ResolutionFlow, we collect information you provide directly: your name, email address, and account credentials. We also collect usage data including session logs, flow configurations, and troubleshooting documentation generated through the platform.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">2. How We Use Your Information</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">2. How We Use Your Information</h2>
               <p>We use your information to provide and improve ResolutionFlow, including: operating your account, generating documentation from troubleshooting sessions, providing AI-powered guidance through FlowPilot, and communicating with you about the service.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">3. Data Storage & Security</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">3. Data Storage & Security</h2>
               <p>Your data is stored securely using industry-standard encryption. PSA credentials (ConnectWise, Atera, Syncro) are encrypted at rest. We do not sell your data to third parties.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">4. AI & Data Processing</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">4. AI & Data Processing</h2>
               <p>FlowPilot uses AI models to provide troubleshooting guidance. Session data sent to AI providers is used only for generating responses within your session and is not used to train AI models.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">5. Contact</h2>
-              <p>Questions about this policy? Email us at <a href="mailto:hello@resolutionflow.com" className="text-[#22d3ee] hover:underline">hello@resolutionflow.com</a>.</p>
+              <h2 className="text-xl font-semibold text-foreground mb-3">5. Contact</h2>
+              <p>Questions about this policy? Email us at <a href="mailto:hello@resolutionflow.com" className="text-primary hover:underline">hello@resolutionflow.com</a>.</p>
             </section>
           </div>
         </div>
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index a212e06a..66d533da 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -265,37 +265,37 @@ export function ProceduralEditorPage() {
       {/* Main content column */}
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
       {/* Toolbar — sticky */}
-      <div className="flex shrink-0 items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-4 py-2">
+      <div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-3">
           <button
             onClick={() => navigate('/trees')}
-            className="rounded-md p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <ArrowLeft className="h-5 w-5" />
           </button>
           <div className="flex items-center gap-2">
             {isMaintenance
               ? <Wrench className="h-5 w-5 text-amber-400" />
-              : <ListOrdered className="h-5 w-5 text-[#848b9b]" />}
-            <h1 className="text-lg font-bold text-[#e2e5eb]">
+              : <ListOrdered className="h-5 w-5 text-muted-foreground" />}
+            <h1 className="text-lg font-bold text-foreground">
               {isEditMode ? `Edit ${flowLabel}` : `New ${flowLabel}`}
-              {name && <span className="ml-2 font-normal text-[#848b9b]">— {name}</span>}
+              {name && <span className="ml-2 font-normal text-muted-foreground">— {name}</span>}
             </h1>
           </div>
         </div>
 
         <div className="flex items-center gap-2">
           {isDirty && (
-            <span className="text-xs text-[#848b9b]">Unsaved changes</span>
+            <span className="text-xs text-muted-foreground">Unsaved changes</span>
           )}
           <button
             onClick={() => editorAI.isOpen ? editorAI.closePanel() : editorAI.openPanel()}
             title="Toggle AI Assist panel"
             className={cn(
-              'flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
+              'flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
               editorAI.isOpen
-                ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border-primary/30'
-                : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                ? 'bg-accent-dim text-primary border-primary/30'
+                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Sparkles className="h-4 w-4" />
@@ -329,40 +329,40 @@ export function ProceduralEditorPage() {
         >
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#848b9b]">Name</label>
+              <label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
               <input
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="e.g. Domain Controller Build"
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#848b9b]">Description</label>
+              <label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
               <textarea
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Brief description of this procedure..."
                 rows={2}
-                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             <div className="grid grid-cols-2 gap-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-[#848b9b]">Tags</label>
+                <label className="mb-1 block text-sm font-medium text-muted-foreground">Tags</label>
                 <TagInput tags={tags} onChange={setTags} />
               </div>
 
               <div className="flex items-end pb-1">
-                <label className="flex items-center gap-2 text-sm text-[#848b9b]">
+                <label className="flex items-center gap-2 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
                     checked={isPublic}
                     onChange={(e) => setIsPublic(e.target.checked)}
-                    className="rounded border-[#1e2130]"
+                    className="rounded border-border"
                   />
                   Public (visible to all users)
                 </label>
diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index 9b418aa0..0eb12eb3 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -630,17 +630,17 @@ export function ProceduralNavigationPage() {
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden">
       {/* Top bar */}
-      <div className="border-b border-[#1e2130] px-4 py-3 sm:px-6">
+      <div className="border-b border-border px-4 py-3 sm:px-6">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-3">
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
-              className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] lg:hidden"
+              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground lg:hidden"
             >
               {sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
             </button>
-            <ListOrdered className="h-5 w-5 text-[#848b9b]" />
-            <h1 className="text-sm font-semibold text-[#e2e5eb] sm:text-base">{tree.name}</h1>
+            <ListOrdered className="h-5 w-5 text-muted-foreground" />
+            <h1 className="text-sm font-semibold text-foreground sm:text-base">{tree.name}</h1>
           </div>
           <button
             onClick={() => {
@@ -650,7 +650,7 @@ export function ProceduralNavigationPage() {
                 navigate('/trees')
               }
             }}
-            className="rounded-md border border-[#1e2130] px-3 py-1.5 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+            className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
           >
             <X className="mr-1 inline h-3.5 w-3.5" />
             Exit
@@ -693,7 +693,7 @@ export function ProceduralNavigationPage() {
         {/* Left sidebar - step checklist */}
         <div
           className={cn(
-            'min-h-0 border-r border-[#1e2130] bg-[#14161d] transition-all duration-200',
+            'min-h-0 border-r border-border bg-card transition-all duration-200',
             sidebarOpen ? 'w-72 overflow-y-auto p-3' : 'w-0 overflow-hidden p-0'
           )}
         >
@@ -708,7 +708,7 @@ export function ProceduralNavigationPage() {
 
               {/* PSA Ticket Context Panel */}
               {session?.psa_ticket_id && (
-                <div className="mt-3 border-t border-[#1e2130] pt-3">
+                <div className="mt-3 border-t border-border pt-3">
                   <TicketContextPanel
                     context={ticketContext}
                     loading={ticketContextLoading}
@@ -720,10 +720,10 @@ export function ProceduralNavigationPage() {
 
               {/* Session Variables button */}
               {intakeFields.length > 0 && (
-                <div className="mt-3 border-t border-[#1e2130] pt-3">
+                <div className="mt-3 border-t border-border pt-3">
                   <button
                     onClick={() => setParamsOpen(true)}
-                    className="flex w-full items-center gap-2 rounded-lg border border-[#1e2130] px-3 py-2 text-xs text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
+                    className="flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-muted-foreground"
                   >
                     <Settings2 className="h-3.5 w-3.5" />
                     Session Variables
@@ -780,7 +780,7 @@ export function ProceduralNavigationPage() {
             <div className="mt-4">
               <button
                 onClick={() => setShowCustomStepModal(true)}
-                className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-[#1e2130] px-4 py-2.5 text-sm text-[#848b9b] transition-colors hover:border-primary/50 hover:text-[#e2e5eb]"
+                className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border px-4 py-2.5 text-sm text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground"
               >
                 <Plus className="h-4 w-4" />
                 Add Step
@@ -845,15 +845,15 @@ export function ProceduralNavigationPage() {
       {paramsOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
           <div
-            className="absolute inset-0 bg-[#0c0d10]/60"
+            className="absolute inset-0 bg-background/60"
             onClick={() => setParamsOpen(false)}
           />
-          <div className="relative w-full max-w-md rounded-2xl border border-[#1e2130] bg-[#14161d] shadow-2xl">
-            <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
-              <h3 className="text-sm font-semibold text-[#e2e5eb]">Session Variables</h3>
+          <div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl">
+            <div className="flex items-center justify-between border-b border-border px-5 py-4">
+              <h3 className="text-sm font-semibold text-foreground">Session Variables</h3>
               <button
                 onClick={() => setParamsOpen(false)}
-                className="rounded-lg p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -872,7 +872,7 @@ export function ProceduralNavigationPage() {
                         key={field.variable_name}
                         className={cn(
                           'rounded-lg border px-3 py-2.5',
-                          isFilled ? 'border-[#1e2130] bg-accent' : 'border-cyan-500/20 bg-cyan-500/5'
+                          isFilled ? 'border-border bg-accent' : 'border-cyan-500/20 bg-cyan-500/5'
                         )}
                       >
                         <div className="flex items-center justify-between gap-2">
@@ -882,7 +882,7 @@ export function ProceduralNavigationPage() {
                             ) : (
                               <AlertCircle className="h-3.5 w-3.5 shrink-0 text-cyan-400" />
                             )}
-                            <span className="text-xs font-medium text-[#848b9b] truncate">
+                            <span className="text-xs font-medium text-muted-foreground truncate">
                               {field.label}
                               {field.required && <span className="ml-1 text-amber-400">*</span>}
                             </span>
@@ -890,7 +890,7 @@ export function ProceduralNavigationPage() {
                           {!isEditing && (
                             <button
                               onClick={() => startEditingVar(field.variable_name)}
-                              className="shrink-0 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-[#14161d] hover:text-[#e2e5eb]"
+                              className="shrink-0 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-card hover:text-foreground"
                             >
                               {isFilled ? 'Edit' : 'Fill'}
                             </button>
@@ -903,7 +903,7 @@ export function ProceduralNavigationPage() {
                                 value={editingVarValue}
                                 onChange={(e) => setEditingVarValue(e.target.value)}
                                 autoFocus
-                                className="w-full rounded-md border border-cyan-500/30 bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+                                className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
                               >
                                 <option value="">{field.placeholder || 'Select...'}</option>
                                 {field.options.map((opt) => (
@@ -917,7 +917,7 @@ export function ProceduralNavigationPage() {
                                 autoFocus
                                 rows={3}
                                 placeholder={field.placeholder}
-                                className="w-full rounded-md border border-cyan-500/30 bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+                                className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
                               />
                             ) : (
                               <input
@@ -927,30 +927,30 @@ export function ProceduralNavigationPage() {
                                 onKeyDown={(e) => { if (e.key === 'Enter') saveEditingVar() }}
                                 autoFocus
                                 placeholder={field.placeholder}
-                                className="w-full rounded-md border border-cyan-500/30 bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+                                className="w-full rounded-md border border-cyan-500/30 bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
                               />
                             )}
                             {field.help_text && (
-                              <p className="mt-1 text-[0.625rem] text-[#848b9b]">{field.help_text}</p>
+                              <p className="mt-1 text-[0.625rem] text-muted-foreground">{field.help_text}</p>
                             )}
                             <div className="mt-2 flex justify-end gap-2">
                               <button
                                 onClick={() => { setEditingVarName(null); setEditingVarValue('') }}
-                                className="rounded px-2.5 py-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
+                                className="rounded px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground"
                               >
                                 Cancel
                               </button>
                               <button
                                 onClick={saveEditingVar}
                                 disabled={!editingVarValue.trim()}
-                                className="rounded bg-[#22d3ee] px-2.5 py-1 text-xs font-medium text-white disabled:opacity-40"
+                                className="rounded bg-primary px-2.5 py-1 text-xs font-medium text-white disabled:opacity-40"
                               >
                                 Save
                               </button>
                             </div>
                           </div>
                         ) : isFilled ? (
-                          <p className="mt-1 text-sm text-[#e2e5eb] truncate">{value}</p>
+                          <p className="mt-1 text-sm text-foreground truncate">{value}</p>
                         ) : null}
                       </div>
                     )
@@ -961,8 +961,8 @@ export function ProceduralNavigationPage() {
                   .filter(([key]) => !intakeFields.some(f => f.variable_name === key))
                   .map(([key, value]) => (
                     <div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-accent px-3 py-2">
-                      <span className="text-xs font-medium text-[#848b9b]">{key.replace(/_/g, ' ')}</span>
-                      <span className="text-right text-sm text-[#848b9b]">{value || 'N/A'}</span>
+                      <span className="text-xs font-medium text-muted-foreground">{key.replace(/_/g, ' ')}</span>
+                      <span className="text-right text-sm text-muted-foreground">{value || 'N/A'}</span>
                     </div>
                   ))}
               </div>
diff --git a/frontend/src/pages/PublicTemplatesPage.tsx b/frontend/src/pages/PublicTemplatesPage.tsx
index e2d90844..583ac663 100644
--- a/frontend/src/pages/PublicTemplatesPage.tsx
+++ b/frontend/src/pages/PublicTemplatesPage.tsx
@@ -156,7 +156,7 @@ export default function PublicTemplatesPage() {
         description="Browse battle-tested troubleshooting flows and scripts built by MSP engineers. Free to explore."
       />
 
-      <div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+      <div className="min-h-screen bg-background text-foreground">
         {/* Ambient orbs */}
         <div
           className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
@@ -172,25 +172,25 @@ export default function PublicTemplatesPage() {
         />
 
         {/* Header */}
-        <header className="sticky top-0 z-40 border-b border-[#1e2130] bg-[#0c0d10]/80">
+        <header className="sticky top-0 z-40 border-b border-border bg-background/80">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
             <Link to="/landing" className="flex items-center gap-2.5">
               <BrandLogo size="sm" />
               <span className="font-heading text-lg font-semibold">
-                <span className="text-[#e2e5eb]">Resolution</span>
-                <span className="text-[#67e8f9]">Flow</span>
+                <span className="text-foreground">Resolution</span>
+                <span className="text-accent-text">Flow</span>
               </span>
             </Link>
             <div className="flex items-center gap-3">
               <Link
                 to="/login"
-                className="px-4 py-2 rounded-lg text-sm font-medium text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="px-4 py-2 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
               >
                 Sign In
               </Link>
               <Link
                 to="/register"
-                className="px-4 py-2 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                className="px-4 py-2 rounded-lg text-sm font-semibold bg-primary text-white hover:brightness-110 active:scale-[0.98] transition-all"
               >
                 Sign Up Free
               </Link>
@@ -203,21 +203,21 @@ export default function PublicTemplatesPage() {
           <div className="max-w-3xl mx-auto text-center">
             <h1 className="font-heading text-4xl lg:text-5xl font-bold tracking-tight">
               MSP Troubleshooting{' '}
-              <span className="text-[#67e8f9]">Templates</span>
+              <span className="text-accent-text">Templates</span>
             </h1>
-            <p className="mt-4 text-lg text-[#848b9b] max-w-2xl mx-auto">
+            <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
               Battle-tested flows and scripts built by MSP engineers. Free to browse, powerful when connected to FlowPilot.
             </p>
 
             {/* Search */}
             <div className="mt-8 max-w-xl mx-auto relative">
-              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#848b9b]" />
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
               <input
                 type="text"
                 placeholder="Search templates..."
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
-                className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-[#14161d] border border-[#1e2130] text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
+                className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
               />
             </div>
           </div>
@@ -235,8 +235,8 @@ export default function PublicTemplatesPage() {
                   className={cn(
                     'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
                     !activeCategory
-                      ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border-primary/30'
-                      : 'bg-[#14161d] border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
+                      ? 'bg-accent-dim text-foreground border-primary/30'
+                      : 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
                   )}
                 >
                   All
@@ -249,8 +249,8 @@ export default function PublicTemplatesPage() {
                     className={cn(
                       'px-3 py-1.5 rounded-full text-sm font-medium border transition-colors',
                       cat === activeCategory
-                        ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border-primary/30'
-                        : 'bg-[#14161d] border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
+                        ? 'bg-accent-dim text-foreground border-primary/30'
+                        : 'bg-card border-border text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
                     )}
                   >
                     {cat}
@@ -262,7 +262,7 @@ export default function PublicTemplatesPage() {
             {/* Type toggle + Sort */}
             <div className="flex items-center justify-between gap-4 flex-wrap">
               {/* Type segmented control */}
-              <div className="flex items-center rounded-xl border border-[#1e2130] bg-[#14161d] overflow-hidden">
+              <div className="flex items-center rounded-xl border border-border bg-card overflow-hidden">
                 {(['all', 'flows', 'scripts'] as TypeFilter[]).map((t) => (
                   <button
                     key={t}
@@ -271,8 +271,8 @@ export default function PublicTemplatesPage() {
                     className={cn(
                       'px-4 py-2 text-sm font-medium transition-colors',
                       t === typeFilter
-                        ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                        : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                        ? 'bg-accent-dim text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'
                     )}
                   >
                     {t === 'all' ? 'All' : t === 'flows' ? 'Flows' : 'Scripts'}
@@ -285,16 +285,16 @@ export default function PublicTemplatesPage() {
                 <button
                   type="button"
                   onClick={() => setSortOpen(!sortOpen)}
-                  className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
+                  className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
                 >
-                  <SlidersHorizontal className="w-4 h-4 text-[#848b9b]" />
+                  <SlidersHorizontal className="w-4 h-4 text-muted-foreground" />
                   {sortLabels[sort]}
-                  <ChevronDown className={cn('w-4 h-4 text-[#848b9b] transition-transform', sortOpen && 'rotate-180')} />
+                  <ChevronDown className={cn('w-4 h-4 text-muted-foreground transition-transform', sortOpen && 'rotate-180')} />
                 </button>
                 {sortOpen && (
                   <>
                     <div className="fixed inset-0 z-10" onClick={() => setSortOpen(false)} />
-                    <div className="absolute right-0 mt-1 z-20 w-52 rounded-xl border border-[#1e2130] bg-[#14161d] shadow-lg shadow-black/30 overflow-hidden">
+                    <div className="absolute right-0 mt-1 z-20 w-52 rounded-xl border border-border bg-card shadow-lg shadow-black/30 overflow-hidden">
                       {(Object.entries(sortLabels) as [SortOption, string][]).map(([key, label]) => (
                         <button
                           key={key}
@@ -306,8 +306,8 @@ export default function PublicTemplatesPage() {
                           className={cn(
                             'w-full text-left px-4 py-2.5 text-sm transition-colors',
                             key === sort
-                              ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-                              : 'text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)]'
+                              ? 'bg-accent-dim text-foreground'
+                              : 'text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)]'
                           )}
                         >
                           {label}
@@ -341,11 +341,11 @@ export default function PublicTemplatesPage() {
             {/* Error */}
             {!loading && error && (
               <div className="text-center py-16">
-                <p className="text-[#848b9b] text-sm">{error}</p>
+                <p className="text-muted-foreground text-sm">{error}</p>
                 <button
                   type="button"
                   onClick={fetchGallery}
-                  className="mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                  className="mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:brightness-110 active:scale-[0.98] transition-all"
                 >
                   Try Again
                 </button>
@@ -355,7 +355,7 @@ export default function PublicTemplatesPage() {
             {/* Empty */}
             {!loading && !error && flows.length === 0 && scripts.length === 0 && (
               <div className="text-center py-16">
-                <p className="text-[#848b9b] text-sm">
+                <p className="text-muted-foreground text-sm">
                   No templates found. Try a different search or category.
                 </p>
               </div>
@@ -368,7 +368,7 @@ export default function PublicTemplatesPage() {
                 {showFlows && flows.length > 0 && (
                   <div>
                     {typeFilter === 'all' && (
-                      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-4">
+                      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
                         Flows ({data?.total_flows || flows.length})
                       </h2>
                     )}
@@ -388,7 +388,7 @@ export default function PublicTemplatesPage() {
                 {showScripts && scripts.length > 0 && (
                   <div>
                     {typeFilter === 'all' && (
-                      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-4">
+                      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-4">
                         Scripts ({data?.total_scripts || scripts.length})
                       </h2>
                     )}
@@ -409,18 +409,18 @@ export default function PublicTemplatesPage() {
         </section>
 
         {/* Footer */}
-        <footer className="border-t border-[#1e2130] py-8 px-4 sm:px-6 lg:px-8">
+        <footer className="border-t border-border py-8 px-4 sm:px-6 lg:px-8">
           <div className="max-w-7xl mx-auto flex items-center justify-between">
             <Link
               to="/landing"
-              className="text-[#848b9b] text-sm hover:text-[#e2e5eb] transition-colors"
+              className="text-muted-foreground text-sm hover:text-foreground transition-colors"
             >
               Powered by <span className="font-semibold">ResolutionFlow</span>
             </Link>
             <div className="flex items-center gap-4">
               <Link
                 to="/register"
-                className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Get Started
               </Link>
@@ -431,7 +431,7 @@ export default function PublicTemplatesPage() {
         {/* Detail loading overlay */}
         {detailLoading && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-            <Loader2 className="w-8 h-8 text-[#22d3ee] animate-spin" />
+            <Loader2 className="w-8 h-8 text-primary animate-spin" />
           </div>
         )}
 
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index abbd2d9f..9232a922 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -18,7 +18,7 @@ export function QuickStartPage() {
       <div className="p-6 space-y-5 max-w-5xl mx-auto">
         {/* Greeting */}
         <div className="fade-in" style={{ animationDelay: '100ms' }}>
-          <h1 className="font-heading text-3xl font-extrabold tracking-tight text-[#e2e5eb]">
+          <h1 className="font-heading text-3xl font-extrabold tracking-tight text-foreground">
             Good{' '}
             {new Date().getHours() < 12
               ? 'morning'
@@ -27,7 +27,7 @@ export function QuickStartPage() {
               : 'evening'}
             , {user?.name?.split(' ')[0] || 'there'}
           </h1>
-          <p className="mt-1 text-sm text-[#848b9b]">
+          <p className="mt-1 text-sm text-muted-foreground">
             {new Date().toLocaleDateString('en-US', {
               weekday: 'long',
               month: 'long',
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index a255f220..73cdea2e 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -88,19 +88,19 @@ export function RegisterPage() {
           <div className="mb-4 flex justify-center sm:mb-6">
             <BrandLogo size="lg" />
           </div>
-          <h1 className="text-3xl font-bold font-heading text-[#e2e5eb] tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             ResolutionFlow
           </h1>
-          <p className="mt-2 text-base font-medium text-[#848b9b] sm:mt-3 sm:text-lg">
+          <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
             AI-Powered Troubleshooting for MSPs
           </p>
-          <p className="mt-1 text-sm text-[#848b9b] sm:mt-2">
+          <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
             Create your account
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             {(error || localError) && (
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 {localError || error}
@@ -108,7 +108,7 @@ export function RegisterPage() {
             )}
 
             <div>
-              <label htmlFor="inviteCode" className="block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="inviteCode" className="block text-sm font-medium text-foreground">
                 Invite code
               </label>
               <input
@@ -122,18 +122,18 @@ export function RegisterPage() {
                 }}
                 onBlur={(e) => validateInviteCode(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border bg-[#14161d] px-3 py-2 font-mono tracking-wider',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:outline-hidden focus:ring-1',
                   inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
                   inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
-                  inviteCodeStatus === 'idle' && 'border-[#1e2130] focus:border-primary focus:ring-primary/20',
-                  inviteCodeStatus === 'checking' && 'border-[#1e2130] focus:border-primary focus:ring-primary/20'
+                  inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
+                  inviteCodeStatus === 'checking' && 'border-border focus:border-primary focus:ring-primary/20'
                 )}
                 placeholder="ABCD1234"
               />
               {inviteCodeStatus === 'checking' && (
-                <p className="mt-1 text-xs text-[#848b9b]">Validating...</p>
+                <p className="mt-1 text-xs text-muted-foreground">Validating...</p>
               )}
               {inviteCodeStatus === 'valid' && (
                 <p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p>
@@ -144,7 +144,7 @@ export function RegisterPage() {
             </div>
 
             <div>
-              <label htmlFor="name" className="block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="name" className="block text-sm font-medium text-foreground">
                 Full name
               </label>
               <input
@@ -156,8 +156,8 @@ export function RegisterPage() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="John Smith"
@@ -165,7 +165,7 @@ export function RegisterPage() {
             </div>
 
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">
                 Email address
               </label>
               <input
@@ -177,8 +177,8 @@ export function RegisterPage() {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="you@example.com"
@@ -186,7 +186,7 @@ export function RegisterPage() {
             </div>
 
             <div>
-              <label htmlFor="password" className="block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="password" className="block text-sm font-medium text-foreground">
                 Password
               </label>
               <PasswordInput
@@ -197,19 +197,19 @@ export function RegisterPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
               />
-              <p className="mt-1 text-xs text-[#848b9b]">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Must be at least 10 characters
               </p>
             </div>
 
             <div>
-              <label htmlFor="confirmPassword" className="block text-sm font-medium text-[#e2e5eb]">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
                 Confirm password
               </label>
               <PasswordInput
@@ -220,8 +220,8 @@ export function RegisterPage() {
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className={cn(
-                  'mt-1 block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                  'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
+                  'text-foreground placeholder:text-muted-foreground',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
                 placeholder="••••••••••"
@@ -233,7 +233,7 @@ export function RegisterPage() {
               disabled={isLoading}
               className={cn(
                 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                'bg-[#22d3ee] text-white hover:brightness-110',
+                'bg-primary text-white hover:brightness-110',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'
@@ -243,9 +243,9 @@ export function RegisterPage() {
             </button>
           </div>
 
-          <p className="text-center text-sm text-[#848b9b]">
+          <p className="text-center text-sm text-muted-foreground">
             Already have an account?{' '}
-            <Link to="/login" className="font-medium text-[#e2e5eb] hover:underline">
+            <Link to="/login" className="font-medium text-foreground hover:underline">
               Sign in
             </Link>
           </p>
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 121e25df..b542a23f 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -85,24 +85,24 @@ export function ResetPasswordPage() {
               <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
             </div>
           </div>
-          <h1 className="text-3xl font-bold font-heading text-[#e2e5eb] tracking-tight">
+          <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
             Reset Password
           </h1>
         </div>
 
         {verifying ? (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 text-center">
-            <p className="text-[#848b9b]">Verifying reset link...</p>
+          <div className="bg-card border border-border rounded-xl p-6 text-center">
+            <p className="text-muted-foreground">Verifying reset link...</p>
           </div>
         ) : !token || !valid ? (
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+          <div className="bg-card border border-border rounded-xl p-6 space-y-4">
             <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400">
               This reset link is invalid or has expired. Please request a new one.
             </div>
             <div className="text-center">
               <Link
                 to="/forgot-password"
-                className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
               >
                 Request new reset link
               </Link>
@@ -110,10 +110,10 @@ export function ResetPasswordPage() {
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-            <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 space-y-4">
+            <div className="bg-card border border-border rounded-xl p-6 space-y-4">
               {email && (
-                <p className="text-sm text-[#848b9b]">
-                  Resetting password for <span className="font-medium text-[#e2e5eb]">{email}</span>
+                <p className="text-sm text-muted-foreground">
+                  Resetting password for <span className="font-medium text-foreground">{email}</span>
                 </p>
               )}
 
@@ -124,7 +124,7 @@ export function ResetPasswordPage() {
               )}
 
               <div>
-                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+                <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
                   New Password
                 </label>
                 <PasswordInput
@@ -134,20 +134,20 @@ export function ResetPasswordPage() {
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
                   placeholder="At least 10 characters"
                 />
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Must include uppercase, lowercase, and a digit.
                 </p>
               </div>
 
               <div>
-                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+                <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
                   Confirm New Password
                 </label>
                 <PasswordInput
@@ -157,8 +157,8 @@ export function ResetPasswordPage() {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   className={cn(
-                    'block w-full rounded-xl border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'block w-full rounded-xl border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                     'transition-colors'
                   )}
@@ -170,7 +170,7 @@ export function ResetPasswordPage() {
                 disabled={isLoading}
                 className={cn(
                   'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
-                  'bg-[#22d3ee] text-white hover:brightness-110',
+                  'bg-primary text-white hover:brightness-110',
                   'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
                   'disabled:cursor-not-allowed disabled:opacity-50',
                   'transition-all'
diff --git a/frontend/src/pages/ReviewQueuePage.tsx b/frontend/src/pages/ReviewQueuePage.tsx
index 356b15fd..8bbb9901 100644
--- a/frontend/src/pages/ReviewQueuePage.tsx
+++ b/frontend/src/pages/ReviewQueuePage.tsx
@@ -93,16 +93,16 @@ export default function ReviewQueuePage() {
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Lightbulb size={16} className="text-amber-400" />
-              <h1 className="font-heading text-base font-semibold text-[#e2e5eb]">Review Queue</h1>
+              <h1 className="font-heading text-base font-semibold text-foreground">Review Queue</h1>
             </div>
-            <button onClick={loadProposals} className="text-[#848b9b] hover:text-[#e2e5eb] transition-colors">
+            <button onClick={loadProposals} className="text-muted-foreground hover:text-foreground transition-colors">
               <RefreshCw size={14} />
             </button>
           </div>
 
           {/* Stats bar */}
           {stats && (
-            <div className="flex items-center gap-3 text-xs text-[#848b9b]">
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
               <span className="flex items-center gap-1">
                 <Clock size={10} className="text-amber-400" />
                 {stats.pending_count} pending
@@ -112,7 +112,7 @@ export default function ReviewQueuePage() {
                 {stats.approved_this_week} approved
               </span>
               <span className="flex items-center gap-1">
-                <Sparkles size={10} className="text-[#22d3ee]" />
+                <Sparkles size={10} className="text-primary" />
                 {stats.auto_reinforced_this_week} reinforced
               </span>
             </div>
@@ -126,8 +126,8 @@ export default function ReviewQueuePage() {
                 onClick={() => setActiveTab(tab.key)}
                 className={`shrink-0 rounded-lg px-2.5 py-1 text-xs font-medium transition-colors ${
                   activeTab === tab.key
-                    ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
-                    : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                    ? 'bg-accent-dim text-primary'
+                    : 'text-muted-foreground hover:text-foreground'
                 }`}
               >
                 {tab.label}
@@ -144,7 +144,7 @@ export default function ReviewQueuePage() {
           <select
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value)}
-            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-xs text-[#e2e5eb]"
+            className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-xs text-foreground"
           >
             <option value="newest">Newest first</option>
             <option value="confidence">Highest confidence</option>
@@ -156,12 +156,12 @@ export default function ReviewQueuePage() {
         <div className="p-3 space-y-2">
           {isLoading ? (
             <div className="flex justify-center py-12">
-              <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+              <Loader2 size={20} className="animate-spin text-muted-foreground" />
             </div>
           ) : proposals.length === 0 ? (
             <div className="py-12 text-center">
-              <Lightbulb size={24} className="mx-auto mb-2 text-[#848b9b]/40" />
-              <p className="text-sm text-[#848b9b]">No proposals found</p>
+              <Lightbulb size={24} className="mx-auto mb-2 text-muted-foreground/40" />
+              <p className="text-sm text-muted-foreground">No proposals found</p>
             </div>
           ) : (
             proposals.map((proposal) => (
@@ -180,7 +180,7 @@ export default function ReviewQueuePage() {
       <div className={`flex-1 overflow-y-auto ${!detail && !isLoadingDetail ? 'hidden lg:flex' : ''}`}>
         {isLoadingDetail ? (
           <div className="flex items-center justify-center h-full">
-            <Loader2 size={20} className="animate-spin text-[#848b9b]" />
+            <Loader2 size={20} className="animate-spin text-muted-foreground" />
           </div>
         ) : detail ? (
           <ProposalDetail
@@ -190,8 +190,8 @@ export default function ReviewQueuePage() {
         ) : (
           <div className="flex items-center justify-center h-full">
             <div className="text-center">
-              <Lightbulb size={32} className="mx-auto mb-3 text-[#848b9b]/30" />
-              <p className="text-sm text-[#848b9b]">Select a proposal to review</p>
+              <Lightbulb size={32} className="mx-auto mb-3 text-muted-foreground/30" />
+              <p className="text-sm text-muted-foreground">Select a proposal to review</p>
             </div>
           </div>
         )}
diff --git a/frontend/src/pages/ScriptBuilderPage.tsx b/frontend/src/pages/ScriptBuilderPage.tsx
index 5a357377..20fd2ff0 100644
--- a/frontend/src/pages/ScriptBuilderPage.tsx
+++ b/frontend/src/pages/ScriptBuilderPage.tsx
@@ -131,8 +131,8 @@ export default function ScriptBuilderPage() {
               <Terminal size={18} className="text-fuchsia-400" />
             </span>
             <div>
-              <h1 className="text-base font-heading font-bold text-[#e2e5eb]">Script Builder</h1>
-              <p className="text-xs text-[#848b9b]">Describe what you need, AI generates the script</p>
+              <h1 className="text-base font-heading font-bold text-foreground">Script Builder</h1>
+              <p className="text-xs text-muted-foreground">Describe what you need, AI generates the script</p>
             </div>
           </div>
 
@@ -146,10 +146,10 @@ export default function ScriptBuilderPage() {
                 className={cn(
                   "px-3 py-1.5 rounded-md text-xs font-sans text-xs font-medium transition-all",
                   language === lang.value
-                    ? "bg-[#22d3ee] text-white"
+                    ? "bg-primary text-white"
                     : hasMessages
-                      ? "text-[#5a6170] cursor-not-allowed"
-                      : "text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)]"
+                      ? "text-text-muted cursor-not-allowed"
+                      : "text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)]"
                 )}
               >
                 {lang.label}
diff --git a/frontend/src/pages/ScriptLibraryPage.tsx b/frontend/src/pages/ScriptLibraryPage.tsx
index c052e389..3ba882a3 100644
--- a/frontend/src/pages/ScriptLibraryPage.tsx
+++ b/frontend/src/pages/ScriptLibraryPage.tsx
@@ -57,22 +57,22 @@ export default function ScriptLibraryPage() {
 
   const tabClass = (tab: LibraryTab) =>
     tab === activeTab
-      ? 'border-b-2 border-primary text-[#e2e5eb]'
-      : 'text-[#848b9b] hover:text-[#e2e5eb]'
+      ? 'border-b-2 border-primary text-foreground'
+      : 'text-muted-foreground hover:text-foreground'
 
   return (
     <div className="flex flex-col gap-4 p-6 h-full">
       {/* Page header */}
       <div className="flex items-start justify-between">
         <div>
-          <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">Script Library</h1>
-          <p className="text-sm text-[#848b9b] mt-1">
+          <h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
+          <p className="text-sm text-muted-foreground mt-1">
             Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
           </p>
           {isEngineer && (
             <Link
               to="/scripts/manage"
-              className="inline-flex items-center gap-1.5 text-xs text-[#22d3ee] bg-[rgba(34,211,238,0.10)] hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors mt-2 group"
+              className="inline-flex items-center gap-1.5 text-xs text-primary bg-accent-dim hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors mt-2 group"
             >
               <Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
               Manage Templates
@@ -81,7 +81,7 @@ export default function ScriptLibraryPage() {
         </div>
         <Link
           to="/script-builder"
-          className="inline-flex items-center gap-2 bg-[#22d3ee] text-white font-semibold rounded-lg px-4 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
+          className="inline-flex items-center gap-2 bg-primary text-white font-semibold rounded-lg px-4 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Wand2 size={16} />
           Build a New Script
@@ -89,7 +89,7 @@ export default function ScriptLibraryPage() {
       </div>
 
       {/* Tab bar */}
-      <div className="flex gap-6 border-b border-[#1e2130]">
+      <div className="flex gap-6 border-b border-border">
         <button
           type="button"
           onClick={() => onTabChange('mine')}
@@ -129,8 +129,8 @@ export default function ScriptLibraryPage() {
         {/* Right pane — read-only ScriptPreview */}
         {selectedTemplate === null ? (
           <div className="card-flat h-full flex flex-col items-center justify-center gap-3 text-center p-8">
-            <Terminal size={40} className="text-[#848b9b]/40" />
-            <p className="text-sm text-[#848b9b]">Select a template to get started</p>
+            <Terminal size={40} className="text-muted-foreground/40" />
+            <p className="text-sm text-muted-foreground">Select a template to get started</p>
           </div>
         ) : (
           <div className="card-flat h-full overflow-y-auto p-4">
diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx
index 74d3cc72..c240e7b6 100644
--- a/frontend/src/pages/SessionDetailPage.tsx
+++ b/frontend/src/pages/SessionDetailPage.tsx
@@ -380,7 +380,7 @@ export function SessionDetailPage() {
         </div>
         <button
           onClick={() => navigate('/sessions')}
-          className="mt-4 text-[#e2e5eb] hover:underline"
+          className="mt-4 text-foreground hover:underline"
         >
           Back to sessions
         </button>
@@ -393,7 +393,7 @@ export function SessionDetailPage() {
     resolved: { icon: <CheckCircle2 className="h-5 w-5" />, color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20' },
     workaround: { icon: <AlertTriangle className="h-5 w-5" />, color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20' },
     escalated: { icon: <ArrowUpRight className="h-5 w-5" />, color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/20' },
-    unresolved: { icon: <HelpCircle className="h-5 w-5" />, color: 'text-[#848b9b]', bg: 'bg-muted', border: 'border-[#1e2130]' },
+    unresolved: { icon: <HelpCircle className="h-5 w-5" />, color: 'text-muted-foreground', bg: 'bg-muted', border: 'border-border' },
   }
   const outcomeConfig = session.outcome ? OUTCOME_CONFIG[session.outcome] : null
 
@@ -402,7 +402,7 @@ export function SessionDetailPage() {
       {/* Back nav */}
       <button
         onClick={() => navigate('/sessions')}
-        className="mb-4 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+        className="mb-4 text-sm text-muted-foreground hover:text-foreground"
       >
         ← Back to sessions
       </button>
@@ -410,10 +410,10 @@ export function SessionDetailPage() {
       {/* Page title row */}
       <div className="mb-6 flex items-start justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-heading font-bold text-[#e2e5eb] sm:text-3xl">
+          <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">
             {session.ticket_number || 'Session Details'}
           </h1>
-          <p className="mt-1 text-sm text-[#848b9b]">
+          <p className="mt-1 text-sm text-muted-foreground">
             {session.tree_snapshot?.name}
             {session.client_name && <> · Client: {session.client_name}</>}
             {session.started_at && <>{' · '}{new Date(session.started_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}</>}
@@ -436,15 +436,15 @@ export function SessionDetailPage() {
               <div>
                 <div className="flex items-center gap-2">
                   <span className={cn('text-base font-semibold', outcomeConfig.color)}>{outcomeLabel}</span>
-                  <span className="text-sm text-[#848b9b]">· {getTotalDuration()}</span>
+                  <span className="text-sm text-muted-foreground">· {getTotalDuration()}</span>
                 </div>
                 {session.outcome_notes && (
-                  <p className="mt-1 text-sm text-[#848b9b]">{session.outcome_notes}</p>
+                  <p className="mt-1 text-sm text-muted-foreground">{session.outcome_notes}</p>
                 )}
                 {session.next_steps && (
                   <div className="mt-2">
-                    <span className="font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">Next Steps</span>
-                    <p className="mt-0.5 text-sm text-[#848b9b] whitespace-pre-wrap">{session.next_steps}</p>
+                    <span className="font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">Next Steps</span>
+                    <p className="mt-0.5 text-sm text-muted-foreground whitespace-pre-wrap">{session.next_steps}</p>
                   </div>
                 )}
               </div>
@@ -464,7 +464,7 @@ export function SessionDetailPage() {
           <Button
             onClick={handleCreateFlowFromSession}
             disabled={isGeneratingFlow}
-            className="bg-[#22d3ee] text-white font-semibold rounded-lg hover:brightness-110 active:scale-[0.98] disabled:opacity-60"
+            className="bg-primary text-white font-semibold rounded-lg hover:brightness-110 active:scale-[0.98] disabled:opacity-60"
           >
             {isGeneratingFlow ? (
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -483,7 +483,7 @@ export function SessionDetailPage() {
             <Flag className="h-4 w-4 shrink-0 text-amber-400" />
             <div>
               <p className="text-sm font-medium text-amber-300">Session in progress</p>
-              <p className="text-xs text-[#848b9b]">Set an outcome to finalize this session and generate documentation.</p>
+              <p className="text-xs text-muted-foreground">Set an outcome to finalize this session and generate documentation.</p>
             </div>
           </div>
           <Button onClick={() => setShowOutcomeModal(true)} className="shrink-0">
@@ -498,7 +498,7 @@ export function SessionDetailPage() {
           value={exportFormat}
           onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
           aria-label="Export format"
-          className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           <option value="markdown">Markdown</option>
           <option value="text">Plain Text</option>
@@ -511,7 +511,7 @@ export function SessionDetailPage() {
             value={maxStepIndex ?? ''}
             onChange={(e) => setMaxStepIndex(e.target.value ? Number(e.target.value) : null)}
             aria-label="Export through step"
-            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All steps</option>
             {session.decisions.map((_, idx) => (
@@ -523,7 +523,7 @@ export function SessionDetailPage() {
           value={detailLevel}
           onChange={(e) => setDetailLevel(e.target.value as 'standard' | 'full')}
           aria-label="Detail level"
-          className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           <option value="standard">Standard</option>
           <option value="full">Full Detail</option>
@@ -532,7 +532,7 @@ export function SessionDetailPage() {
           onClick={handleCopy}
           disabled={isExporting}
           title="Copy to clipboard"
-          className="rounded-md border border-[#1e2130] bg-[#14161d] p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50"
+          className="rounded-md border border-border bg-card p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
         >
           {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
         </button>
@@ -549,7 +549,7 @@ export function SessionDetailPage() {
         {session.completed_at && (
           <button
             onClick={handleCopyForTicket}
-            className="flex items-center gap-1.5 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             {copiedPsa ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
             {copiedPsa ? 'Copied!' : 'Copy for Ticket'}
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index 6a3e86fb..88694d76 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -280,8 +280,8 @@ export function SessionHistoryPage() {
     <PageMeta title="Sessions" />
     <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
       <div className="mb-8">
-        <h1 className="text-2xl font-heading font-bold text-[#e2e5eb] sm:text-3xl">Sessions</h1>
-        <p className="mt-2 text-[#848b9b]">
+        <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Sessions</h1>
+        <p className="mt-2 text-muted-foreground">
           View and manage all your sessions
         </p>
       </div>
@@ -295,13 +295,13 @@ export function SessionHistoryPage() {
             <div className="flex gap-3">
               <Link
                 to="/trees"
-                className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
               >
                 Start a Flow
               </Link>
               <Link
                 to="/pilot"
-                className="inline-flex items-center gap-2 rounded-lg border border-[#1e2130] bg-[rgba(255,255,255,0.04)] px-5 py-2.5 text-sm font-semibold text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-all"
+                className="inline-flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-5 py-2.5 text-sm font-semibold text-foreground hover:border-[rgba(255,255,255,0.12)] transition-all"
               >
                 Start AI Session
               </Link>
@@ -314,20 +314,20 @@ export function SessionHistoryPage() {
       {/* FlowPilot Sessions Section */}
       {showAiSection && (
         <>
-          <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">FlowPilot Sessions</h2>
+          <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">FlowPilot Sessions</h2>
 
           {/* AI Session Filter Bar */}
           <div className="card-flat p-3 mb-4">
             <div className="flex flex-wrap gap-3 items-center">
               {/* Search input */}
               <div className="relative flex-1 min-w-[180px]">
-                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[#848b9b] pointer-events-none" />
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
                 <input
                   type="text"
                   value={aiSearchInput}
                   onChange={(e) => setAiSearchInput(e.target.value)}
                   placeholder="Search sessions..."
-                  className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] pl-8 pr-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                  className="w-full rounded-lg border border-border bg-card pl-8 pr-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
                 />
               </div>
 
@@ -336,7 +336,7 @@ export function SessionHistoryPage() {
                 value={aiFilters.problem_domain}
                 onChange={(e) => setAiFilters((f) => ({ ...f, problem_domain: e.target.value }))}
                 title="Filter by problem domain"
-                className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none [&>option]:bg-[#1a1c21] [&>option]:text-[#e2e5eb]"
+                className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
               >
                 <option value="">All domains</option>
                 <option value="Active Directory">Active Directory</option>
@@ -360,8 +360,8 @@ export function SessionHistoryPage() {
                     className={cn(
                       'rounded-full border px-3 py-1 text-xs font-sans text-xs transition-colors',
                       aiFilters.confidence_tier === tier
-                        ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border-primary/30'
-                        : 'bg-[#14161d] text-[#848b9b] border-[#1e2130] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
+                        ? 'bg-accent-dim text-foreground border-primary/30'
+                        : 'bg-card text-muted-foreground border-border hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
                     )}
                   >
                     {tier === '' ? 'All' : tier.charAt(0).toUpperCase() + tier.slice(1)}
@@ -376,15 +376,15 @@ export function SessionHistoryPage() {
                   value={aiFilters.date_from}
                   onChange={(e) => setAiFilters((f) => ({ ...f, date_from: e.target.value }))}
                   title="From date"
-                  className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none [color-scheme:dark]"
+                  className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none [color-scheme:dark]"
                 />
-                <span className="text-xs text-[#848b9b]">to</span>
+                <span className="text-xs text-muted-foreground">to</span>
                 <input
                   type="date"
                   value={aiFilters.date_to}
                   onChange={(e) => setAiFilters((f) => ({ ...f, date_to: e.target.value }))}
                   title="To date"
-                  className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none [color-scheme:dark]"
+                  className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none [color-scheme:dark]"
                 />
               </div>
 
@@ -395,7 +395,7 @@ export function SessionHistoryPage() {
                     setAiSearchInput('')
                     setAiFilters({ q: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
                   }}
-                  className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                 >
                   Clear
                 </button>
@@ -417,7 +417,7 @@ export function SessionHistoryPage() {
                     setAiSearchInput('')
                     setAiFilters({ q: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
                   }}
-                  className="text-[#e2e5eb] hover:underline text-sm"
+                  className="text-foreground hover:underline text-sm"
                 >
                   Clear all filters
                 </button>
@@ -433,7 +433,7 @@ export function SessionHistoryPage() {
 
           {/* Divider between sections */}
           {showFlowSection && (
-            <div className="my-8 border-t border-[#1e2130]" />
+            <div className="my-8 border-t border-border" />
           )}
         </>
       )}
@@ -441,10 +441,10 @@ export function SessionHistoryPage() {
       {/* Flow Sessions Section */}
       {showFlowSection && (
       <>
-      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">Flow Sessions</h2>
+      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">Flow Sessions</h2>
 
       {/* Filter Tabs */}
-      <div className="mb-6 flex gap-2 border-b border-[#1e2130]">
+      <div className="mb-6 flex gap-2 border-b border-border">
         {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => (
           <button
             key={tab}
@@ -452,8 +452,8 @@ export function SessionHistoryPage() {
             className={cn(
               'px-4 py-2 text-sm font-medium transition-colors',
               filter === tab
-                ? 'border-b-2 border-primary text-[#e2e5eb]'
-                : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                ? 'border-b-2 border-primary text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
             )}
           >
             {tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -481,7 +481,7 @@ export function SessionHistoryPage() {
             title="No sessions match your filters"
             description="Try adjusting your search or filters."
             action={
-              <button onClick={handleClearFilters} className="text-[#e2e5eb] hover:underline text-sm">
+              <button onClick={handleClearFilters} className="text-foreground hover:underline text-sm">
                 Clear all filters
               </button>
             }
@@ -494,7 +494,7 @@ export function SessionHistoryPage() {
             action={
               <Link
                 to="/trees"
-                className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
               >
                 Start a Session
               </Link>
@@ -515,7 +515,7 @@ export function SessionHistoryPage() {
               style={{ '--stagger-index': i } as React.CSSProperties}
             >
             <div
-              className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4 transition-all hover:bg-accent/50"
+              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
             >
               <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                 <div className="flex-1">
@@ -527,11 +527,11 @@ export function SessionHistoryPage() {
                         session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
                       )}
                     />
-                    <span className="font-medium text-[#e2e5eb]">
+                    <span className="font-medium text-foreground">
                       {session.ticket_number || 'No ticket'}
                     </span>
                     {session.client_name && (
-                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-[#e2e5eb]">
+                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
                         {session.client_name}
                       </span>
                     )}
@@ -545,7 +545,7 @@ export function SessionHistoryPage() {
                           session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
                           session.outcome === 'cancelled' && 'bg-zinc-500/20 text-zinc-300',
                           session.outcome === 'resolved_externally' && 'bg-cyan-500/20 text-cyan-300',
-                          !session.outcome && 'bg-accent text-[#848b9b]'
+                          !session.outcome && 'bg-accent text-muted-foreground'
                         )}
                       >
                         {formatOutcomeLabel(session.outcome)}
@@ -554,12 +554,12 @@ export function SessionHistoryPage() {
                   </div>
 
                   {/* Tree Name */}
-                  <p className="mt-1 text-sm text-[#848b9b]">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     <span className="font-medium">Tree:</span> {getTreeName(session)}
                   </p>
 
                   {/* Timestamps */}
-                  <p className="mt-1 text-sm text-[#848b9b]">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     Started: {session.started_at ? formatDate(session.started_at) : 'Not started'}
                     {session.completed_at && (
                       <> · Completed: {formatDate(session.completed_at)}</>
@@ -567,7 +567,7 @@ export function SessionHistoryPage() {
                   </p>
 
                   {/* Stats */}
-                  <p className="mt-1 text-sm text-[#848b9b]">
+                  <p className="mt-1 text-sm text-muted-foreground">
                     {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
                     {session.scratchpad && session.scratchpad.trim() && (
                       <span> · Has notes</span>
@@ -580,8 +580,8 @@ export function SessionHistoryPage() {
                   <button
                     onClick={() => navigate(`/sessions/${session.id}`)}
                     className={cn(
-                      'rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b]',
-                      'hover:bg-accent hover:text-[#e2e5eb]'
+                      'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                   >
                     View Details
@@ -595,9 +595,9 @@ export function SessionHistoryPage() {
                           setCloseNotes('')
                         }}
                         className={cn(
-                          'rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b]',
-                          'hover:bg-accent hover:text-[#e2e5eb]',
-                          closingSessionId === session.id && 'bg-accent text-[#e2e5eb]'
+                          'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
+                          'hover:bg-accent hover:text-foreground',
+                          closingSessionId === session.id && 'bg-accent text-foreground'
                         )}
                       >
                         Close
@@ -605,7 +605,7 @@ export function SessionHistoryPage() {
                       <button
                         onClick={() => navigate(getSessionResumePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
                         className={cn(
-                          'rounded-md bg-[#22d3ee] px-3 py-2 text-sm font-medium text-white',
+                          'rounded-md bg-primary px-3 py-2 text-sm font-medium text-white',
                           'hover:brightness-110'
                         )}
                       >
@@ -618,16 +618,16 @@ export function SessionHistoryPage() {
                   {closingSessionId === session.id && (
                     <div
                       ref={closePopoverRef}
-                      className="absolute right-0 top-full z-20 mt-2 w-72 rounded-xl border border-[#1e2130] bg-[#14161d] p-4 shadow-xl"
+                      className="absolute right-0 top-full z-20 mt-2 w-72 rounded-xl border border-border bg-card p-4 shadow-xl"
                     >
-                      <p className="text-sm font-heading font-medium text-[#e2e5eb] mb-3">Close Session</p>
+                      <p className="text-sm font-heading font-medium text-foreground mb-3">Close Session</p>
 
-                      <label className="block text-xs font-sans text-xs text-[#848b9b] mb-1">Outcome</label>
+                      <label className="block text-xs font-sans text-xs text-muted-foreground mb-1">Outcome</label>
                       <select
                         value={closeOutcome}
                         onChange={(e) => setCloseOutcome(e.target.value as SessionOutcome)}
                         title="Session outcome"
-                        className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none mb-3"
+                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none mb-3"
                       >
                         <option value="">Select outcome...</option>
                         <option value="resolved">Resolved</option>
@@ -638,13 +638,13 @@ export function SessionHistoryPage() {
                         <option value="resolved_externally">Resolved Externally</option>
                       </select>
 
-                      <label className="block text-xs font-sans text-xs text-[#848b9b] mb-1">Notes (optional)</label>
+                      <label className="block text-xs font-sans text-xs text-muted-foreground mb-1">Notes (optional)</label>
                       <textarea
                         value={closeNotes}
                         onChange={(e) => setCloseNotes(e.target.value)}
                         rows={2}
                         placeholder="Add closure notes..."
-                        className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none mb-3"
+                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none mb-3"
                       />
 
                       <div className="flex items-center justify-end gap-2">
@@ -654,7 +654,7 @@ export function SessionHistoryPage() {
                             setCloseOutcome('')
                             setCloseNotes('')
                           }}
-                          className="rounded-lg px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                          className="rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                         >
                           Cancel
                         </button>
@@ -664,8 +664,8 @@ export function SessionHistoryPage() {
                           className={cn(
                             'rounded-lg px-4 py-1.5 text-sm font-medium transition-opacity',
                             closeOutcome
-                              ? 'bg-[#22d3ee] text-white hover:brightness-110'
-                              : 'bg-[#22d3ee] text-white opacity-50 cursor-not-allowed'
+                              ? 'bg-primary text-white hover:brightness-110'
+                              : 'bg-primary text-white opacity-50 cursor-not-allowed'
                           )}
                         >
                           {closeLoading ? 'Closing...' : 'Confirm'}
@@ -680,11 +680,11 @@ export function SessionHistoryPage() {
           ))}
         </div>
         {hasMore ? (
-          <p className="text-center text-sm text-[#848b9b] py-4">
+          <p className="text-center text-sm text-muted-foreground py-4">
             Showing the 50 most recent sessions
           </p>
         ) : sessions.length > 0 ? (
-          <p className="text-center text-sm text-[#848b9b] py-4">
+          <p className="text-center text-sm text-muted-foreground py-4">
             Showing all {sessions.length} sessions
           </p>
         ) : null}
diff --git a/frontend/src/pages/SharedSessionPage.tsx b/frontend/src/pages/SharedSessionPage.tsx
index 232e7b7e..3a3efab5 100644
--- a/frontend/src/pages/SharedSessionPage.tsx
+++ b/frontend/src/pages/SharedSessionPage.tsx
@@ -55,16 +55,16 @@ function ErrorCard({ error }: { error: ErrorState }) {
   const Icon = iconMap[error.type]
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-[#0c0d10] px-4">
-      <div className="bg-[#14161d] border border-[#1e2130] w-full max-w-md rounded-xl p-8 text-center">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="bg-card border border-border w-full max-w-md rounded-xl p-8 text-center">
         <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
-          <Icon className="h-8 w-8 text-[#848b9b]" />
+          <Icon className="h-8 w-8 text-muted-foreground" />
         </div>
-        <h1 className="mb-2 text-xl font-heading font-semibold text-[#e2e5eb]">{titleMap[error.type]}</h1>
-        <p className="mb-6 text-sm text-[#848b9b]">{error.message}</p>
+        <h1 className="mb-2 text-xl font-heading font-semibold text-foreground">{titleMap[error.type]}</h1>
+        <p className="mb-6 text-sm text-muted-foreground">{error.message}</p>
         <Link
           to="/"
-          className="inline-block rounded-lg bg-[#22d3ee] px-6 py-2.5 text-sm font-medium text-white hover:brightness-110"
+          className="inline-block rounded-lg bg-primary px-6 py-2.5 text-sm font-medium text-white hover:brightness-110"
         >
           Go to ResolutionFlow
         </Link>
@@ -144,10 +144,10 @@ export function SharedSessionPage() {
 
   if (loading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-[#0c0d10]">
+      <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">
           <Spinner />
-          <p className="text-sm text-[#848b9b]">Loading shared session...</p>
+          <p className="text-sm text-muted-foreground">Loading shared session...</p>
         </div>
       </div>
     )
@@ -162,21 +162,21 @@ export function SharedSessionPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#0c0d10]">
+    <div className="min-h-screen bg-background">
       <PageMeta
         title={data ? `Shared Session - ${data.tree_name}` : 'Shared Session'}
         description="View a shared troubleshooting session on ResolutionFlow"
       />
       {/* Minimal header */}
-      <header className="border-b border-[#1e2130] px-6 py-4">
+      <header className="border-b border-border px-6 py-4">
         <div className="mx-auto flex max-w-7xl items-center justify-between">
           <Link to="/" className="flex items-center gap-2">
             <BrandLogo size="sm" />
-            <span className="text-lg font-heading font-semibold text-[#e2e5eb]">ResolutionFlow</span>
+            <span className="text-lg font-heading font-semibold text-foreground">ResolutionFlow</span>
           </Link>
           <Link
             to="/login"
-            className="rounded-lg border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Sign In
           </Link>
@@ -188,14 +188,14 @@ export function SharedSessionPage() {
         {/* Metadata section */}
         <div className="mb-8">
           {data.share_name && (
-            <h1 className="mb-2 text-2xl font-heading font-bold text-[#e2e5eb]">{data.share_name}</h1>
+            <h1 className="mb-2 text-2xl font-heading font-bold text-foreground">{data.share_name}</h1>
           )}
-          <p className="text-lg text-[#848b9b]">
-            <span className="text-[#848b9b]">Tree:</span> {data.tree_name}
+          <p className="text-lg text-muted-foreground">
+            <span className="text-muted-foreground">Tree:</span> {data.tree_name}
           </p>
 
           {(data.ticket_number || data.client_name) && (
-            <p className="mt-1 text-sm text-[#848b9b]">
+            <p className="mt-1 text-sm text-muted-foreground">
               {data.ticket_number && (
                 <span>Ticket: #{data.ticket_number}</span>
               )}
@@ -208,7 +208,7 @@ export function SharedSessionPage() {
             </p>
           )}
 
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#848b9b]">
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
             <span>Started: {formatDate(data.started_at)}</span>
             {data.completed_at && (
               <>
@@ -256,9 +256,9 @@ export function SharedSessionPage() {
       </main>
 
       {/* Footer */}
-      <footer className="py-8 text-center text-sm text-[#848b9b]">
+      <footer className="py-8 text-center text-sm text-muted-foreground">
         Powered by{' '}
-        <Link to="/" className="underline hover:text-[#e2e5eb]">
+        <Link to="/" className="underline hover:text-foreground">
           ResolutionFlow
         </Link>
       </footer>
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
index ef93ccc9..028c9c19 100644
--- a/frontend/src/pages/StepLibraryPage.tsx
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -92,14 +92,14 @@ export default function StepLibraryPage() {
     <PageMeta title="Step Library" />
     <div className="flex h-full flex-col">
       {/* Page Header */}
-      <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
+      <div className="flex items-center justify-between border-b border-border px-6 py-4">
         <div className="flex items-center gap-3">
           <span title="Step Library">
-            <Bookmark className="h-6 w-6 text-[#848b9b]" />
+            <Bookmark className="h-6 w-6 text-muted-foreground" />
           </span>
           <div>
-            <h1 className="text-xl font-bold font-heading text-[#e2e5eb]">Step Library</h1>
-            <p className="text-sm text-[#848b9b]">Reusable steps you can insert into any flow</p>
+            <h1 className="text-xl font-bold font-heading text-foreground">Step Library</h1>
+            <p className="text-sm text-muted-foreground">Reusable steps you can insert into any flow</p>
           </div>
         </div>
         {canCreateSteps && (
@@ -132,18 +132,18 @@ export default function StepLibraryPage() {
       {/* Delete Confirmation Dialog */}
       {deletingStep && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
-          <div className="w-full max-w-sm rounded-xl bg-[#14161d] border border-[#1e2130] p-6 shadow-lg">
+          <div className="w-full max-w-sm rounded-xl bg-card border border-border p-6 shadow-lg">
             <div className="mb-4 flex items-center gap-3">
               <div className="rounded-full bg-red-400/10 p-2">
                 <Trash2 className="h-5 w-5 text-red-400" />
               </div>
-              <h2 className="text-base font-semibold text-[#e2e5eb]">Delete Step</h2>
+              <h2 className="text-base font-semibold text-foreground">Delete Step</h2>
             </div>
-            <p className="mb-2 text-sm text-[#848b9b]">
+            <p className="mb-2 text-sm text-muted-foreground">
               Are you sure you want to delete{' '}
-              <span className="font-medium text-[#e2e5eb]">"{deletingStep.title}"</span>?
+              <span className="font-medium text-foreground">"{deletingStep.title}"</span>?
             </p>
-            <p className="mb-6 text-xs text-[#848b9b]">This cannot be undone.</p>
+            <p className="mb-6 text-xs text-muted-foreground">This cannot be undone.</p>
             {deleteError && (
               <p className="mb-4 text-sm text-red-400">{deleteError}</p>
             )}
diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index 77ef8266..e6fb4ac3 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -264,15 +264,15 @@ export default function SurveyPage() {
 
   if (tokenLoading) {
     return (
-      <div className="min-h-screen bg-[#0c0d10] flex items-center justify-center">
-        <div className="text-[#848b9b] text-sm">Loading...</div>
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-muted-foreground text-sm">Loading...</div>
       </div>
     )
   }
 
   if (alreadyCompleted) {
     return (
-      <div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
           <div className="absolute -top-32 right-0 h-[500px] w-[500px] rounded-full opacity-[0.03]" style={{ background: 'radial-gradient(circle, var(--color-primary), transparent 70%)' }} />
           <div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, #a855f7, transparent 70%)' }} />
@@ -283,16 +283,16 @@ export default function SurveyPage() {
               <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
             </div>
             <h2 className="font-heading text-2xl font-bold mb-2.5">Already Submitted</h2>
-            <p className="text-[#848b9b] text-sm max-w-[440px] mx-auto leading-relaxed mb-3">
+            <p className="text-muted-foreground text-sm max-w-[440px] mx-auto leading-relaxed mb-3">
               {inviteName ? `Thanks ${inviteName} — y` : 'Y'}our response has already been recorded. We appreciate your time!
             </p>
-            <p className="text-sm text-[#848b9b]/70 max-w-[400px] mx-auto leading-relaxed mb-8">
+            <p className="text-sm text-muted-foreground/70 max-w-[400px] mx-auto leading-relaxed mb-8">
               You can safely close this browser window now.
             </p>
             <div className="card-flat p-4 sm:p-5 max-w-[400px] mx-auto text-center">
-              <p className="text-xs text-[#848b9b] leading-relaxed">
+              <p className="text-xs text-muted-foreground leading-relaxed">
                 Have feedback unrelated to the survey?{' '}
-                <a href="mailto:feedback@resolutionflow.com" className="text-[#22d3ee] hover:underline font-medium">
+                <a href="mailto:feedback@resolutionflow.com" className="text-primary hover:underline font-medium">
                   feedback@resolutionflow.com
                 </a>
               </p>
@@ -304,7 +304,7 @@ export default function SurveyPage() {
   }
 
   return (
-    <div ref={topRef} className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+    <div ref={topRef} className="min-h-screen bg-background text-foreground">
       <PageMeta
         title="Product Survey"
         description="Help shape the future of ResolutionFlow by sharing your feedback"
@@ -324,15 +324,15 @@ export default function SurveyPage() {
       {/* Top bar */}
       <div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
         <div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-4 py-3 sm:px-5 sm:py-3.5">
-          <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2 sm:gap-2.5 text-sm font-heading font-bold text-[#848b9b] no-underline shrink-0">
+          <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2 sm:gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline shrink-0">
             <BrandLogo size="sm" />
-            <span className="hidden sm:inline">Resolution<span className="text-[#67e8f9]">Flow</span></span>
+            <span className="hidden sm:inline">Resolution<span className="text-accent-text">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: 'var(--color-border)' }}>
-              <div className="h-full rounded-full bg-[#22d3ee] transition-[width] duration-500" style={{ width: `${progressPct}%` }} />
+              <div className="h-full rounded-full bg-primary transition-[width] duration-500" style={{ width: `${progressPct}%` }} />
             </div>
-            <span className="text-[11px] font-sans text-xs text-[#848b9b] whitespace-nowrap tabular-nums">{answeredCount}/{TOTAL_QUESTIONS}</span>
+            <span className="text-[11px] font-sans text-xs text-muted-foreground whitespace-nowrap tabular-nums">{answeredCount}/{TOTAL_QUESTIONS}</span>
           </div>
         </div>
       </div>
@@ -346,12 +346,12 @@ export default function SurveyPage() {
               FlowPilot Research
             </div>
             <h1 className="font-heading text-[clamp(24px,5vw,36px)] font-extrabold leading-tight mb-3">
-              Help Build an AI That<br/>Thinks Like <span className="text-[#67e8f9]">You</span>
+              Help Build an AI That<br/>Thinks Like <span className="text-accent-text">You</span>
             </h1>
-            <p className="text-[14px] sm:text-[15px] text-[#848b9b] max-w-[500px] mx-auto leading-relaxed">
+            <p className="text-[14px] sm:text-[15px] text-muted-foreground max-w-[500px] mx-auto leading-relaxed">
               We're building an AI assistant for MSP engineers. Your expertise shapes how it thinks. Takes about 5 minutes.
             </p>
-            <div className="flex flex-wrap justify-center gap-4 sm:gap-7 mt-4 sm:mt-5 text-[11px] sm:text-[12px] text-[#848b9b]">
+            <div className="flex flex-wrap justify-center gap-4 sm:gap-7 mt-4 sm:mt-5 text-[11px] sm:text-[12px] text-muted-foreground">
               <span className="flex items-center gap-1.5">
                 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                 ~5 minutes
@@ -393,18 +393,18 @@ export default function SurveyPage() {
               ))}
               <div className="flex justify-between mt-6 sm:mt-7 gap-3">
                 {si > 0 ? (
-                  <button onClick={() => goSlide(si - 1)} className="inline-flex items-center gap-2 px-4 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold text-[#848b9b] transition-all duration-150 hover:text-[#e2e5eb]" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
+                  <button onClick={() => goSlide(si - 1)} className="inline-flex items-center gap-2 px-4 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold text-muted-foreground transition-all duration-150 hover:text-foreground" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
                     Back
                   </button>
                 ) : <div />}
                 {si < SLIDES.length - 1 ? (
-                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]">
+                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-primary text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]">
                     Next
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
                   </button>
                 ) : (
-                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed">
+                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-primary text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed">
                     {isSubmitting ? 'Submitting...' : 'Submit'}
                     {!isSubmitting && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>}
                   </button>
@@ -413,7 +413,7 @@ export default function SurveyPage() {
               {submitError && (
                 <div className="mt-4 p-3 rounded-lg text-sm text-rose-400" style={{ background: 'rgba(244, 63, 94, 0.1)', border: '1px solid rgba(244, 63, 94, 0.2)' }}>
                   {submitError}
-                  <button onClick={copyAll} className="ml-3 underline text-[#848b9b] hover:text-[#e2e5eb]">Copy responses instead</button>
+                  <button onClick={copyAll} className="ml-3 underline text-muted-foreground hover:text-foreground">Copy responses instead</button>
                 </div>
               )}
             </div>
@@ -427,13 +427,13 @@ export default function SurveyPage() {
               <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
             </div>
             <h2 className="font-heading text-2xl font-bold mb-2.5">Response Submitted!</h2>
-            <p className="text-[#848b9b] text-sm max-w-[440px] mx-auto mb-6 sm:mb-8 leading-relaxed">
+            <p className="text-muted-foreground text-sm max-w-[440px] mx-auto mb-6 sm:mb-8 leading-relaxed">
               Your answers will directly shape how FlowPilot troubleshoots. Would you like a copy of your responses?
             </p>
 
             {/* Email a copy */}
             <div className="card-flat p-4 sm:p-6 max-w-[420px] mx-auto mb-5">
-              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-3">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-3">
                 Email a copy to yourself
               </p>
               {!emailSent ? (
@@ -443,7 +443,7 @@ export default function SurveyPage() {
                     value={emailInput}
                     onChange={e => setEmailInput(e.target.value)}
                     placeholder="your@email.com"
-                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-[#e2e5eb] placeholder:text-[#4f5666] focus:outline-hidden"
+                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-text-muted focus:outline-hidden"
                     style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
                     onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)' }}
                     onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
@@ -473,7 +473,7 @@ export default function SurveyPage() {
                       }
                     }}
                     disabled={!emailInput.trim() || emailSending}
-                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
+                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-primary text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
                   >
                     {emailSending ? (
                       <>
@@ -496,13 +496,13 @@ export default function SurveyPage() {
 
             {/* Copy + Finish buttons */}
             <div className="flex gap-2.5 justify-center flex-wrap">
-              <button onClick={copyAll} className="inline-flex items-center gap-2 px-4 py-2.5 sm:px-5 rounded-lg text-sm font-semibold transition-all duration-150 text-[#848b9b] hover:text-[#e2e5eb]" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
+              <button onClick={copyAll} className="inline-flex items-center gap-2 px-4 py-2.5 sm:px-5 rounded-lg text-sm font-semibold transition-all duration-150 text-muted-foreground hover:text-foreground" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                 Copy to Clipboard
               </button>
               <button
                 onClick={() => navigate('/survey/thank-you')}
-                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
+                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-lg text-sm font-semibold bg-primary text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
               >
                 Finish
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
@@ -522,12 +522,12 @@ function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string;
     <div className="rounded-lg p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03))', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
       <div className="font-sans text-xs text-[10px] uppercase tracking-widest mb-2 font-semibold" style={{ color: 'var(--color-primary)' }}>{scenario.title}</div>
       <div className="sm:flex gap-2 mb-1">
-        <span className="text-[#848b9b] font-medium whitespace-nowrap">Symptom:</span>
-        <span className="text-[#848b9b]/80">{scenario.symptom}</span>
+        <span className="text-muted-foreground font-medium whitespace-nowrap">Symptom:</span>
+        <span className="text-muted-foreground/80">{scenario.symptom}</span>
       </div>
       <div className="sm:flex gap-2">
-        <span className="text-[#848b9b] font-medium whitespace-nowrap">Details:</span>
-        <span className="text-[#848b9b]/80">{scenario.details}</span>
+        <span className="text-muted-foreground font-medium whitespace-nowrap">Details:</span>
+        <span className="text-muted-foreground/80">{scenario.details}</span>
       </div>
     </div>
   )
@@ -537,8 +537,8 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
   return (
     <div className="card-flat p-4 sm:p-7 mb-3 sm:mb-4 transition-[border-color] duration-200 focus-within:border-primary/25!">
       <div className="font-sans text-xs text-[11px] mb-1.5 font-medium" style={{ color: 'var(--color-primary)' }}>Q{q.num}</div>
-      <div className="font-heading text-[14px] sm:text-[15px] font-semibold text-[#e2e5eb] leading-snug mb-1">{q.text}</div>
-      {q.hint && <div className="text-[12px] text-[#848b9b] mb-3 sm:mb-4 leading-snug">{q.hint}</div>}
+      <div className="font-heading text-[14px] sm:text-[15px] font-semibold text-foreground leading-snug mb-1">{q.text}</div>
+      {q.hint && <div className="text-[12px] text-muted-foreground mb-3 sm:mb-4 leading-snug">{q.hint}</div>}
       {!q.hint && <div className="mb-3 sm:mb-4" />}
 
       {q.type === 'mc' && q.options && (
@@ -600,7 +600,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
           value={(answer as string) || ''}
           onChange={e => setAnswer(q.id, e.target.value)}
           placeholder="Type your answer here..."
-          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-[#e2e5eb] leading-relaxed resize-y transition-all duration-200 placeholder:text-[#4f5666] focus:outline-hidden"
+          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-foreground leading-relaxed resize-y transition-all duration-200 placeholder:text-text-muted focus:outline-hidden"
           style={{
             background: 'rgba(16, 17, 20, 0.6)',
             border: '1px solid var(--glass-border)',
@@ -636,7 +636,7 @@ function RangeInput({ question: q, value, onChange }: { question: SurveyQuestion
           background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${((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-[#848b9b] mt-2.5">
+      <div className="flex justify-between text-[11px] text-muted-foreground mt-2.5">
         <span>{q.low_label}</span>
         <span>{q.high_label}</span>
       </div>
@@ -736,7 +736,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
             color: 'var(--color-muted-foreground)',
           }}
         >
-          <div className="shrink-0 text-[#4f5666]">
+          <div className="shrink-0 text-text-muted">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></svg>
           </div>
           <div className="font-sans text-xs text-[11px] font-semibold w-5 text-center shrink-0" style={{ color: 'var(--color-primary)' }}>{idx + 1}</div>
diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx
index e56de79d..4aae11f4 100644
--- a/frontend/src/pages/SurveyThankYouPage.tsx
+++ b/frontend/src/pages/SurveyThankYouPage.tsx
@@ -5,7 +5,7 @@ export default function SurveyThankYouPage() {
   return (
     <>
     <PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
-    <div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Atmosphere orbs */}
       <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
         <div
@@ -21,9 +21,9 @@ export default function SurveyThankYouPage() {
       {/* Top bar */}
       <div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
         <div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-5 py-3.5">
-          <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2.5 text-sm font-heading font-bold text-[#848b9b] no-underline">
+          <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline">
             <BrandLogo size="sm" />
-            <span>Resolution<span className="text-[#67e8f9]">Flow</span></span>
+            <span>Resolution<span className="text-accent-text">Flow</span></span>
           </a>
         </div>
       </div>
@@ -40,10 +40,10 @@ export default function SurveyThankYouPage() {
           <h1 className="font-heading text-[clamp(24px,4vw,32px)] font-extrabold leading-tight mb-3">
             Thank You!
           </h1>
-          <p className="text-[15px] text-[#848b9b] max-w-[460px] mx-auto leading-relaxed mb-3">
+          <p className="text-[15px] text-muted-foreground max-w-[460px] mx-auto leading-relaxed mb-3">
             Your response has been recorded. Your expertise will directly shape how FlowPilot thinks about troubleshooting.
           </p>
-          <p className="text-sm text-[#848b9b]/70 max-w-[400px] mx-auto leading-relaxed mb-10">
+          <p className="text-sm text-muted-foreground/70 max-w-[400px] mx-auto leading-relaxed mb-10">
             You can safely close this browser window now.
           </p>
 
@@ -58,15 +58,15 @@ export default function SurveyThankYouPage() {
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
               </svg>
-              <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#22d3ee] font-semibold">
+              <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-primary font-semibold">
                 Have Feedback?
               </span>
             </div>
-            <p className="text-sm text-[#848b9b] leading-relaxed">
+            <p className="text-sm text-muted-foreground leading-relaxed">
               If you have any feedback unrelated to the survey, we'd love to hear from you at{' '}
               <a
                 href="mailto:feedback@resolutionflow.com"
-                className="text-[#22d3ee] hover:underline font-medium"
+                className="text-primary hover:underline font-medium"
               >
                 feedback@resolutionflow.com
               </a>
diff --git a/frontend/src/pages/TeamAnalyticsPage.tsx b/frontend/src/pages/TeamAnalyticsPage.tsx
index 2eef8e3d..d0cd1393 100644
--- a/frontend/src/pages/TeamAnalyticsPage.tsx
+++ b/frontend/src/pages/TeamAnalyticsPage.tsx
@@ -89,7 +89,7 @@ export default function TeamAnalyticsPage() {
           action={
             <Link
               to="/trees"
-              className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
             >
               Run Your First Session
             </Link>
@@ -108,22 +108,22 @@ export default function TeamAnalyticsPage() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span title="Team Analytics">
-            <BarChart3 size={24} className="text-[#e2e5eb]" />
+            <BarChart3 size={24} className="text-foreground" />
           </span>
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb]">Team Analytics</h1>
+          <h1 className="text-2xl font-bold font-heading text-foreground">Team Analytics</h1>
         </div>
 
         <div className="flex items-center gap-3">
           <Link
             to="/analytics/me"
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             My Stats
           </Link>
           <select
             value={period}
             onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-            className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             {PERIOD_OPTIONS.map((opt) => (
               <option key={opt.value} value={opt.value}>
@@ -159,8 +159,8 @@ export default function TeamAnalyticsPage() {
       </div>
 
       {/* Area Chart — Sessions over Time */}
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-        <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+      <div className="bg-card border border-border rounded-xl p-6">
+        <h2 className="text-sm font-semibold text-foreground mb-4">
           Sessions Over Time
         </h2>
         <ResponsiveContainer width="100%" height={300}>
@@ -246,7 +246,7 @@ export default function TeamAnalyticsPage() {
                 className="h-2.5 w-2.5 rounded-full"
                 style={{ backgroundColor: color }}
               />
-              <span className="text-xs text-[#848b9b] capitalize">
+              <span className="text-xs text-muted-foreground capitalize">
                 {key}
               </span>
             </div>
@@ -257,27 +257,27 @@ export default function TeamAnalyticsPage() {
       {/* Two-Column: Top Flows & Top Engineers */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Top Flows */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
             Top Flows
           </h2>
           {top_flows.length === 0 ? (
-            <p className="text-sm text-[#848b9b]">No flow data for this period.</p>
+            <p className="text-sm text-muted-foreground">No flow data for this period.</p>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-[#1e2130]">
-                    <th className="text-left py-2 text-[#e2e5eb] font-medium">
+                  <tr className="border-b border-border">
+                    <th className="text-left py-2 text-foreground font-medium">
                       Name
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Sessions
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Completion
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Median
                     </th>
                   </tr>
@@ -286,18 +286,18 @@ export default function TeamAnalyticsPage() {
                   {top_flows.map((flow) => (
                     <tr
                       key={flow.tree_id}
-                      className="border-b border-[#1e2130] last:border-0"
+                      className="border-b border-border last:border-0"
                     >
-                      <td className="py-2 text-[#848b9b] truncate max-w-[200px]">
+                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
                         {flow.name}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {flow.sessions}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {(flow.completion_rate * 100).toFixed(1)}%
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {flow.median_duration_minutes} min
                       </td>
                     </tr>
@@ -309,27 +309,27 @@ export default function TeamAnalyticsPage() {
         </div>
 
         {/* Top Engineers */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="text-sm font-semibold text-foreground mb-4">
             Top Engineers
           </h2>
           {top_engineers.length === 0 ? (
-            <p className="text-sm text-[#848b9b]">No engineer data for this period.</p>
+            <p className="text-sm text-muted-foreground">No engineer data for this period.</p>
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-[#1e2130]">
-                    <th className="text-left py-2 text-[#e2e5eb] font-medium">
+                  <tr className="border-b border-border">
+                    <th className="text-left py-2 text-foreground font-medium">
                       Name
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Sessions
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Completion
                     </th>
-                    <th className="text-right py-2 text-[#e2e5eb] font-medium">
+                    <th className="text-right py-2 text-foreground font-medium">
                       Median
                     </th>
                   </tr>
@@ -338,18 +338,18 @@ export default function TeamAnalyticsPage() {
                   {top_engineers.map((eng) => (
                     <tr
                       key={eng.user_id}
-                      className="border-b border-[#1e2130] last:border-0"
+                      className="border-b border-border last:border-0"
                     >
-                      <td className="py-2 text-[#848b9b] truncate max-w-[200px]">
+                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
                         {eng.name}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {eng.sessions}
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {(eng.completion_rate * 100).toFixed(1)}%
                       </td>
-                      <td className="py-2 text-right text-[#848b9b]">
+                      <td className="py-2 text-right text-muted-foreground">
                         {eng.median_duration_minutes} min
                       </td>
                     </tr>
@@ -374,12 +374,12 @@ function StatCard({
   value: string
 }) {
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
+    <div className="bg-card border border-border rounded-xl p-6">
       <div className="flex items-center gap-2 mb-2">
-        <Icon size={16} className="text-[#848b9b]" />
-        <span className="text-sm text-[#848b9b]">{label}</span>
+        <Icon size={16} className="text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">{label}</span>
       </div>
-      <p className="text-3xl font-bold text-[#e2e5eb]">{value}</p>
+      <p className="text-3xl font-bold text-foreground">{value}</p>
     </div>
   )
 }
diff --git a/frontend/src/pages/TermsPage.tsx b/frontend/src/pages/TermsPage.tsx
index 66dc5ac2..65dfba59 100644
--- a/frontend/src/pages/TermsPage.tsx
+++ b/frontend/src/pages/TermsPage.tsx
@@ -5,41 +5,41 @@ export default function TermsPage() {
   return (
     <>
       <PageMeta title="Terms of Service" description="ResolutionFlow Terms of Service" />
-      <div className="min-h-screen bg-[#0c0d10] text-[#e2e5eb]">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-[#848b9b] hover:text-[#e2e5eb] mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
           <h1 className="text-3xl font-bold font-heading mb-8">Terms of Service</h1>
-          <p className="text-[#848b9b] mb-6">Last updated: March 21, 2026</p>
+          <p className="text-muted-foreground mb-6">Last updated: March 21, 2026</p>
 
-          <div className="space-y-6 text-[#848b9b] leading-relaxed">
+          <div className="space-y-6 text-muted-foreground leading-relaxed">
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">1. Acceptance of Terms</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">1. Acceptance of Terms</h2>
               <p>By accessing or using ResolutionFlow, you agree to be bound by these Terms of Service. If you are using ResolutionFlow on behalf of an organization, you represent that you have authority to bind that organization to these terms.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">2. Description of Service</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">2. Description of Service</h2>
               <p>ResolutionFlow provides AI-guided troubleshooting decision trees, automated documentation generation, and PSA integration tools for managed service providers (MSPs). The service includes FlowPilot AI copilot, flow editor, session management, and team collaboration features.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">3. Account Responsibilities</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">3. Account Responsibilities</h2>
               <p>You are responsible for maintaining the security of your account credentials and for all activities that occur under your account. You must notify us immediately of any unauthorized use.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">4. Data Ownership</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">4. Data Ownership</h2>
               <p>You retain ownership of all content you create within ResolutionFlow, including flows, session documentation, and team knowledge. We do not claim ownership of your data.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">5. Service Availability</h2>
+              <h2 className="text-xl font-semibold text-foreground mb-3">5. Service Availability</h2>
               <p>ResolutionFlow is currently in beta. We strive for high availability but do not guarantee uninterrupted access during the beta period. We will provide reasonable notice of planned maintenance.</p>
             </section>
 
             <section>
-              <h2 className="text-xl font-semibold text-[#e2e5eb] mb-3">6. Contact</h2>
-              <p>Questions about these terms? Email us at <a href="mailto:hello@resolutionflow.com" className="text-[#22d3ee] hover:underline">hello@resolutionflow.com</a>.</p>
+              <h2 className="text-xl font-semibold text-foreground mb-3">6. Contact</h2>
+              <p>Questions about these terms? Email us at <a href="mailto:hello@resolutionflow.com" className="text-primary hover:underline">hello@resolutionflow.com</a>.</p>
             </section>
           </div>
         </div>
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index 961739d3..73fa06ac 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -509,9 +509,9 @@ export function TreeEditorPage() {
   if (isMobile) {
     return (
       <div className="flex h-full flex-col items-center justify-center px-6 text-center">
-        <Monitor className="mb-4 h-12 w-12 text-[#848b9b]" />
-        <h2 className="mb-2 text-xl font-heading font-semibold text-[#e2e5eb]">Desktop Required</h2>
-        <p className="mb-6 max-w-sm text-sm text-[#848b9b]">
+        <Monitor className="mb-4 h-12 w-12 text-muted-foreground" />
+        <h2 className="mb-2 text-xl font-heading font-semibold text-foreground">Desktop Required</h2>
+        <p className="mb-6 max-w-sm text-sm text-muted-foreground">
           The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
         </p>
         <Button onClick={() => navigate('/trees')}>
@@ -529,9 +529,9 @@ export function TreeEditorPage() {
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl w-full max-w-md p-6 shadow-lg">
-            <h2 className="mb-2 text-lg font-heading font-semibold text-[#e2e5eb]">Restore Draft?</h2>
-            <p className="mb-4 text-sm text-[#848b9b]">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
+            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Restore Draft?</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
               You have an unsaved draft from a previous session. Would you like to restore it?
             </p>
             <div className="flex gap-2">
@@ -549,9 +549,9 @@ export function TreeEditorPage() {
       {/* Unsaved Changes Dialog */}
       {blocker.state === 'blocked' && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
-          <div className="bg-[#14161d] border border-[#1e2130] rounded-xl w-full max-w-md p-6 shadow-lg">
-            <h2 className="mb-2 text-lg font-heading font-semibold text-[#e2e5eb]">Unsaved Changes</h2>
-            <p className="mb-4 text-sm text-[#848b9b]">
+          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
+            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Unsaved Changes</h2>
+            <p className="mb-4 text-sm text-muted-foreground">
               You have unsaved changes. Are you sure you want to leave?
             </p>
             <div className="flex gap-2">
@@ -567,17 +567,17 @@ export function TreeEditorPage() {
       )}
 
       {/* Toolbar */}
-      <div className="flex items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-4 py-2">
+      <div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-4">
           <button
             onClick={() => navigate('/trees')}
-            className="text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+            className="text-sm text-muted-foreground hover:text-foreground"
           >
             ← Back to Library
           </button>
-          <h1 className="text-lg font-heading font-semibold text-[#e2e5eb]">
+          <h1 className="text-lg font-heading font-semibold text-foreground">
             {isEditMode ? 'Edit Tree' : 'Create New Tree'}
-            {name && <span className="ml-2 text-[#848b9b]">- {name}</span>}
+            {name && <span className="ml-2 text-muted-foreground">- {name}</span>}
           </h1>
           <div className="flex items-center gap-2">
             {treeStatus === 'draft' && (
@@ -596,7 +596,7 @@ export function TreeEditorPage() {
 
         <div className="flex items-center gap-2">
           {/* Mode Toggle */}
-          <div className="flex items-center rounded-md border border-[#1e2130]">
+          <div className="flex items-center rounded-md border border-border">
             <button
               type="button"
               onClick={() => setEditorMode('form')}
@@ -604,8 +604,8 @@ export function TreeEditorPage() {
               className={cn(
                 'flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors',
                 editorMode === 'form'
-                  ? 'bg-accent text-[#e2e5eb]'
-                  : 'text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]'
+                  ? 'bg-accent text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
               )}
             >
               <LayoutList className="h-3.5 w-3.5" />
@@ -623,8 +623,8 @@ export function TreeEditorPage() {
               className={cn(
                 'flex items-center gap-1.5 rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors',
                 editorMode === 'code'
-                  ? 'bg-accent text-[#e2e5eb]'
-                  : 'text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]'
+                  ? 'bg-accent text-foreground'
+                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
               )}
             >
               <Code2 className="h-3.5 w-3.5" />
@@ -635,7 +635,7 @@ export function TreeEditorPage() {
           <div className="mx-1 h-6 w-px bg-border" />
 
           {/* Undo/Redo */}
-          <div className="flex items-center rounded-md border border-[#1e2130]">
+          <div className="flex items-center rounded-md border border-border">
             <button
               type="button"
               onClick={handleUndo}
@@ -644,8 +644,8 @@ export function TreeEditorPage() {
               className={cn(
                 'rounded-l-md p-2 transition-colors',
                 pastStates.length > 0
-                  ? 'text-[#e2e5eb] hover:bg-accent/50 active:bg-accent'
-                  : 'text-[#848b9b]/50 cursor-not-allowed'
+                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
+                  : 'text-muted-foreground/50 cursor-not-allowed'
               )}
             >
               <Undo2 className="h-4 w-4" />
@@ -659,8 +659,8 @@ export function TreeEditorPage() {
               className={cn(
                 'rounded-r-md p-2 transition-colors',
                 futureStates.length > 0
-                  ? 'text-[#e2e5eb] hover:bg-accent/50 active:bg-accent'
-                  : 'text-[#848b9b]/50 cursor-not-allowed'
+                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
+                  : 'text-muted-foreground/50 cursor-not-allowed'
               )}
             >
               <Redo2 className="h-4 w-4" />
@@ -681,10 +681,10 @@ export function TreeEditorPage() {
               }}
               title="Edit flow metadata (name, description, category, tags)"
               className={cn(
-                'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
+                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
                 isMetadataOpen
-                  ? 'bg-accent text-[#e2e5eb]'
-                  : 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                  ? 'bg-accent text-foreground'
+                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               <Settings className="h-4 w-4" />
@@ -698,10 +698,10 @@ export function TreeEditorPage() {
               onClick={() => setShowAnalytics(!showAnalytics)}
               title="Toggle flow analytics panel"
               className={cn(
-                'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
+                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
                 showAnalytics
-                  ? 'bg-accent text-[#e2e5eb]'
-                  : 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                  ? 'bg-accent text-foreground'
+                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
               )}
             >
               <BarChart3 className="h-4 w-4" />
@@ -715,8 +715,8 @@ export function TreeEditorPage() {
               onClick={() => setShowExportModal(true)}
               title="Export flow as .rfflow file"
               className={cn(
-                'flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm font-medium text-[#848b9b]',
-                'hover:bg-accent hover:text-[#e2e5eb]'
+                'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground'
               )}
             >
               <Download className="h-4 w-4" />
@@ -739,10 +739,10 @@ export function TreeEditorPage() {
             }}
             title="Toggle AI Assist panel"
             className={cn(
-              'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium transition-colors',
+              'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
               editorAI.isOpen
-                ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border-primary/30'
-                : 'bg-[#14161d] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+                ? 'bg-accent-dim text-primary border-primary/30'
+                : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Sparkles className="h-4 w-4" />
@@ -754,8 +754,8 @@ export function TreeEditorPage() {
             disabled={isSaving}
             title="Validate tree structure (checks for errors and warnings)"
             className={cn(
-              'flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm font-medium text-[#848b9b]',
-              'hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50'
+              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
             )}
           >
             <CheckCircle2 className="h-4 w-4" />
@@ -800,7 +800,7 @@ export function TreeEditorPage() {
 
       {/* Import provenance */}
       {importMetadata && (
-        <div className="mx-4 mb-2 flex items-center gap-2 text-xs font-sans text-xs text-[#848b9b]">
+        <div className="mx-4 mb-2 flex items-center gap-2 text-xs font-sans text-xs text-muted-foreground">
           <FileText className="h-3 w-3" />
           <span>
             Imported{importMetadata.original_author_name ? ` from ${importMetadata.original_author_name}` : ''}
@@ -825,7 +825,7 @@ export function TreeEditorPage() {
 
       {/* Flow Analytics Panel (collapsible) */}
       {showAnalytics && id && (
-        <div className="border-t border-[#1e2130] p-6 overflow-y-auto max-h-[50vh]">
+        <div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
           <FlowAnalyticsPanel treeId={id} />
         </div>
       )}
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 39b7829c..9bafdc97 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -291,10 +291,10 @@ export function TreeLibraryPage() {
       <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
           <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
             <div>
-              <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">
+              <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
                 {typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : typeFilter === 'maintenance' ? 'Maintenance Flows' : 'Flow Library'}
               </h1>
-              <p className="mt-2 text-[#848b9b]">
+              <p className="mt-2 text-muted-foreground">
                 {typeFilter === 'procedural'
                   ? 'Step-by-step projects and runbooks'
                   : typeFilter === 'troubleshooting'
@@ -333,8 +333,8 @@ export function TreeLibraryPage() {
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                   className={cn(
-                    'flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'flex-1 rounded-md border border-border bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
@@ -348,8 +348,8 @@ export function TreeLibraryPage() {
                 onChange={(e) => setSelectedCategoryId(e.target.value)}
                 aria-label="Filter by category"
                 className={cn(
-                  'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                  'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                  'rounded-md border border-border bg-card px-3 py-2',
+                  'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                 )}
               >
                 <option value="">All Categories</option>
@@ -364,7 +364,7 @@ export function TreeLibraryPage() {
             {/* View Controls */}
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               {/* Type filter tabs */}
-              <div className="flex rounded-lg border border-[#1e2130] p-0.5">
+              <div className="flex rounded-lg border border-border p-0.5">
                 {(['all', 'troubleshooting', 'procedural', 'maintenance'] as const).map((t) => (
                     <button
                       key={t}
@@ -372,8 +372,8 @@ export function TreeLibraryPage() {
                       className={cn(
                         'rounded-md px-3 py-1 text-xs font-medium transition-colors',
                         typeFilter === t
-                          ? 'bg-accent text-[#e2e5eb]'
-                          : 'text-[#848b9b] hover:text-[#e2e5eb]'
+                          ? 'bg-accent text-foreground'
+                          : 'text-muted-foreground hover:text-foreground'
                       )}
                     >
                       {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : t === 'procedural' ? 'Projects' : 'Maintenance'}
@@ -392,9 +392,9 @@ export function TreeLibraryPage() {
           {/* Active Filters */}
           {hasActiveFilters && (
             <div className="mb-6 flex flex-wrap items-center gap-2">
-              <span className="text-sm text-[#848b9b]">Filters:</span>
+              <span className="text-sm text-muted-foreground">Filters:</span>
               {selectedFolderId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   Folder
                   <button
                     onClick={() => setSelectedFolderId(null)}
@@ -405,7 +405,7 @@ export function TreeLibraryPage() {
                 </span>
               )}
               {selectedCategoryId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   {categories.find((c) => c.id === selectedCategoryId)?.name}
                   <button
                     onClick={() => setSelectedCategoryId('')}
@@ -418,7 +418,7 @@ export function TreeLibraryPage() {
               {selectedTags.map((tag) => (
                 <span
                   key={tag}
-                  className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-[#e2e5eb]"
+                  className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground"
                 >
                   {tag}
                   <button
@@ -431,7 +431,7 @@ export function TreeLibraryPage() {
               ))}
               <button
                 onClick={clearAllFilters}
-                className="text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+                className="text-sm text-muted-foreground hover:text-foreground"
               >
                 Clear all
               </button>
@@ -442,12 +442,12 @@ export function TreeLibraryPage() {
           {visibleIncompleteSessions.length > 0 && (
             <div className="mb-6 space-y-2">
               {visibleIncompleteSessions.map(s => (
-                <div key={s.id} className="bg-[#14161d] border border-[#1e2130] flex items-center justify-between rounded-xl p-4">
+                <div key={s.id} className="bg-card border border-border flex items-center justify-between rounded-xl p-4">
                   <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-[#e2e5eb]">
+                    <p className="truncate font-medium text-foreground">
                       {s.tree_snapshot?.name || 'Unknown tree'}
                     </p>
-                    <p className="text-sm text-[#848b9b]">
+                    <p className="text-sm text-muted-foreground">
                       {s.client_name && `${s.client_name} · `}
                       {s.started_at ? `Started ${formatTimeAgo(s.started_at)}` : 'Not started'}
                     </p>
@@ -462,7 +462,7 @@ export function TreeLibraryPage() {
                     </Button>
                     <button
                       onClick={() => dismissSession(s.id)}
-                      className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                      className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       <X className="h-4 w-4" />
                     </button>
@@ -480,8 +480,8 @@ export function TreeLibraryPage() {
                   state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
                 })}
                 className={cn(
-                  'flex items-center gap-2 rounded-lg border border-[#1e2130] px-4 py-2.5 text-sm text-[#848b9b]',
-                  'hover:border-[#1e2130] hover:bg-accent hover:text-[#e2e5eb]'
+                  'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground',
+                  'hover:border-border hover:bg-accent hover:text-foreground'
                 )}
               >
                 <RotateCcw className="h-4 w-4" />
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index e49772c3..6498ca82 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/frontend/src/pages/TreeNavigationPage.tsx
@@ -603,7 +603,7 @@ export function TreeNavigationPage() {
         </div>
         <button
           onClick={() => navigate('/trees')}
-          className="mt-4 text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+          className="mt-4 text-muted-foreground hover:text-foreground hover:underline"
         >
           Back to trees
         </button>
@@ -615,17 +615,17 @@ export function TreeNavigationPage() {
   if (showMetadataForm) {
     return (
       <div className="container mx-auto max-w-lg px-4 py-8">
-        <h1 className="mb-2 text-2xl font-bold font-heading text-[#e2e5eb]">{tree.name}</h1>
-        <p className="mb-6 text-[#848b9b]">{tree.description}</p>
+        <h1 className="mb-2 text-2xl font-bold font-heading text-foreground">{tree.name}</h1>
+        <p className="mb-6 text-muted-foreground">{tree.description}</p>
 
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl space-y-4 p-6">
-          <h2 className="font-semibold text-[#e2e5eb]">Session Details</h2>
-          <p className="text-sm text-[#848b9b]">
+        <div className="bg-card border border-border rounded-xl space-y-4 p-6">
+          <h2 className="font-semibold text-foreground">Session Details</h2>
+          <p className="text-sm text-muted-foreground">
             Optional: Add ticket and client info for easier tracking
           </p>
 
           <div>
-            <label className="block text-sm font-medium text-[#e2e5eb]">
+            <label className="block text-sm font-medium text-foreground">
               Ticket Number
             </label>
             <input
@@ -634,15 +634,15 @@ export function TreeNavigationPage() {
               onChange={(e) => setTicketNumber(e.target.value)}
               placeholder="e.g., INC0012345"
               className={cn(
-                'mt-1 block w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+                'text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-[#e2e5eb]">
+            <label className="block text-sm font-medium text-foreground">
               Client Name
             </label>
             <input
@@ -651,8 +651,8 @@ export function TreeNavigationPage() {
               onChange={(e) => setClientName(e.target.value)}
               placeholder="e.g., Acme Corp"
               className={cn(
-                'mt-1 block w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-                'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+                'text-foreground placeholder:text-muted-foreground',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
@@ -685,9 +685,9 @@ export function TreeNavigationPage() {
       <div className="mb-6 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-3">
-            <h1 className="text-xl font-bold font-heading text-[#e2e5eb]">{tree.name}</h1>
+            <h1 className="text-xl font-bold font-heading text-foreground">{tree.name}</h1>
             {timerDisplay && (
-              <span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-[#848b9b]">
+              <span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-muted-foreground">
                 <Clock className="h-4 w-4" />
                 {timerDisplay}
               </span>
@@ -695,14 +695,14 @@ export function TreeNavigationPage() {
             <button
               type="button"
               onClick={() => setShortcutsModalOpen(true)}
-              className="flex items-center justify-center rounded-full p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
               title="Keyboard shortcuts"
             >
               <HelpCircle className="h-4 w-4" />
             </button>
           </div>
           {(ticketNumber || clientName) && (
-            <p className="text-sm text-[#848b9b]">
+            <p className="text-sm text-muted-foreground">
               {ticketNumber && `Ticket: ${ticketNumber}`}
               {ticketNumber && clientName && ' · '}
               {clientName && `Client: ${clientName}`}
@@ -725,8 +725,8 @@ export function TreeNavigationPage() {
             <button
               onClick={() => setShowSharePopover(!showSharePopover)}
               className={cn(
-                'flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-xs font-medium text-[#848b9b]',
-                'hover:bg-accent hover:text-[#e2e5eb] transition-colors'
+                'flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground transition-colors'
               )}
             >
               <Copy className="h-3.5 w-3.5" />
@@ -734,7 +734,7 @@ export function TreeNavigationPage() {
               <ChevronDown className="h-3 w-3" />
             </button>
             {showSharePopover && (
-              <div className="absolute right-0 mt-1 z-50 bg-[#14161d] border border-[#1e2130] rounded-xl p-1 min-w-[220px]">
+              <div className="absolute right-0 mt-1 z-50 bg-card border border-border rounded-xl p-1 min-w-[220px]">
                 {/* Copy Progress Summary */}
                 <button
                   onClick={() => {
@@ -743,8 +743,8 @@ export function TreeNavigationPage() {
                   }}
                   disabled={isCopyingForTicket}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-[#848b9b] w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground disabled:opacity-50'
                   )}
                 >
                   {copiedForTicket ? <Check className="h-4 w-4 text-emerald-400" /> : <Clipboard className="h-4 w-4" />}
@@ -758,15 +758,15 @@ export function TreeNavigationPage() {
                   }}
                   disabled={isCopyingShareLink}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-[#848b9b] w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground disabled:opacity-50'
                   )}
                 >
                   {copiedShareLink ? <Check className="h-4 w-4 text-emerald-400" /> : <Link2 className="h-4 w-4" />}
                   {isCopyingShareLink ? 'Loading...' : copiedShareLink ? 'Copied!' : 'Copy Share Link'}
                 </button>
                 {/* Divider */}
-                <div className="border-t border-[#1e2130] my-1" />
+                <div className="border-t border-border my-1" />
                 {/* Manage Share Links */}
                 <button
                   onClick={() => {
@@ -774,8 +774,8 @@ export function TreeNavigationPage() {
                     setShowShareModal(true)
                   }}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-[#848b9b] w-full text-left cursor-pointer transition-colors',
-                    'hover:bg-accent hover:text-[#e2e5eb]'
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground w-full text-left cursor-pointer transition-colors',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                 >
                   <Settings className="h-4 w-4" />
@@ -786,7 +786,7 @@ export function TreeNavigationPage() {
           </div>
           <button
             onClick={() => navigate('/sessions')}
-            className="rounded-md px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+            className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             Exit
           </button>
@@ -814,17 +814,17 @@ export function TreeNavigationPage() {
           const truncatedLabel = label.length > 30 ? `${label.slice(0, 30)}...` : label
           return (
             <span key={nodeId} className="flex items-center gap-2 whitespace-nowrap">
-              {index > 0 && <span className="text-[#848b9b]">→</span>}
+              {index > 0 && <span className="text-muted-foreground">→</span>}
               {index < pathTaken.length - 1 ? (
                 <button
                   type="button"
                   onClick={() => handleBreadcrumbJump(nodeId, index)}
-                  className="text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
+                  className="text-muted-foreground hover:text-foreground hover:underline"
                 >
                   {truncatedLabel}
                 </button>
               ) : (
-                <span className="font-medium text-[#e2e5eb]">
+                <span className="font-medium text-foreground">
                   {truncatedLabel}
                 </span>
               )}
@@ -834,7 +834,7 @@ export function TreeNavigationPage() {
       </div>
 
       {/* Current Node */}
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6 shadow-xs">
+      <div className="bg-card border border-border rounded-xl p-6 shadow-xs">
         {/* Answer placeholder guard */}
         {currentNode && currentNode.type === 'answer' && (
           <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-6 text-center">
@@ -847,11 +847,11 @@ export function TreeNavigationPage() {
         {/* Decision Node */}
         {currentNode && currentNode.type === 'decision' && (
           <>
-            <h2 className="mb-2 text-xl font-semibold font-heading text-[#e2e5eb]">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.question}
             </h2>
             {currentNode.help_text && (
-              <div className="mb-4 text-sm text-[#848b9b]">
+              <div className="mb-4 text-sm text-muted-foreground">
                 <MarkdownContent content={currentNode.help_text} />
               </div>
             )}
@@ -862,7 +862,7 @@ export function TreeNavigationPage() {
                   onClick={() => handleSelectOption(option.id, option.label, option.next_node_id)}
                   disabled={!!selectingOption}
                   className={cn(
-                    'w-full rounded-md border border-[#1e2130] p-3 text-left text-[#e2e5eb] transition-colors',
+                    'w-full rounded-md border border-border p-3 text-left text-foreground transition-colors',
                     'hover:border-primary/30 hover:bg-accent',
                     'flex items-center gap-3',
                     selectingOption && selectingOption !== option.id && 'opacity-50 pointer-events-none'
@@ -874,7 +874,7 @@ export function TreeNavigationPage() {
                         <Spinner size="sm" className="h-4 w-4 border-t-foreground" />
                       </span>
                     ) : (
-                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-[#848b9b]">
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
                         {index + 1}
                       </span>
                     )
@@ -886,7 +886,7 @@ export function TreeNavigationPage() {
             {/* Previously-created custom steps at this node */}
             {customStepFlow.customSteps.filter(cs => cs.inserted_after_node_id === currentNodeId).length > 0 && (
               <div className="mt-2 space-y-2">
-                <p className="text-xs font-medium uppercase tracking-wide text-[#848b9b]">
+                <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                   Your Custom Steps
                 </p>
                 {customStepFlow.customSteps
@@ -897,12 +897,12 @@ export function TreeNavigationPage() {
                       key={cs.id}
                       onClick={() => customStepFlow.handleNavigateToCustomStep(cs)}
                       className={cn(
-                        'w-full rounded-md border border-primary/30 bg-[rgba(34,211,238,0.10)] p-3 text-left text-[#e2e5eb] transition-colors',
+                        'w-full rounded-md border border-primary/30 bg-accent-dim p-3 text-left text-foreground transition-colors',
                         'hover:border-primary/50 hover:bg-primary/20',
                         'flex items-center gap-3'
                       )}
                     >
-                      <span className="shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-[#22d3ee]">
+                      <span className="shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
                         Custom
                       </span>
                       <span>{cs.step_data.title}</span>
@@ -914,7 +914,7 @@ export function TreeNavigationPage() {
             {/* Add Custom Step Button */}
             <button
               onClick={() => customStepFlow.setShowCustomStepModal(true)}
-              className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Plus className="h-3.5 w-3.5" />
               Add Custom Step
@@ -924,18 +924,18 @@ export function TreeNavigationPage() {
 
         {/* Custom Step Node */}
         {currentCustomStep && (
-          <div className="rounded-lg border border-primary/30 bg-[rgba(34,211,238,0.10)] p-4">
+          <div className="rounded-lg border border-primary/30 bg-accent-dim p-4">
             {/* Custom Step Badge */}
-            <span className="mb-2 inline-block rounded-full bg-primary/20 px-2 py-1 text-xs font-medium text-[#22d3ee]">
+            <span className="mb-2 inline-block rounded-full bg-primary/20 px-2 py-1 text-xs font-medium text-primary">
               Custom Step
             </span>
 
-            <h2 className="mb-2 text-xl font-semibold font-heading text-[#e2e5eb]">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentCustomStep.step_data.title}
             </h2>
 
             {currentCustomStep.step_data.content.instructions && (
-              <div className="mb-4 text-[#848b9b]">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentCustomStep.step_data.content.instructions} />
               </div>
             )}
@@ -948,11 +948,11 @@ export function TreeNavigationPage() {
 
             {currentCustomStep.step_data.content.commands && currentCustomStep.step_data.content.commands.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-[#e2e5eb]">Commands:</p>
+                <p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
                 <div className="space-y-2">
                   {currentCustomStep.step_data.content.commands.map((cmd, index) => (
                     <div key={index}>
-                      <p className="mb-1 text-xs text-[#848b9b]">{cmd.label}</p>
+                      <p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
                       <div className="group relative">
                         <code className="block rounded bg-accent p-2 pr-8 text-sm font-mono">
                           {cmd.command}
@@ -966,7 +966,7 @@ export function TreeNavigationPage() {
                           {copiedCommand === cmd.command ? (
                             <Check className="h-3.5 w-3.5 text-green-400" />
                           ) : (
-                            <Clipboard className="h-3.5 w-3.5 text-[#848b9b] hover:text-[#e2e5eb]" />
+                            <Clipboard className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" />
                           )}
                         </button>
                       </div>
@@ -978,7 +978,7 @@ export function TreeNavigationPage() {
                   <button
                     type="button"
                     onClick={() => setCommandOutputOpen(!commandOutputOpen)}
-                    className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
                   >
                     <Terminal className="h-3.5 w-3.5" />
                     <span>Paste Output (Optional)</span>
@@ -993,12 +993,12 @@ export function TreeNavigationPage() {
                         rows={4}
                         maxLength={10000}
                         className={cn(
-                          'block w-full rounded-md border border-[#1e2130] bg-accent px-3 py-2',
-                          'font-mono text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+                          'block w-full rounded-md border border-border bg-accent px-3 py-2',
+                          'font-mono text-sm text-foreground placeholder:text-muted-foreground',
                           'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
-                      <p className="mt-1 text-right text-xs text-[#848b9b]">
+                      <p className="mt-1 text-right text-xs text-muted-foreground">
                         {commandOutput.length.toLocaleString()} / 10,000
                       </p>
                     </div>
@@ -1035,8 +1035,8 @@ export function TreeNavigationPage() {
                   <button
                     onClick={() => customStepFlow.setShowCustomStepModal(true)}
                     className={cn(
-                      'flex items-center gap-2 rounded-md border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#848b9b]',
-                      'hover:bg-accent hover:text-[#e2e5eb]'
+                      'flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                   >
                     <Plus className="h-4 w-4" />
@@ -1062,17 +1062,17 @@ export function TreeNavigationPage() {
         {/* Action Node */}
         {currentNode && currentNode.type === 'action' && (
           <>
-            <h2 className="mb-2 text-xl font-semibold font-heading text-[#e2e5eb]">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.title}
             </h2>
             {currentNode.description && (
-              <div className="mb-4 text-[#848b9b]">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentNode.description} />
               </div>
             )}
             {currentNode.commands && currentNode.commands.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-[#e2e5eb]">Commands:</p>
+                <p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
                 <div className="space-y-1">
                   {currentNode.commands.map((cmd, index) => (
                     <div key={index} className="group relative">
@@ -1088,7 +1088,7 @@ export function TreeNavigationPage() {
                         {copiedCommand === cmd ? (
                           <Check className="h-3.5 w-3.5 text-green-400" />
                         ) : (
-                          <Clipboard className="h-3.5 w-3.5 text-[#848b9b] hover:text-[#e2e5eb]" />
+                          <Clipboard className="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" />
                         )}
                       </button>
                     </div>
@@ -1099,7 +1099,7 @@ export function TreeNavigationPage() {
                   <button
                     type="button"
                     onClick={() => setCommandOutputOpen(!commandOutputOpen)}
-                    className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+                    className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
                   >
                     <Terminal className="h-3.5 w-3.5" />
                     <span>Paste Output (Optional)</span>
@@ -1114,12 +1114,12 @@ export function TreeNavigationPage() {
                         rows={4}
                         maxLength={10000}
                         className={cn(
-                          'block w-full rounded-md border border-[#1e2130] bg-accent px-3 py-2',
-                          'font-mono text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+                          'block w-full rounded-md border border-border bg-accent px-3 py-2',
+                          'font-mono text-sm text-foreground placeholder:text-muted-foreground',
                           'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
-                      <p className="mt-1 text-right text-xs text-[#848b9b]">
+                      <p className="mt-1 text-right text-xs text-muted-foreground">
                         {commandOutput.length.toLocaleString()} / 10,000
                       </p>
                     </div>
@@ -1128,7 +1128,7 @@ export function TreeNavigationPage() {
               </div>
             )}
             {currentNode.expected_outcome && (
-              <p className="mb-4 text-sm text-[#848b9b]">
+              <p className="mb-4 text-sm text-muted-foreground">
                 <strong>Expected outcome:</strong> {currentNode.expected_outcome}
               </p>
             )}
@@ -1148,18 +1148,18 @@ export function TreeNavigationPage() {
                 Solution
               </span>
             </div>
-            <h2 className="mb-2 text-xl font-semibold font-heading text-[#e2e5eb]">
+            <h2 className="mb-2 text-xl font-semibold font-heading text-foreground">
               {currentNode.title}
             </h2>
             {currentNode.description && (
-              <div className="mb-4 text-[#848b9b]">
+              <div className="mb-4 text-muted-foreground">
                 <MarkdownContent content={currentNode.description} />
               </div>
             )}
             {currentNode.resolution_steps && currentNode.resolution_steps.length > 0 && (
               <div className="mb-4">
-                <p className="mb-2 text-sm font-medium text-[#e2e5eb]">Resolution steps:</p>
-                <ol className="list-inside list-decimal space-y-1 text-sm text-[#848b9b]">
+                <p className="mb-2 text-sm font-medium text-foreground">Resolution steps:</p>
+                <ol className="list-inside list-decimal space-y-1 text-sm text-muted-foreground">
                   {currentNode.resolution_steps.map((step, index) => (
                     <li key={index}>{step}</li>
                   ))}
@@ -1181,14 +1181,14 @@ export function TreeNavigationPage() {
 
         {/* Step Feedback */}
         {session && (currentNode || currentCustomStep) && (
-          <div className="mt-3 flex justify-end border-t border-[#1e2130] pt-3">
+          <div className="mt-3 flex justify-end border-t border-border pt-3">
             <StepFeedback stepId={currentCustomStep?.id || currentNodeId} sessionId={session.id} />
           </div>
         )}
 
         {/* Notes */}
-        <div className="mt-6 border-t border-[#1e2130] pt-4">
-          <label className="block text-sm font-medium text-[#e2e5eb]">
+        <div className="mt-6 border-t border-border pt-4">
+          <label className="block text-sm font-medium text-foreground">
             Notes (optional)
           </label>
           <textarea
@@ -1198,8 +1198,8 @@ export function TreeNavigationPage() {
             placeholder="Add any notes for this step..."
             rows={2}
             className={cn(
-              'mt-1 block w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2',
-              'text-[#e2e5eb] placeholder:text-[#848b9b]',
+              'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
+              'text-foreground placeholder:text-muted-foreground',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
@@ -1216,15 +1216,15 @@ export function TreeNavigationPage() {
         {pathTaken.length > 1 && (
           <button
             onClick={handleGoBack}
-            className="mt-4 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
+            className="mt-4 text-sm text-muted-foreground hover:text-foreground"
           >
-            ← Go back <span className="text-xs text-[#848b9b]">[Esc]</span>
+            ← Go back <span className="text-xs text-muted-foreground">[Esc]</span>
           </button>
         )}
 
         {/* Keyboard Shortcuts Hint */}
         {currentNode && (
-          <div className="mt-4 border-t border-[#1e2130] pt-3 text-xs text-[#848b9b]">
+          <div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
             <span className="font-medium">Keyboard:</span>{' '}
             {currentNode.type === 'decision' && currentOptions.length > 0 && (
               <span>1-{Math.min(currentOptions.length, 9)} select option</span>
@@ -1301,24 +1301,24 @@ export function TreeNavigationPage() {
       >
         <div className="space-y-3 text-sm">
           <div className="flex items-center justify-between">
-            <span className="text-[#848b9b]">Select option</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-[#e2e5eb]">1-9</span>
+            <span className="text-muted-foreground">Select option</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">1-9</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-[#848b9b]">Go back</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-[#e2e5eb]">Esc</span>
+            <span className="text-muted-foreground">Go back</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Esc</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-[#848b9b]">Continue / Complete</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-[#e2e5eb]">Enter</span>
+            <span className="text-muted-foreground">Continue / Complete</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Enter</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-[#848b9b]">Focus notes</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-[#e2e5eb]">Tab</span>
+            <span className="text-muted-foreground">Focus notes</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">Tab</span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-[#848b9b]">Show shortcuts</span>
-            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-[#e2e5eb]">?</span>
+            <span className="text-muted-foreground">Show shortcuts</span>
+            <span className="rounded bg-accent px-2 py-0.5 font-mono text-xs text-foreground">?</span>
           </div>
         </div>
       </Modal>
diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx
index 4e7aded0..14b21ce1 100644
--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -26,23 +26,23 @@ export function VerifyEmailPage() {
   return (
     <>
     <PageMeta title="Verify Email" description="Verify your ResolutionFlow email address" />
-    <div className="flex min-h-screen items-center justify-center bg-[#0c0d10] p-4">
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
       <div className="card-flat w-full max-w-md p-8 text-center">
         {status === 'loading' && (
           <>
-            <Loader2 className="mx-auto h-12 w-12 animate-spin text-[#22d3ee]" />
-            <p className="mt-4 text-[#e2e5eb]">Verifying your email...</p>
+            <Loader2 className="mx-auto h-12 w-12 animate-spin text-primary" />
+            <p className="mt-4 text-foreground">Verifying your email...</p>
           </>
         )}
         {status === 'success' && (
           <>
             <CheckCircle2 className="mx-auto h-12 w-12 text-emerald-400" />
-            <h1 className="mt-4 text-xl font-bold font-heading text-[#e2e5eb]">Email Verified</h1>
-            <p className="mt-2 text-[#848b9b]">Your email has been successfully verified.</p>
+            <h1 className="mt-4 text-xl font-bold font-heading text-foreground">Email Verified</h1>
+            <p className="mt-2 text-muted-foreground">Your email has been successfully verified.</p>
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-lg bg-[#22d3ee] px-6 py-2 text-sm font-semibold text-white',
+                'mt-6 inline-flex items-center rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-white',
                 'hover:brightness-110'
               )}
             >
@@ -53,13 +53,13 @@ export function VerifyEmailPage() {
         {status === 'error' && (
           <>
             <XCircle className="mx-auto h-12 w-12 text-rose-500" />
-            <h1 className="mt-4 text-xl font-bold font-heading text-[#e2e5eb]">Verification Failed</h1>
-            <p className="mt-2 text-[#848b9b]">{errorMessage}</p>
+            <h1 className="mt-4 text-xl font-bold font-heading text-foreground">Verification Failed</h1>
+            <p className="mt-2 text-muted-foreground">{errorMessage}</p>
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-lg bg-[#191c25] border border-[#1e2130] px-6 py-2 text-sm font-medium text-[#e2e5eb]',
-                'hover:border-[#2a2f3d]'
+                'mt-6 inline-flex items-center rounded-lg bg-input border border-border px-6 py-2 text-sm font-medium text-foreground',
+                'hover:border-border-hover'
               )}
             >
               Go to Dashboard
diff --git a/frontend/src/pages/account/BrandingSettingsPage.tsx b/frontend/src/pages/account/BrandingSettingsPage.tsx
index ed7e87d2..1602add7 100644
--- a/frontend/src/pages/account/BrandingSettingsPage.tsx
+++ b/frontend/src/pages/account/BrandingSettingsPage.tsx
@@ -75,7 +75,7 @@ export function BrandingSettingsPage() {
       <>
         <PageMeta title="Branding Settings" />
         <div className="flex justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       </>
     )
@@ -103,12 +103,12 @@ export function BrandingSettingsPage() {
       <div>
         <div className="mb-8">
           <div className="flex items-center gap-3">
-            <Palette className="h-8 w-8 text-[#848b9b]" />
-            <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">
+            <Palette className="h-8 w-8 text-muted-foreground" />
+            <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
               Branding Settings
             </h1>
           </div>
-          <p className="mt-2 text-[#848b9b]">
+          <p className="mt-2 text-muted-foreground">
             Customize your account branding — logo, accent color, and company name.
           </p>
         </div>
@@ -116,14 +116,14 @@ export function BrandingSettingsPage() {
         <div className="max-w-2xl space-y-6">
           {/* Branding Form */}
           <div className="card-flat p-6">
-            <h2 className="text-lg font-semibold text-[#e2e5eb] mb-6">Custom Branding</h2>
+            <h2 className="text-lg font-semibold text-foreground mb-6">Custom Branding</h2>
 
             <div className="space-y-5">
               {/* Company Name */}
               <div>
                 <label
                   htmlFor="company-name"
-                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
+                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
                 >
                   Company Name
                 </label>
@@ -135,12 +135,12 @@ export function BrandingSettingsPage() {
                   placeholder="Your Company Name"
                   maxLength={200}
                   className={cn(
-                    'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b]',
+                    'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
+                    'text-foreground placeholder:text-muted-foreground',
                     'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Displayed in the sidebar and exported documents.
                 </p>
               </div>
@@ -149,7 +149,7 @@ export function BrandingSettingsPage() {
               <div>
                 <label
                   htmlFor="logo-url"
-                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
+                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
                 >
                   Logo URL
                 </label>
@@ -161,16 +161,16 @@ export function BrandingSettingsPage() {
                   placeholder="https://example.com/logo.png"
                   maxLength={500}
                   className={cn(
-                    'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-                    'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
+                    'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
+                    'text-foreground placeholder:text-muted-foreground font-mono',
                     'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Publicly accessible URL to your logo image (PNG, SVG, or JPEG).
                 </p>
                 {logoUrl && (
-                  <div className="mt-3 inline-flex items-center rounded-lg border border-[#1e2130] bg-[#14161d]/50 p-3">
+                  <div className="mt-3 inline-flex items-center rounded-lg border border-border bg-card/50 p-3">
                     <img
                       src={logoUrl}
                       alt="Logo preview"
@@ -187,7 +187,7 @@ export function BrandingSettingsPage() {
               <div>
                 <label
                   htmlFor="primary-color"
-                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
+                  className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
                 >
                   Accent Color
                 </label>
@@ -197,7 +197,7 @@ export function BrandingSettingsPage() {
                     type="color"
                     value={previewColor}
                     onChange={(e) => setPrimaryColor(e.target.value)}
-                    className="h-9 w-14 cursor-pointer rounded-lg border border-[#1e2130] bg-[#14161d] p-0.5"
+                    className="h-9 w-14 cursor-pointer rounded-lg border border-border bg-card p-0.5"
                     title="Pick accent color"
                   />
                   <input
@@ -210,20 +210,20 @@ export function BrandingSettingsPage() {
                     placeholder="#06b6d4"
                     maxLength={7}
                     className={cn(
-                      'w-32 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
-                      'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
+                      'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
+                      'text-foreground placeholder:text-muted-foreground font-mono',
                       'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                     )}
                   />
                   <button
                     type="button"
                     onClick={() => setPrimaryColor(DEFAULT_COLOR)}
-                    className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                   >
                     Reset to default
                   </button>
                 </div>
-                <p className="mt-1 text-xs text-[#848b9b]">
+                <p className="mt-1 text-xs text-muted-foreground">
                   Hex color code for the primary accent color (e.g. #06b6d4).
                 </p>
               </div>
@@ -237,7 +237,7 @@ export function BrandingSettingsPage() {
                 disabled={isSaving || !isDirty}
                 className={cn(
                   'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-                  'bg-[#22d3ee] text-white',
+                  'bg-primary text-white',
                   'hover:brightness-110 active:scale-[0.98] transition-all',
                   'disabled:opacity-50 disabled:cursor-not-allowed'
                 )}
@@ -250,15 +250,15 @@ export function BrandingSettingsPage() {
                 Save Branding
               </button>
               {!isDirty && !isSaving && (
-                <span className="text-xs text-[#848b9b]">No changes</span>
+                <span className="text-xs text-muted-foreground">No changes</span>
               )}
             </div>
           </div>
 
           {/* Preview Section */}
           <div className="card-flat p-6">
-            <h2 className="text-lg font-semibold text-[#e2e5eb] mb-4">Preview</h2>
-            <p className="text-sm text-[#848b9b] mb-4">
+            <h2 className="text-lg font-semibold text-foreground mb-4">Preview</h2>
+            <p className="text-sm text-muted-foreground mb-4">
               This is how your accent color will appear on interactive elements.
             </p>
 
@@ -293,7 +293,7 @@ export function BrandingSettingsPage() {
               </div>
 
               {companyName && (
-                <p className="text-sm text-[#e2e5eb]">
+                <p className="text-sm text-foreground">
                   Company: <span className="font-medium">{companyName}</span>
                 </p>
               )}
diff --git a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
index aa4bb6fd..f3d4c0ed 100644
--- a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
+++ b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
@@ -45,7 +45,7 @@ export default function ChatRetentionSettingsPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <Loader2 className="animate-spin text-[#22d3ee]" size={24} />
+        <Loader2 className="animate-spin text-primary" size={24} />
       </div>
     )
   }
@@ -53,18 +53,18 @@ export default function ChatRetentionSettingsPage() {
   return (
     <div className="max-w-2xl mx-auto py-8 px-6">
       <div className="flex items-center gap-3 mb-6">
-        <Clock size={20} className="text-[#22d3ee]" />
-        <h1 className="text-xl font-heading font-bold text-[#e2e5eb]">Chat Retention</h1>
+        <Clock size={20} className="text-primary" />
+        <h1 className="text-xl font-heading font-bold text-foreground">Chat Retention</h1>
       </div>
 
       <div className="card-flat rounded-2xl p-6 space-y-6">
-        <p className="text-sm text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
           Configure how long AI assistant conversations are retained. Pinned chats are never automatically deleted.
         </p>
 
         <div className="space-y-4">
           <div>
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Retention Period (days)
             </label>
             <input
@@ -73,16 +73,16 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setRetentionDays(e.target.value)}
               min={1}
               max={365}
-              className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
               style={{ borderColor: 'var(--glass-border)' }}
             />
-            <p className="text-xs text-[#848b9b] mt-1">
+            <p className="text-xs text-muted-foreground mt-1">
               Chats older than this will be automatically deleted (1-365 days)
             </p>
           </div>
 
           <div>
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Max Conversations
             </label>
             <input
@@ -91,10 +91,10 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setMaxCount(e.target.value)}
               min={10}
               max={10000}
-              className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
               style={{ borderColor: 'var(--glass-border)' }}
             />
-            <p className="text-xs text-[#848b9b] mt-1">
+            <p className="text-xs text-muted-foreground mt-1">
               When this limit is exceeded, oldest unpinned chats are deleted
             </p>
           </div>
@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
+            className="bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
           >
             {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
             Save Settings
diff --git a/frontend/src/pages/account/IntegrationsPage.tsx b/frontend/src/pages/account/IntegrationsPage.tsx
index d2a19624..1529aab1 100644
--- a/frontend/src/pages/account/IntegrationsPage.tsx
+++ b/frontend/src/pages/account/IntegrationsPage.tsx
@@ -197,7 +197,7 @@ export function IntegrationsPage() {
       <>
         <PageMeta title="Integrations" />
         <div className="flex justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       </>
     )
@@ -223,16 +223,16 @@ export function IntegrationsPage() {
       <div>
         <div className="mb-8">
           <div className="flex items-center gap-3">
-            <Plug className="h-8 w-8 text-[#848b9b]" />
-            <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Integrations</h1>
+            <Plug className="h-8 w-8 text-muted-foreground" />
+            <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Integrations</h1>
           </div>
-          <p className="mt-2 text-[#848b9b]">
+          <p className="mt-2 text-muted-foreground">
             Connect your PSA to post session documentation directly to tickets.
           </p>
         </div>
 
         {/* Tabs */}
-        <div className="mb-6 flex gap-1 border-b border-[#1e2130]">
+        <div className="mb-6 flex gap-1 border-b border-border">
           {([
             { id: 'connection' as Tab, label: 'Connection', icon: Plug },
             { id: 'member-mapping' as Tab, label: 'Member Mapping', icon: Users },
@@ -246,8 +246,8 @@ export function IntegrationsPage() {
               className={cn(
                 'inline-flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors -mb-px',
                 activeTab === id
-                  ? 'border-primary text-[#e2e5eb]'
-                  : 'border-transparent text-[#848b9b] hover:text-[#e2e5eb] hover:border-[#1e2130]'
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
               )}
             >
               <Icon className="h-4 w-4" />
@@ -261,7 +261,7 @@ export function IntegrationsPage() {
         <div className="max-w-3xl">
           {/* PSA Provider Grid */}
           <div className="mb-6">
-            <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">
+            <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
               Available PSA Integrations
             </p>
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
@@ -270,43 +270,43 @@ export function IntegrationsPage() {
                 'rounded-xl border p-4 flex flex-col gap-2',
                 connection
                   ? 'border-primary/40 bg-primary/5'
-                  : 'border-[#1e2130] bg-[#14161d]/30'
+                  : 'border-border bg-card/30'
               )}>
                 <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-[#e2e5eb]">ConnectWise PSA</span>
+                  <span className="text-sm font-medium text-foreground">ConnectWise PSA</span>
                   {connection ? (
                     <span className="inline-flex items-center rounded-full bg-emerald-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-emerald-400">
                       Connected
                     </span>
                   ) : (
-                    <span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] font-sans text-xs text-[#22d3ee]">
+                    <span className="inline-flex items-center rounded-full bg-accent-dim px-2 py-0.5 text-[0.625rem] font-sans text-xs text-primary">
                       Available
                     </span>
                   )}
                 </div>
-                <p className="text-xs text-[#848b9b]">Manage, ticket linking, time entries</p>
+                <p className="text-xs text-muted-foreground">Manage, ticket linking, time entries</p>
               </div>
 
               {/* Autotask — coming soon */}
-              <div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
+              <div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
                 <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-[#e2e5eb]">Autotask PSA</span>
+                  <span className="text-sm font-medium text-foreground">Autotask PSA</span>
                   <span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
                     Coming Soon
                   </span>
                 </div>
-                <p className="text-xs text-[#848b9b]">Datto / Kaseya integration</p>
+                <p className="text-xs text-muted-foreground">Datto / Kaseya integration</p>
               </div>
 
               {/* Halo PSA — coming soon */}
-              <div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
+              <div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
                 <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-[#e2e5eb]">Halo PSA</span>
+                  <span className="text-sm font-medium text-foreground">Halo PSA</span>
                   <span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
                     Coming Soon
                   </span>
                 </div>
-                <p className="text-xs text-[#848b9b]">HaloPSA / HaloITSM integration</p>
+                <p className="text-xs text-muted-foreground">HaloPSA / HaloITSM integration</p>
               </div>
             </div>
           </div>
@@ -327,15 +327,15 @@ export function IntegrationsPage() {
           {(mode === 'setup' || mode === 'edit') && (
             <div className="card-flat p-6">
               <div className="flex items-center gap-2 mb-6">
-                <Shield className="h-5 w-5 text-[#848b9b]" />
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">
+                <Shield className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">
                   {mode === 'setup' ? 'Connect to ConnectWise PSA' : 'Edit Connection'}
                 </h2>
               </div>
 
               <form onSubmit={mode === 'setup' ? handleCreate : handleUpdate} className="space-y-4">
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Display Name
                   </label>
                   <Input
@@ -349,7 +349,7 @@ export function IntegrationsPage() {
                 </div>
 
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Site URL
                   </label>
                   <Input
@@ -363,7 +363,7 @@ export function IntegrationsPage() {
                 </div>
 
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Company ID
                   </label>
                   <Input
@@ -377,7 +377,7 @@ export function IntegrationsPage() {
                 </div>
 
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Public Key
                   </label>
                   <Input
@@ -391,7 +391,7 @@ export function IntegrationsPage() {
                 </div>
 
                 <div>
-                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
+                  <label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                     Private Key
                   </label>
                   <Input
@@ -417,7 +417,7 @@ export function IntegrationsPage() {
                     disabled={isSaving}
                     className={cn(
                       'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-                      'bg-[#22d3ee] text-white',
+                      'bg-primary text-white',
                       'hover:brightness-110 active:scale-[0.98] transition-all',
                       'disabled:opacity-50 disabled:cursor-not-allowed'
                     )}
@@ -430,7 +430,7 @@ export function IntegrationsPage() {
                     <button
                       type="button"
                       onClick={cancelEdit}
-                      className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       Cancel
                     </button>
@@ -447,10 +447,10 @@ export function IntegrationsPage() {
               <div className="card-flat p-6">
                 <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-3">
-                    <span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-[#22d3ee]">
+                    <span className="inline-flex items-center rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-primary">
                       ConnectWise
                     </span>
-                    <h2 className="text-lg font-semibold text-[#e2e5eb]">{connection.display_name}</h2>
+                    <h2 className="text-lg font-semibold text-foreground">{connection.display_name}</h2>
                   </div>
                   <div className="flex items-center gap-2">
                     <span
@@ -470,24 +470,24 @@ export function IntegrationsPage() {
 
                 <div className="grid gap-4 sm:grid-cols-2">
                   <div>
-                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Site URL</p>
-                    <p className="mt-1 text-sm text-[#e2e5eb]">{connection.site_url}</p>
+                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Site URL</p>
+                    <p className="mt-1 text-sm text-foreground">{connection.site_url}</p>
                   </div>
                   <div>
-                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Company ID</p>
-                    <p className="mt-1 text-sm text-[#e2e5eb]">{connection.company_id}</p>
+                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Company ID</p>
+                    <p className="mt-1 text-sm text-foreground">{connection.company_id}</p>
                   </div>
                   <div>
-                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Public Key</p>
-                    <p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.public_key_hint}</p>
+                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Public Key</p>
+                    <p className="mt-1 text-sm text-foreground font-mono">{connection.public_key_hint}</p>
                   </div>
                   <div>
-                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Private Key</p>
-                    <p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.private_key_hint}</p>
+                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Private Key</p>
+                    <p className="mt-1 text-sm text-foreground font-mono">{connection.private_key_hint}</p>
                   </div>
                   <div>
-                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Last Validated</p>
-                    <p className="mt-1 text-sm text-[#e2e5eb]">
+                    <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Last Validated</p>
+                    <p className="mt-1 text-sm text-foreground">
                       {connection.last_validated_at ? formatRelativeTime(connection.last_validated_at) : 'Never'}
                     </p>
                   </div>
@@ -511,7 +511,7 @@ export function IntegrationsPage() {
                   )}
                   <span>{testResult.message}</span>
                   {testResult.server_version && (
-                    <span className="ml-auto text-xs text-[#848b9b]">
+                    <span className="ml-auto text-xs text-muted-foreground">
                       v{testResult.server_version}
                     </span>
                   )}
@@ -525,7 +525,7 @@ export function IntegrationsPage() {
                   disabled={isTesting}
                   className={cn(
                     'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
                     'hover:border-[rgba(255,255,255,0.12)] transition-all',
                     'disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
@@ -542,7 +542,7 @@ export function IntegrationsPage() {
                   onClick={startEdit}
                   className={cn(
                     'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+                    'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
                     'hover:border-[rgba(255,255,255,0.12)] transition-all'
                   )}
                 >
@@ -552,7 +552,7 @@ export function IntegrationsPage() {
 
                 {showDeleteConfirm ? (
                   <div className="flex items-center gap-2 ml-auto">
-                    <span className="text-sm text-[#848b9b]">Disconnect?</span>
+                    <span className="text-sm text-muted-foreground">Disconnect?</span>
                     <button
                       onClick={handleDelete}
                       disabled={isDeleting}
@@ -563,7 +563,7 @@ export function IntegrationsPage() {
                     </button>
                     <button
                       onClick={() => setShowDeleteConfirm(false)}
-                      className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       Cancel
                     </button>
@@ -593,10 +593,10 @@ export function IntegrationsPage() {
           <div className="max-w-3xl">
             <div className="card-flat p-6">
               <div className="flex items-center gap-3 mb-4">
-                <Ticket className="h-5 w-5 text-[#848b9b]" />
-                <h2 className="text-lg font-semibold text-[#e2e5eb]">Post History</h2>
+                <Ticket className="h-5 w-5 text-muted-foreground" />
+                <h2 className="text-lg font-semibold text-foreground">Post History</h2>
               </div>
-              <p className="text-sm text-[#848b9b]">
+              <p className="text-sm text-muted-foreground">
                 View post history from individual sessions by clicking on linked tickets.
                 When a session has a ConnectWise ticket linked, use the Update button to post
                 session documentation and view previous posts.
@@ -729,10 +729,10 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
       <div className="max-w-3xl">
         <div className="card-flat p-6">
           <div className="flex items-center gap-3 mb-4">
-            <Users className="h-5 w-5 text-[#848b9b]" />
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
           </div>
-          <p className="text-sm text-[#848b9b]">
+          <p className="text-sm text-muted-foreground">
             Set up a PSA connection first to map team members to ConnectWise members.
           </p>
         </div>
@@ -746,8 +746,8 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
       <div className="card-flat p-6">
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-3">
-            <Users className="h-5 w-5 text-[#848b9b]" />
-            <h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
           </div>
           <button
             type="button"
@@ -755,7 +755,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
             disabled={isAutoMatching || isLoadingData}
             className={cn(
               'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
-              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
+              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
               'hover:border-[rgba(255,255,255,0.12)] transition-all',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
@@ -768,7 +768,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
             Auto-Match by Email
           </button>
         </div>
-        <p className="text-sm text-[#848b9b]">
+        <p className="text-sm text-muted-foreground">
           Map your ResolutionFlow users to ConnectWise members so session posts are attributed correctly.
         </p>
       </div>
@@ -776,7 +776,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
       {/* Loading state */}
       {isLoadingData && (
         <div className="flex justify-center py-8">
-          <Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
         </div>
       )}
 
@@ -784,17 +784,17 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
       {hasLoaded && !isLoadingData && (
         <div className="card-flat overflow-hidden">
           {uniqueUsers.length === 0 ? (
-            <div className="p-6 text-center text-sm text-[#848b9b]">
+            <div className="p-6 text-center text-sm text-muted-foreground">
               No users found. Use Auto-Match to discover and map users.
             </div>
           ) : (
             <>
               {/* Table header */}
-              <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-[#1e2130] px-6 py-3">
-                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">User</span>
-                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Email</span>
-                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Mapped To</span>
-                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] w-20 text-center">Method</span>
+              <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-border px-6 py-3">
+                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">User</span>
+                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</span>
+                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Mapped To</span>
+                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground w-20 text-center">Method</span>
               </div>
 
               {/* Rows */}
@@ -803,18 +803,18 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
                 return (
                   <div
                     key={user.user_id}
-                    className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-[#1e2130]/50 px-6 py-3 last:border-b-0"
+                    className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-border/50 px-6 py-3 last:border-b-0"
                   >
-                    <span className="text-sm text-[#e2e5eb] truncate">{user.user_name}</span>
-                    <span className="text-sm text-[#848b9b] truncate">{user.user_email}</span>
+                    <span className="text-sm text-foreground truncate">{user.user_name}</span>
+                    <span className="text-sm text-muted-foreground truncate">{user.user_email}</span>
                     <select
                       title={`Map ${user.user_name} to a ConnectWise member`}
                       value={currentMapping?.external_member_id || ''}
                       onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
                       className={cn(
-                        'w-full rounded-lg border bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb]',
-                        'border-[#1e2130] focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
-                        !currentMapping && 'text-[#848b9b]'
+                        'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
+                        'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+                        !currentMapping && 'text-muted-foreground'
                       )}
                     >
                       <option value="">-- Unmapped --</option>
@@ -829,17 +829,17 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
                         <span className={cn(
                           'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs',
                           user.matched_by === 'auto_email'
-                            ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
-                            : 'bg-[#14161d] border border-[#1e2130] text-[#848b9b]'
+                            ? 'bg-accent-dim text-primary'
+                            : 'bg-card border border-border text-muted-foreground'
                         )}>
                           {user.matched_by === 'auto_email' ? 'auto' : 'manual'}
                         </span>
                       ) : currentMapping ? (
-                        <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs bg-[#14161d] border border-[#1e2130] text-[#848b9b]">
+                        <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs bg-card border border-border text-muted-foreground">
                           manual
                         </span>
                       ) : (
-                        <span className="text-[0.625rem] text-[#848b9b]/50">—</span>
+                        <span className="text-[0.625rem] text-muted-foreground/50">—</span>
                       )}
                     </span>
                   </div>
@@ -859,7 +859,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
             disabled={isSavingMappings}
             className={cn(
               'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
-              'bg-[#22d3ee] text-white',
+              'bg-primary text-white',
               'hover:brightness-110 active:scale-[0.98] transition-all',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
@@ -915,7 +915,7 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
     return (
       <div className="max-w-3xl">
         <div className="card-flat p-6 text-center">
-          <p className="text-sm text-[#848b9b]">Connect your PSA first to configure FlowPilot settings.</p>
+          <p className="text-sm text-muted-foreground">Connect your PSA first to configure FlowPilot settings.</p>
         </div>
       </div>
     )
@@ -924,7 +924,7 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
   if (isLoading) {
     return (
       <div className="flex justify-center py-12">
-        <Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
       </div>
     )
   }
@@ -935,10 +935,10 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
     <div className="max-w-3xl space-y-4">
       <div className="card-flat p-6">
         <div className="flex items-center gap-3 mb-4">
-          <Zap className="h-5 w-5 text-[#22d3ee]" />
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">FlowPilot Settings</h2>
+          <Zap className="h-5 w-5 text-primary" />
+          <h2 className="text-lg font-semibold text-foreground">FlowPilot Settings</h2>
         </div>
-        <p className="text-sm text-[#848b9b] mb-6">
+        <p className="text-sm text-muted-foreground mb-6">
           Configure how FlowPilot integrates with your ConnectWise PSA when sessions are resolved or escalated.
         </p>
 
@@ -1039,8 +1039,8 @@ function SettingToggle({
   return (
     <div className="flex items-start justify-between gap-4">
       <div>
-        <p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
-        <p className="text-xs text-[#848b9b] mt-0.5">{description}</p>
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
       </div>
       <button
         onClick={() => onChange(!checked)}
@@ -1078,13 +1078,13 @@ function SettingSelect({
 }) {
   return (
     <div>
-      <p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
-      <p className="text-xs text-[#848b9b] mt-0.5 mb-2">{description}</p>
+      <p className="text-sm font-medium text-foreground">{label}</p>
+      <p className="text-xs text-muted-foreground mt-0.5 mb-2">{description}</p>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
-        className="w-full max-w-xs rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
+        className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
       >
         {options.map((opt) => (
           <option key={opt.value} value={opt.value}>{opt.label}</option>
diff --git a/frontend/src/pages/account/ProfileSettingsPage.tsx b/frontend/src/pages/account/ProfileSettingsPage.tsx
index 4061cb6a..933e37c5 100644
--- a/frontend/src/pages/account/ProfileSettingsPage.tsx
+++ b/frontend/src/pages/account/ProfileSettingsPage.tsx
@@ -8,8 +8,8 @@ import { toast } from '@/lib/toast'
 import type { UserUpdate } from '@/types'
 
 const inputClass = cn(
-  'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
-  'text-[#e2e5eb] placeholder:text-[#848b9b]',
+  'mt-1 block w-full rounded-lg border border-border bg-card px-3 py-2',
+  'text-foreground placeholder:text-muted-foreground',
   'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
 )
 
@@ -67,10 +67,10 @@ export function ProfileSettingsPage() {
     <div>
       <div className="mb-8">
         <div className="flex items-center gap-3">
-          <UserIcon className="h-8 w-8 text-[#848b9b]" />
-          <h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Profile Settings</h1>
+          <UserIcon className="h-8 w-8 text-muted-foreground" />
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Profile Settings</h1>
         </div>
-        <p className="mt-2 text-[#848b9b]">
+        <p className="mt-2 text-muted-foreground">
           Update your name, email, and personal details
         </p>
       </div>
@@ -79,40 +79,40 @@ export function ProfileSettingsPage() {
         <form onSubmit={handleSave} className="card-flat p-6 space-y-5">
           {/* Name */}
           <div>
-            <label htmlFor="profile-name" className="block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label htmlFor="profile-name" className="block text-sm font-medium text-foreground">Name</label>
             <input id="profile-name" type="text" value={name} onChange={(e) => setName(e.target.value)} required className={inputClass} />
           </div>
 
           {/* Email */}
           <div>
-            <label htmlFor="profile-email" className="block text-sm font-medium text-[#e2e5eb]">Email</label>
+            <label htmlFor="profile-email" className="block text-sm font-medium text-foreground">Email</label>
             <input id="profile-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className={inputClass} />
           </div>
 
           {/* Password confirmation for email change */}
           {emailChanged && (
             <div>
-              <label htmlFor="profile-password" className="block text-sm font-medium text-[#e2e5eb]">Current Password</label>
-              <p className="text-xs text-[#848b9b]">Required to change your email address</p>
+              <label htmlFor="profile-password" className="block text-sm font-medium text-foreground">Current Password</label>
+              <p className="text-xs text-muted-foreground">Required to change your email address</p>
               <input id="profile-password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required className={inputClass} />
             </div>
           )}
 
           {/* Phone */}
           <div>
-            <label htmlFor="profile-phone" className="block text-sm font-medium text-[#e2e5eb]">Phone</label>
+            <label htmlFor="profile-phone" className="block text-sm font-medium text-foreground">Phone</label>
             <input id="profile-phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Optional" className={inputClass} />
           </div>
 
           {/* Job Title */}
           <div>
-            <label htmlFor="profile-job-title" className="block text-sm font-medium text-[#e2e5eb]">Job Title</label>
+            <label htmlFor="profile-job-title" className="block text-sm font-medium text-foreground">Job Title</label>
             <input id="profile-job-title" type="text" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} placeholder="e.g. Network Engineer" className={inputClass} />
           </div>
 
           {/* Timezone */}
           <div>
-            <label htmlFor="profile-timezone" className="block text-sm font-medium text-[#e2e5eb]">Timezone</label>
+            <label htmlFor="profile-timezone" className="block text-sm font-medium text-foreground">Timezone</label>
             <select id="profile-timezone" value={timezone} onChange={(e) => setTimezone(e.target.value)} className={inputClass}>
               {COMMON_TIMEZONES.map((tz) => (
                 <option key={tz} value={tz}>{tz}</option>
@@ -132,7 +132,7 @@ export function ProfileSettingsPage() {
               type="submit"
               disabled={isSaving || !hasChanges}
               className={cn(
-                'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
+                'inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white',
                 'hover:brightness-110 active:scale-[0.98]',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
@@ -145,8 +145,8 @@ export function ProfileSettingsPage() {
               to="/change-password"
               className={cn(
                 'inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]',
-                'hover:border-[#2a2f3d]'
+                'bg-input border border-border text-foreground',
+                'hover:border-border-hover'
               )}
             >
               Change Password
diff --git a/frontend/src/pages/account/TargetListsPage.tsx b/frontend/src/pages/account/TargetListsPage.tsx
index e420beb3..37070feb 100644
--- a/frontend/src/pages/account/TargetListsPage.tsx
+++ b/frontend/src/pages/account/TargetListsPage.tsx
@@ -114,7 +114,7 @@ export default function TargetListsPage() {
         action={(
           <button
             onClick={() => openEditor()}
-            className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110"
+            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110"
           >
             <Plus className="h-4 w-4" />
             New List
@@ -137,14 +137,14 @@ export default function TargetListsPage() {
           {lists.map(list => (
             <div
               key={list.id}
-              className="flex items-center justify-between rounded-xl border border-[#1e2130] bg-[#14161d] px-5 py-4"
+              className="flex items-center justify-between rounded-xl border border-border bg-card px-5 py-4"
             >
               <div>
-                <p className="font-medium text-[#e2e5eb]">{list.name}</p>
+                <p className="font-medium text-foreground">{list.name}</p>
                 {list.description && (
-                  <p className="text-[0.8125rem] text-[#848b9b]">{list.description}</p>
+                  <p className="text-[0.8125rem] text-muted-foreground">{list.description}</p>
                 )}
-                <p className="mt-0.5 font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
+                <p className="mt-0.5 font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
                   {list.targets.length} target{list.targets.length !== 1 ? 's' : ''}
                   {list.targets.length > 0 && (
                     <> &middot; {list.targets.slice(0, 3).map(t => t.label).join(', ')}{list.targets.length > 3 ? '\u2026' : ''}</>
@@ -154,14 +154,14 @@ export default function TargetListsPage() {
               <div className="flex items-center gap-1">
                 <button
                   onClick={() => openEditor(list)}
-                  className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
                   title="Edit"
                 >
                   <Pencil className="h-4 w-4" />
                 </button>
                 <button
                   onClick={() => setDeleteTarget(list)}
-                  className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-red-400"
+                  className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
                   title="Delete"
                 >
                   <Trash2 className="h-4 w-4" />
@@ -182,14 +182,14 @@ export default function TargetListsPage() {
           <div className="flex justify-end gap-2">
             <button
               onClick={() => setShowEditor(false)}
-              className="rounded-lg border border-[#1e2130] px-4 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
             <button
               onClick={handleSave}
               disabled={isSaving}
-              className="rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
+              className="rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
             >
               {isSaving ? 'Saving\u2026' : 'Save'}
             </button>
@@ -198,38 +198,38 @@ export default function TargetListsPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
+            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
               Name
             </label>
             <input
               type="text"
               value={editorName}
               onChange={e => setEditorName(e.target.value)}
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. RDS Farm A"
             />
           </div>
           <div>
-            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
+            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
               Description (optional)
             </label>
             <input
               type="text"
               value={editorDescription}
               onChange={e => setEditorDescription(e.target.value)}
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. Production RDS servers"
             />
           </div>
           <div>
-            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
+            <label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
               Targets &mdash; one per line (add notes after #)
             </label>
             <textarea
               value={editorTargets}
               onChange={e => setEditorTargets(e.target.value)}
               rows={6}
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
             />
           </div>
diff --git a/frontend/src/pages/account/TeamCategoriesPage.tsx b/frontend/src/pages/account/TeamCategoriesPage.tsx
index a1104e89..480c9332 100644
--- a/frontend/src/pages/account/TeamCategoriesPage.tsx
+++ b/frontend/src/pages/account/TeamCategoriesPage.tsx
@@ -99,26 +99,26 @@ export function TeamCategoriesPage() {
           ))}
         </div>
       ) : categories.length === 0 ? (
-        <div className="flex flex-col items-center justify-center bg-[#14161d] border border-[#1e2130] rounded-xl py-16">
-          <FolderTree className="h-12 w-12 text-[#848b9b]" />
-          <h3 className="mt-4 font-medium text-[#e2e5eb]">No team categories</h3>
-          <p className="mt-1 text-sm text-[#848b9b]">Create categories to organize your team's trees.</p>
+        <div className="flex flex-col items-center justify-center bg-card border border-border rounded-xl py-16">
+          <FolderTree className="h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-4 font-medium text-foreground">No team categories</h3>
+          <p className="mt-1 text-sm text-muted-foreground">Create categories to organize your team's trees.</p>
         </div>
       ) : (
         <div className="space-y-2">
           {categories.map((cat) => (
-            <div key={cat.id} className="flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3">
+            <div key={cat.id} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
               <div>
-                <span className="font-medium text-[#e2e5eb]">{cat.name}</span>
-                <span className="ml-3 text-sm text-[#848b9b]">{cat.slug}</span>
-                {cat.description && <span className="ml-3 text-sm text-[#848b9b]">- {cat.description}</span>}
-                <span className="ml-3 text-xs text-[#848b9b]">{cat.tree_count} trees</span>
+                <span className="font-medium text-foreground">{cat.name}</span>
+                <span className="ml-3 text-sm text-muted-foreground">{cat.slug}</span>
+                {cat.description && <span className="ml-3 text-sm text-muted-foreground">- {cat.description}</span>}
+                <span className="ml-3 text-xs text-muted-foreground">{cat.tree_count} trees</span>
               </div>
               <div className="flex items-center gap-1">
-                <button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
+                <button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
                   <Pencil className="h-4 w-4" />
                 </button>
-                <button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400">
+                <button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-muted-foreground hover:bg-red-400/10 hover:text-red-400">
                   <Trash2 className="h-4 w-4" />
                 </button>
               </div>
@@ -138,15 +138,15 @@ export function TeamCategoriesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <Input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
           </div>
         </div>
@@ -163,15 +163,15 @@ export function TeamCategoriesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <Input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/AuditLogsPage.tsx b/frontend/src/pages/admin/AuditLogsPage.tsx
index 2d07d987..d56cdff5 100644
--- a/frontend/src/pages/admin/AuditLogsPage.tsx
+++ b/frontend/src/pages/admin/AuditLogsPage.tsx
@@ -64,7 +64,7 @@ export function AuditLogsPage() {
       render: (log) => (
         <button
           onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
-          className="p-1 text-[#848b9b] hover:text-[#e2e5eb]"
+          className="p-1 text-muted-foreground hover:text-foreground"
         >
           {expandedId === log.id ? (
             <ChevronDown className="h-4 w-4" />
@@ -78,14 +78,14 @@ export function AuditLogsPage() {
       key: 'action',
       header: 'Action',
       render: (log) => (
-        <span className="text-sm font-medium text-[#e2e5eb]">{log.action}</span>
+        <span className="text-sm font-medium text-foreground">{log.action}</span>
       ),
     },
     {
       key: 'resource',
       header: 'Resource',
       render: (log) => (
-        <span className="text-sm text-[#848b9b]">
+        <span className="text-sm text-muted-foreground">
           {log.resource_type}{log.resource_id ? ` (${log.resource_id.slice(0, 8)}...)` : ''}
         </span>
       ),
@@ -94,14 +94,14 @@ export function AuditLogsPage() {
       key: 'user',
       header: 'User',
       render: (log) => (
-        <span className="text-sm text-[#848b9b]">{log.user_email || 'System'}</span>
+        <span className="text-sm text-muted-foreground">{log.user_email || 'System'}</span>
       ),
     },
     {
       key: 'created_at',
       header: 'Time',
       render: (log) => (
-        <span className="text-sm text-[#848b9b]">
+        <span className="text-sm text-muted-foreground">
           {new Date(log.created_at).toLocaleString()}
         </span>
       ),
@@ -117,8 +117,8 @@ export function AuditLogsPage() {
           <button
             onClick={handleExport}
             className={cn(
-              'flex items-center gap-2 rounded-md border border-[#1e2130] px-4 py-2 text-sm font-medium',
-              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
+              'flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Download className="h-4 w-4" />
@@ -134,8 +134,8 @@ export function AuditLogsPage() {
           onChange={(e) => { setActionFilter(e.target.value); setPage(1) }}
           placeholder="Filter by action..."
           className={cn(
-            'h-9 rounded-md border border-[#1e2130] bg-[#14161d] px-3 text-sm text-[#e2e5eb]',
-            'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+            'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
         <input
@@ -144,8 +144,8 @@ export function AuditLogsPage() {
           onChange={(e) => { setResourceFilter(e.target.value); setPage(1) }}
           placeholder="Filter by resource type..."
           className={cn(
-            'h-9 rounded-md border border-[#1e2130] bg-[#14161d] px-3 text-sm text-[#e2e5eb]',
-            'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+            'h-9 rounded-md border border-border bg-card px-3 text-sm text-foreground',
+            'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
           )}
         />
       </div>
@@ -166,9 +166,9 @@ export function AuditLogsPage() {
 
       {/* Expanded details row */}
       {expandedId && logs.find(l => l.id === expandedId)?.details && (
-        <div className="rounded-md border border-[#1e2130] bg-accent p-4">
-          <h4 className="mb-2 text-sm font-medium text-[#e2e5eb]">Details</h4>
-          <pre className="overflow-x-auto rounded bg-[#14161d] p-3 text-xs text-[#848b9b]">
+        <div className="rounded-md border border-border bg-accent p-4">
+          <h4 className="mb-2 text-sm font-medium text-foreground">Details</h4>
+          <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-muted-foreground">
             {JSON.stringify(logs.find(l => l.id === expandedId)?.details, null, 2)}
           </pre>
         </div>
diff --git a/frontend/src/pages/admin/DashboardPage.tsx b/frontend/src/pages/admin/DashboardPage.tsx
index 93d4391e..3df9b160 100644
--- a/frontend/src/pages/admin/DashboardPage.tsx
+++ b/frontend/src/pages/admin/DashboardPage.tsx
@@ -14,13 +14,13 @@ interface MetricCardProps {
 
 function MetricCard({ label, value, icon }: MetricCardProps) {
   return (
-    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
+    <div className="bg-card border border-border rounded-xl p-6">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-sm text-[#848b9b]">{label}</p>
-          <p className="mt-1 text-3xl font-bold text-[#e2e5eb]">{value}</p>
+          <p className="text-sm text-muted-foreground">{label}</p>
+          <p className="mt-1 text-3xl font-bold text-foreground">{value}</p>
         </div>
-        <div className="rounded-lg bg-accent p-3 text-[#848b9b]">{icon}</div>
+        <div className="rounded-lg bg-accent p-3 text-muted-foreground">{icon}</div>
       </div>
     </div>
   )
@@ -71,18 +71,18 @@ export function DashboardPage() {
       {/* Recent Activity */}
       {activity.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Recent Activity</h2>
+          <h2 className="text-lg font-semibold text-foreground">Recent Activity</h2>
           <div className="mt-3 space-y-2">
             {activity.slice(0, 10).map((entry) => (
-              <div key={entry.id} className="flex items-center justify-between rounded-md border border-[#1e2130] px-4 py-3 text-sm">
+              <div key={entry.id} className="flex items-center justify-between rounded-md border border-border px-4 py-3 text-sm">
                 <div>
-                  <span className="font-medium text-[#e2e5eb]">{entry.action}</span>
-                  <span className="ml-2 text-[#848b9b]">{entry.resource_type}</span>
+                  <span className="font-medium text-foreground">{entry.action}</span>
+                  <span className="ml-2 text-muted-foreground">{entry.resource_type}</span>
                   {entry.user_email && (
-                    <span className="ml-2 text-[#848b9b]">by {entry.user_email}</span>
+                    <span className="ml-2 text-muted-foreground">by {entry.user_email}</span>
                   )}
                 </div>
-                <span className="text-xs text-[#848b9b]">
+                <span className="text-xs text-muted-foreground">
                   {new Date(entry.created_at).toLocaleString()}
                 </span>
               </div>
@@ -93,18 +93,18 @@ export function DashboardPage() {
 
       {/* Quick Links */}
       <div>
-        <h2 className="text-lg font-semibold text-[#e2e5eb]">Quick Links</h2>
+        <h2 className="text-lg font-semibold text-foreground">Quick Links</h2>
         <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
           {quickLinks.map((link) => (
             <Link
               key={link.to}
               to={link.to}
               className={cn(
-                'flex items-center gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-4',
-                'text-sm font-medium text-[#e2e5eb] transition-colors hover:bg-accent'
+                'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
+                'text-sm font-medium text-foreground transition-colors hover:bg-accent'
               )}
             >
-              <link.icon className="h-5 w-5 text-[#848b9b]" />
+              <link.icon className="h-5 w-5 text-muted-foreground" />
               {link.label}
             </Link>
           ))}
diff --git a/frontend/src/pages/admin/FeatureFlagsPage.tsx b/frontend/src/pages/admin/FeatureFlagsPage.tsx
index 217ed633..d9438024 100644
--- a/frontend/src/pages/admin/FeatureFlagsPage.tsx
+++ b/frontend/src/pages/admin/FeatureFlagsPage.tsx
@@ -95,11 +95,11 @@ export function FeatureFlagsPage() {
   const flagColumns: Column<FeatureFlagResponse>[] = [
     { key: 'name', header: 'Name', render: (f) => (
       <div>
-        <div className="font-medium text-[#e2e5eb]">{f.display_name}</div>
-        <div className="text-xs text-[#848b9b]">{f.flag_key}</div>
+        <div className="font-medium text-foreground">{f.display_name}</div>
+        <div className="text-xs text-muted-foreground">{f.flag_key}</div>
       </div>
     )},
-    { key: 'description', header: 'Description', render: (f) => <span className="text-sm text-[#848b9b]">{f.description || '-'}</span> },
+    { key: 'description', header: 'Description', render: (f) => <span className="text-sm text-muted-foreground">{f.description || '-'}</span> },
     ...PLANS.map(plan => ({
       key: plan,
       header: plan.charAt(0).toUpperCase() + plan.slice(1),
@@ -133,10 +133,10 @@ export function FeatureFlagsPage() {
   ]
 
   const overrideColumns: Column<AccountFeatureOverrideResponse>[] = [
-    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-[#e2e5eb]">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
-    { key: 'flag', header: 'Flag', render: (o) => <span className="text-sm text-[#848b9b]">{o.flag_display_name || o.flag_key || o.flag_id.slice(0, 8)}</span> },
+    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-foreground">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
+    { key: 'flag', header: 'Flag', render: (o) => <span className="text-sm text-muted-foreground">{o.flag_display_name || o.flag_key || o.flag_id.slice(0, 8)}</span> },
     { key: 'enabled', header: 'Enabled', render: (o) => <StatusBadge variant={o.enabled ? 'success' : 'destructive'}>{o.enabled ? 'Yes' : 'No'}</StatusBadge> },
-    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-[#848b9b]">{o.note || '-'}</span> },
+    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-muted-foreground">{o.note || '-'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (o) => (
@@ -147,7 +147,7 @@ export function FeatureFlagsPage() {
     },
   ]
 
-  const selectClass = cn('w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]', 'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const selectClass = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-8">
@@ -163,7 +163,7 @@ export function FeatureFlagsPage() {
       />
 
       <div>
-        <h2 className="text-lg font-semibold text-[#e2e5eb]">Feature Matrix</h2>
+        <h2 className="text-lg font-semibold text-foreground">Feature Matrix</h2>
         <div className="mt-3">
           <DataTable columns={flagColumns} data={flags} keyExtractor={(f) => f.id} isLoading={loading}
             emptyState={<EmptyState icon={<ToggleLeft className="h-12 w-12" />} title="No feature flags" description="Create feature flags to control availability per plan." />}
@@ -173,7 +173,7 @@ export function FeatureFlagsPage() {
 
       <div>
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Account Overrides</h2>
+          <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
           <Button onClick={() => setOverrideOpen(true)}>
             <Plus className="h-4 w-4" />
             Add Override
@@ -197,15 +197,15 @@ export function FeatureFlagsPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Flag Key</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Flag Key</label>
             <Input type="text" value={createForm.flag_key} onChange={(e) => setCreateForm({ ...createForm, flag_key: e.target.value })} placeholder="e.g. custom_branding" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Display Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Display Name</label>
             <Input type="text" value={createForm.display_name} onChange={(e) => setCreateForm({ ...createForm, display_name: e.target.value })} placeholder="e.g. Custom Branding" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <Input type="text" value={createForm.description ?? ''} onChange={(e) => setCreateForm({ ...createForm, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
@@ -222,22 +222,22 @@ export function FeatureFlagsPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <Input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Feature Flag</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Feature Flag</label>
             <select value={overrideForm.flag_id} onChange={(e) => setOverrideForm({ ...overrideForm, flag_id: e.target.value })} className={selectClass}>
               <option value="">Select a flag...</option>
               {flags.map(f => <option key={f.id} value={f.id}>{f.display_name}</option>)}
             </select>
           </div>
           <div className="flex items-center gap-2">
-            <input type="checkbox" id="override-enabled" checked={overrideForm.enabled} onChange={(e) => setOverrideForm({ ...overrideForm, enabled: e.target.checked })} className="h-4 w-4 rounded border-[#1e2130]" />
-            <label htmlFor="override-enabled" className="text-sm font-medium text-[#e2e5eb]">Enabled</label>
+            <input type="checkbox" id="override-enabled" checked={overrideForm.enabled} onChange={(e) => setOverrideForm({ ...overrideForm, enabled: e.target.checked })} className="h-4 w-4 rounded border-border" />
+            <label htmlFor="override-enabled" className="text-sm font-medium text-foreground">Enabled</label>
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <Input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason" />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/GalleryManagementPage.tsx b/frontend/src/pages/admin/GalleryManagementPage.tsx
index 939fcc03..82252c3b 100644
--- a/frontend/src/pages/admin/GalleryManagementPage.tsx
+++ b/frontend/src/pages/admin/GalleryManagementPage.tsx
@@ -89,7 +89,7 @@ function SortOrderInput({
         }
       }}
       className={cn(
-        'w-20 rounded-[8px] border border-[#1e2130] bg-[#14161d] px-2 py-1 text-sm text-[#e2e5eb]',
+        'w-20 rounded-[8px] border border-border bg-card px-2 py-1 text-sm text-foreground',
         'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
         disabled && 'cursor-not-allowed opacity-50',
       )}
@@ -117,19 +117,19 @@ function FilterBar({
   return (
     <div className="flex flex-wrap items-center gap-3">
       <div className="relative flex-1 min-w-[180px] max-w-xs">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#848b9b] pointer-events-none" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
         <input
           type="text"
           placeholder="Search by name…"
           value={search}
           onChange={e => onSearchChange(e.target.value)}
           className={cn(
-            'w-full rounded-lg border border-[#1e2130] bg-[#14161d] pl-9 pr-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
+            'w-full rounded-lg border border-border bg-card pl-9 pr-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
             'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
           )}
         />
       </div>
-      <div className="flex rounded-lg border border-[#1e2130] overflow-hidden text-sm">
+      <div className="flex rounded-lg border border-border overflow-hidden text-sm">
         {(['all', 'featured', 'unfeatured'] as FilterMode[]).map(mode => (
           <button
             key={mode}
@@ -138,7 +138,7 @@ function FilterBar({
               'px-3 py-1.5 capitalize transition-colors',
               filter === mode
                 ? 'bg-primary text-white font-semibold'
-                : 'text-[#848b9b] hover:text-[#e2e5eb] bg-[#14161d]',
+                : 'text-muted-foreground hover:text-foreground bg-card',
             )}
           >
             {mode}
@@ -166,7 +166,7 @@ function FlowsTable({
 }) {
   if (flows.length === 0) {
     return (
-      <p className="py-8 text-center text-sm text-[#848b9b]">No flows match the current filter.</p>
+      <p className="py-8 text-center text-sm text-muted-foreground">No flows match the current filter.</p>
     )
   }
 
@@ -174,19 +174,19 @@ function FlowsTable({
     <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-[#1e2130] text-left">
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Name</th>
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Type</th>
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Featured</th>
-            <th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Sort Order</th>
+          <tr className="border-b border-border text-left">
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Name</th>
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Type</th>
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Featured</th>
+            <th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Sort Order</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-border">
           {flows.map(flow => (
             <tr key={flow.id} className="group hover:bg-[rgba(255,255,255,0.02)] transition-colors">
-              <td className="py-3 pr-4 text-[#e2e5eb] font-medium">{flow.name}</td>
+              <td className="py-3 pr-4 text-foreground font-medium">{flow.name}</td>
               <td className="py-3 pr-4">
-                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border border-[#1e2130] text-[#848b9b]">
+                <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border border-border text-muted-foreground">
                   {flow.tree_type}
                 </span>
               </td>
@@ -234,7 +234,7 @@ function ScriptsTable({
 }) {
   if (scripts.length === 0) {
     return (
-      <p className="py-8 text-center text-sm text-[#848b9b]">No scripts match the current filter.</p>
+      <p className="py-8 text-center text-sm text-muted-foreground">No scripts match the current filter.</p>
     )
   }
 
@@ -242,24 +242,24 @@ function ScriptsTable({
     <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-[#1e2130] text-left">
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Name</th>
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Status</th>
-            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Featured</th>
-            <th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Sort Order</th>
+          <tr className="border-b border-border text-left">
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Name</th>
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Status</th>
+            <th className="pb-3 pr-4 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Featured</th>
+            <th className="pb-3 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Sort Order</th>
           </tr>
         </thead>
         <tbody className="divide-y divide-border">
           {scripts.map(script => (
             <tr key={script.id} className="group hover:bg-[rgba(255,255,255,0.02)] transition-colors">
-              <td className="py-3 pr-4 text-[#e2e5eb] font-medium">{script.name}</td>
+              <td className="py-3 pr-4 text-foreground font-medium">{script.name}</td>
               <td className="py-3 pr-4">
                 <span
                   className={cn(
                     'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] rounded-full px-2 py-0.5 border',
                     script.is_active
                       ? 'border-emerald-400/30 text-emerald-400 bg-emerald-400/10'
-                      : 'border-[#1e2130] text-[#848b9b]',
+                      : 'border-border text-muted-foreground',
                   )}
                 >
                   {script.is_active ? 'Active' : 'Inactive'}
@@ -417,7 +417,7 @@ export default function GalleryManagementPage() {
       />
 
       {loading ? (
-        <div className="flex items-center justify-center py-16 text-[#848b9b] text-sm">
+        <div className="flex items-center justify-center py-16 text-muted-foreground text-sm">
           Loading gallery items…
         </div>
       ) : (
@@ -426,14 +426,14 @@ export default function GalleryManagementPage() {
           <div className="flex gap-4 flex-wrap">
             <div className="card-flat rounded-[12px] px-4 py-3 flex items-center gap-3">
               <Star className="h-4 w-4 text-amber-400 fill-amber-400" />
-              <span className="text-sm text-[#848b9b]">
-                <span className="text-[#e2e5eb] font-semibold">{featuredFlowCount}</span> featured flow{featuredFlowCount !== 1 ? 's' : ''}
+              <span className="text-sm text-muted-foreground">
+                <span className="text-foreground font-semibold">{featuredFlowCount}</span> featured flow{featuredFlowCount !== 1 ? 's' : ''}
               </span>
             </div>
             <div className="card-flat rounded-[12px] px-4 py-3 flex items-center gap-3">
               <Star className="h-4 w-4 text-amber-400 fill-amber-400" />
-              <span className="text-sm text-[#848b9b]">
-                <span className="text-[#e2e5eb] font-semibold">{featuredScriptCount}</span> featured script{featuredScriptCount !== 1 ? 's' : ''}
+              <span className="text-sm text-muted-foreground">
+                <span className="text-foreground font-semibold">{featuredScriptCount}</span> featured script{featuredScriptCount !== 1 ? 's' : ''}
               </span>
             </div>
           </div>
@@ -442,8 +442,8 @@ export default function GalleryManagementPage() {
           <section>
             <div className="mb-4 flex items-center justify-between gap-4 flex-wrap">
               <div>
-                <h2 className="text-base font-semibold text-[#e2e5eb]">Featured Flows</h2>
-                <p className="text-xs text-[#848b9b] mt-0.5">
+                <h2 className="text-base font-semibold text-foreground">Featured Flows</h2>
+                <p className="text-xs text-muted-foreground mt-0.5">
                   Toggle flows to show in the gallery. Lower sort order = shown first.
                 </p>
               </div>
@@ -469,8 +469,8 @@ export default function GalleryManagementPage() {
           <section>
             <div className="mb-4 flex items-center justify-between gap-4 flex-wrap">
               <div>
-                <h2 className="text-base font-semibold text-[#e2e5eb]">Featured Scripts</h2>
-                <p className="text-xs text-[#848b9b] mt-0.5">
+                <h2 className="text-base font-semibold text-foreground">Featured Scripts</h2>
+                <p className="text-xs text-muted-foreground mt-0.5">
                   Toggle scripts to show in the gallery. Lower sort order = shown first.
                 </p>
               </div>
diff --git a/frontend/src/pages/admin/GlobalCategoriesPage.tsx b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
index a2f735e4..bf633381 100644
--- a/frontend/src/pages/admin/GlobalCategoriesPage.tsx
+++ b/frontend/src/pages/admin/GlobalCategoriesPage.tsx
@@ -73,10 +73,10 @@ export function GlobalCategoriesPage() {
   }
 
   const columns: Column<AdminCategory>[] = [
-    { key: 'name', header: 'Name', render: (c) => <span className="font-medium text-[#e2e5eb]">{c.name}</span> },
-    { key: 'slug', header: 'Slug', render: (c) => <span className="text-sm text-[#848b9b]">{c.slug}</span> },
-    { key: 'description', header: 'Description', render: (c) => <span className="text-sm text-[#848b9b]">{c.description || '-'}</span> },
-    { key: 'tree_count', header: 'Trees', render: (c) => <span className="text-sm text-[#848b9b]">{c.tree_count}</span> },
+    { key: 'name', header: 'Name', render: (c) => <span className="font-medium text-foreground">{c.name}</span> },
+    { key: 'slug', header: 'Slug', render: (c) => <span className="text-sm text-muted-foreground">{c.slug}</span> },
+    { key: 'description', header: 'Description', render: (c) => <span className="text-sm text-muted-foreground">{c.description || '-'}</span> },
+    { key: 'tree_count', header: 'Trees', render: (c) => <span className="text-sm text-muted-foreground">{c.tree_count}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (c) => (
@@ -124,15 +124,15 @@ export function GlobalCategoriesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <Input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <Input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
@@ -153,15 +153,15 @@ export function GlobalCategoriesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <Input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="e.g. Networking" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Slug</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
             <Input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="e.g. networking" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Description</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
             <Input type="text" value={form.description ?? ''} onChange={(e) => setForm({ ...form, description: e.target.value || null })} placeholder="Optional description" />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/InviteCodesPage.tsx b/frontend/src/pages/admin/InviteCodesPage.tsx
index 4eb74255..77057a9c 100644
--- a/frontend/src/pages/admin/InviteCodesPage.tsx
+++ b/frontend/src/pages/admin/InviteCodesPage.tsx
@@ -110,8 +110,8 @@ export function InviteCodesPage() {
   }
 
   const selectClass = cn(
-    'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-    'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   const columns: Column<InviteCodeResponse>[] = [
@@ -119,7 +119,7 @@ export function InviteCodesPage() {
       key: 'code',
       header: 'Code',
       render: (c) => (
-        <code className="rounded bg-accent px-2 py-1 text-sm font-mono text-[#848b9b]">{c.code}</code>
+        <code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
       ),
     },
     {
@@ -130,12 +130,12 @@ export function InviteCodesPage() {
           {c.email_sent ? (
             <MailCheck className="h-3.5 w-3.5 text-emerald-400" />
           ) : (
-            <Mail className="h-3.5 w-3.5 text-[#848b9b]" />
+            <Mail className="h-3.5 w-3.5 text-muted-foreground" />
           )}
-          <span className="text-sm text-[#848b9b]">{c.email}</span>
+          <span className="text-sm text-muted-foreground">{c.email}</span>
         </div>
       ) : (
-        <span className="text-sm text-[#848b9b]">&mdash;</span>
+        <span className="text-sm text-muted-foreground">&mdash;</span>
       ),
     },
     {
@@ -151,9 +151,9 @@ export function InviteCodesPage() {
       key: 'trial',
       header: 'Trial',
       render: (c) => c.has_trial ? (
-        <span className="text-sm text-[#848b9b]">{c.trial_duration_days}d</span>
+        <span className="text-sm text-muted-foreground">{c.trial_duration_days}d</span>
       ) : (
-        <span className="text-sm text-[#848b9b]">&mdash;</span>
+        <span className="text-sm text-muted-foreground">&mdash;</span>
       ),
     },
     {
@@ -170,7 +170,7 @@ export function InviteCodesPage() {
       key: 'expires_at',
       header: 'Expires',
       render: (c) => (
-        <span className="text-sm text-[#848b9b]">
+        <span className="text-sm text-muted-foreground">
           {c.expires_at ? new Date(c.expires_at).toLocaleDateString() : 'Never'}
         </span>
       ),
@@ -179,7 +179,7 @@ export function InviteCodesPage() {
       key: 'created_at',
       header: 'Created',
       render: (c) => (
-        <span className="text-sm text-[#848b9b]">
+        <span className="text-sm text-muted-foreground">
           {new Date(c.created_at).toLocaleDateString()}
         </span>
       ),
@@ -254,7 +254,7 @@ export function InviteCodesPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Recipient Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
             <Input
               type="email"
               value={email}
@@ -264,7 +264,7 @@ export function InviteCodesPage() {
           </div>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Plan</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
             <select
               aria-label="Plan"
               value={assignedPlan}
@@ -283,7 +283,7 @@ export function InviteCodesPage() {
 
           {assignedPlan !== 'free' && (
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Trial Duration (days)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
               <Input
                 type="number"
                 value={trialDays}
@@ -292,12 +292,12 @@ export function InviteCodesPage() {
                 min={1}
                 max={90}
               />
-              <p className="mt-1 text-xs text-[#848b9b]">Leave empty for no trial — account gets full plan immediately.</p>
+              <p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial — account gets full plan immediately.</p>
             </div>
           )}
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Expires in (days)</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
             <Input
               type="number"
               value={expiresInDays}
@@ -307,7 +307,7 @@ export function InviteCodesPage() {
           </div>
 
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <Input
               type="text"
               value={note}
diff --git a/frontend/src/pages/admin/PlanLimitsPage.tsx b/frontend/src/pages/admin/PlanLimitsPage.tsx
index 4f777d00..5e76aa0a 100644
--- a/frontend/src/pages/admin/PlanLimitsPage.tsx
+++ b/frontend/src/pages/admin/PlanLimitsPage.tsx
@@ -76,16 +76,16 @@ export function PlanLimitsPage() {
   }
 
   const planColumns: Column<PlanLimitConfig>[] = [
-    { key: 'plan', header: 'Plan', render: (p) => <span className="font-medium text-[#e2e5eb] capitalize">{p.plan}</span> },
-    { key: 'max_trees', header: 'Max Trees', render: (p) => <span className="text-sm text-[#848b9b]">{p.max_trees ?? 'Unlimited'}</span> },
-    { key: 'max_sessions', header: 'Sessions/Month', render: (p) => <span className="text-sm text-[#848b9b]">{p.max_sessions_per_month ?? 'Unlimited'}</span> },
-    { key: 'max_users', header: 'Max Users', render: (p) => <span className="text-sm text-[#848b9b]">{p.max_users ?? 'Unlimited'}</span> },
+    { key: 'plan', header: 'Plan', render: (p) => <span className="font-medium text-foreground capitalize">{p.plan}</span> },
+    { key: 'max_trees', header: 'Max Trees', render: (p) => <span className="text-sm text-muted-foreground">{p.max_trees ?? 'Unlimited'}</span> },
+    { key: 'max_sessions', header: 'Sessions/Month', render: (p) => <span className="text-sm text-muted-foreground">{p.max_sessions_per_month ?? 'Unlimited'}</span> },
+    { key: 'max_users', header: 'Max Users', render: (p) => <span className="text-sm text-muted-foreground">{p.max_users ?? 'Unlimited'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (p) => (
         <button
           onClick={() => setEditPlan({ ...p })}
-          className="rounded-md px-3 py-1 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="rounded-md px-3 py-1 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           Edit
         </button>
@@ -94,11 +94,11 @@ export function PlanLimitsPage() {
   ]
 
   const overrideColumns: Column<AccountOverrideResponse>[] = [
-    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-[#e2e5eb]">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
-    { key: 'max_trees', header: 'Max Trees', render: (o) => <span className="text-sm text-[#848b9b]">{o.override_max_trees ?? '-'}</span> },
-    { key: 'max_sessions', header: 'Sessions/Month', render: (o) => <span className="text-sm text-[#848b9b]">{o.override_max_sessions_per_month ?? '-'}</span> },
-    { key: 'max_users', header: 'Max Users', render: (o) => <span className="text-sm text-[#848b9b]">{o.override_max_users ?? '-'}</span> },
-    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-[#848b9b]">{o.note || '-'}</span> },
+    { key: 'account', header: 'Account', render: (o) => <span className="text-sm font-medium text-foreground">{o.account_display_code || o.account_id.slice(0, 8)}</span> },
+    { key: 'max_trees', header: 'Max Trees', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_trees ?? '-'}</span> },
+    { key: 'max_sessions', header: 'Sessions/Month', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_sessions_per_month ?? '-'}</span> },
+    { key: 'max_users', header: 'Max Users', render: (o) => <span className="text-sm text-muted-foreground">{o.override_max_users ?? '-'}</span> },
+    { key: 'note', header: 'Note', render: (o) => <span className="text-sm text-muted-foreground">{o.note || '-'}</span> },
     {
       key: 'actions', header: '', className: 'w-12',
       render: (o) => (
@@ -114,7 +114,7 @@ export function PlanLimitsPage() {
       <PageHeader title="Plan Limits" description="Configure plan tier limits and account-specific overrides" />
 
       <div>
-        <h2 className="text-lg font-semibold text-[#e2e5eb]">Plan Defaults</h2>
+        <h2 className="text-lg font-semibold text-foreground">Plan Defaults</h2>
         <div className="mt-3">
           <DataTable columns={planColumns} data={plans} keyExtractor={(p) => p.plan} isLoading={loading} />
         </div>
@@ -122,7 +122,7 @@ export function PlanLimitsPage() {
 
       <div>
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-[#e2e5eb]">Account Overrides</h2>
+          <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
           <Button onClick={() => setCreateOverride(true)}>
             <Plus className="h-4 w-4" />
             Add Override
@@ -155,15 +155,15 @@ export function PlanLimitsPage() {
         {editPlan && (
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Trees (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Trees (empty = unlimited)</label>
               <Input type="number" value={editPlan.max_trees ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_trees: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Sessions/Month (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month (empty = unlimited)</label>
               <Input type="number" value={editPlan.max_sessions_per_month ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Users (empty = unlimited)</label>
+              <label className="mb-1 block text-sm font-medium text-foreground">Max Users (empty = unlimited)</label>
               <Input type="number" value={editPlan.max_users ?? ''} onChange={(e) => setEditPlan({ ...editPlan, max_users: e.target.value ? parseInt(e.target.value) : null })} />
             </div>
           </div>
@@ -185,23 +185,23 @@ export function PlanLimitsPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <Input type="text" value={overrideForm.account_display_code} onChange={(e) => setOverrideForm({ ...overrideForm, account_display_code: e.target.value })} placeholder="e.g. ABC-1234" />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Trees Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Trees Override</label>
             <Input type="number" value={overrideForm.override_max_trees ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_trees: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Sessions/Month Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Sessions/Month Override</label>
             <Input type="number" value={overrideForm.override_max_sessions_per_month ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_sessions_per_month: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Max Users Override</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Max Users Override</label>
             <Input type="number" value={overrideForm.override_max_users ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, override_max_users: e.target.value ? parseInt(e.target.value) : null })} />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Note</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
             <Input type="text" value={overrideForm.note ?? ''} onChange={(e) => setOverrideForm({ ...overrideForm, note: e.target.value || null })} placeholder="Reason for override" />
           </div>
         </div>
diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx
index a570fde3..435016b6 100644
--- a/frontend/src/pages/admin/SettingsPage.tsx
+++ b/frontend/src/pages/admin/SettingsPage.tsx
@@ -47,11 +47,11 @@ export function SettingsPage() {
     <div className="space-y-6">
       <PageHeader title="Platform Settings" description="Global platform configuration" />
 
-      <div className="max-w-xl space-y-6 bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
+      <div className="max-w-xl space-y-6 bg-card border border-border rounded-xl p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="font-medium text-[#e2e5eb]">Email Verification</h3>
-            <p className="text-sm text-[#848b9b]">
+            <h3 className="font-medium text-foreground">Email Verification</h3>
+            <p className="text-sm text-muted-foreground">
               When enabled, unverified users see a banner prompting them to verify their email.
             </p>
           </div>
@@ -59,7 +59,7 @@ export function SettingsPage() {
             onClick={() => setSettings({ ...settings, email_verification_enabled: !emailVerificationEnabled })}
             className={cn(
               'h-6 w-10 rounded-full transition-colors',
-              emailVerificationEnabled ? 'bg-[#22d3ee]' : 'bg-accent'
+              emailVerificationEnabled ? 'bg-primary' : 'bg-accent'
             )}
           >
             <div className={cn(
@@ -71,8 +71,8 @@ export function SettingsPage() {
 
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="font-medium text-[#e2e5eb]">Maintenance Mode</h3>
-            <p className="text-sm text-[#848b9b]">
+            <h3 className="font-medium text-foreground">Maintenance Mode</h3>
+            <p className="text-sm text-muted-foreground">
               When enabled, users will see a maintenance message instead of the app.
             </p>
           </div>
@@ -93,7 +93,7 @@ export function SettingsPage() {
 
         {maintenanceMode && (
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Maintenance Message</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Maintenance Message</label>
             <Textarea
               value={maintenanceMessage}
               onChange={(e) => setSettings({ ...settings, maintenance_message: e.target.value })}
@@ -103,13 +103,13 @@ export function SettingsPage() {
           </div>
         )}
 
-        <div className="border-t border-[#1e2130] pt-4">
+        <div className="border-t border-border pt-4">
           <button
             onClick={handleSave}
             disabled={saving}
             className={cn(
               'rounded-md px-4 py-2 text-sm font-medium',
-              'bg-[#22d3ee] text-white hover:brightness-110',
+              'bg-primary text-white hover:brightness-110',
               'disabled:opacity-50'
             )}
           >
diff --git a/frontend/src/pages/admin/SurveyInvitesPage.tsx b/frontend/src/pages/admin/SurveyInvitesPage.tsx
index 1898e11c..5b80e134 100644
--- a/frontend/src/pages/admin/SurveyInvitesPage.tsx
+++ b/frontend/src/pages/admin/SurveyInvitesPage.tsx
@@ -71,10 +71,10 @@ export default function SurveyInvitesPage() {
 
       {/* Create Invite Section */}
       <div className="card-flat p-6">
-        <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">Create Invite</h3>
+        <h3 className="font-heading text-sm font-semibold text-foreground mb-4">Create Invite</h3>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
           <div className="flex-1">
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-1.5 block">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1.5 block">
               Recipient Name
             </label>
             <input
@@ -82,11 +82,11 @@ export default function SurveyInvitesPage() {
               value={name}
               onChange={e => setName(e.target.value)}
               placeholder="John Smith"
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary/30 focus:outline-hidden"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden"
             />
           </div>
           <div className="flex-1">
-            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-1.5 block">
+            <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1.5 block">
               Email (optional)
             </label>
             <input
@@ -94,14 +94,14 @@ export default function SurveyInvitesPage() {
               value={email}
               onChange={e => setEmail(e.target.value)}
               placeholder="john@example.com"
-              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary/30 focus:outline-hidden"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/30 focus:outline-hidden"
             />
           </div>
           <div className="flex gap-2">
             <button
               onClick={() => handleCreate(false)}
               disabled={creating || !name.trim()}
-              className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2 className="h-4 w-4" />}
               Generate Link
@@ -109,7 +109,7 @@ export default function SurveyInvitesPage() {
             <button
               onClick={() => handleCreate(true)}
               disabled={creating || !name.trim() || !email.trim()}
-              className="inline-flex items-center gap-2 rounded-lg bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-[#2a2f3d] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-input border border-border px-4 py-2 text-sm font-medium text-foreground hover:border-border-hover active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
               Send Email
@@ -125,14 +125,14 @@ export default function SurveyInvitesPage() {
           <div className="mt-4 rounded-lg border border-primary/[0.15] bg-primary/[0.04] p-4">
             <div className="flex items-center justify-between gap-3">
               <div className="min-w-0 flex-1">
-                <p className="text-xs text-[#848b9b] mb-1">
+                <p className="text-xs text-muted-foreground mb-1">
                   {lastCreated.email_sent ? 'Email sent to ' + lastCreated.recipient_email + '! Link:' : 'Share this link with ' + lastCreated.recipient_name + ':'}
                 </p>
-                <p className="truncate text-sm font-mono text-[#e2e5eb]">{lastCreated.survey_url}</p>
+                <p className="truncate text-sm font-mono text-foreground">{lastCreated.survey_url}</p>
               </div>
               <button
                 onClick={() => handleCopy(lastCreated.survey_url)}
-                className="shrink-0 rounded-lg p-2 text-[#848b9b] hover:bg-[#1e2130] hover:text-[#e2e5eb] transition-colors"
+                className="shrink-0 rounded-lg p-2 text-muted-foreground hover:bg-border hover:text-foreground transition-colors"
               >
                 {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
               </button>
@@ -146,26 +146,26 @@ export default function SurveyInvitesPage() {
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead>
-              <tr className="border-b border-[#1e2130]">
-                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Name</th>
-                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Email</th>
-                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Status</th>
-                <th className="px-4 py-3 text-center font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Sent</th>
-                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Created</th>
-                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Completed</th>
-                <th className="px-4 py-3 text-center font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">Link</th>
+              <tr className="border-b border-border">
+                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Name</th>
+                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Email</th>
+                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Status</th>
+                <th className="px-4 py-3 text-center font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Sent</th>
+                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Created</th>
+                <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Completed</th>
+                <th className="px-4 py-3 text-center font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">Link</th>
               </tr>
             </thead>
             <tbody>
               {loading ? (
-                <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-[#848b9b]">Loading...</td></tr>
+                <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-muted-foreground">Loading...</td></tr>
               ) : invites.length === 0 ? (
-                <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-[#848b9b]">No invites yet</td></tr>
+                <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-muted-foreground">No invites yet</td></tr>
               ) : (
                 invites.map(invite => (
-                  <tr key={invite.id} className="border-b border-[#1e2130]/50 hover:bg-[#14161d] transition-colors">
-                    <td className="px-4 py-3 text-sm text-[#e2e5eb]">{invite.recipient_name}</td>
-                    <td className="px-4 py-3 text-sm text-[#848b9b]">{invite.recipient_email || '—'}</td>
+                  <tr key={invite.id} className="border-b border-border/50 hover:bg-card transition-colors">
+                    <td className="px-4 py-3 text-sm text-foreground">{invite.recipient_name}</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">{invite.recipient_email || '—'}</td>
                     <td className="px-4 py-3">
                       <span className={cn(
                         'inline-flex items-center rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider',
@@ -178,17 +178,17 @@ export default function SurveyInvitesPage() {
                     </td>
                     <td className="px-4 py-3 text-center">
                       {invite.email_sent ? (
-                        <Mail className="mx-auto h-4 w-4 text-[#848b9b]" />
+                        <Mail className="mx-auto h-4 w-4 text-muted-foreground" />
                       ) : (
-                        <span className="text-[#848b9b]/50">—</span>
+                        <span className="text-muted-foreground/50">—</span>
                       )}
                     </td>
-                    <td className="px-4 py-3 font-sans text-xs text-xs text-[#848b9b]">{formatDate(invite.created_at)}</td>
-                    <td className="px-4 py-3 font-sans text-xs text-xs text-[#848b9b]">{invite.completed_at ? formatDate(invite.completed_at) : '—'}</td>
+                    <td className="px-4 py-3 font-sans text-xs text-xs text-muted-foreground">{formatDate(invite.created_at)}</td>
+                    <td className="px-4 py-3 font-sans text-xs text-xs text-muted-foreground">{invite.completed_at ? formatDate(invite.completed_at) : '—'}</td>
                     <td className="px-4 py-3 text-center">
                       <button
                         onClick={() => handleCopy(invite.survey_url)}
-                        className="rounded-lg p-1.5 text-[#848b9b] hover:bg-[#1e2130] hover:text-[#e2e5eb] transition-colors"
+                        className="rounded-lg p-1.5 text-muted-foreground hover:bg-border hover:text-foreground transition-colors"
                         title="Copy survey link"
                       >
                         <Copy className="h-3.5 w-3.5" />
diff --git a/frontend/src/pages/admin/SurveyResponsesPage.tsx b/frontend/src/pages/admin/SurveyResponsesPage.tsx
index fe8c4a2d..29c74fb6 100644
--- a/frontend/src/pages/admin/SurveyResponsesPage.tsx
+++ b/frontend/src/pages/admin/SurveyResponsesPage.tsx
@@ -41,7 +41,7 @@ const QUESTIONS: { id: string; num: string; text: string; type: 'mc' | 'mc-multi
 
 function AnswerDisplay({ value, type }: { value: string | string[] | undefined; type: string }) {
   if (!value || (Array.isArray(value) && value.length === 0)) {
-    return <p className="text-sm italic text-[#848b9b]/60">No answer</p>
+    return <p className="text-sm italic text-muted-foreground/60">No answer</p>
   }
 
   if (type === 'mc-multi' && Array.isArray(value)) {
@@ -50,7 +50,7 @@ function AnswerDisplay({ value, type }: { value: string | string[] | undefined;
         {value.map((v, i) => (
           <span
             key={i}
-            className="inline-block rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#22d3ee]"
+            className="inline-block rounded-full bg-accent-dim px-2.5 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider text-primary"
           >
             {v}
           </span>
@@ -63,8 +63,8 @@ function AnswerDisplay({ value, type }: { value: string | string[] | undefined;
     return (
       <ol className="space-y-1">
         {value.map((v, i) => (
-          <li key={i} className="flex items-start gap-2 text-sm text-[#e2e5eb]/90">
-            <span className="font-sans text-xs text-xs font-bold text-[#22d3ee]">{i + 1}.</span>
+          <li key={i} className="flex items-start gap-2 text-sm text-foreground/90">
+            <span className="font-sans text-xs text-xs font-bold text-primary">{i + 1}.</span>
             {v}
           </li>
         ))}
@@ -75,12 +75,12 @@ function AnswerDisplay({ value, type }: { value: string | string[] | undefined;
   if (type === 'text') {
     return (
       <div className="border-l-2 border-primary/30 pl-3">
-        <p className="text-sm text-[#e2e5eb]/90 whitespace-pre-wrap">{String(value)}</p>
+        <p className="text-sm text-foreground/90 whitespace-pre-wrap">{String(value)}</p>
       </div>
     )
   }
 
-  return <p className="text-sm text-[#e2e5eb]/90">{String(value)}</p>
+  return <p className="text-sm text-foreground/90">{String(value)}</p>
 }
 
 function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
@@ -104,10 +104,10 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
                   border: '1px solid var(--glass-border)',
                 }}
               >
-                <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#22d3ee] mb-1">
+                <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-primary mb-1">
                   Q{q.num}
                 </p>
-                <p className="text-xs text-[#848b9b] mb-2">{q.text}</p>
+                <p className="text-xs text-muted-foreground mb-2">{q.text}</p>
                 <AnswerDisplay value={response.responses[q.id]} type={q.type} />
               </div>
             ))}
@@ -150,24 +150,24 @@ function ResponseRow({
     <>
       <tr
         className={cn(
-          'border-b border-[#1e2130]/50 transition-colors cursor-pointer',
+          'border-b border-border/50 transition-colors cursor-pointer',
           !response.is_read && 'bg-primary/3',
-          'hover:bg-[#14161d]'
+          'hover:bg-card'
         )}
       >
         {/* Checkbox */}
         <td className="px-2 py-3 w-8" onClick={e => { e.stopPropagation(); onSelect() }}>
           {isSelected ? (
-            <CheckSquare className="h-4 w-4 text-[#22d3ee] cursor-pointer" />
+            <CheckSquare className="h-4 w-4 text-primary cursor-pointer" />
           ) : (
-            <Square className="h-4 w-4 text-[#848b9b]/40 cursor-pointer hover:text-[#848b9b]" />
+            <Square className="h-4 w-4 text-muted-foreground/40 cursor-pointer hover:text-muted-foreground" />
           )}
         </td>
 
         {/* Unread dot */}
         <td className="px-1 py-3 w-6" onClick={onToggle}>
           {!response.is_read && (
-            <Circle className="h-2.5 w-2.5 fill-primary text-[#22d3ee]" />
+            <Circle className="h-2.5 w-2.5 fill-primary text-primary" />
           )}
         </td>
 
@@ -175,46 +175,46 @@ function ResponseRow({
         <td className="px-2 py-3 w-8" onClick={onToggle}>
           <ChevronDown
             className={cn(
-              'h-4 w-4 text-[#848b9b] transition-transform',
+              'h-4 w-4 text-muted-foreground transition-transform',
               isExpanded && 'rotate-180'
             )}
           />
         </td>
-        <td className="px-4 py-3 font-sans text-xs text-xs text-[#848b9b]" onClick={onToggle}>{index + 1}</td>
-        <td className={cn('px-4 py-3 text-sm', !response.is_read ? 'text-[#e2e5eb] font-medium' : 'text-[#e2e5eb]')} onClick={onToggle}>
-          {response.respondent_name || <span className="text-[#848b9b] italic">Anonymous</span>}
+        <td className="px-4 py-3 font-sans text-xs text-xs text-muted-foreground" onClick={onToggle}>{index + 1}</td>
+        <td className={cn('px-4 py-3 text-sm', !response.is_read ? 'text-foreground font-medium' : 'text-foreground')} onClick={onToggle}>
+          {response.respondent_name || <span className="text-muted-foreground italic">Anonymous</span>}
         </td>
         <td className="px-4 py-3" onClick={onToggle}>
           {response.source === 'invite' ? (
-            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider bg-[rgba(34,211,238,0.10)] text-[#22d3ee]">
+            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider bg-accent-dim text-primary">
               <User className="h-3 w-3" />
               Invite
               {response.invite_name && (
-                <span className="text-[#22d3ee]/70">({response.invite_name})</span>
+                <span className="text-primary/70">({response.invite_name})</span>
               )}
             </span>
           ) : (
-            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider bg-brand-border text-[#848b9b]">
+            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wider bg-brand-border text-muted-foreground">
               <Link2 className="h-3 w-3" />
               Direct
             </span>
           )}
         </td>
-        <td className="px-4 py-3 font-sans text-xs text-xs text-[#848b9b]" onClick={onToggle}>
+        <td className="px-4 py-3 font-sans text-xs text-xs text-muted-foreground" onClick={onToggle}>
           {new Date(response.created_at).toLocaleDateString('en-US', {
             month: 'short',
             day: 'numeric',
             year: 'numeric',
           })}
         </td>
-        <td className="px-4 py-3 text-sm text-[#848b9b]" onClick={onToggle}>
+        <td className="px-4 py-3 text-sm text-muted-foreground" onClick={onToggle}>
           {answeredCount} / {QUESTIONS.length}
         </td>
         {/* Actions */}
         <td className="px-3 py-3 w-10 relative">
           <button
             onClick={e => { e.stopPropagation(); setShowMenu(!showMenu) }}
-            className="p-1.5 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="p-1.5 rounded-lg hover:bg-border text-muted-foreground hover:text-foreground transition-colors"
           >
             <MoreHorizontal className="h-4 w-4" />
           </button>
@@ -227,14 +227,14 @@ function ResponseRow({
               >
                 <button
                   onClick={() => { onMarkRead(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#191c25] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-input transition-colors"
                 >
                   {response.is_read ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                   {response.is_read ? 'Mark Unread' : 'Mark Read'}
                 </button>
                 <button
                   onClick={() => { onArchive(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#191c25] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-input transition-colors"
                 >
                   {response.archived_at ? <ArchiveRestore className="h-3.5 w-3.5" /> : <Archive className="h-3.5 w-3.5" />}
                   {response.archived_at ? 'Unarchive' : 'Archive'}
@@ -408,7 +408,7 @@ export default function SurveyResponsesPage() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <Loader2 className="h-6 w-6 animate-spin text-[#22d3ee]" />
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
       </div>
     )
   }
@@ -436,8 +436,8 @@ export default function SurveyResponsesPage() {
               className={cn(
                 'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium transition-colors border',
                 showArchived
-                  ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border-primary/20'
-                  : 'bg-[#191c25] text-[#848b9b] border-[#1e2130] hover:border-[#2a2f3d]'
+                  ? 'bg-accent-dim text-primary border-primary/20'
+                  : 'bg-input text-muted-foreground border-border hover:border-border-hover'
               )}
             >
               <Archive className="h-3.5 w-3.5" />
@@ -446,7 +446,7 @@ export default function SurveyResponsesPage() {
             <button
               onClick={handleExport}
               disabled={exporting || responses.length === 0}
-              className="inline-flex items-center gap-2 rounded-lg bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#e2e5eb] transition-colors hover:border-[#2a2f3d] disabled:opacity-50"
+              className="inline-flex items-center gap-2 rounded-lg bg-input border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-border-hover disabled:opacity-50"
             >
               {exporting ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -468,28 +468,28 @@ export default function SurveyResponsesPage() {
       {/* Stat cards */}
       <div className="flex gap-4">
         <div className="card-flat px-5 py-4 flex-1">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-1">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             Total Responses
           </p>
-          <p className="text-2xl font-heading font-bold text-[#67e8f9]">
+          <p className="text-2xl font-heading font-bold text-accent-text">
             {data?.total ?? 0}
           </p>
         </div>
         <div className="card-flat px-5 py-4 flex-1">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-1">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             This Week
           </p>
-          <p className="text-2xl font-heading font-bold text-[#e2e5eb]">
+          <p className="text-2xl font-heading font-bold text-foreground">
             {data?.this_week ?? 0}
           </p>
         </div>
         <div className="card-flat px-5 py-4 flex-1">
-          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] mb-1">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground mb-1">
             Unread
           </p>
           <p className={cn(
             'text-2xl font-heading font-bold',
-            (data?.unread ?? 0) > 0 ? 'text-[#22d3ee]' : 'text-[#e2e5eb]'
+            (data?.unread ?? 0) > 0 ? 'text-primary' : 'text-foreground'
           )}>
             {data?.unread ?? 0}
           </p>
@@ -502,27 +502,27 @@ export default function SurveyResponsesPage() {
           className="flex items-center gap-3 rounded-xl px-4 py-2.5"
           style={{ background: 'rgba(6, 182, 212, 0.08)', border: '1px solid rgba(6, 182, 212, 0.15)' }}
         >
-          <span className="text-sm text-[#22d3ee] font-medium">
+          <span className="text-sm text-primary font-medium">
             {selectedIds.size} selected
           </span>
           <div className="flex-1" />
           <button
             onClick={() => handleBulkAction('mark_read')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-border transition-colors"
           >
             <Eye className="h-3.5 w-3.5" />
             Mark Read
           </button>
           <button
             onClick={() => handleBulkAction('mark_unread')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-border transition-colors"
           >
             <EyeOff className="h-3.5 w-3.5" />
             Mark Unread
           </button>
           <button
             onClick={() => handleBulkAction('archive')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-border transition-colors"
           >
             <Archive className="h-3.5 w-3.5" />
             Archive
@@ -536,7 +536,7 @@ export default function SurveyResponsesPage() {
           </button>
           <button
             onClick={() => setSelectedIds(new Set())}
-            className="px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
+            className="px-3 py-1.5 rounded-lg text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-border transition-colors"
           >
             Clear
           </button>
@@ -547,11 +547,11 @@ export default function SurveyResponsesPage() {
       <div className="card-flat overflow-hidden">
         <table className="w-full">
           <thead>
-            <tr className="border-b border-[#1e2130]/50">
+            <tr className="border-b border-border/50">
               <th className="px-2 py-3 w-8">
-                <button onClick={toggleSelectAll} className="text-[#848b9b]/40 hover:text-[#848b9b]">
+                <button onClick={toggleSelectAll} className="text-muted-foreground/40 hover:text-muted-foreground">
                   {selectedIds.size > 0 && selectedIds.size === responses.length ? (
-                    <CheckSquare className="h-4 w-4 text-[#22d3ee]" />
+                    <CheckSquare className="h-4 w-4 text-primary" />
                   ) : (
                     <Square className="h-4 w-4" />
                   )}
@@ -559,19 +559,19 @@ export default function SurveyResponsesPage() {
               </th>
               <th className="px-1 py-3 w-6" />
               <th className="px-2 py-3 w-8" />
-              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 #
               </th>
-              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Respondent
               </th>
-              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Source
               </th>
-              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Date
               </th>
-              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
+              <th className="px-4 py-3 text-left font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 Answered
               </th>
               <th className="px-3 py-3 w-10" />
@@ -580,7 +580,7 @@ export default function SurveyResponsesPage() {
           <tbody>
             {responses.length === 0 ? (
               <tr>
-                <td colSpan={9} className="px-4 py-12 text-center text-sm text-[#848b9b]">
+                <td colSpan={9} className="px-4 py-12 text-center text-sm text-muted-foreground">
                   {showArchived ? 'No archived responses.' : 'No survey responses yet.'}
                 </td>
               </tr>
diff --git a/frontend/src/pages/admin/UserDetailPage.tsx b/frontend/src/pages/admin/UserDetailPage.tsx
index c53a6974..4a133e6d 100644
--- a/frontend/src/pages/admin/UserDetailPage.tsx
+++ b/frontend/src/pages/admin/UserDetailPage.tsx
@@ -189,8 +189,8 @@ export function UserDetailPage() {
   }
 
   const selectClass = cn(
-    'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
-    'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
   )
 
   if (loading) {
@@ -224,15 +224,15 @@ export function UserDetailPage() {
       <div className="flex items-center gap-4">
         <button
           onClick={() => navigate('/admin/users')}
-          className="rounded-md border border-[#1e2130] p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+          className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ArrowLeft className="h-4 w-4" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-heading font-semibold text-[#e2e5eb]">
+          <h1 className="text-xl font-heading font-semibold text-foreground">
             {user.full_name || user.email}
           </h1>
-          <p className="text-sm text-[#848b9b]">{user.email}</p>
+          <p className="text-sm text-muted-foreground">{user.email}</p>
         </div>
         <div className="flex items-center gap-2">
           {user.is_super_admin && (
@@ -252,21 +252,21 @@ export function UserDetailPage() {
 
       {/* Account & Subscription */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             Account & Subscription
           </h2>
           <dl className="space-y-3">
             {user.account && (
               <>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-[#848b9b]">Account</dt>
-                  <dd className="text-sm text-[#e2e5eb]">{user.account.name}</dd>
+                  <dt className="text-sm text-muted-foreground">Account</dt>
+                  <dd className="text-sm text-foreground">{user.account.name}</dd>
                 </div>
                 {user.account.display_code && (
                   <div className="flex justify-between">
-                    <dt className="text-sm text-[#848b9b]">Display Code</dt>
-                    <dd className="text-sm font-mono text-[#848b9b]">{user.account.display_code}</dd>
+                    <dt className="text-sm text-muted-foreground">Display Code</dt>
+                    <dd className="text-sm font-mono text-muted-foreground">{user.account.display_code}</dd>
                   </div>
                 )}
               </>
@@ -274,13 +274,13 @@ export function UserDetailPage() {
             {user.subscription ? (
               <>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-[#848b9b]">Plan</dt>
-                  <dd className="text-sm font-semibold text-[#e2e5eb]">
+                  <dt className="text-sm text-muted-foreground">Plan</dt>
+                  <dd className="text-sm font-semibold text-foreground">
                     {user.subscription.plan.charAt(0).toUpperCase() + user.subscription.plan.slice(1)}
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-sm text-[#848b9b]">Status</dt>
+                  <dt className="text-sm text-muted-foreground">Status</dt>
                   <dd>
                     <StatusBadge variant={user.subscription.status === 'trialing' ? 'warning' : 'success'}>
                       {user.subscription.status}
@@ -289,24 +289,24 @@ export function UserDetailPage() {
                 </div>
                 {user.subscription.current_period_end && (
                   <div className="flex justify-between">
-                    <dt className="text-sm text-[#848b9b]">Period End</dt>
-                    <dd className="text-sm text-[#848b9b]">{fmt(user.subscription.current_period_end)}</dd>
+                    <dt className="text-sm text-muted-foreground">Period End</dt>
+                    <dd className="text-sm text-muted-foreground">{fmt(user.subscription.current_period_end)}</dd>
                   </div>
                 )}
               </>
             ) : (
-              <div className="text-sm text-[#848b9b]">No subscription</div>
+              <div className="text-sm text-muted-foreground">No subscription</div>
             )}
             <div className="flex justify-between">
-              <dt className="text-sm text-[#848b9b]">Joined</dt>
-              <dd className="text-sm text-[#848b9b]">{fmt(user.created_at)}</dd>
+              <dt className="text-sm text-muted-foreground">Joined</dt>
+              <dd className="text-sm text-muted-foreground">{fmt(user.created_at)}</dd>
             </div>
           </dl>
         </div>
 
         {/* Admin Actions */}
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             Admin Actions
           </h2>
           <div className="space-y-3">
@@ -317,16 +317,16 @@ export function UserDetailPage() {
                     setSelectedPlan(user.subscription?.plan || 'free')
                     setPlanModalOpen(true)
                   }}
-                  className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                  className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Shield className="h-4 w-4 text-[#848b9b]" />
+                  <Shield className="h-4 w-4 text-muted-foreground" />
                   Change Plan
                 </button>
                 <button
                   onClick={() => setTrialModalOpen(true)}
-                  className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+                  className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                 >
-                  <Clock className="h-4 w-4 text-[#848b9b]" />
+                  <Clock className="h-4 w-4 text-muted-foreground" />
                   {user.subscription?.status === 'trialing' ? 'Extend Trial' : 'Start Trial'}
                 </button>
               </>
@@ -349,9 +349,9 @@ export function UserDetailPage() {
                 setResetTempPassword(null)
                 setResetModalOpen(true)
               }}
-              className="flex w-full items-center gap-3 rounded-lg border border-[#1e2130] px-4 py-3 text-left text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
+              className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
-              <KeyRound className="h-4 w-4 text-[#848b9b]" />
+              <KeyRound className="h-4 w-4 text-muted-foreground" />
               Reset Password
             </button>
             <button
@@ -402,42 +402,42 @@ export function UserDetailPage() {
 
       {/* Invite Code Used */}
       {user.invite_code_used && (
-        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-[#848b9b]">
+        <div className="bg-card border border-border rounded-xl p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
             <Ticket className="mr-2 inline h-4 w-4" />
             Invite Code Used
           </h2>
           <dl className="grid grid-cols-2 gap-4 md:grid-cols-4">
             <div>
-              <dt className="text-xs text-[#848b9b]">Code</dt>
-              <dd className="mt-1 font-mono text-sm text-[#848b9b]">{user.invite_code_used.code}</dd>
+              <dt className="text-xs text-muted-foreground">Code</dt>
+              <dd className="mt-1 font-mono text-sm text-muted-foreground">{user.invite_code_used.code}</dd>
             </div>
             <div>
-              <dt className="text-xs text-[#848b9b]">Plan Assigned</dt>
-              <dd className="mt-1 text-sm text-[#848b9b]">
+              <dt className="text-xs text-muted-foreground">Plan Assigned</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">
                 {user.invite_code_used.assigned_plan.charAt(0).toUpperCase() + user.invite_code_used.assigned_plan.slice(1)}
               </dd>
             </div>
             <div>
-              <dt className="text-xs text-[#848b9b]">Trial Days</dt>
-              <dd className="mt-1 text-sm text-[#848b9b]">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
+              <dt className="text-xs text-muted-foreground">Trial Days</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.trial_duration_days ?? '—'}</dd>
             </div>
             <div>
-              <dt className="text-xs text-[#848b9b]">Created By</dt>
-              <dd className="mt-1 text-sm text-[#848b9b]">{user.invite_code_used.created_by_email ?? '—'}</dd>
+              <dt className="text-xs text-muted-foreground">Created By</dt>
+              <dd className="mt-1 text-sm text-muted-foreground">{user.invite_code_used.created_by_email ?? '—'}</dd>
             </div>
           </dl>
         </div>
       )}
 
       {/* Tabs: Sessions / Audit Logs */}
-      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl">
-        <div className="flex border-b border-[#1e2130]">
+      <div className="bg-card border border-border rounded-xl">
+        <div className="flex border-b border-border">
           <button
             onClick={() => setActiveTab('sessions')}
             className={cn(
               'px-6 py-3 text-sm font-medium',
-              activeTab === 'sessions' ? 'border-b-2 border-foreground text-[#e2e5eb]' : 'text-[#848b9b] hover:text-[#e2e5eb]'
+              activeTab === 'sessions' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
             )}
           >
             Sessions ({user.total_sessions})
@@ -446,7 +446,7 @@ export function UserDetailPage() {
             onClick={() => setActiveTab('audit')}
             className={cn(
               'px-6 py-3 text-sm font-medium',
-              activeTab === 'audit' ? 'border-b-2 border-foreground text-[#e2e5eb]' : 'text-[#848b9b] hover:text-[#e2e5eb]'
+              activeTab === 'audit' ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
             )}
           >
             Audit Logs ({user.total_audit_logs})
@@ -458,7 +458,7 @@ export function UserDetailPage() {
             user.recent_sessions.length > 0 ? (
               <table className="w-full">
                 <thead>
-                  <tr className="border-b border-[#1e2130] text-left text-xs text-[#848b9b]">
+                  <tr className="border-b border-border text-left text-xs text-muted-foreground">
                     <th className="pb-2 font-medium">Tree</th>
                     <th className="pb-2 font-medium">Started</th>
                     <th className="pb-2 font-medium">Completed</th>
@@ -467,17 +467,17 @@ export function UserDetailPage() {
                 </thead>
                 <tbody>
                   {user.recent_sessions.map(s => (
-                    <tr key={s.id} className="border-b border-[#1e2130]">
-                      <td className="py-3 text-sm text-[#848b9b]">{s.tree_name ?? '—'}</td>
-                      <td className="py-3 text-sm text-[#848b9b]">{fmtFull(s.started_at)}</td>
-                      <td className="py-3 text-sm text-[#848b9b]">{fmtFull(s.completed_at)}</td>
+                    <tr key={s.id} className="border-b border-border">
+                      <td className="py-3 text-sm text-muted-foreground">{s.tree_name ?? '—'}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(s.started_at)}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(s.completed_at)}</td>
                       <td className="py-3">
                         {s.outcome ? (
                           <StatusBadge variant={s.outcome === 'resolved' ? 'success' : 'default'}>
                             {s.outcome}
                           </StatusBadge>
                         ) : (
-                          <span className="text-sm text-[#848b9b]">—</span>
+                          <span className="text-sm text-muted-foreground">—</span>
                         )}
                       </td>
                     </tr>
@@ -485,7 +485,7 @@ export function UserDetailPage() {
                 </tbody>
               </table>
             ) : (
-              <div className="py-8 text-center text-sm text-[#848b9b]">No sessions yet</div>
+              <div className="py-8 text-center text-sm text-muted-foreground">No sessions yet</div>
             )
           )}
 
@@ -493,7 +493,7 @@ export function UserDetailPage() {
             user.recent_audit_logs.length > 0 ? (
               <table className="w-full">
                 <thead>
-                  <tr className="border-b border-[#1e2130] text-left text-xs text-[#848b9b]">
+                  <tr className="border-b border-border text-left text-xs text-muted-foreground">
                     <th className="pb-2 font-medium">Action</th>
                     <th className="pb-2 font-medium">Resource</th>
                     <th className="pb-2 font-medium">Time</th>
@@ -501,16 +501,16 @@ export function UserDetailPage() {
                 </thead>
                 <tbody>
                   {user.recent_audit_logs.map(a => (
-                    <tr key={a.id} className="border-b border-[#1e2130]">
-                      <td className="py-3 text-sm text-[#848b9b]">{a.action}</td>
-                      <td className="py-3 text-sm text-[#848b9b]">{a.resource_type ?? '—'}</td>
-                      <td className="py-3 text-sm text-[#848b9b]">{fmtFull(a.created_at)}</td>
+                    <tr key={a.id} className="border-b border-border">
+                      <td className="py-3 text-sm text-muted-foreground">{a.action}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{a.resource_type ?? '—'}</td>
+                      <td className="py-3 text-sm text-muted-foreground">{fmtFull(a.created_at)}</td>
                     </tr>
                   ))}
                 </tbody>
               </table>
             ) : (
-              <div className="py-8 text-center text-sm text-[#848b9b]">No audit logs yet</div>
+              <div className="py-8 text-center text-sm text-muted-foreground">No audit logs yet</div>
             )
           )}
         </div>
@@ -530,7 +530,7 @@ export function UserDetailPage() {
         }
       >
         <div>
-          <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Plan</label>
+          <label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
           <select
             aria-label="Subscription plan"
             value={selectedPlan}
@@ -560,11 +560,11 @@ export function UserDetailPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-[#848b9b]">
-            Choose how to reset the password for <span className="font-medium text-[#e2e5eb]">{user.full_name || user.email}</span>.
+          <p className="text-sm text-muted-foreground">
+            Choose how to reset the password for <span className="font-medium text-foreground">{user.full_name || user.email}</span>.
           </p>
           <div className="space-y-2">
-            <label className="flex items-start gap-3 rounded-lg border border-[#1e2130] p-3 cursor-pointer hover:bg-accent">
+            <label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
               <input
                 type="radio"
                 name="reset-mode"
@@ -574,11 +574,11 @@ export function UserDetailPage() {
                 className="mt-0.5"
               />
               <div>
-                <div className="text-sm font-medium text-[#e2e5eb]">Send Reset Email</div>
-                <div className="text-xs text-[#848b9b]">User receives an email with a reset link (30 min expiry)</div>
+                <div className="text-sm font-medium text-foreground">Send Reset Email</div>
+                <div className="text-xs text-muted-foreground">User receives an email with a reset link (30 min expiry)</div>
               </div>
             </label>
-            <label className="flex items-start gap-3 rounded-lg border border-[#1e2130] p-3 cursor-pointer hover:bg-accent">
+            <label className="flex items-start gap-3 rounded-lg border border-border p-3 cursor-pointer hover:bg-accent">
               <input
                 type="radio"
                 name="reset-mode"
@@ -588,8 +588,8 @@ export function UserDetailPage() {
                 className="mt-0.5"
               />
               <div>
-                <div className="text-sm font-medium text-[#e2e5eb]">Generate Temp Password</div>
-                <div className="text-xs text-[#848b9b]">A temporary password is generated. You share it manually.</div>
+                <div className="text-sm font-medium text-foreground">Generate Temp Password</div>
+                <div className="text-xs text-muted-foreground">A temporary password is generated. You share it manually.</div>
               </div>
             </label>
           </div>
@@ -613,18 +613,18 @@ export function UserDetailPage() {
             This password will not be shown again. Copy it now.
           </div>
           <div className="flex items-center gap-2">
-            <code className="flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] font-mono">
+            <code className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground font-mono">
               {resetTempPassword}
             </code>
             <button
               onClick={handleCopyResetPassword}
-              className="rounded-md border border-[#1e2130] p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+              className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
               title="Copy password"
             >
               {resetCopied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
             </button>
           </div>
-          <p className="text-xs text-[#848b9b]">
+          <p className="text-xs text-muted-foreground">
             The user will be required to change this password on next login.
           </p>
         </div>
@@ -646,7 +646,7 @@ export function UserDetailPage() {
         }
       >
         <div>
-          <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Days to add</label>
+          <label className="mb-1 block text-sm font-medium text-foreground">Days to add</label>
           <Input
             type="number"
             value={trialDays}
@@ -654,7 +654,7 @@ export function UserDetailPage() {
             min={1}
             max={90}
           />
-          <p className="mt-1 text-xs text-[#848b9b]">1-90 days. Will convert to trialing status if not already.</p>
+          <p className="mt-1 text-xs text-muted-foreground">1-90 days. Will convert to trialing status if not already.</p>
         </div>
       </Modal>
 
@@ -712,11 +712,11 @@ export function UserDetailPage() {
               <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
                 This user cannot be deleted because they have dependencies:
               </div>
-              <ul className="space-y-1 text-sm text-[#848b9b]">
+              <ul className="space-y-1 text-sm text-muted-foreground">
                 {Object.entries(hardDeleteBlockers).map(([key, count]) => (
                   <li key={key} className="flex justify-between">
                     <span>{key.replace(/_/g, ' ')}</span>
-                    <span className="font-mono text-[#848b9b]">{count}</span>
+                    <span className="font-mono text-muted-foreground">{count}</span>
                   </li>
                 ))}
               </ul>
diff --git a/frontend/src/pages/admin/UsersPage.tsx b/frontend/src/pages/admin/UsersPage.tsx
index 237bd8eb..10ed6fa1 100644
--- a/frontend/src/pages/admin/UsersPage.tsx
+++ b/frontend/src/pages/admin/UsersPage.tsx
@@ -190,8 +190,8 @@ export function UsersPage() {
       sortable: true,
       render: (u) => (
         <div>
-          <div className="font-medium text-[#e2e5eb]">{u.name}</div>
-          <div className="text-xs text-[#848b9b]">{u.email}</div>
+          <div className="font-medium text-foreground">{u.name}</div>
+          <div className="text-xs text-muted-foreground">{u.email}</div>
         </div>
       ),
     },
@@ -226,7 +226,7 @@ export function UsersPage() {
       header: 'Joined',
       sortable: true,
       render: (u) => (
-        <span className="text-sm text-[#848b9b]">
+        <span className="text-sm text-muted-foreground">
           {new Date(u.created_at).toLocaleDateString()}
         </span>
       ),
@@ -286,12 +286,12 @@ export function UsersPage() {
           placeholder="Search by name or email..."
           className="max-w-sm"
         />
-        <label className="flex items-center gap-2 text-sm text-[#848b9b]">
+        <label className="flex items-center gap-2 text-sm text-muted-foreground">
           <input
             type="checkbox"
             checked={showArchived}
             onChange={(e) => { setShowArchived(e.target.checked); setPage(1) }}
-            className="rounded border-[#1e2130] bg-[#14161d]"
+            className="rounded border-border bg-card"
           />
           Show archived
         </label>
@@ -326,14 +326,14 @@ export function UsersPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-[#848b9b]">
-            Changing role for <span className="font-medium text-[#e2e5eb]">{roleModalUser?.name}</span>
+          <p className="text-sm text-muted-foreground">
+            Changing role for <span className="font-medium text-foreground">{roleModalUser?.name}</span>
           </p>
           <select
             value={newRole}
             onChange={(e) => setNewRole(e.target.value)}
             className={cn(
-              'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+              'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
               'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
             )}
           >
@@ -357,11 +357,11 @@ export function UsersPage() {
         }
       >
         <div className="space-y-4">
-          <p className="text-sm text-[#848b9b]">
-            Moving <span className="font-medium text-[#e2e5eb]">{moveModalUser?.name}</span> to a new account.
+          <p className="text-sm text-muted-foreground">
+            Moving <span className="font-medium text-foreground">{moveModalUser?.name}</span> to a new account.
           </p>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <Input
               type="text"
               value={displayCode}
@@ -389,7 +389,7 @@ export function UsersPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Name</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
             <Input
               type="text"
               value={createForm.name}
@@ -398,7 +398,7 @@ export function UsersPage() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
             <Input
               type="email"
               value={createForm.email}
@@ -407,12 +407,12 @@ export function UsersPage() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Mode</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Mode</label>
             <select
               value={createForm.account_mode}
               onChange={(e) => setCreateForm(f => ({ ...f, account_mode: e.target.value as 'existing' | 'personal' }))}
               className={cn(
-                'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >
@@ -423,7 +423,7 @@ export function UsersPage() {
           {createForm.account_mode === 'existing' && (
             <>
               <div>
-                <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Display Code</label>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
                 <Input
                   type="text"
                   value={createForm.account_display_code}
@@ -432,12 +432,12 @@ export function UsersPage() {
                 />
               </div>
               <div>
-                <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Role</label>
+                <label className="mb-1 block text-sm font-medium text-foreground">Account Role</label>
                 <select
                   value={createForm.account_role}
                   onChange={(e) => setCreateForm(f => ({ ...f, account_role: e.target.value as 'engineer' | 'viewer' }))}
                   className={cn(
-                    'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                     'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
                   )}
                 >
@@ -453,9 +453,9 @@ export function UsersPage() {
               id="send-email"
               checked={createForm.send_email}
               onChange={(e) => setCreateForm(f => ({ ...f, send_email: e.target.checked }))}
-              className="rounded border-[#1e2130] bg-[#14161d]"
+              className="rounded border-border bg-card"
             />
-            <label htmlFor="send-email" className="text-sm text-[#848b9b]">
+            <label htmlFor="send-email" className="text-sm text-muted-foreground">
               Send welcome email with temporary password
             </label>
           </div>
@@ -479,21 +479,21 @@ export function UsersPage() {
             This password will not be shown again. Copy it now.
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Temporary Password</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Temporary Password</label>
             <div className="flex items-center gap-2">
-              <code className="flex-1 rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] font-mono">
+              <code className="flex-1 rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground font-mono">
                 {tempPassword}
               </code>
               <button
                 onClick={handleCopyPassword}
-                className="rounded-md border border-[#1e2130] p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
+                className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 title="Copy password"
               >
                 {copied ? <Check className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
               </button>
             </div>
           </div>
-          <p className="text-xs text-[#848b9b]">
+          <p className="text-xs text-muted-foreground">
             The user will be required to change this password on first login.
           </p>
         </div>
@@ -516,7 +516,7 @@ export function UsersPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Email</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Email</label>
             <Input
               type="email"
               value={inviteForm.email}
@@ -525,7 +525,7 @@ export function UsersPage() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Account Display Code</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Account Display Code</label>
             <Input
               type="text"
               value={inviteForm.account_display_code}
@@ -534,12 +534,12 @@ export function UsersPage() {
             />
           </div>
           <div>
-            <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Role</label>
+            <label className="mb-1 block text-sm font-medium text-foreground">Role</label>
             <select
               value={inviteForm.role}
               onChange={(e) => setInviteForm(f => ({ ...f, role: e.target.value as 'engineer' | 'viewer' }))}
               className={cn(
-                'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
                 'focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
               )}
             >