aesthetic-improvements: replace secondary cyan hover states with steel (batch 2)

- Card components: CartItem, WishlistView, PostCard, GroupCard, PlaylistsView, UserCard (7 files)
- Settings components: BackupsView, SessionManagement, CloudIntegrationView, OfflineQueueManager (4 files)
- DashboardPage: stat cards and activity items hover states (2 instances)
- FeedView: input and button hover states (2 instances)
- Upload zones: MetadataForm, CreatePlaylistModal, CreateProductView, AddEquipmentView, CreateGroupModal (5 files, 6 instances)
- UserCard: avatar border hover state
- Total: ~18 files, ~20 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan)
- Action 11.3.1.2 in progress (second batch complete)

EXHAUSTIVE_TODO_LIST.md

@@ -3858,9 +3858,20 @@ Critical path dependencies:
 
 - [ ] **Action 11.3.1.2**: Replace secondary cyan with steel
   - **Scope**: Non-primary actions - Replace `kodo-cyan` with `kodo-steel`
-  - **Dependencies**: Action 11.3.1.1 complete
+  - **Dependencies**: Action 11.3.1.1 complete ✅
   - **Risk**: MEDIUM (visual changes)
-  - **Validation**: Only primary actions use cyan
+  - **Validation**: ⚠️ **IN PROGRESS** - First batch complete (~15 files, ~25 instances):
+    - ✅ Button component: outline variant hover state
+    - ✅ Header: secondary nav hover states (2 instances)
+    - ✅ FileManagerView, CloudFileBrowser: card hover states (kept selected states cyan)
+    - ✅ ProjectsManager, GroupDetailView, AIToolsView: card/container hover states
+    - ✅ ProfileView, CourseCard, TwoFactorSetup: card hover states
+    - ✅ GearView: upload zone hover states
+    - ✅ ChatInput, ChatMessage, ChatRoom: icon button hover states (6 instances)
+    - ✅ AddToPlaylistModal: button hover states
+    - **Preserved**: Focus rings (cyan), active/selected states (cyan) as per audit Category 5
+    - **Remaining**: ~175 instances across ~200 files (cards, secondary buttons, decorative elements)
+    - **Next batch**: Continue with remaining card components, secondary buttons, and decorative hover states
   - **Rollback**: Restore cyan usage
 
 - [ ] **Action 11.3.1.3**: Apply 80/20 rule (80% neutral, 20% color)

apps/web/src/components/OfflineQueueManager.tsx

@@ -143,7 +143,7 @@ export function OfflineQueueManager({
             {queue.map((request) => (
               <div
                 key={request.id}
-                className="p-4 bg-kodo-ink/30 rounded-lg border border-kodo-steel hover:border-kodo-cyan/30 transition-colors"
+                className="p-4 bg-kodo-ink/30 rounded-lg border border-kodo-steel hover:border-kodo-steel/50 transition-colors"
               >
                 <div className="flex items-start justify-between gap-4">
                   <div className="flex-1 min-w-0">

apps/web/src/components/commerce/CartItem.tsx

@@ -18,7 +18,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
   return (
     <Card
       variant="default"
-      className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-kodo-cyan/30 transition-all"
+      className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-kodo-steel/50 transition-all"
     >
       {/* Thumbnail */}
       <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-kodo-graphite">

apps/web/src/components/commerce/WishlistView.tsx

@@ -113,7 +113,7 @@ export const WishlistView: React.FC = () => {
           <Card
             key={product.id}
             variant="default"
-            className="p-4 group hover:border-kodo-cyan/50 transition-all"
+            className="p-4 group hover:border-kodo-steel/50 transition-all"
           >
             <div className="flex gap-4">
               <div className="relative w-24 h-24 bg-kodo-graphite rounded-lg overflow-hidden flex-shrink-0">

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-cyan" /> 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-cyan 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-kodo-content-dim hover:text-white hover:border-kodo-steel/50 cursor-pointer transition-colors group mb-4">
               <Camera className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" />
               <span className="text-xs font-bold uppercase">Upload Photos</span>
             </div>

apps/web/src/components/library/playlists/CreatePlaylistModal.tsx

@@ -43,7 +43,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
         </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-cyan 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-kodo-content-dim 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>

apps/web/src/components/library/playlists/PlaylistsView.tsx

@@ -125,7 +125,7 @@ export const PlaylistsView: React.FC<{
             <Card
               key={playlist.id}
               variant="default"
-              className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-cyan/50 transition-all hover:-translate-y-1"
+              className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-steel/50 transition-all hover:-translate-y-1"
               onClick={() => onNavigate(playlist.id)}
             >
               <div className="aspect-square relative bg-kodo-ink">

apps/web/src/components/seller/CreateProductView.tsx

@@ -83,7 +83,7 @@ export const CreateProductView: React.FC = () => {
             <h3 className="font-bold text-white mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
               <ImageIcon className="w-4 h-4 text-kodo-cyan" /> Cover Art
             </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-cyan cursor-pointer transition-colors group">
+            <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">
               <UploadCloud className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" />
               <span className="text-xs font-bold uppercase">Upload Image</span>
             </div>

apps/web/src/components/settings/backups/BackupsView.tsx

@@ -95,7 +95,7 @@ export const BackupsView: React.FC = () => {
               {backups.map((backup) => (
                 <div
                   key={backup.id}
-                  className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel hover:border-kodo-cyan/30 transition-all"
+                  className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel hover:border-kodo-steel/50 transition-all"
                 >
                   <div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
                     <div

apps/web/src/components/settings/cloud/CloudIntegrationView.tsx

@@ -146,7 +146,7 @@ export const CloudIntegrationView: React.FC = () => {
                   {['Projects', 'Samples', 'Presets'].map((type) => (
                     <span
                       key={type}
-                      className="px-3 py-1 bg-kodo-slate rounded text-xs text-white border border-kodo-steel cursor-pointer hover:border-kodo-cyan"
+                      className="px-3 py-1 bg-kodo-slate rounded text-xs text-white border border-kodo-steel cursor-pointer hover:border-kodo-steel/50"
                     >
                       {type}
                     </span>

apps/web/src/components/settings/security/SessionManagement.tsx

@@ -81,7 +81,7 @@ export const SessionManagement: React.FC = () => {
           return (
             <div
               key={session.id}
-              className="flex flex-col md:flex-row md:items-center justify-between p-4 bg-kodo-ink rounded-xl border border-kodo-steel hover:border-kodo-cyan/30 transition-colors"
+              className="flex flex-col md:flex-row md:items-center justify-between p-4 bg-kodo-ink rounded-xl border border-kodo-steel hover:border-kodo-steel/50 transition-colors"
             >
               <div className="flex items-start gap-4">
                 <div

apps/web/src/components/social/FeedView.tsx

@@ -90,7 +90,7 @@ export const FeedView: React.FC = () => {
             className="flex-1 cursor-pointer"
             onClick={() => setShowCreateModal(true)}
           >
-            <div className="w-full bg-kodo-void/50 border border-kodo-steel rounded-full px-4 py-2.5 text-kodo-content-dim hover:bg-kodo-void hover:border-kodo-cyan/50 transition-all text-sm">
+            <div className="w-full bg-kodo-void/50 border border-kodo-steel rounded-full px-4 py-2.5 text-kodo-content-dim hover:bg-kodo-void hover:border-kodo-steel/50 transition-all text-sm">
               What are you working on today?
             </div>
           </div>
@@ -98,7 +98,7 @@ export const FeedView: React.FC = () => {
         <div className="flex justify-between items-center mt-3 pl-14">
           <div className="flex gap-4">
             <button
-              className="flex items-center gap-1 text-kodo-content-dim hover:text-kodo-cyan text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+              className="flex items-center gap-1 text-kodo-content-dim hover:text-white text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
               onClick={() => setShowCreateModal(true)}
             >
               <ImageIcon className="w-4 h-4" /> Photo

apps/web/src/components/social/PostCard.tsx

@@ -135,7 +135,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
 
         {post.type === 'audio' && post.audioTrack && (
           <div className="px-4 py-2">
-            <div className="bg-kodo-ink p-3 rounded-xl flex items-center gap-4 border border-kodo-steel hover:border-kodo-cyan/50 transition-colors">
+            <div className="bg-kodo-ink p-3 rounded-xl flex items-center gap-4 border border-kodo-steel hover:border-kodo-steel/50 transition-colors">
               <div className="w-12 h-12 bg-kodo-graphite rounded overflow-hidden relative group cursor-pointer">
                 <img
                   src={post.audioTrack.coverUrl}

apps/web/src/components/social/groups/CreateGroupModal.tsx

@@ -57,7 +57,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
 
         <div className="p-6 space-y-6">
           {/* Cover Upload */}
-          <div className="relative w-full h-32 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg overflow-hidden flex flex-col items-center justify-center group cursor-pointer hover:border-kodo-cyan/50 transition-colors">
+          <div className="relative w-full h-32 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg overflow-hidden flex flex-col items-center justify-center group cursor-pointer hover:border-kodo-steel/50 transition-colors">
             {coverImage ? (
               <img src={coverImage} className="w-full h-full object-cover" />
             ) : (

apps/web/src/components/social/groups/GroupCard.tsx

@@ -22,7 +22,7 @@ export const GroupCard: React.FC<GroupCardProps> = ({
   return (
     <Card
       variant="default"
-      className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-cyan/50 transition-all flex flex-col h-full"
+      className="p-0 overflow-hidden group cursor-pointer hover:border-kodo-steel/50 transition-all flex flex-col h-full"
       onClick={onClick}
     >
       <div className="h-32 relative overflow-hidden bg-kodo-ink">

apps/web/src/components/upload/metadata/MetadataForm.tsx

@@ -61,7 +61,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
         {/* Cover Art Area */}
         <div className="w-full md:w-64 flex-shrink-0">
           <div
-            className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl overflow-hidden relative group cursor-pointer hover:border-kodo-cyan/50 transition-all"
+            className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl overflow-hidden relative group cursor-pointer hover:border-kodo-steel/50 transition-all"
             onClick={() => setShowCoverModal(true)}
           >
             {data.coverArtUrl ? (
@@ -70,7 +70,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
                 className="w-full h-full object-cover"
               />
             ) : (
-              <div className="absolute inset-0 flex flex-col items-center justify-center text-kodo-content-dim group-hover:text-kodo-cyan">
+              <div className="absolute inset-0 flex flex-col items-center justify-center text-kodo-content-dim group-hover:text-white">
                 <Music className="w-12 h-12 mb-2" />
                 <span className="text-xs font-bold uppercase">
                   Upload Cover

apps/web/src/components/user/UserCard.tsx

@@ -18,10 +18,10 @@ export const UserCard: React.FC<UserCardProps> = ({
   isFollowing,
 }) => {
   return (
-    <Card className="flex flex-col items-center text-center p-6 group hover:border-kodo-cyan/30 transition-all relative overflow-hidden">
+    <Card className="flex flex-col items-center text-center p-6 group hover:border-kodo-steel/50 transition-all relative overflow-hidden">
 
       <div className="relative mb-4 cursor-pointer" onClick={onView}>
-        <div className="w-20 h-20 rounded-full border-2 border-kodo-steel p-1 bg-kodo-ink group-hover:border-kodo-cyan transition-colors">
+        <div className="w-20 h-20 rounded-full border-2 border-kodo-steel p-1 bg-kodo-ink group-hover:border-kodo-steel/50 transition-colors">
           <img
             src={user.avatar}
             alt={user.username}

apps/web/src/pages/DashboardPage.tsx

@@ -163,7 +163,7 @@ export function DashboardPage() {
               <Card
                 key={i}
                 className={cn(
-                  'group hover:border-kodo-cyan/30 transition-all duration-300',
+                  'group hover:border-kodo-steel/50 transition-all duration-300',
                   isPrimary && 'md:col-span-2 lg:col-span-2', // Primary stat spans 2 columns
                 )}
               >
@@ -330,7 +330,7 @@ export function DashboardPage() {
                                 recentActivity.slice(0, 5).map((act, i) => (
                                   <div
                                     key={i}
-                                    className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-kodo-cyan/30 transition-all duration-200 group cursor-pointer"
+                                    className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-kodo-steel/50 transition-all duration-200 group cursor-pointer"
                                   >
                                     <div className="flex items-center gap-4">
                                       <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-kodo-cyan/20 to-kodo-cyan/10 border border-kodo-cyan/20 flex items-center justify-center group-hover:scale-110 transition-transform">