diff --git a/apps/web/src/components/OfflineQueueManager.tsx b/apps/web/src/components/OfflineQueueManager.tsx
index 0f4cadf9c..c8644a401 100644
--- a/apps/web/src/components/OfflineQueueManager.tsx
+++ b/apps/web/src/components/OfflineQueueManager.tsx
@@ -45,9 +45,9 @@ function getPriorityColor(priority: QueuedRequest['priority']): string {
     case 'normal':
       return 'bg-muted/20 text-kodo-steel border-border/30';
     case 'low':
-      return 'bg-muted/30 text-kodo-secondary border-border/50';
+      return 'bg-muted/30 text-muted-foreground border-border/50';
     default:
-      return 'bg-muted/30 text-kodo-secondary border-border/50';
+      return 'bg-muted/30 text-muted-foreground border-border/50';
   }
 }
 
@@ -121,7 +121,7 @@ export function OfflineQueueManager({
         <div className="flex items-center justify-between p-4 bg-kodo-ink/50 rounded-lg border border-border">
           <div className="flex items-center gap-2">
             <Clock className="w-5 h-5 text-kodo-steel" />
-            <span className="text-sm text-kodo-secondary">
+            <span className="text-sm text-muted-foreground">
               {queue.length === 0
                 ? 'No queued requests'
                 : `${queue.length} ${queue.length === 1 ? 'request' : 'requests'} queued`}
@@ -142,7 +142,7 @@ export function OfflineQueueManager({
 
         {/* Queue List */}
         {queue.length === 0 ? (
-          <div className="text-center py-8 text-kodo-secondary">
+          <div className="text-center py-8 text-muted-foreground">
             <CheckCircle2 className="w-12 h-12 mx-auto mb-4 text-kodo-cyan/50" />
             <p className="text-sm">All requests have been processed</p>
           </div>
@@ -163,7 +163,7 @@ export function OfflineQueueManager({
                     </div>
 
                     {/* Metadata */}
-                    <div className="flex items-center gap-4 flex-wrap text-xs text-kodo-secondary">
+                    <div className="flex items-center gap-4 flex-wrap text-xs text-muted-foreground">
                       {/* Priority Badge */}
                       <span
                         className={cn(
@@ -213,7 +213,7 @@ export function OfflineQueueManager({
 
         {/* Info Message */}
         {queue.length > 0 && (
-          <div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-kodo-secondary">
+          <div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-muted-foreground">
             <p>
               Queued requests will be automatically processed when you're back
               online. You can remove individual requests or clear the entire
diff --git a/apps/web/src/components/Onboarding.tsx b/apps/web/src/components/Onboarding.tsx
index c49e8fe6b..09000464d 100644
--- a/apps/web/src/components/Onboarding.tsx
+++ b/apps/web/src/components/Onboarding.tsx
@@ -166,7 +166,7 @@ export function Onboarding({
           <h3 className="text-xl font-semibold text-white mb-2">
             {step.title}
           </h3>
-          <p className="text-kodo-secondary text-sm leading-relaxed">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             {step.description}
           </p>
         </div>
diff --git a/apps/web/src/components/developer/SwaggerUI.tsx b/apps/web/src/components/developer/SwaggerUI.tsx
index 696c795a0..e66117b5e 100644
--- a/apps/web/src/components/developer/SwaggerUI.tsx
+++ b/apps/web/src/components/developer/SwaggerUI.tsx
@@ -149,7 +149,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
         <h3 className="text-xl font-bold text-white mb-2">
           Failed to Load API Documentation
         </h3>
-        <p className="text-sm text-kodo-secondary mb-4 text-center max-w-md">
+        <p className="text-sm text-muted-foreground mb-4 text-center max-w-md">
           {error}
         </p>
         <p className="text-xs text-muted-foreground mb-6 text-center max-w-md">
diff --git a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
index 4d9cd4c49..b37289421 100644
--- a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
+++ b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
@@ -115,7 +115,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           {step === 1 ? (
             <div className="space-y-8">
               <div>
-                <label className="block text-xs font-bold text-kodo-secondary uppercase tracking-wider mb-3">
+                <label className="block text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">
                   Key Name
                 </label>
                 <Input
@@ -129,7 +129,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
               </div>
 
               <div>
-                <label className="block text-xs font-bold text-kodo-secondary uppercase tracking-wider mb-4">
+                <label className="block text-xs font-bold text-muted-foreground uppercase tracking-wider mb-4">
                   Permissions (Scopes)
                 </label>
                 <div className="grid grid-cols-1 gap-3">
diff --git a/apps/web/src/components/notifications/NotificationBell.tsx b/apps/web/src/components/notifications/NotificationBell.tsx
index 814f78739..8b48fa20e 100644
--- a/apps/web/src/components/notifications/NotificationBell.tsx
+++ b/apps/web/src/components/notifications/NotificationBell.tsx
@@ -40,7 +40,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
       <Button
         variant="ghost"
         size="sm"
-        className={`relative text-kodo-secondary hover:text-kodo-primary ${isOpen ? 'text-kodo-primary bg-white/5' : ''}`}
+        className={`relative text-muted-foreground hover:text-kodo-primary ${isOpen ? 'text-kodo-primary bg-white/5' : ''}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         <Bell className="w-5 h-5" />
diff --git a/apps/web/src/components/pwa/PWAInstallBanner.tsx b/apps/web/src/components/pwa/PWAInstallBanner.tsx
index af702e58d..c999d9285 100644
--- a/apps/web/src/components/pwa/PWAInstallBanner.tsx
+++ b/apps/web/src/components/pwa/PWAInstallBanner.tsx
@@ -40,7 +40,7 @@ export function PWAInstallBanner() {
           </div>
           <button
             onClick={handleDismiss}
-            className="p-1 px-2 rounded-md bg-white/5 text-kodo-secondary hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10"
+            className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10"
           >
             DISMISS
           </button>
diff --git a/apps/web/src/components/theme/ThemeSwitcher.tsx b/apps/web/src/components/theme/ThemeSwitcher.tsx
index aae91bb85..f5a730395 100644
--- a/apps/web/src/components/theme/ThemeSwitcher.tsx
+++ b/apps/web/src/components/theme/ThemeSwitcher.tsx
@@ -48,7 +48,7 @@ export function ThemeSwitcher({
         </div>
         <div>
           <h3 className="text-xl font-bold text-white">Color Theme</h3>
-          <p className="text-sm text-kodo-secondary">
+          <p className="text-sm text-muted-foreground">
             Choose your visual style
           </p>
         </div>
@@ -89,7 +89,7 @@ export function ThemeSwitcher({
                 <div className="font-bold text-lg text-white mb-1">
                   {theme.name}
                 </div>
-                <div className="text-sm text-kodo-secondary">
+                <div className="text-sm text-muted-foreground">
                   {theme.description}
                 </div>
               </div>
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 230ba4bf7..215445c35 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -140,7 +140,7 @@ export const ChatInput: React.FC = () => {
               {att.file_type.startsWith('image') ? (
                 <ImageIcon size={14} className="text-kodo-cyan" />
               ) : (
-                <File size={14} className="text-kodo-secondary" />
+                <File size={14} className="text-muted-foreground" />
               )}
               <span className="truncate flex-1">{att.file_name}</span>
               <button
@@ -160,7 +160,7 @@ export const ChatInput: React.FC = () => {
             type="button"
             variant="ghost"
             size="icon"
-            className="text-kodo-secondary hover:text-white hover:bg-white/5"
+            className="text-muted-foreground hover:text-white hover:bg-white/5"
             onClick={() => fileInputRef.current?.click()}
           >
             <Paperclip size={20} />
@@ -172,7 +172,7 @@ export const ChatInput: React.FC = () => {
               variant="ghost"
               size="icon"
               className={cn(
-                'text-kodo-secondary hover:text-white hover:bg-white/5',
+                'text-muted-foreground hover:text-white hover:bg-white/5',
                 showEmojiPicker && 'text-kodo-steel bg-white/5',
               )}
               onClick={() => setShowEmojiPicker(!showEmojiPicker)}
@@ -214,7 +214,7 @@ export const ChatInput: React.FC = () => {
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             placeholder="Broadcast message..."
-            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
+            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-muted-foreground/50 focus:outline-none focus:border-border/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
             disabled={!currentConversationId || isUploading}
           />
           {message.length === 0 && !isUploading && (
@@ -222,7 +222,7 @@ export const ChatInput: React.FC = () => {
               type="button"
               variant="ghost"
               size="icon"
-              className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-kodo-secondary/30 hover:text-white"
+              className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 text-muted-foreground/30 hover:text-white"
             >
               <Mic className="w-4 h-4" />
             </Button>
@@ -237,7 +237,7 @@ export const ChatInput: React.FC = () => {
             'rounded-xl transition-all duration-[var(--duration-normal)]',
             message.trim() || attachments.length > 0
               ? 'bg-kodo-cyan text-kodo-void hover:bg-kodo-cyan-dim shadow-neon-cyan'
-              : 'bg-white/5 text-kodo-secondary hover:bg-white/10',
+              : 'bg-white/5 text-muted-foreground hover:bg-white/10',
           )}
           disabled={
             !currentConversationId ||
diff --git a/apps/web/src/features/chat/components/ChatMessage.tsx b/apps/web/src/features/chat/components/ChatMessage.tsx
index ece71d1bc..ac4d56fbf 100644
--- a/apps/web/src/features/chat/components/ChatMessage.tsx
+++ b/apps/web/src/features/chat/components/ChatMessage.tsx
@@ -56,7 +56,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
           // ...
           {isMe ? 'You' : safeString(message.sender_username || 'Unknown_Signal')}
         </span>
-        <span className="text-xs text-kodo-secondary/60">
+        <span className="text-xs text-muted-foreground/60">
           {new Date(message.created_at).toLocaleTimeString([], {
             hour: '2-digit',
             minute: '2-digit',
@@ -69,7 +69,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
         {isMe && (
           <button
             onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-white"
+            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
           >
             <Smile size={14} />
           </button>
@@ -128,7 +128,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
         {!isMe && (
           <button
             onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-white"
+            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-muted-foreground hover:text-white"
           >
             <Smile size={14} />
           </button>
@@ -179,7 +179,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
                   'flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs border transition-all animate-scaleIn',
                   users.includes(user?.id || '')
                     ? 'bg-kodo-cyan/20 border-kodo-cyan/40 text-kodo-cyan shadow-queue-item-current'
-                    : 'bg-white/5 border-white/10 text-kodo-secondary hover:bg-white/10 hover:border-white/20',
+                    : 'bg-white/5 border-white/10 text-muted-foreground hover:bg-white/10 hover:border-white/20',
                 )}
               >
                 <span>{emoji}</span>
@@ -191,7 +191,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
         </div>
 
         {isMe && (
-          <div className="text-kodo-secondary/40 ml-auto">
+          <div className="text-muted-foreground/40 ml-auto">
             <CheckCheck size={12} />
           </div>
         )}
diff --git a/apps/web/src/features/chat/components/ChatRoom.tsx b/apps/web/src/features/chat/components/ChatRoom.tsx
index 039a11364..c65b66e22 100644
--- a/apps/web/src/features/chat/components/ChatRoom.tsx
+++ b/apps/web/src/features/chat/components/ChatRoom.tsx
@@ -61,7 +61,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
 
   if (!conversationId) {
     return (
-      <div className="flex-1 flex flex-col items-center justify-center text-kodo-secondary opacity-50 space-y-4">
+      <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground opacity-50 space-y-4">
         <div className="w-24 h-24 rounded-full bg-white/5 flex items-center justify-center animate-pulse">
           <Wifi className="w-10 h-10 text-kodo-steel opacity-50" />
         </div>
@@ -106,7 +106,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
               variant="ghost"
               size="sm"
               onClick={() => setShowSearch(true)}
-              className="text-kodo-secondary/50 hover:text-white hover:bg-white/5 bg-black/20 backdrop-blur-sm rounded-full h-8 px-4 border border-white/5"
+              className="text-muted-foreground/50 hover:text-white hover:bg-white/5 bg-black/20 backdrop-blur-sm rounded-full h-8 px-4 border border-white/5"
             >
               <Search className="h-3 w-3 mr-2" />
               <span className="text-xs font-mono uppercase">Search Log</span>
@@ -124,7 +124,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
             </div>
             <div>
               <p className="text-white font-medium">Channel Established</p>
-              <p className="text-sm text-kodo-secondary mt-1">
+              <p className="text-sm text-muted-foreground mt-1">
                 Begin transmission on this frequency.
               </p>
             </div>
diff --git a/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx b/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
index e202430a4..77af10f21 100644
--- a/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
+++ b/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
@@ -123,7 +123,7 @@ export function ConversationItem({
               'w-8 h-8 rounded-lg flex items-center justify-center transition-colors shrink-0',
               isSelected
                 ? 'bg-kodo-cyan text-kodo-void'
-                : 'bg-white/5 text-kodo-secondary group-hover:text-white',
+                : 'bg-white/5 text-muted-foreground group-hover:text-white',
             )}
           >
             {conversation.type === 'direct' ? (
@@ -142,7 +142,7 @@ export function ConversationItem({
               {safeString(conversation.name || `Channel ${conversation.id.substring(0, 4)}`)}
             </span>
             {conversation.type !== 'direct' && (
-              <span className="text-xs text-kodo-secondary/50 uppercase tracking-wider">
+              <span className="text-xs text-muted-foreground/50 uppercase tracking-wider">
                 {safeString(conversation.type)}
               </span>
             )}
@@ -162,7 +162,7 @@ export function ConversationItem({
               size="sm"
               className={cn(
                 'h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity shrink-0',
-                isSelected ? 'text-kodo-cyan hover:bg-kodo-cyan/20' : 'text-kodo-secondary hover:text-white',
+                isSelected ? 'text-kodo-cyan hover:bg-kodo-cyan/20' : 'text-muted-foreground hover:text-white',
               )}
             >
               <MoreVertical className="h-4 w-4" />