diff --git a/apps/web/src/components/admin/modals/BanUserModal.tsx b/apps/web/src/components/admin/modals/BanUserModal.tsx
index 7ffc9d0cd..a09b65767 100644
--- a/apps/web/src/components/admin/modals/BanUserModal.tsx
+++ b/apps/web/src/components/admin/modals/BanUserModal.tsx
@@ -30,7 +30,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
             <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -42,7 +42,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
           </p>
 
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Reason
             </label>
             <select
@@ -60,7 +60,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
           </div>
 
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Details (Internal Note)
             </label>
             <textarea
@@ -73,17 +73,17 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
 
           <div className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel">
             <div className="flex items-center gap-4">
-              <Calendar className="w-5 h-5 text-kodo-content-dim" />
+              <Calendar className="w-5 h-5 text-muted-foreground" />
               <div>
                 <div className="text-sm font-bold text-white">Ban Duration</div>
-                <div className="text-xs text-kodo-content-dim">
+                <div className="text-xs text-muted-foreground">
                   {isPermanent ? 'Permanent Ban' : `${duration} Days`}
                 </div>
               </div>
             </div>
             <div className="flex items-center gap-2">
               <span
-                className={`text-xs ${!isPermanent ? 'text-white' : 'text-kodo-content-dim'}`}
+                className={`text-xs ${!isPermanent ? 'text-white' : 'text-muted-foreground'}`}
               >
                 Temp
               </span>
@@ -96,7 +96,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
                 ></div>
               </div>
               <span
-                className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-kodo-content-dim'}`}
+                className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-muted-foreground'}`}
               >
                 Perm
               </span>
@@ -105,7 +105,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
 
           {!isPermanent && (
             <div>
-              <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+              <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                 Days
               </label>
               <input
diff --git a/apps/web/src/components/developer/SwaggerUI.tsx b/apps/web/src/components/developer/SwaggerUI.tsx
index 212ea90ba..696c795a0 100644
--- a/apps/web/src/components/developer/SwaggerUI.tsx
+++ b/apps/web/src/components/developer/SwaggerUI.tsx
@@ -152,7 +152,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
         <p className="text-sm text-kodo-secondary mb-4 text-center max-w-md">
           {error}
         </p>
-        <p className="text-xs text-kodo-content-dim mb-6 text-center max-w-md">
+        <p className="text-xs text-muted-foreground mb-6 text-center max-w-md">
           Trying to load from: {getOpenApiUrl()}
           <br />
           <span className="text-kodo-steel">
diff --git a/apps/web/src/components/education/MyCoursesView.tsx b/apps/web/src/components/education/MyCoursesView.tsx
index 857ccdf94..f78f2394e 100644
--- a/apps/web/src/components/education/MyCoursesView.tsx
+++ b/apps/web/src/components/education/MyCoursesView.tsx
@@ -110,13 +110,13 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
       <div className="border-b border-kodo-steel flex gap-6">
         <button
           onClick={() => setActiveTab('in_progress')}
-          className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-kodo-content-dim hover:text-kodo-text-main'}`}
+          className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-muted-foreground hover:text-kodo-text-main'}`}
         >
           In Progress
         </button>
         <button
           onClick={() => setActiveTab('completed')}
-          className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'completed' ? 'border-kodo-lime text-white' : 'border-transparent text-kodo-content-dim hover:text-kodo-text-main'}`}
+          className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'completed' ? 'border-kodo-lime text-white' : 'border-transparent text-muted-foreground hover:text-kodo-text-main'}`}
         >
           Completed
         </button>
@@ -133,7 +133,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
           />
         ))}
         {filteredCourses.length === 0 && (
-          <div className="col-span-full text-center py-24 text-kodo-content-dim">
+          <div className="col-span-full text-center py-24 text-muted-foreground">
             <p>No courses found in this category.</p>
           </div>
         )}
diff --git a/apps/web/src/components/gamification/AchievementsView.tsx b/apps/web/src/components/gamification/AchievementsView.tsx
index 81eac6166..ebd0e738c 100644
--- a/apps/web/src/components/gamification/AchievementsView.tsx
+++ b/apps/web/src/components/gamification/AchievementsView.tsx
@@ -58,7 +58,7 @@ export const AchievementsView: React.FC = () => {
           <h2 className="text-2xl font-display font-bold text-white mb-2">
             ACHIEVEMENTS
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Track your milestones and earn rewards.
           </p>
         </div>
diff --git a/apps/web/src/components/inventory/AddEquipmentView.tsx b/apps/web/src/components/inventory/AddEquipmentView.tsx
index cf72901ca..20a81aebb 100644
--- a/apps/web/src/components/inventory/AddEquipmentView.tsx
+++ b/apps/web/src/components/inventory/AddEquipmentView.tsx
@@ -56,7 +56,7 @@ export const AddEquipmentView: React.FC = () => {
             <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
               <Camera className="w-4 h-4 text-kodo-steel" /> Photos
             </h3>
-            <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
+            <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
               <Camera className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
               <span className="text-xs font-bold uppercase">Upload Photos</span>
             </div>
@@ -72,10 +72,10 @@ export const AddEquipmentView: React.FC = () => {
 
           <Card variant="default">
             <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
-              <FileText className="w-4 h-4 text-kodo-content-dim" /> Documents
+              <FileText className="w-4 h-4 text-muted-foreground" /> Documents
             </h3>
             <FileUpload />
-            <p className="text-xs text-kodo-content-dim mt-2 text-center">
+            <p className="text-xs text-muted-foreground mt-2 text-center">
               Receipts, Manuals, Warranty Cards
             </p>
           </Card>
@@ -89,7 +89,7 @@ export const AddEquipmentView: React.FC = () => {
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
               <div>
-                <label className="block text-sm font-medium text-kodo-content-dim mb-2">
+                <label className="block text-sm font-medium text-muted-foreground mb-2">
                   Category
                 </label>
                 <select
@@ -159,7 +159,7 @@ export const AddEquipmentView: React.FC = () => {
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-kodo-content-dim mb-2">
+              <label className="block text-sm font-medium text-muted-foreground mb-2">
                 Location / Tags
               </label>
               <Input
diff --git a/apps/web/src/components/inventory/InventoryView.tsx b/apps/web/src/components/inventory/InventoryView.tsx
index bf71563a3..3b1245ab9 100644
--- a/apps/web/src/components/inventory/InventoryView.tsx
+++ b/apps/web/src/components/inventory/InventoryView.tsx
@@ -56,7 +56,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
           <h2 className="text-2xl font-display font-bold text-white mb-2">
             GEAR INVENTORY
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Track hardware, warranties, and maintenance.
           </p>
         </div>
@@ -90,7 +90,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
 
         <div className="flex flex-wrap gap-2 w-full md:w-auto">
           <div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
-            <Filter className="w-4 h-4 text-kodo-content-dim ml-2" />
+            <Filter className="w-4 h-4 text-muted-foreground ml-2" />
             <select
               className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"
               value={filterCat}
@@ -105,7 +105,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
           </div>
 
           <div className="flex items-center gap-2 bg-kodo-void rounded-lg p-1 border border-kodo-steel">
-            <Box className="w-4 h-4 text-kodo-content-dim ml-2" />
+            <Box className="w-4 h-4 text-muted-foreground ml-2" />
             <select
               className="bg-transparent text-sm text-kodo-text-main focus:outline-none p-1 cursor-pointer"
               value={filterStatus}
@@ -136,7 +136,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
             />
           ))}
           {filteredItems.length === 0 && (
-            <div className="col-span-full text-center py-24 text-kodo-content-dim">
+            <div className="col-span-full text-center py-24 text-muted-foreground">
               <Box className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p>No equipment found.</p>
             </div>
diff --git a/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx b/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
index 288c4ac80..180be2db9 100644
--- a/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
+++ b/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
@@ -79,7 +79,7 @@ export function KeyboardShortcutsHelp({
             key={index}
             className="flex items-center justify-between border-b border-kodo-steel dark:border-kodo-steel pb-2 last:border-0"
           >
-            <span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
+            <span className="text-sm text-muted-foreground dark:text-muted-foreground">
               {shortcut.description}
             </span>
             <kbd className="px-2 py-1 text-xs font-semibold text-kodo-text-main dark:text-kodo-text-main bg-kodo-void dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel rounded">
diff --git a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
index a14215656..ed3f64f22 100644
--- a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
+++ b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
@@ -49,7 +49,7 @@ export const AutoMetadataDetectionModal: React.FC<
             <Wand2 className="w-4 h-4 text-kodo-steel" /> AI Metadata Detection
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -66,7 +66,7 @@ export const AutoMetadataDetectionModal: React.FC<
                 <h4 className="text-lg font-bold text-white animate-pulse">
                   Analyzing Audio...
                 </h4>
-                <p className="text-sm text-kodo-content-dim mt-2">
+                <p className="text-sm text-muted-foreground mt-2">
                   Detecting BPM, Key, and Genre for <br />
                   <span className="text-kodo-steel">{fileName}</span>
                 </p>
@@ -77,7 +77,7 @@ export const AutoMetadataDetectionModal: React.FC<
               <div className="bg-kodo-ink border border-kodo-steel/20 rounded-lg p-6 w-full">
                 <div className="grid grid-cols-2 gap-4">
                   <div className="text-center p-2">
-                    <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
+                    <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                       Detected BPM
                     </div>
                     <div className="text-2xl font-bold text-white">
@@ -85,7 +85,7 @@ export const AutoMetadataDetectionModal: React.FC<
                     </div>
                   </div>
                   <div className="text-center p-2">
-                    <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
+                    <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                       Detected Key
                     </div>
                     <div className="text-2xl font-bold text-kodo-steel">
@@ -93,7 +93,7 @@ export const AutoMetadataDetectionModal: React.FC<
                     </div>
                   </div>
                   <div className="text-center p-2">
-                    <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
+                    <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                       Genre
                     </div>
                     <div className="text-lg font-medium text-white">
@@ -101,7 +101,7 @@ export const AutoMetadataDetectionModal: React.FC<
                     </div>
                   </div>
                   <div className="text-center p-2">
-                    <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
+                    <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                       Energy Level
                     </div>
                     <div className="text-lg font-medium text-kodo-gold">
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index bad9f13ab..99624ee39 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -38,12 +38,12 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Create Playlist</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
         <div className="p-6 flex flex-col md:flex-row gap-6">
-          <div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors flex-shrink-0">
+          <div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors flex-shrink-0">
             <ImageIcon className="w-8 h-8 mb-2" />
             <span className="text-xs font-bold uppercase">Cover</span>
           </div>
@@ -78,7 +78,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                     <div className="text-white font-bold">
                       {isPublic ? 'Public' : 'Private'}
                     </div>
-                    <div className="text-xs text-kodo-content-dim">
+                    <div className="text-xs text-muted-foreground">
                       {isPublic
                         ? 'Visible to everyone'
                         : 'Only you can see this'}
@@ -100,11 +100,11 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
               >
                 <div className="flex items-center gap-4">
                   <Users
-                    className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-kodo-content-dim'}`}
+                    className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-muted-foreground'}`}
                   />
                   <div className="text-sm">
                     <div className="text-white font-bold">Collaborative</div>
-                    <div className="text-xs text-kodo-content-dim">
+                    <div className="text-xs text-muted-foreground">
                       Friends can add tracks
                     </div>
                   </div>
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index c5baa2985..f7d42b655 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -49,7 +49,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
           <h3 className="text-xl font-bold text-white mb-2">
             Delete "{playlist.title}"?
           </h3>
-          <p className="text-sm text-kodo-content-dim mb-6">
+          <p className="text-sm text-muted-foreground mb-6">
             This action cannot be undone.
           </p>
           <div className="flex gap-4 justify-center">
@@ -79,7 +79,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Edit Details</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
diff --git a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
index b214e79d5..8c8741888 100644
--- a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
@@ -118,7 +118,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
           <h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 leading-tight">
             {playlist.title}
           </h1>
-          <p className="text-kodo-content-dim text-sm mb-6 max-w-2xl">
+          <p className="text-muted-foreground text-sm mb-6 max-w-2xl">
             {playlist.description}
           </p>
 
@@ -178,7 +178,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
 
       {/* Tracks List */}
       <div className="px-2">
-        <div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-kodo-content-dim uppercase px-4 pb-2 border-b border-white/10 mb-2">
+        <div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-muted-foreground uppercase px-4 pb-2 border-b border-white/10 mb-2">
           <div className="w-8 text-center">#</div>
           <div>Title</div>
           <div className="hidden md:block">Album</div>
@@ -198,7 +198,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
               onDragEnd={() => setDraggedIndex(null)}
               className={`grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 items-center p-2 rounded-lg hover:bg-white/5 group transition-colors ${draggedIndex === i ? 'bg-kodo-cyan/10' : ''}`}
             >
-              <div className="w-8 text-center flex justify-center text-kodo-content-dim group-hover:text-white cursor-grab active:cursor-grabbing">
+              <div className="w-8 text-center flex justify-center text-muted-foreground group-hover:text-white cursor-grab active:cursor-grabbing">
                 <span className="group-hover:hidden">{i + 1}</span>
                 <Play
                   className="w-4 h-4 fill-current hidden group-hover:block cursor-pointer"
@@ -214,18 +214,18 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
                   <div className="text-white font-bold text-sm truncate">
                     {track.title}
                   </div>
-                  <div className="text-kodo-content-dim text-xs truncate hover:underline cursor-pointer">
+                  <div className="text-muted-foreground text-xs truncate hover:underline cursor-pointer">
                     {track.artist}
                   </div>
                 </div>
               </div>
-              <div className="hidden md:block text-kodo-content-dim text-sm truncate">
+              <div className="hidden md:block text-muted-foreground text-sm truncate">
                 {track.album}
               </div>
-              <div className="hidden sm:block text-kodo-content-dim text-xs">
+              <div className="hidden sm:block text-muted-foreground text-xs">
                 2 days ago
               </div>
-              <div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-kodo-content-dim font-mono">
+              <div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-muted-foreground font-mono">
                 <Heart className="w-4 h-4 opacity-0 group-hover:opacity-100 hover:text-kodo-magenta cursor-pointer transition-all" />
                 <span>{track.duration}</span>
                 <MoreHorizontal className="w-4 h-4 opacity-0 group-hover:opacity-100 hover:text-white cursor-pointer" />
diff --git a/apps/web/src/components/library/playlists/QueueView.tsx b/apps/web/src/components/library/playlists/QueueView.tsx
index 3b475c1b1..fe6885351 100644
--- a/apps/web/src/components/library/playlists/QueueView.tsx
+++ b/apps/web/src/components/library/playlists/QueueView.tsx
@@ -61,7 +61,7 @@ export const QueueView: React.FC = () => {
           <h1 className="text-3xl font-display font-bold text-white mb-2">
             PLAY QUEUE
           </h1>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             {queue.length} tracks upcoming
           </p>
         </div>
@@ -87,7 +87,7 @@ export const QueueView: React.FC = () => {
       {/* Current Track */}
       {currentTrack && (
         <div>
-          <h3 className="text-xs font-bold text-kodo-content-dim uppercase tracking-widest mb-3">
+          <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
             Now Playing
           </h3>
           <Card
@@ -123,7 +123,7 @@ export const QueueView: React.FC = () => {
               </h2>
               <p className="text-kodo-steel">{currentTrack.artist}</p>
             </div>
-            <div className="text-kodo-content-dim font-mono text-sm hidden md:block">
+            <div className="text-muted-foreground font-mono text-sm hidden md:block">
               {currentTrack.duration}
             </div>
           </Card>
@@ -133,7 +133,7 @@ export const QueueView: React.FC = () => {
       {/* Up Next */}
       <div>
         <div className="flex justify-between items-center mb-3">
-          <h3 className="text-xs font-bold text-kodo-content-dim uppercase tracking-widest">
+          <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest">
             Up Next
           </h3>
           <div
@@ -141,7 +141,7 @@ export const QueueView: React.FC = () => {
             onClick={toggleAutoplay}
           >
             <span
-              className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-kodo-content-dim'}`}
+              className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-muted-foreground'}`}
             >
               Autoplay
             </span>
@@ -157,7 +157,7 @@ export const QueueView: React.FC = () => {
 
         <div className="space-y-2">
           {queue.length === 0 ? (
-            <div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-kodo-content-dim">
+            <div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-muted-foreground">
               <ListMusic className="w-12 h-12 mx-auto mb-4 opacity-50" />
               <p className="text-sm">
                 Queue is empty. Add tracks to keep the vibe going.
@@ -178,7 +178,7 @@ export const QueueView: React.FC = () => {
                 onDragEnd={() => setDraggedIndex(null)}
                 className={`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${draggedIndex === i ? 'opacity-50 border-kodo-cyan' : ''}`}
               >
-                <div className="text-kodo-content-dim cursor-grab active:cursor-grabbing hover:text-white p-1">
+                <div className="text-muted-foreground cursor-grab active:cursor-grabbing hover:text-white p-1">
                   <GripVertical className="w-5 h-5" />
                 </div>
                 <div className="w-10 h-10 rounded overflow-hidden flex-shrink-0 relative">
@@ -197,15 +197,15 @@ export const QueueView: React.FC = () => {
                   <div className="text-sm font-bold text-white truncate">
                     {track.title}
                   </div>
-                  <div className="text-xs text-kodo-content-dim truncate">
+                  <div className="text-xs text-muted-foreground truncate">
                     {track.artist}
                   </div>
                 </div>
-                <div className="text-kodo-content-dim font-mono text-xs hidden sm:block">
+                <div className="text-muted-foreground font-mono text-xs hidden sm:block">
                   {track.duration}
                 </div>
                 <button
-                  className="p-2 text-kodo-content-dim hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
+                  className="p-2 text-muted-foreground hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
                   onClick={() => removeFromQueue(track.id)}
                 >
                   <X className="w-4 h-4" />
diff --git a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
index a5c33d35a..9a37d5dc6 100644
--- a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
@@ -35,7 +35,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Save Queue as Playlist</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -62,7 +62,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
                 <div className="text-sm font-bold text-white">
                   {isPublic ? 'Public Playlist' : 'Private Playlist'}
                 </div>
-                <div className="text-xs text-kodo-content-dim">
+                <div className="text-xs text-muted-foreground">
                   {isPublic ? 'Visible on your profile' : 'Only visible to you'}
                 </div>
               </div>
diff --git a/apps/web/src/components/live/modals/TipStreamerModal.tsx b/apps/web/src/components/live/modals/TipStreamerModal.tsx
index cda57cc1b..eb8622c7f 100644
--- a/apps/web/src/components/live/modals/TipStreamerModal.tsx
+++ b/apps/web/src/components/live/modals/TipStreamerModal.tsx
@@ -43,14 +43,14 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
             <DollarSign className="w-5 h-5" /> Support {streamerName}
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
         <div className="p-6 space-y-6">
           {/* Amount Selection */}
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Select Amount
             </label>
             <div className="flex gap-2 mb-3">
@@ -58,14 +58,14 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
                 <button
                   key={val}
                   onClick={() => setAmount(val)}
-                  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim hover:text-white'}`}
+                  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-muted-foreground hover:text-white'}`}
                 >
                   ${val}
                 </button>
               ))}
             </div>
             <div className="relative">
-              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-kodo-content-dim font-bold">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground font-bold">
                 $
               </span>
               <input
@@ -80,7 +80,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
 
           {/* Message */}
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Message (Optional)
             </label>
             <textarea
@@ -90,26 +90,26 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
               onChange={(e) => setMessage(e.target.value)}
               maxLength={200}
             />
-            <p className="text-right text-xs text-kodo-content-dim mt-1">
+            <p className="text-right text-xs text-muted-foreground mt-1">
               {message.length}/200
             </p>
           </div>
 
           {/* Payment Method (Mock) */}
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Payment Method
             </label>
             <div className="flex gap-2">
               <button
                 onClick={() => setPaymentMethod('card')}
-                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim'}`}
+                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
               >
                 <CreditCard className="w-4 h-4" /> Card
               </button>
               <button
                 onClick={() => setPaymentMethod('crypto')}
-                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-kodo-content-dim'}`}
+                className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-muted-foreground'}`}
               >
                 <span className="font-bold">Ξ</span> Crypto
               </button>
diff --git a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
index e4034b115..8b074929b 100644
--- a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
+++ b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
@@ -40,13 +40,13 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
             <MessageSquare className="w-4 h-4 text-kodo-steel" /> Write Review
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
         <div className="p-6 space-y-6">
           <div className="text-center">
-            <p className="text-kodo-content-dim text-sm mb-2">
+            <p className="text-muted-foreground text-sm mb-2">
               How was your experience with
             </p>
             <h4 className="font-bold text-white text-lg">{productTitle}?</h4>
@@ -65,7 +65,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
                   className={`w-8 h-8 transition-colors ${
                     star <= (hoverRating || rating)
                       ? 'fill-kodo-gold text-kodo-gold'
-                      : 'text-kodo-content-dim'
+                      : 'text-muted-foreground'
                   }`}
                 />
               </button>
@@ -73,7 +73,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
           </div>
 
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Your Review
             </label>
             <textarea
diff --git a/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
index 58d033fbc..44837bf79 100644
--- a/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
+++ b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
@@ -32,7 +32,7 @@ export const AccessibilitySettingsView: React.FC = () => {
           <h2 className="text-3xl font-display font-bold text-white mb-2">
             ACCESSIBILITY
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Tools to make the platform work for you.
           </p>
         </div>
@@ -132,7 +132,7 @@ const ToggleRow: React.FC<{
       <div className="text-sm font-bold text-white group-hover:text-white transition-colors">
         {label}
       </div>
-      <div className="text-xs text-kodo-content-dim">{desc}</div>
+      <div className="text-xs text-muted-foreground">{desc}</div>
     </div>
     <Switch checked={active} onChange={onToggle} />
   </div>
diff --git a/apps/web/src/components/settings/account/ChangeEmailModal.tsx b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
index 13c42ef58..b7c968d3a 100644
--- a/apps/web/src/components/settings/account/ChangeEmailModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
@@ -42,14 +42,14 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Change Email Address</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
         <div className="p-6">
           {step === 1 ? (
             <div className="space-y-4">
-              <p className="text-sm text-kodo-content-dim">
+              <p className="text-sm text-muted-foreground">
                 Current email:{' '}
                 <span className="text-white font-mono">{currentEmail}</span>
               </p>
@@ -70,7 +70,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
                 onChange={(e) => setPassword(e.target.value)}
               />
 
-              <div className="bg-kodo-ink p-4 rounded text-xs text-kodo-content-dim border border-kodo-steel">
+              <div className="bg-kodo-ink p-4 rounded text-xs text-muted-foreground border border-kodo-steel">
                 We will send a verification link to your new email address. You
                 must verify it before the change takes effect.
               </div>
@@ -83,7 +83,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
               <h4 className="text-lg font-bold text-white mb-2">
                 Check your inbox
               </h4>
-              <p className="text-sm text-kodo-content-dim mb-6">
+              <p className="text-sm text-muted-foreground mb-6">
                 We've sent a verification link to{' '}
                 <span className="text-white">{newEmail}</span>.
               </p>
diff --git a/apps/web/src/components/settings/account/ChangeUsernameModal.tsx b/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
index 94a595fa6..aad948270 100644
--- a/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeUsernameModal.tsx
@@ -52,7 +52,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Change Username</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -69,7 +69,7 @@ export const ChangeUsernameModal: React.FC<ChangeUsernameModalProps> = ({
             />
             <div className="absolute right-4 top-[38px]">
               {isChecking && (
-                <Loader2 className="w-4 h-4 animate-spin text-kodo-content-dim" />
+                <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
               )}
               {!isChecking && isAvailable === true && (
                 <Check className="w-4 h-4 text-kodo-lime" />
diff --git a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
index eb211f846..04b132096 100644
--- a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
@@ -44,7 +44,7 @@ export const DeleteAccountConfirmModal: React.FC<
           <button
             onClick={onClose}
             disabled={loading}
-            className="text-kodo-content-dim hover:text-white disabled:opacity-50"
+            className="text-muted-foreground hover:text-white disabled:opacity-50"
           >
             <X className="w-5 h-5" />
           </button>
@@ -57,7 +57,7 @@ export const DeleteAccountConfirmModal: React.FC<
           </p>
 
           <div className="bg-kodo-ink p-4 rounded border border-kodo-steel">
-            <ul className="text-xs text-kodo-content-dim space-y-2 list-disc pl-4">
+            <ul className="text-xs text-muted-foreground space-y-2 list-disc pl-4">
               <li>All uploaded tracks and assets will be deleted.</li>
               <li>Your username will be released.</li>
               <li>Any active subscriptions will be cancelled immediately.</li>
diff --git a/apps/web/src/components/settings/account/DeleteAccountView.tsx b/apps/web/src/components/settings/account/DeleteAccountView.tsx
index 5492accf1..288861580 100644
--- a/apps/web/src/components/settings/account/DeleteAccountView.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountView.tsx
@@ -40,7 +40,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
       <div className="flex items-center gap-4 mb-2">
         <button
           onClick={onBack}
-          className="p-2 hover:bg-white/5 rounded-full text-kodo-content-dim hover:text-white transition-colors"
+          className="p-2 hover:bg-white/5 rounded-full text-muted-foreground hover:text-white transition-colors"
         >
           <ArrowLeft className="w-5 h-5" />
         </button>
@@ -61,7 +61,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
             <h3 className="text-lg font-bold text-white mb-2">
               We're sorry to see you go
             </h3>
-            <p className="text-kodo-content-dim text-sm leading-relaxed">
+            <p className="text-muted-foreground text-sm leading-relaxed">
               Deleting your account is permanent and cannot be undone. Please
               read the warnings below carefully before proceeding.
             </p>
@@ -82,7 +82,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
               <span className="font-bold text-kodo-text-main block mb-1">
                 I lose all my data
               </span>
-              <span className="text-kodo-content-dim">
+              <span className="text-muted-foreground">
                 All uploaded tracks, projects, and assets will be permanently
                 removed from our servers.
               </span>
@@ -102,7 +102,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
               <span className="font-bold text-kodo-text-main block mb-1">
                 This action is irreversible
               </span>
-              <span className="text-kodo-content-dim">
+              <span className="text-muted-foreground">
                 I understand that Veza support cannot restore my account once
                 deleted.
               </span>
@@ -122,7 +122,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
               <span className="font-bold text-kodo-text-main block mb-1">
                 Subscriptions will be cancelled
               </span>
-              <span className="text-kodo-content-dim">
+              <span className="text-muted-foreground">
                 Any active Pro or Enterprise subscriptions will be terminated
                 immediately. No refunds will be issued.
               </span>
@@ -146,7 +146,7 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
 
           <Button
             variant="primary"
-            className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-kodo-content-dim"
+            className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-kodo-steel disabled:text-muted-foreground"
             disabled={!isFormValid}
             onClick={() => setShowFinalModal(true)}
             icon={<Trash2 className="w-4 h-4" />}
diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
index 4dc38f156..ec6448702 100644
--- a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
@@ -42,7 +42,7 @@ export const AppearanceSettingsView: React.FC = () => {
           <h2 className="text-3xl font-display font-bold text-white mb-2">
             INTERFACE
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Customize your visual experience.
           </p>
         </div>
@@ -95,12 +95,12 @@ export const AppearanceSettingsView: React.FC = () => {
                         `}
             >
               <div
-                className={`p-4 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-kodo-content-dim'}`}
+                className={`p-4 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-muted-foreground'}`}
               >
                 {opt.icon}
               </div>
               <span
-                className={`font-bold ${theme === opt.id ? 'text-white' : 'text-kodo-content-dim'}`}
+                className={`font-bold ${theme === opt.id ? 'text-white' : 'text-muted-foreground'}`}
               >
                 {opt.label}
               </span>
@@ -151,7 +151,7 @@ export const AppearanceSettingsView: React.FC = () => {
                   >
                     {opt.label}
                   </div>
-                  <div className="text-xs text-kodo-content-dim">{opt.desc}</div>
+                  <div className="text-xs text-muted-foreground">{opt.desc}</div>
                 </div>
               </div>
             ))}
@@ -164,7 +164,7 @@ export const AppearanceSettingsView: React.FC = () => {
           </h3>
           <div className="space-y-8">
             <div>
-              <div className="flex justify-between text-sm text-kodo-content-dim mb-2">
+              <div className="flex justify-between text-sm text-muted-foreground mb-2">
                 <span>Font Size</span>
                 <span>{fontSize}px</span>
               </div>
@@ -211,7 +211,7 @@ export const AppearanceSettingsView: React.FC = () => {
 
         <Card variant="default">
           <h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
-            <Layout className="w-5 h-5 text-kodo-content-dim" /> Layout
+            <Layout className="w-5 h-5 text-muted-foreground" /> Layout
           </h3>
           <div
             className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel cursor-pointer hover:border-kodo-steel"
@@ -219,7 +219,7 @@ export const AppearanceSettingsView: React.FC = () => {
           >
             <div>
               <div className="text-sm font-bold text-white">Show Sidebar</div>
-              <div className="text-xs text-kodo-content-dim">
+              <div className="text-xs text-muted-foreground">
                 Toggle the main navigation sidebar
               </div>
             </div>
diff --git a/apps/web/src/components/settings/backups/BackupsView.tsx b/apps/web/src/components/settings/backups/BackupsView.tsx
index 2f2fcf904..8bd90303f 100644
--- a/apps/web/src/components/settings/backups/BackupsView.tsx
+++ b/apps/web/src/components/settings/backups/BackupsView.tsx
@@ -73,7 +73,7 @@ export const BackupsView: React.FC = () => {
           <h2 className="text-2xl font-bold text-white flex items-center gap-2">
             <Database className="w-6 h-6 text-kodo-gold" /> System Backups
           </h2>
-          <p className="text-kodo-content-dim text-sm">
+          <p className="text-muted-foreground text-sm">
             Manage restore points and redundancy.
           </p>
         </div>
@@ -111,7 +111,7 @@ export const BackupsView: React.FC = () => {
                       <div className="font-bold text-white text-sm">
                         {backup.date}
                       </div>
-                      <div className="text-xs text-kodo-content-dim flex gap-2">
+                      <div className="text-xs text-muted-foreground flex gap-2">
                         <span>{backup.type}</span>
                         <span>•</span>
                         <span>{backup.size}</span>
@@ -157,7 +157,7 @@ export const BackupsView: React.FC = () => {
                   <div className="text-sm text-white font-bold">
                     Auto-Backup
                   </div>
-                  <div className="text-xs text-kodo-content-dim">
+                  <div className="text-xs text-muted-foreground">
                     Daily incremental backups
                   </div>
                 </div>
@@ -174,7 +174,7 @@ export const BackupsView: React.FC = () => {
               {autoBackup && (
                 <div className="animate-fadeIn space-y-4 pt-2 border-t border-kodo-steel">
                   <div>
-                    <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
+                    <label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
                       Frequency
                     </label>
                     <select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">
@@ -184,7 +184,7 @@ export const BackupsView: React.FC = () => {
                     </select>
                   </div>
                   <div>
-                    <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
+                    <label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
                       Time
                     </label>
                     <input
@@ -194,7 +194,7 @@ export const BackupsView: React.FC = () => {
                     />
                   </div>
                   <div>
-                    <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-1">
+                    <label className="block text-xs font-bold text-muted-foreground uppercase mb-1">
                       Retention
                     </label>
                     <select className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white text-sm">
diff --git a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
index 580b5a3b0..c0337dc0d 100644
--- a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+++ b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
@@ -30,7 +30,7 @@ export const CloudIntegrationView: React.FC = () => {
         <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
           <div className="flex items-center gap-4">
             <div
-              className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-kodo-content-dim'}`}
+              className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-kodo-steel text-muted-foreground'}`}
             >
               <Cloud className="w-8 h-8" />
             </div>
@@ -38,7 +38,7 @@ export const CloudIntegrationView: React.FC = () => {
               <h2 className="text-2xl font-bold text-white">
                 Nextcloud Integration
               </h2>
-              <p className="text-kodo-content-dim text-sm">
+              <p className="text-muted-foreground text-sm">
                 Sync your projects, samples, and presets.
               </p>
             </div>
@@ -85,17 +85,17 @@ export const CloudIntegrationView: React.FC = () => {
             <div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
               <Server className="w-6 h-6 text-kodo-steel mx-auto mb-2" />
               <div className="text-sm font-bold text-white">{url}</div>
-              <div className="text-xs text-kodo-content-dim">Host</div>
+              <div className="text-xs text-muted-foreground">Host</div>
             </div>
             <div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
               <RefreshCw className="w-6 h-6 text-kodo-gold mx-auto mb-2" />
               <div className="text-sm font-bold text-white">Every 15 mins</div>
-              <div className="text-xs text-kodo-content-dim">Sync Frequency</div>
+              <div className="text-xs text-muted-foreground">Sync Frequency</div>
             </div>
             <div className="bg-kodo-ink p-4 rounded-lg border border-kodo-steel text-center">
               <Shield className="w-6 h-6 text-kodo-lime mx-auto mb-2" />
               <div className="text-sm font-bold text-white">Encrypted</div>
-              <div className="text-xs text-kodo-content-dim">Status</div>
+              <div className="text-xs text-muted-foreground">Status</div>
             </div>
           </div>
         )}
@@ -112,7 +112,7 @@ export const CloudIntegrationView: React.FC = () => {
               <div className="flex items-center justify-between">
                 <div>
                   <div className="text-sm text-white font-bold">Auto-Sync</div>
-                  <div className="text-xs text-kodo-content-dim">
+                  <div className="text-xs text-muted-foreground">
                     Automatically upload new projects
                   </div>
                 </div>
@@ -127,7 +127,7 @@ export const CloudIntegrationView: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+                <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                   Sync Frequency
                 </label>
                 <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
@@ -139,7 +139,7 @@ export const CloudIntegrationView: React.FC = () => {
               </div>
 
               <div>
-                <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+                <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                   Selective Sync
                 </label>
                 <div className="flex gap-2">
@@ -165,10 +165,10 @@ export const CloudIntegrationView: React.FC = () => {
                 <div className="text-4xl font-mono font-bold text-white mb-1">
                   65.4 GB
                 </div>
-                <div className="text-sm text-kodo-content-dim">used of 100 GB</div>
+                <div className="text-sm text-muted-foreground">used of 100 GB</div>
               </div>
               <ProgressBar value={65.4} color="cyan" />
-              <div className="text-xs text-kodo-content-dim flex justify-between">
+              <div className="text-xs text-muted-foreground flex justify-between">
                 <span>0 GB</span>
                 <span>100 GB</span>
               </div>
diff --git a/apps/web/src/components/settings/data/DataExportModal.tsx b/apps/web/src/components/settings/data/DataExportModal.tsx
index 41107932c..ee85bd5f2 100644
--- a/apps/web/src/components/settings/data/DataExportModal.tsx
+++ b/apps/web/src/components/settings/data/DataExportModal.tsx
@@ -43,19 +43,19 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
             <Database className="w-4 h-4 text-kodo-steel" /> Request Data Export
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
         <div className="p-6 space-y-6">
-          <p className="text-sm text-kodo-content-dim">
+          <p className="text-sm text-muted-foreground">
             In compliance with GDPR/CCPA, you can request a copy of your
             personal data. Generating this report usually takes{' '}
             <span className="text-white font-bold">24-48 hours</span>.
           </p>
 
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Export Format
             </label>
             <select
@@ -70,7 +70,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
           </div>
 
           <div>
-            <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
+            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
               Include Data
             </label>
             <div className="space-y-2">
diff --git a/apps/web/src/components/settings/data/DataExportView.tsx b/apps/web/src/components/settings/data/DataExportView.tsx
index 1f3c62482..a81c5f5c3 100644
--- a/apps/web/src/components/settings/data/DataExportView.tsx
+++ b/apps/web/src/components/settings/data/DataExportView.tsx
@@ -29,7 +29,7 @@ export const DataExportView: React.FC = () => {
     <div className="max-w-4xl mx-auto space-y-8 animate-fadeIn pb-20">
       <div>
         <h2 className="text-2xl font-bold text-white mb-2">YOUR DATA</h2>
-        <p className="text-kodo-content-dim font-mono text-sm">
+        <p className="text-muted-foreground font-mono text-sm">
           Manage, export, and control your personal information.
         </p>
       </div>
@@ -43,7 +43,7 @@ export const DataExportView: React.FC = () => {
             <h3 className="font-bold text-white text-lg">
               Request Data Archive
             </h3>
-            <p className="text-kodo-content-dim text-sm mt-1 max-w-xl">
+            <p className="text-muted-foreground text-sm mt-1 max-w-xl">
               You can request a download of all the data Veza has associated
               with your account. This includes your profile, uploaded content
               metadata, comments, and purchase history.
@@ -68,12 +68,12 @@ export const DataExportView: React.FC = () => {
               className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel"
             >
               <div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
-                <FileText className="w-5 h-5 text-kodo-content-dim" />
+                <FileText className="w-5 h-5 text-muted-foreground" />
                 <div>
                   <div className="text-white font-bold text-sm">
                     {item.type}
                   </div>
-                  <div className="text-xs text-kodo-content-dim flex gap-2">
+                  <div className="text-xs text-muted-foreground flex gap-2">
                     <span>{item.date}</span>
                     <span>•</span>
                     <span>{item.size}</span>
@@ -90,7 +90,7 @@ export const DataExportView: React.FC = () => {
                   Download
                 </Button>
               ) : (
-                <span className="text-xs text-kodo-content-dim bg-kodo-graphite px-4 py-1 rounded">
+                <span className="text-xs text-muted-foreground bg-kodo-graphite px-4 py-1 rounded">
                   Expired
                 </span>
               )}
diff --git a/apps/web/src/components/settings/integrations/IntegrationsView.tsx b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
index 440cbbe74..dfaf935d9 100644
--- a/apps/web/src/components/settings/integrations/IntegrationsView.tsx
+++ b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
@@ -96,7 +96,7 @@ export const IntegrationsView: React.FC = () => {
     <div className="space-y-6 animate-fadeIn pb-20">
       <div>
         <h2 className="text-2xl font-bold text-white mb-2">CONNECTED APPS</h2>
-        <p className="text-kodo-content-dim font-mono text-sm">
+        <p className="text-muted-foreground font-mono text-sm">
           Supercharge your workflow with external tools.
         </p>
       </div>
@@ -133,10 +133,10 @@ export const IntegrationsView: React.FC = () => {
                       </span>
                     )}
                     {integration.status === 'disconnected' && (
-                      <span className="text-kodo-content-dim">Not Connected</span>
+                      <span className="text-muted-foreground">Not Connected</span>
                     )}
                     {integration.lastSync && (
-                      <span className="text-kodo-content-dim">
+                      <span className="text-muted-foreground">
                         • {integration.lastSync}
                       </span>
                     )}
@@ -150,12 +150,12 @@ export const IntegrationsView: React.FC = () => {
                   title="Sync Now"
                   onClick={() => addToast('Syncing...')}
                 >
-                  <RefreshCw className="w-4 h-4 text-kodo-content-dim hover:text-white" />
+                  <RefreshCw className="w-4 h-4 text-muted-foreground hover:text-white" />
                 </Button>
               )}
             </div>
 
-            <p className="text-kodo-content-dim text-sm mb-6 flex-1">
+            <p className="text-muted-foreground text-sm mb-6 flex-1">
               {integration.description}
             </p>
 
diff --git a/apps/web/src/components/social/CommentItem.tsx b/apps/web/src/components/social/CommentItem.tsx
index 2752eb831..6925d84a6 100644
--- a/apps/web/src/components/social/CommentItem.tsx
+++ b/apps/web/src/components/social/CommentItem.tsx
@@ -37,7 +37,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
               <span className="font-bold text-white cursor-pointer hover:underline">
                 {comment.author.name}
               </span>
-              <span className="text-kodo-content-dim text-xs">{comment.timestamp}</span>
+              <span className="text-muted-foreground text-xs">{comment.timestamp}</span>
             </div>
           </div>
           <p className="text-kodo-text-main leading-relaxed whitespace-pre-wrap">
@@ -45,7 +45,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
           </p>
         </div>
 
-        <div className="flex items-center gap-4 mt-1 pl-2 text-xs text-kodo-content-dim">
+        <div className="flex items-center gap-4 mt-1 pl-2 text-xs text-muted-foreground">
           <button
             onClick={handleLike}
             className={`flex items-center gap-1 hover:text-kodo-magenta transition-colors ${liked ? 'text-kodo-magenta' : ''}`}
diff --git a/apps/web/src/components/social/CreatePostModal.tsx b/apps/web/src/components/social/CreatePostModal.tsx
index 081a44c20..881780ab9 100644
--- a/apps/web/src/components/social/CreatePostModal.tsx
+++ b/apps/web/src/components/social/CreatePostModal.tsx
@@ -48,7 +48,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Create Post</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -84,7 +84,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
 
           {/* Suggestions */}
           <div className="mt-4 flex flex-wrap gap-2 text-xs">
-            <span className="text-kodo-content-dim flex items-center gap-1">
+            <span className="text-muted-foreground flex items-center gap-1">
               <Hash className="w-3 h-3" /> Trending:
             </span>
             {['Synthwave', 'NewGear', 'StudioLife', 'WIP'].map((tag) => (
@@ -102,7 +102,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
         <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <div className="flex gap-2">
             <button
-              className={`p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-white ${postType === 'image' ? 'text-kodo-steel' : ''}`}
+              className={`p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-white ${postType === 'image' ? 'text-kodo-steel' : ''}`}
               onClick={() => {
                 setPostType('image');
                 toast.info('Image upload simulated');
@@ -112,7 +112,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
               <ImageIcon className="w-5 h-5" />
             </button>
             <button
-              className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-magenta"
+              className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-magenta"
               onClick={() => {
                 setPostType('video');
                 toast.info('Video upload simulated');
@@ -122,7 +122,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
               <Video className="w-5 h-5" />
             </button>
             <button
-              className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-lime"
+              className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-lime"
               onClick={() => {
                 setPostType('audio');
                 toast.info('Audio upload simulated');
@@ -132,7 +132,7 @@ export const CreatePostModal: React.FC<CreatePostModalProps> = ({
               <Mic2 className="w-5 h-5" />
             </button>
             <button
-              className="p-2 rounded hover:bg-white/10 text-kodo-content-dim hover:text-kodo-gold"
+              className="p-2 rounded hover:bg-white/10 text-muted-foreground hover:text-kodo-gold"
               onClick={() => {
                 setPostType('poll');
                 toast.info('Poll creator simulated');
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index 909384982..5934664c7 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -36,7 +36,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
           <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
             <h3 className="font-bold text-white">Quote Post</h3>
             <button onClick={onClose}>
-              <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+              <X className="w-5 h-5 text-muted-foreground hover:text-white" />
             </button>
           </div>
           <div className="p-4">
@@ -57,7 +57,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
                   {post.author.name}
                 </span>
               </div>
-              <p className="text-xs text-kodo-content-dim line-clamp-2">
+              <p className="text-xs text-muted-foreground line-clamp-2">
                 {post.content}
               </p>
             </div>
@@ -91,7 +91,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
         <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
           <h3 className="font-bold text-white">Share Post</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -108,7 +108,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             </div>
             <div className="text-left">
               <div className="text-white font-bold">Repost</div>
-              <div className="text-xs text-kodo-content-dim">
+              <div className="text-xs text-muted-foreground">
                 Instantly share with your followers
               </div>
             </div>
@@ -123,7 +123,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             </div>
             <div className="text-left">
               <div className="text-white font-bold">Quote</div>
-              <div className="text-xs text-kodo-content-dim">
+              <div className="text-xs text-muted-foreground">
                 Repost with your own thoughts
               </div>
             </div>
@@ -135,7 +135,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={handleCopyLink}
           >
-            <div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-kodo-content-dim group-hover:text-white">
+            <div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-muted-foreground group-hover:text-white">
               <Link className="w-5 h-5" />
             </div>
             <div className="text-left">
@@ -149,7 +149,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               onClose();
             }}
           >
-            <div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-kodo-content-dim group-hover:text-white">
+            <div className="w-10 h-10 rounded-full bg-kodo-graphite flex items-center justify-center text-muted-foreground group-hover:text-white">
               <Mail className="w-5 h-5" />
             </div>
             <div className="text-left">
diff --git a/apps/web/src/components/social/connections/ConnectionsView.tsx b/apps/web/src/components/social/connections/ConnectionsView.tsx
index ff69390f4..0934369a8 100644
--- a/apps/web/src/components/social/connections/ConnectionsView.tsx
+++ b/apps/web/src/components/social/connections/ConnectionsView.tsx
@@ -56,7 +56,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
           <h2 className="text-3xl font-display font-bold text-white mb-2 capitalize">
             {type}
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Managing your network.
           </p>
         </div>
@@ -75,7 +75,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'all' ? 'text-white' : 'text-kodo-content-dim'}
+              className={filter === 'all' ? 'text-white' : 'text-muted-foreground'}
               onClick={() => setFilter('all')}
             >
               All
@@ -83,7 +83,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'mutual' ? 'text-white' : 'text-kodo-content-dim'}
+              className={filter === 'mutual' ? 'text-white' : 'text-muted-foreground'}
               onClick={() => setFilter('mutual')}
             >
               Mutual
@@ -91,7 +91,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'recent' ? 'text-white' : 'text-kodo-content-dim'}
+              className={filter === 'recent' ? 'text-white' : 'text-muted-foreground'}
               onClick={() => setFilter('recent')}
             >
               Recent
diff --git a/apps/web/src/components/social/groups/CreateGroupModal.tsx b/apps/web/src/components/social/groups/CreateGroupModal.tsx
index 9d2dfe0b9..34b0aca2a 100644
--- a/apps/web/src/components/social/groups/CreateGroupModal.tsx
+++ b/apps/web/src/components/social/groups/CreateGroupModal.tsx
@@ -51,7 +51,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             <Users className="w-5 h-5 text-kodo-steel" /> Create Community
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
           </button>
         </div>
 
@@ -61,7 +61,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             {coverImage ? (
               <img src={coverImage} className="w-full h-full object-cover" />
             ) : (
-              <div className="text-kodo-content-dim flex flex-col items-center group-hover:text-white">
+              <div className="text-muted-foreground flex flex-col items-center group-hover:text-white">
                 <ImageIcon className="w-8 h-8 mb-2" />
                 <span className="text-xs font-bold uppercase">
                   Upload Cover Image
@@ -86,7 +86,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             />
 
             <div>
-              <label className="block text-sm font-medium text-kodo-content-dim mb-2">
+              <label className="block text-sm font-medium text-muted-foreground mb-2">
                 Description
               </label>
               <textarea
@@ -111,7 +111,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
                   <div className="text-sm font-bold text-white">
                     {isPrivate ? 'Private Group' : 'Public Group'}
                   </div>
-                  <div className="text-xs text-kodo-content-dim">
+                  <div className="text-xs text-muted-foreground">
                     {isPrivate ? 'Invite only' : 'Anyone can find and join'}
                   </div>
                 </div>
diff --git a/apps/web/src/components/social/groups/GroupsView.tsx b/apps/web/src/components/social/groups/GroupsView.tsx
index 4dd234d52..418b85193 100644
--- a/apps/web/src/components/social/groups/GroupsView.tsx
+++ b/apps/web/src/components/social/groups/GroupsView.tsx
@@ -97,7 +97,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
           <h2 className="text-3xl font-display font-bold text-white mb-2">
             COMMUNITIES
           </h2>
-          <p className="text-kodo-content-dim font-mono text-sm">
+          <p className="text-muted-foreground font-mono text-sm">
             Connect with producers, labels, and fans.
           </p>
         </div>
@@ -114,13 +114,13 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
         <div className="flex bg-kodo-void rounded-lg p-1 border border-kodo-steel">
           <button
             onClick={() => setActiveTab('my_groups')}
-            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
+            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-muted-foreground hover:text-white'}`}
           >
             <Users className="w-4 h-4" /> My Groups
           </button>
           <button
             onClick={() => setActiveTab('discover')}
-            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'}`}
+            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-kodo-slate text-white' : 'text-muted-foreground hover:text-white'}`}
           >
             <Compass className="w-4 h-4" /> Discover
           </button>
@@ -152,7 +152,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
               />
             ))
           ) : (
-            <div className="col-span-full text-center py-24 text-kodo-content-dim">
+            <div className="col-span-full text-center py-24 text-muted-foreground">
               <Users className="w-16 h-16 mx-auto mb-4 opacity-30" />
               <p>No groups found. Try searching or create your own.</p>
             </div>
diff --git a/apps/web/src/components/ui/FormField.tsx b/apps/web/src/components/ui/FormField.tsx
index bc4aae6b6..c5115a390 100644
--- a/apps/web/src/components/ui/FormField.tsx
+++ b/apps/web/src/components/ui/FormField.tsx
@@ -121,7 +121,7 @@ export const FormField: React.FC<FormFieldProps> = ({
       </label>
       {children}
       {helpText && !error && (
-        <p className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">{helpText}</p>
+        <p className="text-xs text-muted-foreground dark:text-muted-foreground">{helpText}</p>
       )}
       {error && (
         <p className="text-xs text-kodo-red dark:text-kodo-red">{error}</p>
diff --git a/apps/web/src/components/ui/ImageCropper.tsx b/apps/web/src/components/ui/ImageCropper.tsx
index 9c700ef15..c138ba4fe 100644
--- a/apps/web/src/components/ui/ImageCropper.tsx
+++ b/apps/web/src/components/ui/ImageCropper.tsx
@@ -163,8 +163,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
         {/* Controls */}
         <div className="p-8 bg-kodo-ink border-t border-kodo-steel space-y-4">
           <div className="flex items-center gap-4">
-            <span className="text-xs text-kodo-content-dim w-16">Zoom</span>
-            <ZoomIn className="w-4 h-4 text-kodo-content-dim" />
+            <span className="text-xs text-muted-foreground w-16">Zoom</span>
+            <ZoomIn className="w-4 h-4 text-muted-foreground" />
             <input
               type="range"
               value={zoom}
@@ -178,8 +178,8 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
           </div>
 
           <div className="flex items-center gap-4">
-            <span className="text-xs text-kodo-content-dim w-16">Rotate</span>
-            <RotateCw className="w-4 h-4 text-kodo-content-dim" />
+            <span className="text-xs text-muted-foreground w-16">Rotate</span>
+            <RotateCw className="w-4 h-4 text-muted-foreground" />
             <input
               type="range"
               value={rotation}
diff --git a/apps/web/src/components/ui/LoadingState.tsx b/apps/web/src/components/ui/LoadingState.tsx
index 94c4076e9..fe24d270f 100644
--- a/apps/web/src/components/ui/LoadingState.tsx
+++ b/apps/web/src/components/ui/LoadingState.tsx
@@ -120,11 +120,11 @@ export function LoadingState({
     return (
       <div className={cn('flex items-center gap-2', className)}>
         <Loader2
-          className={cn('animate-spin text-kodo-content-dim', sizeClasses[size])}
+          className={cn('animate-spin text-muted-foreground', sizeClasses[size])}
           aria-hidden="true"
         />
         {displayText && (
-          <span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
+          <span className="text-sm text-muted-foreground dark:text-muted-foreground">
             {displayText}
           </span>
         )}
@@ -156,7 +156,7 @@ export function LoadingState({
 
   return (
     <Loader2
-      className={cn('animate-spin text-kodo-content-dim', sizeClasses[size], className)}
+      className={cn('animate-spin text-muted-foreground', sizeClasses[size], className)}
       aria-label={displayText}
       role="status"
     />
diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index 6228493c5..128e5c71d 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -101,7 +101,7 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
       <p className="flex-1 text-sm font-medium">{message}</p>
       <button
         onClick={() => onClose(id)}
-        className="text-kodo-content-dim hover:text-white transition-colors"
+        className="text-muted-foreground hover:text-white transition-colors"
       >
         <X className="w-4 h-4" />
       </button>
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index 336005045..c8f90afbf 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -160,7 +160,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           {src ? (
             <img src={src} alt={alt} className="w-full h-full object-cover" />
           ) : (
-            <span className="font-bold text-kodo-content-dim">{initials}</span>
+            <span className="font-bold text-muted-foreground">{initials}</span>
           )}
         </div>
 
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 6edecd3fe..6dff3f0af 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -38,7 +38,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        'text-sm font-medium leading-none text-kodo-content-dim peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx b/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
index d65e5f1bd..4187e79b3 100644
--- a/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
+++ b/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
@@ -31,7 +31,7 @@ export function LazyErrorFallback({
           <AlertTriangle className="h-8 w-8 text-kodo-red" />
         </div>
         <h2 className="text-xl font-bold mb-2">Failed to load {pageName}</h2>
-        <p className="text-kodo-content-dim mb-6 text-sm">
+        <p className="text-muted-foreground mb-6 text-sm">
           {getErrorMessage(error)}
         </p>
         <div className="flex flex-col gap-3">
diff --git a/apps/web/src/components/ui/loading-spinner.tsx b/apps/web/src/components/ui/loading-spinner.tsx
index a733159ef..30fe8b792 100644
--- a/apps/web/src/components/ui/loading-spinner.tsx
+++ b/apps/web/src/components/ui/loading-spinner.tsx
@@ -85,7 +85,7 @@ export function LoadingSpinner({
         <span className="sr-only">Chargement...</span>
       </div>
       {text && (
-        <p className="mt-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">{text}</p>
+        <p className="mt-2 text-sm text-muted-foreground dark:text-muted-foreground">{text}</p>
       )}
     </div>
   );
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index 961209dd9..4096faba4 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -167,7 +167,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
           />
         </div>
         {(labelLeft || labelRight) && (
-          <div className="flex justify-between text-xs text-kodo-content-dim mt-1 font-mono">
+          <div className="flex justify-between text-xs text-muted-foreground mt-1 font-mono">
             <span>{labelLeft}</span>
             <span>{labelRight}</span>
           </div>
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index bbb743ba3..7426ef4ae 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -165,7 +165,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-bold text-kodo-content-dim uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-bold text-muted-foreground uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}
@@ -209,7 +209,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn('mt-4 text-sm text-kodo-content-dim', className)}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 9daaaf7c6..e891c9971 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -74,7 +74,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div className="w-full">
         {label && (
-          <label className="block text-sm font-medium text-kodo-content-dim mb-2 font-body">
+          <label className="block text-sm font-medium text-muted-foreground mb-2 font-body">
             {label}
           </label>
         )}
diff --git a/apps/web/src/components/upload/metadata/MetadataEditor.tsx b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
index 5ed8d7f80..e77042bae 100644
--- a/apps/web/src/components/upload/metadata/MetadataEditor.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
@@ -145,7 +145,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
               <h3 className="font-bold text-white text-lg">
                 {currentMeta.title || currentFile.file.name}
               </h3>
-              <p className="text-xs text-kodo-content-dim font-mono">
+              <p className="text-xs text-muted-foreground font-mono">
                 {currentMeta.artist || 'Unknown Artist'} • {currentIndex + 1} of{' '}
                 {files.length}
               </p>
diff --git a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
index eff9b9e87..b1ed45848 100644
--- a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
+++ b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
@@ -151,7 +151,7 @@ export function VerifyEmailPage() {
           <div className="flex justify-center" aria-hidden="true">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
           </div>
-          <p className="text-kodo-content-dim">{message}</p>
+          <p className="text-muted-foreground">{message}</p>
           <span className="sr-only">
             Vérification de votre email en cours, veuillez patienter
           </span>
@@ -175,7 +175,7 @@ export function VerifyEmailPage() {
           >
             <p className="font-medium">Succès !</p>
             <p className="text-sm mt-1">{message}</p>
-            <p className="text-xs mt-2 text-kodo-content-dim">
+            <p className="text-xs mt-2 text-muted-foreground">
               Vous allez être redirigé vers la page de connexion...
             </p>
           </div>
diff --git a/apps/web/src/features/error/pages/ServerErrorPage.tsx b/apps/web/src/features/error/pages/ServerErrorPage.tsx
index 4174d0b93..c8a240545 100644
--- a/apps/web/src/features/error/pages/ServerErrorPage.tsx
+++ b/apps/web/src/features/error/pages/ServerErrorPage.tsx
@@ -53,7 +53,7 @@ function ServerErrorPage() {
             <div className="text-6xl font-bold text-foreground">
               500
             </div>
-            <p className="text-kodo-content-dim dark:text-kodo-content-dim">
+            <p className="text-muted-foreground dark:text-muted-foreground">
               Nous nous excusons pour la gêne occasionnée. Notre équipe
               technique a été automatiquement notifiée et travaille à résoudre
               le problème.
@@ -104,13 +104,13 @@ function ServerErrorPage() {
                 Besoin d'aide ?
               </p>
               <div className="space-y-2">
-                <div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground dark:text-muted-foreground">
                   <CheckCircle className="h-4 w-4 text-success" />
                   <span>
                     L'erreur a été automatiquement signalée à notre équipe
                   </span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground dark:text-muted-foreground">
                   <Mail className="h-4 w-4 text-kodo-steel" />
                   <span>
                     Contactez le support si le problème persiste après plusieurs
@@ -125,7 +125,7 @@ function ServerErrorPage() {
               <summary className="text-sm font-medium text-foreground cursor-pointer hover:text-kodo-text-main dark:hover:text-kodo-text-main">
                 Détails techniques
               </summary>
-              <div className="mt-2 p-4 bg-muted rounded text-xs font-mono text-kodo-content-dim dark:text-kodo-content-dim">
+              <div className="mt-2 p-4 bg-muted rounded text-xs font-mono text-muted-foreground dark:text-muted-foreground">
                 <p>Code d'erreur: 500 Internal Server Error</p>
                 <p>Timestamp: {new Date().toISOString()}</p>
                 <p>User Agent: {navigator.userAgent}</p>
diff --git a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
index d2c89c57e..7e58ce9a6 100644
--- a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
+++ b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
@@ -58,7 +58,7 @@ export function PlaylistListToolbar({
               'touch-manipulation',
               currentView === 'list'
                 ? 'bg-white dark:bg-kodo-steel text-kodo-cyan dark:text-kodo-cyan shadow-sm'
-                : 'text-kodo-content-dim dark:text-kodo-content-dim',
+                : 'text-muted-foreground dark:text-muted-foreground',
             )}
             aria-label="Affichage en liste"
             aria-pressed={currentView === 'list'}
diff --git a/apps/web/src/features/playlists/pages/PlaylistListPage.tsx b/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
index ecf78c4bb..3b7e39890 100644
--- a/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
+++ b/apps/web/src/features/playlists/pages/PlaylistListPage.tsx
@@ -106,7 +106,7 @@ export function PlaylistListPage() {
           <div className="space-y-4">
             <div className="flex items-center gap-4">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-kodo-content-dim" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   type="text"
                   value={searchQuery}
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
index d208c970a..eb651ba42 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
@@ -19,9 +19,9 @@ function FileTypeIcon({ type, size = 'md' }: { type: CloudFileNode['type']; size
   if (type === 'audio') return <Music className={cn(cl, 'text-kodo-steel')} />;
   if (type === 'image') return <ImageIcon className={cn(cl, 'text-primary')} />;
   if (['document', 'archive', 'project'].includes(type)) {
-    return <File className={cn(cl, 'text-kodo-content-dim')} />;
+    return <File className={cn(cl, 'text-muted-foreground')} />;
   }
-  return <File className={cn(cl, 'text-kodo-content-dim')} />;
+  return <File className={cn(cl, 'text-muted-foreground')} />;
 }
 
 export function FileGridCard({
@@ -93,7 +93,7 @@ export function FileGridCard({
           {file.tags?.slice(0, 2).map((t) => (
             <span
               key={t}
-              className="text-xs bg-white/10 px-1 rounded text-kodo-content-dim"
+              className="text-xs bg-white/10 px-1 rounded text-muted-foreground"
             >
               {t}
             </span>
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
index 2d0f34410..5628d66e9 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
@@ -39,7 +39,7 @@ export function FileTable({
       )}
     >
       <table className="w-full text-left border-collapse">
-        <thead className="bg-kodo-ink text-xs font-mono text-kodo-content-dim uppercase tracking-wider sticky top-0 z-10">
+        <thead className="bg-kodo-ink text-xs font-mono text-muted-foreground uppercase tracking-wider sticky top-0 z-10">
           <tr>
             <th className="p-4 w-10">
               <button
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
index 713ce5550..2c12a41c4 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
@@ -117,8 +117,8 @@ export function FileTableRow({
           ))}
         </div>
       </td>
-      <td className="p-4 text-kodo-content-dim font-mono text-xs">{file.size}</td>
-      <td className="p-4 text-kodo-content-dim text-xs">{file.modified}</td>
+      <td className="p-4 text-muted-foreground font-mono text-xs">{file.size}</td>
+      <td className="p-4 text-muted-foreground text-xs">{file.modified}</td>
       <td className="p-4 text-right">
         <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
           {file.type === 'audio' && (
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
index d4eca0059..beda9614f 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
@@ -118,7 +118,7 @@ export function FileToolbar({
                 'px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap',
                 activeTags.includes(tag)
                   ? 'bg-kodo-cyan/20 border-kodo-cyan text-kodo-cyan'
-                  : 'border-kodo-steel text-kodo-content-dim hover:border-kodo-steel'
+                  : 'border-kodo-steel text-muted-foreground hover:border-kodo-steel'
               )}
             >
               {tag}
@@ -178,7 +178,7 @@ export function FileToolbar({
             <Stamp className="w-4 h-4" />
           </Button>
           <div className="bg-kodo-void rounded-lg p-1 border border-kodo-steel flex items-center">
-            <span className="text-xs text-kodo-content-dim px-2 uppercase font-bold">
+            <span className="text-xs text-muted-foreground px-2 uppercase font-bold">
               Sort:
             </span>
             <select