veza/apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md

# Complete List of Remaining Tailwind Default Color Instances
**Generated**: Automatically generated list
**Total Files**: 203
**Total Instances**: 1169
**Status**: Action 9.1.1.3 - In Progress (294 instances migrated, ~19.7% complete)

## Usage
This document lists all remaining Tailwind default color instances organized by file path.
Each entry includes:
- File path
- Line number
- Color classes found
- Full line context

## Migration Guidelines
Refer to `TAILWIND_COLORS_AUDIT.md` for color mapping:
- `text-gray-*` → `text-kodo-content-dim` or `text-kodo-text-main`
- `bg-gray-*` → `bg-kodo-graphite`, `bg-kodo-ink`, `bg-kodo-steel`, etc.
- `border-gray-*` → `border-kodo-steel`
- `text-blue-*` → `text-kodo-cyan` (when appropriate)
- Other colors: Map to appropriate Kodo design system colors

## Files with Tailwind Default Colors

---

### apps/web/src/components/ErrorBoundary.tsx
**Total instances in file**: 1

- **Line 90**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
  ```

---

### apps/web/src/components/admin/AdminDashboardView.tsx
**Total instances in file**: 8

- **Line 109**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-400 flex items-center gap-1">
  ```

- **Line 113**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-400 flex items-center gap-1">
  ```

- **Line 181**: `text-gray-`
  ```tsx
  <span className="text-gray-400">Database</span>
  ```

- **Line 185**: `text-gray-`
  ```tsx
  <span className="text-gray-400">Storage</span>
  ```

- **Line 189**: `text-gray-`
  ```tsx
  <span className="text-gray-400">API Latency</span>
  ```

- **Line 218**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 243**: `text-gray-`
  ```tsx
  <div className="text-center text-gray-500 py-4">
  ```

- **Line 270**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

---

### apps/web/src/components/admin/AdminModerationView.tsx
**Total instances in file**: 7

- **Line 82**: `text-gray-`, `text-gray-`
  ```tsx
  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-red text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
  ```

- **Line 107**: `text-gray-`
  ```tsx
  <div className="text-center py-20 text-gray-500">
  ```

- **Line 127**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500 font-mono flex items-center gap-1">
  ```

- **Line 135**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-300">
  ```

- **Line 139**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

- **Line 149**: `bg-red-`, `bg-red-`, `border-red-`
  ```tsx
  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
  ```

- **Line 174**: `text-gray-`
  ```tsx
  className="text-gray-500 hover:text-white"
  ```

---

### apps/web/src/components/admin/AdminSettingsView.tsx
**Total instances in file**: 6

- **Line 40**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-2">
  ```

- **Line 49**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-1">
  ```

- **Line 54**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-2">
  ```

- **Line 102**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 108**: `bg-gray-`
  ```tsx
  className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${maintenance ? 'bg-kodo-red' : 'bg-gray-600'}`}
  ```

- **Line 117**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-2">
  ```

---

### apps/web/src/components/admin/AdminUsersView.tsx
**Total instances in file**: 4

- **Line 73**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <tr className="border-b border-kodo-steel bg-kodo-graphite text-xs font-bold text-gray-500 uppercase tracking-wider">
  ```

- **Line 154**: `text-gray-`
  ```tsx
  <td colSpan={7} className="p-8 text-center text-gray-500">
  ```

- **Line 164**: `text-gray-`
  ```tsx
  <div className="p-4 border-t border-kodo-steel bg-kodo-ink/30 text-xs text-gray-500 flex justify-between items-center">
  ```

---

### apps/web/src/components/admin/UserTableRow.tsx
**Total instances in file**: 9

- **Line 23**: `bg-gray-`
  ```tsx
  offline: 'bg-gray-500',
  ```

- **Line 45**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 font-mono">{user.id}</div>
  ```

- **Line 49**: `text-gray-`
  ```tsx
  <td className="p-4 text-sm text-gray-400">{user.email}</td>
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <td className="p-4 text-sm text-gray-400">{user.tier || 'Free'}</td>
  ```

- **Line 65**: `text-gray-`
  ```tsx
  <td className="p-4 text-sm text-gray-400 font-mono">
  ```

- **Line 68**: `text-gray-`
  ```tsx
  <td className="p-4 text-sm text-gray-400 font-mono">
  ```

- **Line 74**: `text-gray-`
  ```tsx
  className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"
  ```

- **Line 91**: `text-gray-`
  ```tsx
  className="w-full text-left px-4 py-2.5 text-xs text-gray-300 hover:bg-white/10 flex items-center gap-2"
  ```

- **Line 99**: `text-gray-`
  ```tsx
  <button className="w-full text-left px-4 py-2.5 text-xs text-gray-300 hover:bg-white/10 flex items-center gap-2">
  ```

---

### apps/web/src/components/admin/modals/BanUserModal.tsx
**Total instances in file**: 11

- **Line 33**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 38**: `text-gray-`
  ```tsx
  <p className="text-gray-300 text-sm">
  ```

- **Line 45**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 63**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 76**: `text-gray-`
  ```tsx
  <Calendar className="w-5 h-5 text-gray-400" />
  ```

- **Line 79**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 86**: `text-gray-`
  ```tsx
  className={`text-xs ${!isPermanent ? 'text-white' : 'text-gray-500'}`}
  ```

- **Line 92**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-gray-600'}`}
  ```

- **Line 99**: `text-gray-`
  ```tsx
  className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-gray-500'}`}
  ```

- **Line 108**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 128**: `bg-red-`, `bg-red-`, `border-red-`
  ```tsx
  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
  ```

---

### apps/web/src/components/analytics/TrackAnalyticsView.tsx
**Total instances in file**: 3

- **Line 53**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">Analytics Report</p>
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <div className="w-16 text-sm text-gray-400">{g.country}</div>
  ```

- **Line 170**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-500 mt-2">
  ```

---

### apps/web/src/components/commerce/CartItem.tsx
**Total instances in file**: 4

- **Line 24**: `bg-gray-`
  ```tsx
  <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-800">
  ```

- **Line 35**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mb-2">{item.author}</p>
  ```

- **Line 40**: `text-gray-`
  ```tsx
  <span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-gray-500">
  ```

- **Line 54**: `text-gray-`
  ```tsx
  className="text-gray-500 hover:text-kodo-red hover:bg-kodo-red/10"
  ```

---

### apps/web/src/components/commerce/OrderSummary.tsx
**Total instances in file**: 5

- **Line 42**: `border-gray-`
  ```tsx
  <h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-gray-700 pb-2">
  ```

- **Line 47**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-gray-400">
  ```

- **Line 63**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-gray-400">
  ```

- **Line 71**: `border-gray-`
  ```tsx
  <div className="border-t border-gray-700 pt-4 mb-6">
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 leading-relaxed">
  ```

---

### apps/web/src/components/commerce/WishlistView.tsx
**Total instances in file**: 7

- **Line 79**: `text-gray-`
  ```tsx
  <Heart className="w-10 h-10 text-gray-600" />
  ```

- **Line 84**: `text-gray-`
  ```tsx
  <p className="text-gray-400 max-w-sm">
  ```

- **Line 98**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 119**: `bg-gray-`
  ```tsx
  <div className="relative w-24 h-24 bg-gray-800 rounded-lg overflow-hidden flex-shrink-0">
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 truncate">
  ```

- **Line 153**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-1 capitalize">
  ```

- **Line 175**: `text-gray-`
  ```tsx
  className="text-gray-500 hover:text-kodo-red"
  ```

---

### apps/web/src/components/commerce/modals/PromoCodeModal.tsx
**Total instances in file**: 1

- **Line 43**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

---

### apps/web/src/components/commerce/modals/RefundRequestModal.tsx
**Total instances in file**: 5

- **Line 36**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 41**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 48**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 75**: `text-gray-`, `border-gray-`
  ```tsx
  <div className="border-2 border-dashed border-kodo-steel rounded-lg p-6 flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-gray-500 cursor-pointer transition-colors">
  ```

---

### apps/web/src/components/dashboard/StatCard.tsx
**Total instances in file**: 2

- **Line 83**: `text-gray-`
  ```tsx
  <p className="text-xs font-mono text-gray-400 uppercase tracking-widest mb-1">
  ```

- **Line 106**: `text-gray-`
  ```tsx
  <span className="text-gray-500 font-normal">vs last period</span>
  ```

---

### apps/web/src/components/dashboard/TrackList.tsx
**Total instances in file**: 5

- **Line 96**: `text-gray-`
  ```tsx
  <div className="text-gray-500 text-center py-10 bg-kodo-ink/30 rounded-xl border border-dashed border-kodo-steel">
  ```

- **Line 122**: `text-gray-`
  ```tsx
  <div className="w-8 text-center text-gray-500 font-mono text-xs font-bold pl-2">
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <span className="group-hover:hidden text-gray-600">
  ```

- **Line 156**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 truncate hover:underline">
  ```

- **Line 161**: `text-gray-`
  ```tsx
  <div className="hidden md:flex items-center gap-6 text-gray-500 text-xs font-medium">
  ```

---

### apps/web/src/components/developer/APIPlaygroundView.tsx
**Total instances in file**: 7

- **Line 61**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 78**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-1">
  ```

- **Line 84**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 125**: `text-gray-`
  ```tsx
  <span className="text-xs font-bold text-gray-400 bg-white/10 px-2 py-1 rounded">
  ```

- **Line 135**: `text-green-`
  ```tsx
  <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap overflow-auto h-full max-h-[500px]">
  ```

- **Line 139**: `bg-gray-`, `text-gray-`
  ```tsx
  className="absolute top-2 right-2 p-2 bg-gray-800 rounded text-gray-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
  ```

- **Line 149**: `text-gray-`
  ```tsx
  <div className="flex flex-col items-center justify-center h-full text-gray-500">
  ```

---

### apps/web/src/components/developer/DeveloperDashboardView.tsx
**Total instances in file**: 6

- **Line 91**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 143**: `text-gray-`
  ```tsx
  <tr className="text-xs text-gray-500 uppercase border-b border-kodo-steel/50">
  ```

- **Line 161**: `text-gray-`
  ```tsx
  <td className="py-4 text-gray-400">{key.created}</td>
  ```

- **Line 162**: `text-gray-`
  ```tsx
  <td className="py-4 text-gray-300">{key.lastUsed}</td>
  ```

- **Line 167**: `text-gray-`
  ```tsx
  className="h-8 w-8 text-gray-400 hover:text-white"
  ```

- **Line 185**: `text-gray-`
  ```tsx
  <td colSpan={5} className="py-8 text-center text-gray-500">
  ```

---

### apps/web/src/components/developer/WebhooksView.tsx
**Total instances in file**: 5

- **Line 65**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 108**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 mt-1 flex flex-wrap gap-2">
  ```

- **Line 109**: `text-gray-`
  ```tsx
  <span className="text-gray-500">Events:</span>
  ```

- **Line 113**: `text-gray-`
  ```tsx
  className="bg-white/5 px-1.5 rounded text-gray-300"
  ```

- **Line 118**: `text-gray-`
  ```tsx
  <span className="text-gray-500 ml-2">
  ```

---

### apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
**Total instances in file**: 6

- **Line 66**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 82**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-3">
  ```

- **Line 89**: `border-gray-`
  ```tsx
  className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors"
  ```

- **Line 93**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-gold focus:ring-0"
  ```

- **Line 97**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 max-w-xs mx-auto">
  ```

---

### apps/web/src/components/education/CourseCard.tsx
**Total instances in file**: 4

- **Line 25**: `bg-gray-`
  ```tsx
  <div className="relative aspect-video bg-gray-900 overflow-hidden">
  ```

- **Line 68**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-xs mb-3">by {course.instructor}</p>
  ```

- **Line 73**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-400">
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-1 text-xs text-gray-500">
  ```

---

### apps/web/src/components/education/CourseDetailView.tsx
**Total instances in file**: 18

- **Line 51**: `text-gray-`
  ```tsx
  className="pl-0 text-gray-400 hover:text-white"
  ```

- **Line 65**: `text-gray-`
  ```tsx
  <p className="text-xl text-gray-300 mb-6 font-light">
  ```

- **Line 69**: `text-gray-`
  ```tsx
  <div className="flex flex-wrap items-center gap-6 text-sm text-gray-400 mb-6">
  ```

- **Line 93**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase">
  ```

- **Line 109**: `text-gray-`, `text-gray-`
  ```tsx
  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
  ```

- **Line 125**: `text-gray-`
  ```tsx
  <div key={i} className="flex gap-3 text-sm text-gray-300">
  ```

- **Line 137**: `text-gray-`
  ```tsx
  <ul className="list-disc pl-5 space-y-1 text-sm text-gray-400">
  ```

- **Line 148**: `text-gray-`
  ```tsx
  <div className="flex justify-between items-center text-sm text-gray-400 mb-2">
  ```

- **Line 185**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 198**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-3 text-sm text-gray-300">
  ```

- **Line 208**: `text-gray-`
  ```tsx
  <Lock className="w-3 h-3 text-gray-500" />
  ```

- **Line 210**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 243**: `text-gray-`
  ```tsx
  className={`w-3 h-3 ${i < review.rating ? 'fill-current' : 'text-gray-700'}`}
  ```

- **Line 248**: `text-gray-`
  ```tsx
  <span className="ml-auto text-xs text-gray-500">
  ```

- **Line 252**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-300">{review.comment}</p>
  ```

- **Line 291**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-xs mb-6 line-through">
  ```

- **Line 313**: `text-gray-`
  ```tsx
  <p className="text-center text-xs text-gray-500">
  ```

- **Line 323**: `text-gray-`
  ```tsx
  <ul className="text-sm text-gray-400 space-y-2">
  ```

---

### apps/web/src/components/education/CourseLearningView.tsx
**Total instances in file**: 11

- **Line 124**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 font-mono hidden md:block">
  ```

- **Line 149**: `text-gray-`
  ```tsx
  <p className="text-gray-500">Video Player Placeholder</p>
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-600 mt-2">
  ```

- **Line 174**: `text-gray-`
  ```tsx
  <p className="text-gray-300 leading-relaxed">
  ```

- **Line 211**: `text-gray-`, `text-gray-`
  ```tsx
  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
  ```

- **Line 219**: `text-gray-`
  ```tsx
  <div className="text-gray-300 space-y-4">
  ```

- **Line 283**: `text-gray-`
  ```tsx
  <div className="p-4 bg-kodo-ink/50 text-xs font-bold text-gray-400 uppercase tracking-wider sticky top-0 backdrop-blur-sm z-10">
  ```

- **Line 301**: `text-gray-`
  ```tsx
  className={`w-4 h-4 ${isActive ? 'text-kodo-cyan' : 'text-gray-500'}`}
  ```

- **Line 304**: `text-gray-`
  ```tsx
  <HelpCircle className="w-4 h-4 text-gray-500" />
  ```

- **Line 309**: `text-gray-`
  ```tsx
  className={`text-sm font-medium leading-snug ${isActive ? 'text-white' : 'text-gray-300'}`}
  ```

- **Line 313**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 mt-1 flex items-center gap-2">
  ```

---

### apps/web/src/components/education/MyCoursesView.tsx
**Total instances in file**: 4

- **Line 93**: `bg-gray-`
  ```tsx
  <div className="w-full bg-gray-700 h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
  ```

- **Line 113**: `text-gray-`, `text-gray-`
  ```tsx
  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-gray-500 hover:text-gray-300'}`}
  ```

- **Line 119**: `text-gray-`, `text-gray-`
  ```tsx
  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-gray-500 hover:text-gray-300'}`}
  ```

- **Line 136**: `text-gray-`
  ```tsx
  <div className="col-span-full text-center py-20 text-gray-500">
  ```

---

### apps/web/src/components/education/modals/CertificateModal.tsx
**Total instances in file**: 14

- **Line 41**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 45**: `bg-gray-`
  ```tsx
  <div className="p-8 bg-gray-900 flex justify-center">
  ```

- **Line 47**: `border-gray-`
  ```tsx
  <div className="w-full aspect-[1.414] bg-white text-black p-8 relative shadow-2xl max-w-2xl border-8 border-double border-gray-300">
  ```

- **Line 50**: `text-gray-`
  ```tsx
  <h1 className="text-4xl font-display font-bold text-gray-900 mb-2 uppercase tracking-widest">
  ```

- **Line 53**: `text-gray-`
  ```tsx
  <p className="text-sm font-serif italic text-gray-500">
  ```

- **Line 58**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-600 mb-2">
  ```

- **Line 61**: `border-gray-`
  ```tsx
  <h2 className="text-3xl font-script font-bold text-kodo-cyan-dim mb-6 border-b-2 border-gray-200 pb-2 px-8">
  ```

- **Line 65**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-600 mb-2">
  ```

- **Line 68**: `text-gray-`
  ```tsx
  <h3 className="text-xl font-bold text-gray-800 mb-8 max-w-md leading-tight">
  ```

- **Line 72**: `border-gray-`
  ```tsx
  <div className="flex justify-between w-full mt-auto pt-8 border-t border-gray-300">
  ```

- **Line 74**: `text-gray-`
  ```tsx
  <p className="text-xs font-bold text-gray-900">
  ```

- **Line 77**: `text-gray-`
  ```tsx
  <p className="text-[10px] text-gray-500 uppercase">Date</p>
  ```

- **Line 80**: `bg-gray-`
  ```tsx
  <div className="h-8 w-24 bg-gray-200 mb-1 opacity-50"></div>{' '}
  ```

- **Line 82**: `text-gray-`
  ```tsx
  <p className="text-[10px] text-gray-500 uppercase">
  ```

---

### apps/web/src/components/education/modals/QuizModal.tsx
**Total instances in file**: 6

- **Line 79**: `text-gray-`
  ```tsx
  <p className="text-gray-400 mb-6">
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <span className="text-xs font-bold text-gray-500 uppercase mb-2 block">
  ```

- **Line 145**: `text-gray-`, `border-gray-`
  ```tsx
  : 'bg-kodo-ink border-kodo-steel text-gray-300 hover:bg-white/5 hover:border-gray-500'
  ```

- **Line 150**: `border-gray-`, `text-gray-`
  ```tsx
  className={`w-6 h-6 rounded-full border flex items-center justify-center text-xs font-bold ${selectedAnswers[currentQuestionIndex] === idx ? 'bg-kodo-cyan border-kodo-cyan text-black' : 'border-gray-500 text-gray-500'}`}
  ```

- **Line 163**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

---

### apps/web/src/components/forms/RegisterForm.tsx
**Total instances in file**: 4

- **Line 135**: `border-green-`
  ```tsx
  ? 'border-green-500 focus-visible:ring-green-500'
  ```

- **Line 136**: `border-red-`
  ```tsx
  : 'border-red-500 focus-visible:ring-red-500'),
  ```

- **Line 143**: `text-green-`
  ```tsx
  className="h-5 w-5 text-green-500"
  ```

- **Line 147**: `text-red-`
  ```tsx
  <XCircle className="h-5 w-5 text-red-500" aria-hidden="true" />
  ```

---

### apps/web/src/components/gamification/AchievementCard.tsx
**Total instances in file**: 7

- **Line 32**: `text-gray-`
  ```tsx
  <div className="absolute top-2 right-2 text-gray-500">
  ```

- **Line 41**: `from-gray-`, `border-gray-`, `text-gray-`
  ```tsx
  className={`rounded-full bg-gradient-to-br from-gray-800 to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-[0_0_15px_rgba(234,179,8,0.3)]' : 'border-gray-700 w-12 h-12 text-xl text-gray-500'}`}
  ```

- **Line 48**: `text-gray-`
  ```tsx
  className={`font-bold truncate ${isUnlocked ? 'text-white' : 'text-gray-400'}`}
  ```

- **Line 52**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 line-clamp-2 mb-2">
  ```

- **Line 57**: `bg-gray-`
  ```tsx
  <div className="w-full bg-gray-800 h-1.5 rounded-full overflow-hidden">
  ```

- **Line 59**: `bg-gray-`
  ```tsx
  className={`h-full transition-all duration-500 ${isUnlocked ? 'bg-kodo-gold' : 'bg-gray-600'}`}
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <span className={isUnlocked ? 'text-kodo-gold' : 'text-gray-500'}>
  ```

---

### apps/web/src/components/gamification/AchievementsView.tsx
**Total instances in file**: 1

- **Line 61**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

---

### apps/web/src/components/gamification/LeaderboardView.tsx
**Total instances in file**: 7

- **Line 40**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 50**: `text-gray-`
  ```tsx
  className={`px-4 py-2 rounded text-xs font-bold uppercase transition-all ${period === p ? 'bg-kodo-gold text-black shadow-lg' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 75**: `border-gray-`
  ```tsx
  className={`w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-4 ${i === 1 ? 'border-kodo-gold' : i === 0 ? 'border-gray-300' : 'border-orange-400'}`}
  ```

- **Line 107**: `text-gray-`
  ```tsx
  <tr className="border-b border-kodo-steel bg-kodo-ink text-xs font-bold text-gray-500 uppercase tracking-wider">
  ```

- **Line 121**: `text-gray-`
  ```tsx
  <td className="p-4 text-center font-bold font-mono text-gray-400">
  ```

- **Line 136**: `text-gray-`
  ```tsx
  <span className="bg-kodo-slate px-2 py-1 rounded text-xs font-mono text-gray-300">
  ```

- **Line 154**: `text-gray-`
  ```tsx
  <span className="text-gray-500 flex items-center justify-center">
  ```

---

### apps/web/src/components/gamification/ProfileXPView.tsx
**Total instances in file**: 8

- **Line 81**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 89**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

- **Line 104**: `text-gray-`
  ```tsx
  <div className="bg-black/30 px-3 py-1 rounded text-xs text-gray-400">
  ```

- **Line 110**: `text-gray-`
  ```tsx
  <div className="bg-black/30 px-3 py-1 rounded text-xs text-gray-400">
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 137**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 148**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 192**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-500 mt-2">
  ```

---

### apps/web/src/components/gamification/XPBar.tsx
**Total instances in file**: 2

- **Line 44**: `text-gray-`
  ```tsx
  <span className="text-gray-400">
  ```

- **Line 67**: `text-gray-`
  ```tsx
  <div className="text-right text-[10px] text-gray-500 mt-1 font-mono">
  ```

---

### apps/web/src/components/inventory/AddEquipmentView.tsx
**Total instances in file**: 5

- **Line 59**: `text-gray-`
  ```tsx
  <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors group mb-4">
  ```

- **Line 75**: `text-gray-`
  ```tsx
  <FileText className="w-4 h-4 text-gray-400" /> Documents
  ```

- **Line 78**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-2 text-center">
  ```

- **Line 92**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 162**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

---

### apps/web/src/components/inventory/EquipmentCard.tsx
**Total instances in file**: 3

- **Line 19**: `text-gray-`, `bg-gray-`
  ```tsx
  Sold: 'text-gray-400 bg-gray-500/10',
  ```

- **Line 29**: `bg-gray-`
  ```tsx
  <div className="relative aspect-square bg-gray-900 overflow-hidden">
  ```

- **Line 56**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-1 text-gray-400">
  ```

---

### apps/web/src/components/inventory/EquipmentDetailView.tsx
**Total instances in file**: 18

- **Line 65**: `text-gray-`
  ```tsx
  <div className="text-center py-20 text-gray-500">Item not found</div>
  ```

- **Line 83**: `text-gray-`
  ```tsx
  className="pl-0 text-gray-400 hover:text-white"
  ```

- **Line 127**: `bg-gray-`
  ```tsx
  className={`w-2 h-2 rounded-full ${i === activeImgIndex ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

- **Line 143**: `text-gray-`
  ```tsx
  <span className="text-gray-500 block text-xs uppercase">
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <p className="text-gray-500">No specs defined.</p>
  ```

- **Line 162**: `bg-gray-`, `text-gray-`
  ```tsx
  className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${item.status === 'Active' ? 'bg-kodo-lime/10 text-kodo-lime' : 'bg-gray-700 text-gray-300'}`}
  ```

- **Line 174**: `text-gray-`
  ```tsx
  <div className="flex gap-6 text-sm text-gray-400 mb-6 font-mono bg-kodo-ink p-4 rounded-lg border border-kodo-steel/50">
  ```

- **Line 176**: `text-gray-`
  ```tsx
  <span className="text-[10px] uppercase font-bold text-gray-500">
  ```

- **Line 182**: `text-gray-`
  ```tsx
  <span className="text-[10px] uppercase font-bold text-gray-500">
  ```

- **Line 188**: `text-gray-`
  ```tsx
  <span className="text-[10px] uppercase font-bold text-gray-500">
  ```

- **Line 199**: `border-gray-`
  ```tsx
  <h3 className="font-bold text-white mb-4 border-b border-gray-700 pb-2 flex items-center gap-2">
  ```

- **Line 205**: `text-gray-`
  ```tsx
  <span className="block text-xs text-gray-500 uppercase">
  ```

- **Line 216**: `text-gray-`
  ```tsx
  <span className="text-gray-500">Support: </span>
  ```

- **Line 229**: `text-gray-`
  ```tsx
  <FileText className="w-4 h-4 text-gray-400" /> Documentation
  ```

- **Line 239**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">{doc.name}</span>
  ```

- **Line 244**: `text-gray-`
  ```tsx
  className="h-8 w-8 text-gray-500 hover:text-white"
  ```

- **Line 268**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">{log.date}</span>
  ```

- **Line 270**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mt-1">{log.notes}</p>
  ```

---

### apps/web/src/components/inventory/InventoryView.tsx
**Total instances in file**: 6

- **Line 59**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 93**: `text-gray-`
  ```tsx
  <Filter className="w-4 h-4 text-gray-500 ml-2" />
  ```

- **Line 95**: `text-gray-`
  ```tsx
  className="bg-transparent text-sm text-gray-300 focus:outline-none p-1 cursor-pointer"
  ```

- **Line 108**: `text-gray-`
  ```tsx
  <Box className="w-4 h-4 text-gray-500 ml-2" />
  ```

- **Line 110**: `text-gray-`
  ```tsx
  className="bg-transparent text-sm text-gray-300 focus:outline-none p-1 cursor-pointer"
  ```

- **Line 139**: `text-gray-`
  ```tsx
  <div className="col-span-full text-center py-20 text-gray-500">
  ```

---

### apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
**Total instances in file**: 3

- **Line 80**: `border-gray-`, `border-gray-`
  ```tsx
  className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 last:border-0"
  ```

- **Line 82**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 85**: `text-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded">
  ```

---

### apps/web/src/components/layout/AudioPlayer.tsx
**Total instances in file**: 15

- **Line 72**: `text-gray-`
  ```tsx
  className="w-5 h-5 text-gray-400 cursor-pointer hover:text-white"
  ```

- **Line 80**: `text-gray-`
  ```tsx
  className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'up-next' ? 'text-kodo-cyan border-b-2 border-kodo-cyan bg-white/5' : 'text-gray-500 hover:text-white'}`}
  ```

- **Line 86**: `text-gray-`
  ```tsx
  className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'history' ? 'text-kodo-magenta border-b-2 border-kodo-magenta bg-white/5' : 'text-gray-500 hover:text-white'}`}
  ```

- **Line 110**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 truncate">
  ```

- **Line 115**: `text-gray-`
  ```tsx
  className="p-2 hover:bg-white/10 rounded-full text-gray-400 hover:text-kodo-magenta"
  ```

- **Line 125**: `text-gray-`
  ```tsx
  <div className="text-center text-gray-500 py-12 flex flex-col items-center">
  ```

- **Line 140**: `text-gray-`
  ```tsx
  <div className="cursor-grab active:cursor-grabbing text-gray-600 hover:text-white p-1">
  ```

- **Line 157**: `text-gray-`
  ```tsx
  <div className="text-sm font-medium text-gray-300 group-hover:text-white truncate">
  ```

- **Line 160**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 truncate">
  ```

- **Line 178**: `text-red-`
  ```tsx
  className="p-1.5 hover:text-red-500"
  ```

- **Line 197**: `text-gray-`
  ```tsx
  <div className="text-center text-gray-500 py-12 flex flex-col items-center">
  ```

- **Line 215**: `text-gray-`
  ```tsx
  <div className="text-sm font-medium text-gray-300 group-hover:text-white truncate">
  ```

- **Line 218**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 truncate">
  ```

- **Line 223**: `text-gray-`
  ```tsx
  className="p-1.5 text-gray-400 hover:text-kodo-cyan opacity-0 group-hover:opacity-100 transition-opacity"
  ```

- **Line 242**: `text-gray-`, `text-red-`
  ```tsx
  className="w-full text-xs text-gray-400 hover:text-red-400"
  ```

---

### apps/web/src/components/layout/Header.tsx
**Total instances in file**: 1

- **Line 209**: `text-red-`, `text-red-`, `bg-red-`
  ```tsx
  className="flex items-center gap-3 w-full px-3 py-2 text-sm text-red-400/80 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
  ```

---

### apps/web/src/components/layout/Navbar.tsx
**Total instances in file**: 6

- **Line 174**: `from-gray-`, `to-gray-`
  ```tsx
  <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-gray-700 to-gray-600 p-[1px] hover:ring-2 hover:ring-kodo-cyan transition-all">
  ```

- **Line 192**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500">Pro Plan</p>
  ```

- **Line 199**: `text-gray-`
  ```tsx
  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
  ```

- **Line 208**: `text-gray-`
  ```tsx
  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
  ```

- **Line 217**: `text-gray-`
  ```tsx
  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
  ```

- **Line 226**: `text-gray-`
  ```tsx
  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
  ```

---

### apps/web/src/components/layout/Sidebar.tsx
**Total instances in file**: 1

- **Line 324**: `text-red-`, `text-red-`, `bg-red-`
  ```tsx
  className="w-full flex items-center gap-3 px-4 py-2.5 text-red-400/80 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all text-sm mt-1 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
  ```

---

### apps/web/src/components/library/AutoMetadataDetectionModal.tsx
**Total instances in file**: 6

- **Line 52**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 69**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mt-2">
  ```

- **Line 80**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
  ```

- **Line 88**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
  ```

- **Line 96**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
  ```

- **Line 104**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
  ```

---

### apps/web/src/components/library/WatermarkSettingsModal.tsx
**Total instances in file**: 6

- **Line 56**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-gray-600'}`}
  ```

- **Line 72**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 80**: `text-gray-`, `border-gray-`
  ```tsx
  className={`h-10 rounded border text-[10px] uppercase font-bold transition-all ${position === i ? 'bg-kodo-magenta border-kodo-magenta text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
  ```

- **Line 84**: `bg-gray-`
  ```tsx
  className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-gray-600'}`}
  ```

- **Line 92**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-400 mb-2">
  ```

- **Line 132**: `bg-gray-`
  ```tsx
  <div className="w-3/4 aspect-square bg-gray-800 rounded-lg relative overflow-hidden shadow-2xl">
  ```

---

### apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
**Total instances in file**: 4

- **Line 82**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

- **Line 131**: `border-gray-`
  ```tsx
  className={`w-5 h-5 rounded-full border flex items-center justify-center ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan border-kodo-cyan' : 'border-gray-600'}`}
  ```

---

### apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
**Total instances in file**: 7

- **Line 41**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 46**: `text-gray-`
  ```tsx
  <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-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors flex-shrink-0">
  ```

- **Line 81**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 89**: `bg-gray-`
  ```tsx
  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

- **Line 103**: `text-gray-`
  ```tsx
  className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-gray-400'}`}
  ```

- **Line 107**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 113**: `bg-gray-`
  ```tsx
  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-gray-600'}`}
  ```

---

### apps/web/src/components/library/playlists/EditPlaylistModal.tsx
**Total instances in file**: 4

- **Line 53**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-6">
  ```

- **Line 62**: `bg-red-`, `bg-red-`, `border-red-`
  ```tsx
  className="bg-red-600 hover:bg-red-700 border-red-500"
  ```

- **Line 83**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 130**: `bg-gray-`
  ```tsx
  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

---

### apps/web/src/components/library/playlists/PlaylistDetailView.tsx
**Total instances in file**: 13

- **Line 121**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mb-6 max-w-2xl">
  ```

- **Line 125**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 text-sm text-gray-300 font-medium mb-6">
  ```

- **Line 127**: `bg-gray-`
  ```tsx
  <div className="w-6 h-6 rounded-full bg-gray-700"></div>
  ```

- **Line 132**: `bg-gray-`
  ```tsx
  <span className="w-1 h-1 bg-gray-500 rounded-full"></span>
  ```

- **Line 134**: `bg-gray-`
  ```tsx
  <span className="w-1 h-1 bg-gray-500 rounded-full"></span>
  ```

- **Line 160**: `text-gray-`
  ```tsx
  className="border border-white/10 hover:border-white text-gray-300 hover:text-white"
  ```

- **Line 169**: `text-gray-`
  ```tsx
  className="border border-white/10 hover:border-white text-gray-300 hover:text-white"
  ```

- **Line 181**: `text-gray-`
  ```tsx
  <div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-gray-500 uppercase px-4 pb-2 border-b border-white/10 mb-2">
  ```

- **Line 201**: `text-gray-`
  ```tsx
  <div className="w-8 text-center flex justify-center text-gray-500 group-hover:text-white cursor-grab active:cursor-grabbing">
  ```

- **Line 217**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-xs truncate hover:underline cursor-pointer">
  ```

- **Line 222**: `text-gray-`
  ```tsx
  <div className="hidden md:block text-gray-400 text-sm truncate">
  ```

- **Line 225**: `text-gray-`
  ```tsx
  <div className="hidden sm:block text-gray-500 text-xs">
  ```

- **Line 228**: `text-gray-`
  ```tsx
  <div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-gray-400 font-mono">
  ```

---

### apps/web/src/components/library/playlists/PlaylistsView.tsx
**Total instances in file**: 7

- **Line 97**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 131**: `bg-gray-`
  ```tsx
  <div className="aspect-square relative bg-gray-900">
  ```

- **Line 138**: `text-gray-`
  ```tsx
  <div className="w-full h-full flex items-center justify-center text-gray-600">
  ```

- **Line 157**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mb-3 line-clamp-1">
  ```

- **Line 160**: `text-gray-`
  ```tsx
  <div className="flex justify-between items-center text-[10px] font-bold text-gray-500 uppercase">
  ```

- **Line 163**: `text-gray-`
  ```tsx
  <Globe className="w-3 h-3 text-gray-600" />
  ```

- **Line 165**: `text-gray-`
  ```tsx
  <Lock className="w-3 h-3 text-gray-600" />
  ```

---

### apps/web/src/components/library/playlists/QueueView.tsx
**Total instances in file**: 11

- **Line 64**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 90**: `text-gray-`
  ```tsx
  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <div className="text-gray-500 font-mono text-sm hidden md:block">
  ```

- **Line 136**: `text-gray-`
  ```tsx
  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest">
  ```

- **Line 144**: `text-gray-`
  ```tsx
  className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-gray-500'}`}
  ```

- **Line 149**: `bg-gray-`
  ```tsx
  className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-gray-700'}`}
  ```

- **Line 160**: `text-gray-`
  ```tsx
  <div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-gray-500">
  ```

- **Line 181**: `text-gray-`
  ```tsx
  <div className="text-gray-600 cursor-grab active:cursor-grabbing hover:text-white p-1">
  ```

- **Line 200**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 truncate">
  ```

- **Line 204**: `text-gray-`
  ```tsx
  <div className="text-gray-500 font-mono text-xs hidden sm:block">
  ```

- **Line 208**: `text-gray-`
  ```tsx
  className="p-2 text-gray-500 hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
  ```

---

### apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
**Total instances in file**: 4

- **Line 38**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 52**: `border-gray-`
  ```tsx
  className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500"
  ```

- **Line 65**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 71**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

---

### apps/web/src/components/live/LiveStreamDetailView.tsx
**Total instances in file**: 4

- **Line 52**: `text-gray-`
  ```tsx
  color: 'text-gray-400',
  ```

- **Line 170**: `text-gray-`
  ```tsx
  <Settings className="w-4 h-4 text-gray-400 cursor-pointer hover:text-white" />
  ```

- **Line 181**: `text-gray-`
  ```tsx
  <span className="text-gray-300">{msg.text}</span>
  ```

- **Line 203**: `text-gray-`
  ```tsx
  <span className="text-[10px] text-gray-500">Slow Mode: Off</span>
  ```

---

### apps/web/src/components/live/modals/TipStreamerModal.tsx
**Total instances in file**: 9

- **Line 46**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 53**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 61**: `text-gray-`
  ```tsx
  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-gray-400 hover:text-white'}`}
  ```

- **Line 68**: `text-gray-`
  ```tsx
  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-bold">
  ```

- **Line 83**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 93**: `text-gray-`
  ```tsx
  <p className="text-right text-xs text-gray-500 mt-1">
  ```

- **Line 100**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 106**: `text-gray-`
  ```tsx
  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-gray-400'}`}
  ```

- **Line 112**: `text-gray-`
  ```tsx
  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-gray-400'}`}
  ```

---

### apps/web/src/components/marketplace/LicenceCard.tsx
**Total instances in file**: 2

- **Line 42**: `text-gray-`
  ```tsx
  <li key={i} className="flex items-start gap-2 text-sm text-gray-300">
  ```

- **Line 48**: `text-gray-`
  ```tsx
  <li className="text-xs text-gray-500 pl-6">
  ```

---

### apps/web/src/components/marketplace/ProductCard.tsx
**Total instances in file**: 3

- **Line 95**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-xs mb-4 flex items-center gap-1">
  ```

- **Line 97**: `text-gray-`
  ```tsx
  <span className="text-gray-300 hover:underline">
  ```

- **Line 105**: `text-gray-`
  ```tsx
  <span className="text-gray-500">({product.reviewCount || 0})</span>
  ```

---

### apps/web/src/components/marketplace/ProductDetailView.tsx
**Total instances in file**: 19

- **Line 65**: `text-gray-`
  ```tsx
  <span className="text-gray-500 text-sm">
  ```

- **Line 93**: `bg-gray-`
  ```tsx
  <div className="h-1 bg-gray-600 rounded-full overflow-hidden">
  ```

- **Line 125**: `text-gray-`
  ```tsx
  className="border border-kodo-steel text-gray-400 hover:text-kodo-magenta"
  ```

- **Line 132**: `text-gray-`
  ```tsx
  className="border border-kodo-steel text-gray-400 hover:text-white"
  ```

- **Line 141**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 text-sm text-gray-400">
  ```

- **Line 155**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase font-bold">
  ```

- **Line 161**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase font-bold">
  ```

- **Line 167**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase font-bold">
  ```

- **Line 173**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase font-bold">
  ```

- **Line 182**: `text-gray-`
  ```tsx
  <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
  ```

- **Line 201**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 uppercase font-bold">
  ```

- **Line 228**: `text-gray-`
  ```tsx
  <div className="prose prose-invert max-w-none text-gray-300">
  ```

- **Line 255**: `bg-gray-`
  ```tsx
  className="w-10 h-10 rounded-full bg-gray-700"
  ```

- **Line 266**: `text-gray-`
  ```tsx
  className={`w-3 h-3 ${i < review.rating ? 'fill-current' : 'text-gray-600'}`}
  ```

- **Line 270**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 274**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-300">{review.comment}</p>
  ```

- **Line 279**: `text-gray-`
  ```tsx
  <p className="text-gray-500 italic text-center py-4">
  ```

- **Line 314**: `bg-gray-`
  ```tsx
  className="w-16 h-16 rounded bg-gray-800 object-cover"
  ```

- **Line 320**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500">{p.type}</p>
  ```

---

### apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
**Total instances in file**: 6

- **Line 29**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 39**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 57**: `text-gray-`
  ```tsx
  className="flex items-start gap-3 text-sm text-gray-300"
  ```

- **Line 73**: `text-gray-`
  ```tsx
  <li className="flex items-start gap-3 text-sm text-gray-400">
  ```

- **Line 79**: `text-gray-`
  ```tsx
  <li className="flex items-start gap-3 text-sm text-gray-400">
  ```

- **Line 88**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 italic">
  ```

---

### apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
**Total instances in file**: 4

- **Line 43**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 49**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mb-2">
  ```

- **Line 68**: `text-gray-`
  ```tsx
  : 'text-gray-600'
  ```

- **Line 76**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

---

### apps/web/src/components/modals/CreatorModal.tsx
**Total instances in file**: 11

- **Line 48**: `text-gray-`
  ```tsx
  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-kodo-cyan text-black' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 54**: `text-gray-`
  ```tsx
  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-kodo-magenta text-white' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 60**: `text-gray-`
  ```tsx
  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-kodo-gold text-black' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 66**: `text-gray-`
  ```tsx
  <button onClick={onClose} className="text-gray-400 hover:text-white">
  ```

- **Line 79**: `text-gray-`
  ```tsx
  className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${step >= i ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-gray-500'}`}
  ```

- **Line 91**: `text-gray-`
  ```tsx
  <h4 className="font-bold text-gray-400 text-sm mb-2 uppercase">
  ```

- **Line 94**: `text-gray-`
  ```tsx
  <ul className="text-xs text-gray-500 space-y-1">
  ```

- **Line 109**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2 font-body">
  ```

- **Line 117**: `text-gray-`
  ```tsx
  <button className="p-3 rounded border border-kodo-steel bg-kodo-slate text-gray-400 flex flex-col items-center justify-center gap-2 hover:border-white hover:text-white">
  ```

- **Line 121**: `text-gray-`
  ```tsx
  <button className="p-3 rounded border border-kodo-steel bg-kodo-slate text-gray-400 flex flex-col items-center justify-center gap-2 hover:border-white hover:text-white">
  ```

- **Line 136**: `text-gray-`
  ```tsx
  <p className="text-gray-400 mb-6">
  ```

---

### apps/web/src/components/notifications/NotificationBell.tsx
**Total instances in file**: 2

- **Line 57**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400">{unreadCount} unread</p>
  ```

- **Line 71**: `text-gray-`
  ```tsx
  <div className="text-center py-10 text-gray-500">
  ```

---

### apps/web/src/components/notifications/NotificationItem.tsx
**Total instances in file**: 3

- **Line 38**: `text-gray-`
  ```tsx
  return <Info className="w-4 h-4 text-gray-400" />;
  ```

- **Line 63**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-200 leading-relaxed">
  ```

- **Line 66**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500 font-mono mt-1 block">
  ```

---

### apps/web/src/components/player/LyricsPanel.tsx
**Total instances in file**: 2

- **Line 34**: `text-gray-`
  ```tsx
  <div className="flex flex-col items-center justify-center h-full text-gray-500 opacity-50">
  ```

- **Line 50**: `text-gray-`
  ```tsx
  className={`p-2 rounded-full backdrop-blur-md ${autoScroll ? 'bg-kodo-cyan/20 text-kodo-cyan' : 'bg-black/30 text-gray-400'}`}
  ```

---

### apps/web/src/components/player/MiniPlayer.tsx
**Total instances in file**: 7

- **Line 61**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-xs truncate hover:text-white cursor-pointer">
  ```

- **Line 66**: `text-gray-`
  ```tsx
  className="text-gray-500 hover:text-kodo-magenta transition-colors ml-2"
  ```

- **Line 78**: `text-gray-`
  ```tsx
  <span className="text-[10px] font-mono text-gray-500 w-8 text-right">
  ```

- **Line 97**: `text-gray-`
  ```tsx
  <span className="text-[10px] font-mono text-gray-500 w-8">
  ```

- **Line 106**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-kodo-magenta transition-colors hidden xl:block"
  ```

- **Line 113**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-kodo-lime transition-colors"
  ```

- **Line 120**: `text-gray-`
  ```tsx
  className={`text-gray-400 hover:text-kodo-cyan transition-colors ${isQueueOpen ? 'text-kodo-cyan' : ''}`}
  ```

---

### apps/web/src/components/player/PlaybackSpeedModal.tsx
**Total instances in file**: 5

- **Line 27**: `text-gray-`
  ```tsx
  <X className="w-4 h-4 text-gray-400 hover:text-white" />
  ```

- **Line 34**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-400">
  ```

- **Line 58**: `text-gray-`
  ```tsx
  className={`px-2 py-1.5 rounded text-xs font-bold transition-all ${playbackRate === rate ? 'bg-kodo-gold text-black' : 'bg-kodo-slate text-gray-400 hover:text-white'}`}
  ```

- **Line 71**: `text-gray-`
  ```tsx
  <span className="text-[10px] text-gray-500">
  ```

- **Line 77**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-gray-600'}`}
  ```

---

### apps/web/src/components/player/PlayerControls.tsx
**Total instances in file**: 7

- **Line 51**: `text-gray-`
  ```tsx
  className={`transition-colors hover:text-white ${shuffle ? 'text-kodo-cyan' : 'text-gray-500'}`}
  ```

- **Line 58**: `text-gray-`
  ```tsx
  className={`transition-colors hover:text-white relative ${repeatMode !== 'off' ? 'text-kodo-cyan' : 'text-gray-500'}`}
  ```

- **Line 74**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white transition-colors hover:scale-110"
  ```

- **Line 108**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white transition-colors hover:scale-110"
  ```

- **Line 126**: `text-gray-`
  ```tsx
  className={`text-gray-400 hover:text-kodo-gold transition-colors ${showSpeed ? 'text-kodo-gold' : ''}`}
  ```

- **Line 136**: `text-gray-`
  ```tsx
  className={`text-gray-400 hover:text-kodo-cyan transition-colors ${showVisualizer ? 'text-kodo-cyan' : ''}`}
  ```

- **Line 152**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white"
  ```

---

### apps/web/src/components/player/VisualizerSettingsModal.tsx
**Total instances in file**: 5

- **Line 27**: `text-gray-`
  ```tsx
  <X className="w-4 h-4 text-gray-400 hover:text-white" />
  ```

- **Line 34**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 42**: `text-gray-`
  ```tsx
  className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-slate border-transparent text-gray-400 hover:text-white'}`}
  ```

- **Line 52**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-400 mb-1">
  ```

- **Line 70**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

---

### apps/web/src/components/search/SearchBar.tsx
**Total instances in file**: 10

- **Line 98**: `text-gray-`
  ```tsx
  className={`w-5 h-5 mr-3 transition-colors ${isFocused ? 'text-kodo-cyan' : 'text-gray-500'}`}
  ```

- **Line 112**: `text-gray-`
  ```tsx
  className="text-gray-500 hover:text-white transition-colors"
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <div className="px-4 py-2 text-[10px] font-bold text-gray-500 uppercase">
  ```

- **Line 135**: `text-gray-`
  ```tsx
  <div className="w-8 h-8 rounded bg-kodo-slate flex items-center justify-center text-gray-400">
  ```

- **Line 142**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 capitalize">
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <div className="p-4 text-center text-gray-500 text-sm">
  ```

- **Line 158**: `text-gray-`
  ```tsx
  <span className="text-[10px] font-bold text-gray-500 uppercase">
  ```

- **Line 174**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-3 text-gray-300 group-hover:text-white">
  ```

- **Line 175**: `text-gray-`
  ```tsx
  <Clock className="w-4 h-4 text-gray-500" />
  ```

- **Line 178**: `text-gray-`
  ```tsx
  <ArrowUpRight className="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100" />
  ```

---

### apps/web/src/components/seller/CreateProductView.tsx
**Total instances in file**: 16

- **Line 65**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 86**: `text-gray-`
  ```tsx
  <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors group">
  ```

- **Line 90**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-2 text-center">
  ```

- **Line 101**: `text-gray-`
  ```tsx
  <label className="text-xs text-gray-400 mb-1 block">
  ```

- **Line 104**: `border-gray-`
  ```tsx
  <div className="h-20 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
  ```

- **Line 105**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 111**: `text-gray-`
  ```tsx
  <label className="text-xs text-gray-400 mb-1 block">
  ```

- **Line 114**: `border-gray-`
  ```tsx
  <div className="h-12 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
  ```

- **Line 115**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 139**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 152**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 189**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 192**: `text-gray-`
  ```tsx
  <div className="p-3 bg-kodo-ink border border-kodo-steel rounded-lg text-gray-400 text-sm">
  ```

- **Line 217**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${lic.enabled ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

- **Line 227**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 239**: `text-gray-`
  ```tsx
  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
  ```

---

### apps/web/src/components/seller/SellerDashboardView.tsx
**Total instances in file**: 9

- **Line 75**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 103**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
  ```

- **Line 118**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
  ```

- **Line 133**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
  ```

- **Line 178**: `text-gray-`
  ```tsx
  <div className="w-8 text-center font-mono text-gray-500">
  ```

- **Line 189**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 222**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 flex justify-between mt-1">
  ```

- **Line 226**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 mt-1">
  ```

---

### apps/web/src/components/seller/modals/FlashSaleModal.tsx
**Total instances in file**: 9

- **Line 50**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 58**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 62**: `text-gray-`
  ```tsx
  <Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
  ```

- **Line 75**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 79**: `text-gray-`
  ```tsx
  <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
  ```

- **Line 99**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-300">
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase">
  ```

- **Line 141**: `text-gray-`
  ```tsx
  className={`text-gray-500 ${selectedIds.includes(product.id) ? 'text-kodo-gold' : ''}`}
  ```

- **Line 157**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

---

### apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
**Total instances in file**: 2

- **Line 35**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 135**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">{desc}</div>
  ```

---

### apps/web/src/components/settings/account/AccountSettings.tsx
**Total instances in file**: 17

- **Line 73**: `text-gray-`
  ```tsx
  <div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-gray-400">
  ```

- **Line 80**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">{user.email}</div>
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-gray-400">
  ```

- **Line 100**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">@{user.username}</div>
  ```

- **Line 123**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-3">
  ```

- **Line 147**: `text-gray-`
  ```tsx
  className={`flex flex-col items-center justify-center gap-2 p-3 rounded-lg border transition-all ${theme === opt.id ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-ink border-kodo-steel text-gray-400 hover:text-white'}`}
  ```

- **Line 157**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-3">
  ```

- **Line 161**: `text-gray-`
  ```tsx
  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
  ```

- **Line 162**: `border-gray-`
  ```tsx
  <select className="w-full bg-kodo-ink border border-kodo-steel rounded-lg py-2.5 pl-10 pr-4 text-white text-sm focus:border-kodo-cyan outline-none appearance-none cursor-pointer hover:border-gray-500 transition-colors">
  ```

- **Line 182**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">Email Notifications</span>
  ```

- **Line 189**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">Push Notifications</span>
  ```

- **Line 205**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300 block">
  ```

- **Line 208**: `text-gray-`
  ```tsx
  <span className="text-[10px] text-gray-500">
  ```

- **Line 219**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300 block">
  ```

- **Line 222**: `text-gray-`
  ```tsx
  <span className="text-[10px] text-gray-500">
  ```

- **Line 244**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mb-6">
  ```

- **Line 251**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

---

### apps/web/src/components/settings/account/ChangeEmailModal.tsx
**Total instances in file**: 4

- **Line 45**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 52**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 73**: `text-gray-`
  ```tsx
  <div className="bg-kodo-ink p-3 rounded text-xs text-gray-400 border border-kodo-steel">
  ```

- **Line 86**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-6">
  ```

---

### apps/web/src/components/settings/account/ChangeUsernameModal.tsx
**Total instances in file**: 3

- **Line 55**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 72**: `text-gray-`
  ```tsx
  <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-300">
  ```

---

### apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
**Total instances in file**: 4

- **Line 47**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white disabled:opacity-50"
  ```

- **Line 54**: `text-gray-`
  ```tsx
  <p className="text-gray-300 text-sm">
  ```

- **Line 60**: `text-gray-`
  ```tsx
  <ul className="text-xs text-gray-400 space-y-2 list-disc pl-4">
  ```

- **Line 87**: `bg-red-`, `bg-red-`, `border-red-`
  ```tsx
  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
  ```

---

### apps/web/src/components/settings/account/DeleteAccountView.tsx
**Total instances in file**: 15

- **Line 43**: `text-gray-`
  ```tsx
  className="p-2 hover:bg-white/5 rounded-full text-gray-400 hover:text-white transition-colors"
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm leading-relaxed">
  ```

- **Line 72**: `border-gray-`
  ```tsx
  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
  ```

- **Line 75**: `border-gray-`
  ```tsx
  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
  ```

- **Line 82**: `text-gray-`
  ```tsx
  <span className="font-bold text-gray-200 block mb-1">
  ```

- **Line 85**: `text-gray-`
  ```tsx
  <span className="text-gray-500">
  ```

- **Line 92**: `border-gray-`
  ```tsx
  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
  ```

- **Line 95**: `border-gray-`
  ```tsx
  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
  ```

- **Line 102**: `text-gray-`
  ```tsx
  <span className="font-bold text-gray-200 block mb-1">
  ```

- **Line 105**: `text-gray-`
  ```tsx
  <span className="text-gray-500">
  ```

- **Line 112**: `border-gray-`
  ```tsx
  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
  ```

- **Line 115**: `border-gray-`
  ```tsx
  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
  ```

- **Line 122**: `text-gray-`
  ```tsx
  <span className="font-bold text-gray-200 block mb-1">
  ```

- **Line 125**: `text-gray-`
  ```tsx
  <span className="text-gray-500">
  ```

- **Line 149**: `bg-red-`, `bg-red-`, `border-red-`, `bg-gray-`, `border-gray-`, `text-gray-`
  ```tsx
  className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500 disabled:bg-gray-800 disabled:border-gray-700 disabled:text-gray-500"
  ```

---

### apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
**Total instances in file**: 12

- **Line 45**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 85**: `border-gray-`
  ```tsx
  ${theme === opt.id ? 'border-kodo-cyan bg-kodo-cyan/5' : 'border-kodo-steel bg-kodo-ink hover:border-gray-500'}
  ```

- **Line 89**: `text-gray-`
  ```tsx
  className={`p-3 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-gray-400'}`}
  ```

- **Line 94**: `text-gray-`
  ```tsx
  className={`font-bold ${theme === opt.id ? 'text-white' : 'text-gray-400'}`}
  ```

- **Line 133**: `border-gray-`
  ```tsx
  className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${density === opt.id ? 'border-kodo-magenta' : 'border-gray-500'}`}
  ```

- **Line 141**: `text-gray-`
  ```tsx
  className={`text-sm font-bold ${density === opt.id ? 'text-white' : 'text-gray-300'}`}
  ```

- **Line 145**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">{opt.desc}</div>
  ```

- **Line 158**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-sm text-gray-400 mb-2">
  ```

- **Line 171**: `text-gray-`
  ```tsx
  className="mt-4 p-4 bg-kodo-ink rounded border border-kodo-steel text-gray-300"
  ```

- **Line 205**: `text-gray-`
  ```tsx
  <Layout className="w-5 h-5 text-gray-400" /> Layout
  ```

- **Line 208**: `border-gray-`
  ```tsx
  className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel cursor-pointer hover:border-gray-500"
  ```

- **Line 213**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

---

### apps/web/src/components/settings/backups/BackupsView.tsx
**Total instances in file**: 9

- **Line 76**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 flex gap-2">
  ```

- **Line 160**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 166**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

- **Line 175**: `border-gray-`
  ```tsx
  <div className="animate-fadeIn space-y-3 pt-2 border-t border-gray-700">
  ```

- **Line 177**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
  ```

- **Line 187**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
  ```

- **Line 197**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
  ```

- **Line 217**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-300">
  ```

---

### apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
**Total instances in file**: 11

- **Line 33**: `bg-gray-`, `text-gray-`
  ```tsx
  className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-gray-700 text-gray-400'}`}
  ```

- **Line 41**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 88**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">Host</div>
  ```

- **Line 93**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">Sync Frequency</div>
  ```

- **Line 98**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">Status</div>
  ```

- **Line 115**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 121**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 142**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 168**: `text-gray-`
  ```tsx
  <div className="text-sm text-gray-400">used of 100 GB</div>
  ```

- **Line 171**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 flex justify-between">
  ```

---

### apps/web/src/components/settings/data/DataExportModal.tsx
**Total instances in file**: 16

- **Line 46**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 51**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 58**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 73**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 77**: `border-gray-`
  ```tsx
  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
  ```

- **Line 82**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
  ```

- **Line 84**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">
  ```

- **Line 88**: `border-gray-`
  ```tsx
  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
  ```

- **Line 93**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">
  ```

- **Line 99**: `border-gray-`
  ```tsx
  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
  ```

- **Line 104**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
  ```

- **Line 106**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">
  ```

- **Line 110**: `border-gray-`
  ```tsx
  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
  ```

- **Line 115**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
  ```

- **Line 117**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">
  ```

---

### apps/web/src/components/settings/data/DataExportView.tsx
**Total instances in file**: 5

- **Line 32**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 46**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mt-1 max-w-xl">
  ```

- **Line 71**: `text-gray-`
  ```tsx
  <FileText className="w-5 h-5 text-gray-500" />
  ```

- **Line 76**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 flex gap-2">
  ```

- **Line 93**: `text-gray-`, `bg-gray-`
  ```tsx
  <span className="text-xs text-gray-500 bg-gray-800 px-3 py-1 rounded">
  ```

---

### apps/web/src/components/settings/integrations/IntegrationsView.tsx
**Total instances in file**: 6

- **Line 99**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 136**: `text-gray-`
  ```tsx
  <span className="text-gray-500">Not Connected</span>
  ```

- **Line 139**: `text-gray-`
  ```tsx
  <span className="text-gray-500">
  ```

- **Line 153**: `text-gray-`
  ```tsx
  <RefreshCw className="w-4 h-4 text-gray-400 hover:text-white" />
  ```

- **Line 158**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm mb-6 flex-1">
  ```

- **Line 167**: `text-gray-`
  ```tsx
  className="flex-1 border border-kodo-steel text-gray-300"
  ```

---

### apps/web/src/components/settings/profile/EditProfile.tsx
**Total instances in file**: 5

- **Line 153**: `bg-gray-`
  ```tsx
  <div className="h-48 md:h-64 bg-gray-900 relative">
  ```

- **Line 230**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 241**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 text-right mt-1">
  ```

- **Line 254**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 280**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mb-4">
  ```

---

### apps/web/src/components/settings/security/LoginHistory.tsx
**Total instances in file**: 5

- **Line 93**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 121**: `text-gray-`
  ```tsx
  <tr className="border-b border-kodo-steel text-gray-500 font-mono text-xs uppercase bg-kodo-ink/30">
  ```

- **Line 147**: `text-gray-`
  ```tsx
  <div className="text-gray-500">{log.time}</div>
  ```

- **Line 150**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-2 text-gray-300">
  ```

- **Line 162**: `text-gray-`
  ```tsx
  <td className="p-3 text-gray-400">
  ```

---

### apps/web/src/components/settings/security/PasskeyModal.tsx
**Total instances in file**: 4

- **Line 49**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 60**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-300">
  ```

- **Line 90**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 104**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-6">
  ```

---

### apps/web/src/components/settings/security/SecuritySettings.tsx
**Total instances in file**: 4

- **Line 101**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mt-1">
  ```

- **Line 131**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mt-1">
  ```

- **Line 145**: `text-gray-`
  ```tsx
  <span className="text-gray-300">MacBook Pro (Chrome)</span>
  ```

- **Line 146**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">Added 2d ago</span>
  ```

---

### apps/web/src/components/settings/security/SessionManagement.tsx
**Total instances in file**: 7

- **Line 56**: `text-gray-`
  ```tsx
  <div className="text-center p-4 text-gray-500">Loading sessions...</div>
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 88**: `text-gray-`
  ```tsx
  className={`p-3 rounded-full ${session.is_current ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'bg-kodo-slate text-gray-400'}`}
  ```

- **Line 107**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mt-1 truncate max-w-xs">
  ```

- **Line 110**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
  ```

- **Line 123**: `text-gray-`
  ```tsx
  className="mt-4 md:mt-0 text-gray-400 hover:text-white border border-kodo-steel hover:bg-white/5"
  ```

- **Line 133**: `text-gray-`
  ```tsx
  <p className="text-gray-500 text-sm">No active sessions found.</p>
  ```

---

### apps/web/src/components/settings/security/TwoFactorSetup.tsx
**Total instances in file**: 10

- **Line 63**: `text-gray-`
  ```tsx
  className="p-2 hover:bg-white/5 rounded-full text-gray-400 hover:text-white transition-colors"
  ```

- **Line 71**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 95**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 117**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400">
  ```

- **Line 132**: `bg-gray-`
  ```tsx
  <div className="w-48 h-48 bg-gray-900 flex items-center justify-center relative overflow-hidden">
  ```

- **Line 144**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-300 mb-2">
  ```

- **Line 148**: `text-gray-`
  ```tsx
  className="text-xs text-gray-500 font-mono bg-black/30 py-1 px-2 rounded inline-block cursor-pointer hover:text-white"
  ```

- **Line 187**: `text-gray-`
  ```tsx
  <p className="text-gray-400 mb-6">
  ```

- **Line 241**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-300">
  ```

- **Line 248**: `text-gray-`
  ```tsx
  <div className="grid grid-cols-2 gap-3 bg-black/40 p-4 rounded-lg font-mono text-sm text-gray-300 text-center border border-kodo-steel/50">
  ```

---

### apps/web/src/components/share/ShareLinkManager.tsx
**Total instances in file**: 1

- **Line 325**: `text-green-`
  ```tsx
  <Check className="h-4 w-4 text-green-600" />
  ```

---

### apps/web/src/components/social/CommentItem.tsx
**Total instances in file**: 3

- **Line 39**: `text-gray-`
  ```tsx
  <span className="text-gray-500 text-xs">{comment.timestamp}</span>
  ```

- **Line 42**: `text-gray-`
  ```tsx
  <p className="text-gray-300 leading-relaxed whitespace-pre-wrap">
  ```

- **Line 47**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 mt-1 pl-2 text-xs text-gray-500">
  ```

---

### apps/web/src/components/social/CreatePostModal.tsx
**Total instances in file**: 7

- **Line 51**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 57**: `bg-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
  ```

- **Line 87**: `text-gray-`
  ```tsx
  <span className="text-gray-500 flex items-center gap-1">
  ```

- **Line 105**: `text-gray-`
  ```tsx
  className={`p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-cyan ${postType === 'image' ? 'text-kodo-cyan' : ''}`}
  ```

- **Line 115**: `text-gray-`
  ```tsx
  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-magenta"
  ```

- **Line 125**: `text-gray-`
  ```tsx
  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-lime"
  ```

- **Line 135**: `text-gray-`
  ```tsx
  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-gold"
  ```

---

### apps/web/src/components/social/ExploreView.tsx
**Total instances in file**: 7

- **Line 32**: `from-gray-`
  ```tsx
  //     { name: 'Techno', color: 'from-gray-700 to-black' },
  ```

- **Line 33**: `from-blue-`
  ```tsx
  //     { name: 'Ambient', color: 'from-blue-400 to-teal-500' },
  ```

- **Line 36**: `to-blue-600`
  ```tsx
  //     { name: 'House', color: 'from-indigo-500 to-blue-600' },
  ```

- **Line 118**: `text-gray-`
  ```tsx
  className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-kodo-cyan text-black shadow-neon-cyan' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
  ```

- **Line 144**: `border-gray-`, `text-gray-`, `border-gray-`
  ```tsx
  className={`px-3 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-gray-600 text-gray-400 hover:border-gray-400'}`}
  ```

- **Line 161**: `bg-gray-`
  ```tsx
  className={`relative group cursor-pointer overflow-hidden rounded-xl bg-gray-900 aspect-square ${i === 0 ? 'col-span-2 row-span-2' : ''}`}
  ```

- **Line 174**: `text-gray-`
  ```tsx
  <div className="flex justify-between items-center text-xs text-gray-300">
  ```

---

### apps/web/src/components/social/FeedView.tsx
**Total instances in file**: 6

- **Line 83**: `bg-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full bg-gray-700 flex-shrink-0 overflow-hidden cursor-pointer">
  ```

- **Line 93**: `text-gray-`
  ```tsx
  <div className="w-full bg-kodo-void/50 border border-kodo-steel rounded-full px-4 py-2.5 text-gray-500 hover:bg-kodo-void hover:border-kodo-cyan/50 transition-all text-sm">
  ```

- **Line 101**: `text-gray-`
  ```tsx
  className="flex items-center gap-1 text-gray-400 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"
  ```

- **Line 107**: `text-gray-`
  ```tsx
  className="flex items-center gap-1 text-gray-400 hover:text-kodo-magenta 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"
  ```

- **Line 113**: `text-gray-`
  ```tsx
  className="flex items-center gap-1 text-gray-400 hover:text-kodo-lime 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"
  ```

- **Line 119**: `text-gray-`
  ```tsx
  className="flex items-center gap-1 text-gray-400 hover:text-kodo-gold 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"
  ```

---

### apps/web/src/components/social/PostCard.tsx
**Total instances in file**: 10

- **Line 74**: `text-gray-`
  ```tsx
  <div className="px-4 pt-3 pb-0 flex items-center gap-2 text-xs text-gray-500 font-bold uppercase tracking-wider">
  ```

- **Line 82**: `bg-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden border border-kodo-steel cursor-pointer">
  ```

- **Line 99**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

- **Line 110**: `text-gray-`
  ```tsx
  <div className="px-4 pb-2 text-gray-200 whitespace-pre-wrap leading-relaxed text-sm">
  ```

- **Line 139**: `bg-gray-`
  ```tsx
  <div className="w-12 h-12 bg-gray-800 rounded overflow-hidden relative group cursor-pointer">
  ```

- **Line 152**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400 truncate">
  ```

- **Line 184**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-400">{opt.votes}%</span>
  ```

- **Line 188**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 px-1">
  ```

- **Line 195**: `text-gray-`
  ```tsx
  <div className="p-4 border-t border-kodo-steel flex items-center justify-between text-gray-400 text-sm">
  ```

- **Line 244**: `bg-gray-`
  ```tsx
  <div className="w-8 h-8 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
  ```

---

### apps/web/src/components/social/SharePostModal.tsx
**Total instances in file**: 7

- **Line 39**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 60**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 line-clamp-2">
  ```

- **Line 94**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 111**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 138**: `bg-gray-`, `text-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 group-hover:text-white">
  ```

- **Line 152**: `bg-gray-`, `text-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 group-hover:text-white">
  ```

---

### apps/web/src/components/social/connections/ConnectionsView.tsx
**Total instances in file**: 4

- **Line 59**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 78**: `text-gray-`
  ```tsx
  className={filter === 'all' ? 'text-white' : 'text-gray-500'}
  ```

- **Line 86**: `text-gray-`
  ```tsx
  className={filter === 'mutual' ? 'text-white' : 'text-gray-500'}
  ```

- **Line 94**: `text-gray-`
  ```tsx
  className={filter === 'recent' ? 'text-white' : 'text-gray-500'}
  ```

---

### apps/web/src/components/social/groups/CreateGroupModal.tsx
**Total instances in file**: 6

- **Line 54**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <div className="text-gray-500 flex flex-col items-center group-hover:text-kodo-cyan">
  ```

- **Line 89**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 101**: `border-gray-`
  ```tsx
  className="bg-kodo-ink p-3 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-gray-500"
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 120**: `bg-gray-`
  ```tsx
  className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
  ```

---

### apps/web/src/components/social/groups/GroupCard.tsx
**Total instances in file**: 4

- **Line 28**: `bg-gray-`
  ```tsx
  <div className="h-32 relative overflow-hidden bg-gray-900">
  ```

- **Line 51**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-4 line-clamp-2 flex-1">
  ```

- **Line 55**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 text-xs text-gray-500 mb-4 font-mono">
  ```

- **Line 71**: `bg-red-`
  ```tsx
  className="w-full border border-kodo-steel hover:bg-red-500/10 hover:text-kodo-red hover:border-kodo-red"
  ```

---

### apps/web/src/components/social/groups/GroupDetailView.tsx
**Total instances in file**: 11

- **Line 87**: `text-gray-`
  ```tsx
  <div className="text-center py-20 text-gray-500">Group not found</div>
  ```

- **Line 94**: `bg-gray-`
  ```tsx
  <div className="h-64 bg-gray-900 relative">
  ```

- **Line 122**: `text-red-`, `bg-red-`
  ```tsx
  className="bg-black/50 backdrop-blur text-red-400 hover:bg-red-500/20 border-none"
  ```

- **Line 153**: `text-gray-`
  ```tsx
  <p className="text-gray-400 max-w-2xl leading-relaxed">
  ```

- **Line 158**: `text-gray-`
  ```tsx
  <div className="flex gap-6 text-sm text-gray-400 font-mono bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/30">
  ```

- **Line 187**: `text-gray-`, `text-gray-`
  ```tsx
  className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'text-white border-kodo-cyan' : 'text-gray-500 border-transparent hover:text-gray-300'}`}
  ```

- **Line 213**: `text-gray-`
  ```tsx
  <span className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400">
  ```

- **Line 224**: `text-gray-`
  ```tsx
  <div className="col-span-full text-center py-8 text-gray-500 text-sm">
  ```

- **Line 250**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-2 text-gray-400 text-sm mt-1">
  ```

- **Line 266**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-4">
  ```

- **Line 275**: `text-gray-`
  ```tsx
  className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded text-xs text-gray-400"
  ```

---

### apps/web/src/components/social/groups/GroupsView.tsx
**Total instances in file**: 4

- **Line 100**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 117**: `text-gray-`
  ```tsx
  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-gray-400 hover:text-white'}`}
  ```

- **Line 123**: `text-gray-`
  ```tsx
  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-gray-400 hover:text-white'}`}
  ```

- **Line 155**: `text-gray-`
  ```tsx
  <div className="col-span-full text-center py-20 text-gray-500">
  ```

---

### apps/web/src/components/studio/AIToolsView.tsx
**Total instances in file**: 7

- **Line 94**: `text-gray-`
  ```tsx
  className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-ink text-gray-400 group-hover:text-white'}`}
  ```

- **Line 99**: `text-gray-`
  ```tsx
  className={`font-bold text-sm ${activeTool === tool.id ? 'text-white' : 'text-gray-300'}`}
  ```

- **Line 103**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 mt-1 leading-tight">
  ```

- **Line 118**: `text-gray-`
  ```tsx
  <p className="text-center text-xs text-gray-500 mt-4">
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

- **Line 143**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-300">{result.fileName}</p>
  ```

- **Line 155**: `text-gray-`
  ```tsx
  <h4 className="text-sm font-bold text-gray-400 uppercase mb-4 tracking-wider">
  ```

---

### apps/web/src/components/studio/CloudFileBrowser.tsx
**Total instances in file**: 18

- **Line 183**: `text-gray-`
  ```tsx
  <Filter className="w-4 h-4 text-gray-500 shrink-0" />
  ```

- **Line 188**: `text-gray-`, `border-gray-`
  ```tsx
  className={`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-gray-400 hover:border-gray-400'}`}
  ```

- **Line 247**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500 px-2 uppercase font-bold">
  ```

- **Line 264**: `text-gray-`
  ```tsx
  className="ml-2 p-1 hover:text-white text-gray-400"
  ```

- **Line 277**: `text-gray-`
  ```tsx
  className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 283**: `text-gray-`
  ```tsx
  className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
  ```

- **Line 297**: `text-gray-`
  ```tsx
  <thead className="bg-kodo-ink text-xs font-mono text-gray-500 uppercase tracking-wider sticky top-0 z-10">
  ```

- **Line 343**: `text-gray-`
  ```tsx
  className="cursor-pointer text-gray-500 hover:text-white"
  ```

- **Line 368**: `text-gray-`
  ```tsx
  ) && <File className="w-5 h-5 text-gray-400" />}
  ```

- **Line 369**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-200 group-hover:text-white transition-colors">
  ```

- **Line 379**: `text-gray-`
  ```tsx
  className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400 border border-kodo-steel"
  ```

- **Line 386**: `text-gray-`
  ```tsx
  <td className="p-4 text-gray-400 font-mono text-xs">
  ```

- **Line 389**: `text-gray-`
  ```tsx
  <td className="p-4 text-gray-400 text-xs">
  ```

- **Line 403**: `text-gray-`
  ```tsx
  <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
  ```

- **Line 406**: `text-gray-`
  ```tsx
  <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
  ```

- **Line 435**: `text-gray-`
  ```tsx
  <Square className="w-4 h-4 text-gray-400 hover:text-white" />
  ```

- **Line 450**: `text-gray-`
  ```tsx
  <File className="w-8 h-8 text-gray-400" />
  ```

- **Line 464**: `text-gray-`
  ```tsx
  className="text-[8px] bg-white/10 px-1 rounded text-gray-400"
  ```

---

### apps/web/src/components/studio/CloudSettingsView.tsx
**Total instances in file**: 7

- **Line 24**: `text-gray-`
  ```tsx
  <div className="text-sm text-gray-400">used of 100 GB (Pro Plan)</div>
  ```

- **Line 29**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 35**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 41**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase font-bold">
  ```

- **Line 62**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
  ```

- **Line 75**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mt-1">
  ```

- **Line 81**: `text-gray-`
  ```tsx
  <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
  ```

---

### apps/web/src/components/studio/ConnectivityView.tsx
**Total instances in file**: 9

- **Line 54**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mt-1">
  ```

- **Line 66**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
  ```

- **Line 70**: `text-gray-`
  ```tsx
  <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono truncate">
  ```

- **Line 86**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
  ```

- **Line 90**: `text-gray-`
  ```tsx
  <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono">
  ```

- **Line 104**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
  ```

- **Line 115**: `text-gray-`
  ```tsx
  <p className="text-[10px] text-gray-500 mt-2">
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mt-1">
  ```

- **Line 162**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 mt-1 flex gap-2">
  ```

---

### apps/web/src/components/studio/GoLiveView.tsx
**Total instances in file**: 15

- **Line 53**: `text-gray-`
  ```tsx
  className={`w-8 h-8 ${isLive ? 'text-kodo-red animate-pulse' : 'text-gray-500'}`}
  ```

- **Line 57**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 63**: `text-gray-`
  ```tsx
  className={`px-4 py-2 rounded-lg border flex items-center gap-2 font-bold ${isLive ? 'bg-kodo-red text-white border-kodo-red' : 'bg-kodo-ink text-gray-500 border-kodo-steel'}`}
  ```

- **Line 66**: `bg-gray-`
  ```tsx
  className={`w-3 h-3 rounded-full ${isLive ? 'bg-white animate-pulse' : 'bg-gray-600'}`}
  ```

- **Line 97**: `bg-gray-`
  ```tsx
  <div className="w-full h-full flex items-center justify-center bg-gray-900">
  ```

- **Line 101**: `text-gray-`
  ```tsx
  <p className="text-gray-400">Receiving Stream Data...</p>
  ```

- **Line 105**: `text-gray-`
  ```tsx
  <div className="w-full h-full flex items-col items-center justify-center bg-kodo-ink/50 text-gray-500">
  ```

- **Line 128**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

- **Line 168**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
  ```

- **Line 173**: `text-gray-`
  ```tsx
  className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
  ```

- **Line 189**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
  ```

- **Line 194**: `text-gray-`
  ```tsx
  className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
  ```

- **Line 233**: `text-gray-`
  ```tsx
  <ol className="text-sm text-gray-400 space-y-2 list-decimal pl-4">
  ```

- **Line 244**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300">Microphone</span>
  ```

- **Line 247**: `bg-gray-`
  ```tsx
  <div className="w-full bg-gray-800 h-2 rounded-full overflow-hidden">
  ```

---

### apps/web/src/components/studio/ProjectsManager.tsx
**Total instances in file**: 12

- **Line 161**: `text-gray-`
  ```tsx
  <p className="text-gray-400 font-mono text-sm">
  ```

- **Line 187**: `text-gray-`, `border-gray-`
  ```tsx
  className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-gray-400 border-transparent hover:border-gray-500'}`}
  ```

- **Line 199**: `text-gray-`
  ```tsx
  <button className="p-1.5 rounded text-gray-500 hover:text-white">
  ```

- **Line 237**: `text-gray-`
  ```tsx
  <MoreVertical className="w-4 h-4 text-gray-500 hover:text-white" />
  ```

- **Line 244**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 mb-4 font-mono">
  ```

- **Line 250**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-400 uppercase font-bold">
  ```

- **Line 256**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-400 uppercase font-bold">
  ```

- **Line 265**: `text-gray-`
  ```tsx
  <span className="text-gray-400 font-bold">
  ```

- **Line 278**: `border-gray-`
  ```tsx
  <div className="flex justify-between items-center pt-4 border-t border-gray-800">
  ```

- **Line 280**: `bg-gray-`
  ```tsx
  <div className="w-6 h-6 rounded-full bg-gray-600 border border-black"></div>
  ```

- **Line 296**: `text-gray-`
  ```tsx
  className="border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center p-8 hover:bg-kodo-slate/20 transition-colors cursor-pointer text-gray-500 hover:text-kodo-cyan hover:border-kodo-cyan min-h-[250px]"
  ```

- **Line 308**: `text-gray-`
  ```tsx
  <div className="text-center py-20 text-gray-500">
  ```

---

### apps/web/src/components/studio/projects/CreateProjectModal.tsx
**Total instances in file**: 4

- **Line 47**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 61**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

- **Line 69**: `text-gray-`, `border-gray-`
  ```tsx
  className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
  ```

- **Line 98**: `text-gray-`
  ```tsx
  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
  ```

---

### apps/web/src/components/studio/projects/ProjectDetailView.tsx
**Total instances in file**: 18

- **Line 103**: `text-gray-`
  ```tsx
  <div className="flex items-center gap-4 text-sm text-gray-400 font-mono">
  ```

- **Line 134**: `text-gray-`, `text-gray-`
  ```tsx
  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
  ```

- **Line 149**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-sm text-gray-400 mb-1">
  ```

- **Line 162**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase">
  ```

- **Line 170**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 uppercase">
  ```

- **Line 193**: `text-gray-`
  ```tsx
  <div className="text-sm text-gray-300">
  ```

- **Line 197**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">2 hours ago</div>
  ```

- **Line 224**: `text-gray-`
  ```tsx
  <div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-gray-400">
  ```

- **Line 235**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500">
  ```

- **Line 307**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-4">
  ```

- **Line 329**: `bg-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-700"></div>
  ```

- **Line 330**: `bg-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-600"></div>
  ```

- **Line 331**: `text-gray-`
  ```tsx
  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-gray-400 font-bold">
  ```

- **Line 351**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">2h ago</span>
  ```

- **Line 353**: `text-gray-`
  ```tsx
  <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
  ```

- **Line 355**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-600">1d ago</span>
  ```

- **Line 357**: `text-gray-`
  ```tsx
  <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
  ```

- **Line 359**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-600">3d ago</span>
  ```

---

### apps/web/src/components/ui/DataList.tsx
**Total instances in file**: 9

- **Line 131**: `bg-gray-`, `bg-gray-`
  ```tsx
  className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-16"
  ```

- **Line 141**: `text-red-`, `text-red-`
  ```tsx
  <p className="text-red-500 dark:text-red-400">{error}</p>
  ```

- **Line 149**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-gray-500 dark:text-gray-400">{emptyMessage}</p>
  ```

- **Line 258**: `bg-gray-`
  ```tsx
  'relative bg-white dark:bg-gray-800 rounded-lg shadow-xl',
  ```

- **Line 265**: `border-gray-`, `border-gray-`
  ```tsx
  <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
  ```

- **Line 267**: `text-gray-`
  ```tsx
  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
  ```

- **Line 274**: `text-gray-`, `text-gray-`, `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
  ```

- **Line 386**: `bg-gray-`
  ```tsx
  'absolute z-20 mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg',
  ```

- **Line 387**: `border-gray-`, `border-gray-`
  ```tsx
  'border border-gray-200 dark:border-gray-700',
  ```

---

### apps/web/src/components/ui/FormField.tsx
**Total instances in file**: 13

- **Line 115**: `text-gray-`, `text-gray-`
  ```tsx
  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
  ```

- **Line 117**: `text-red-`
  ```tsx
  {required && <span className="text-red-500 ml-1">*</span>}
  ```

- **Line 121**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
  ```

- **Line 124**: `text-red-`, `text-red-`
  ```tsx
  <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
  ```

- **Line 144**: `bg-gray-`, `border-gray-`
  ```tsx
  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
  ```

- **Line 146**: `border-red-`
  ```tsx
  ? 'border-red-500 focus:ring-red-500'
  ```

- **Line 147**: `border-gray-`, `border-gray-`
  ```tsx
  : 'border-gray-300 dark:border-gray-600',
  ```

- **Line 170**: `bg-gray-`, `border-gray-`
  ```tsx
  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
  ```

- **Line 172**: `border-red-`
  ```tsx
  ? 'border-red-500 focus:ring-red-500'
  ```

- **Line 173**: `border-gray-`, `border-gray-`
  ```tsx
  : 'border-gray-300 dark:border-gray-600',
  ```

- **Line 197**: `bg-gray-`, `border-gray-`
  ```tsx
  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
  ```

- **Line 199**: `border-red-`
  ```tsx
  ? 'border-red-500 focus:ring-red-500'
  ```

- **Line 200**: `border-gray-`, `border-gray-`
  ```tsx
  : 'border-gray-300 dark:border-gray-600',
  ```

---

### apps/web/src/components/ui/ImageCropper.tsx
**Total instances in file**: 6

- **Line 7**: `bg-gray-`
  ```tsx
  <div className="bg-gray-800 flex items-center justify-center h-full text-white">
  ```

- **Line 138**: `text-gray-`
  ```tsx
  <button onClick={onCancel} className="text-gray-400 hover:text-white">
  ```

- **Line 170**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-400 w-16">Zoom</span>
  ```

- **Line 171**: `text-gray-`
  ```tsx
  <ZoomIn className="w-4 h-4 text-gray-500" />
  ```

- **Line 185**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-400 w-16">Rotate</span>
  ```

- **Line 186**: `text-gray-`
  ```tsx
  <RotateCw className="w-4 h-4 text-gray-500" />
  ```

---

### apps/web/src/components/ui/LazyComponent.tsx
**Total instances in file**: 2

- **Line 28**: `text-yellow-`
  ```tsx
  <AlertTriangle className="h-6 w-6 text-yellow-600" />
  ```

- **Line 31**: `bg-yellow-`, `bg-yellow-`, `text-yellow-`, `text-yellow-`
  ```tsx
  <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300 px-4 py-3 rounded-lg mb-4">
  ```

---

### apps/web/src/components/ui/LoadingState.tsx
**Total instances in file**: 6

- **Line 123**: `text-gray-`
  ```tsx
  className={cn('animate-spin text-gray-400', sizeClasses[size])}
  ```

- **Line 127**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 141**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
  ```

- **Line 142**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
  ```

- **Line 143**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
  ```

- **Line 159**: `text-gray-`
  ```tsx
  className={cn('animate-spin text-gray-400', sizeClasses[size], className)}
  ```

---

### apps/web/src/components/ui/Toast.tsx
**Total instances in file**: 1

- **Line 103**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white transition-colors"
  ```

---

### apps/web/src/components/ui/avatar.tsx
**Total instances in file**: 2

- **Line 117**: `bg-gray-`
  ```tsx
  offline: 'bg-gray-500',
  ```

- **Line 163**: `text-gray-`
  ```tsx
  <span className="font-bold text-gray-400">{initials}</span>
  ```

---

### apps/web/src/components/ui/checkbox.tsx
**Total instances in file**: 1

- **Line 121**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300 group-hover:text-white transition-colors select-none">
  ```

---

### apps/web/src/components/ui/confirmation-dialog.tsx
**Total instances in file**: 2

- **Line 153**: `bg-red-`, `bg-red-`
  ```tsx
  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
  ```

- **Line 154**: `text-red-`, `text-red-`
  ```tsx
  <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
  ```

---

### apps/web/src/components/ui/dialog.tsx
**Total instances in file**: 1

- **Line 322**: `text-gray-`
  ```tsx
  return <p className={cn('text-sm text-gray-400', className)}>{children}</p>;
  ```

---

### apps/web/src/components/ui/dropdown-menu.tsx
**Total instances in file**: 5

- **Line 188**: `text-gray-`
  ```tsx
  'text-gray-300 hover:text-white w-full text-left',
  ```

- **Line 216**: `text-gray-`
  ```tsx
  'text-gray-300 hover:text-white w-full text-left',
  ```

- **Line 244**: `text-gray-`
  ```tsx
  'text-gray-300 hover:text-white w-full text-left',
  ```

- **Line 269**: `text-gray-`
  ```tsx
  'px-2 py-1.5 text-sm font-semibold text-gray-400',
  ```

- **Line 300**: `text-gray-`
  ```tsx
  'ml-auto text-xs tracking-widest opacity-60 text-gray-500',
  ```

---

### apps/web/src/components/ui/empty-state.tsx
**Total instances in file**: 2

- **Line 149**: `text-gray-`
  ```tsx
  <div className={cn('text-gray-400', iconSizeClasses[size])}>
  ```

- **Line 158**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-4 max-w-md mx-auto">
  ```

---

### apps/web/src/components/ui/file-upload.tsx
**Total instances in file**: 1

- **Line 458**: `text-green-`
  ```tsx
  <div className="flex items-center gap-1 text-xs text-green-600">
  ```

---

### apps/web/src/components/ui/label.tsx
**Total instances in file**: 1

- **Line 41**: `text-gray-`
  ```tsx
  'text-sm font-medium leading-none text-gray-400 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
  ```

---

### apps/web/src/components/ui/loading-spinner.tsx
**Total instances in file**: 2

- **Line 79**: `border-gray-`
  ```tsx
  'animate-spin rounded-full border-2 border-gray-300 border-t-blue-600',
  ```

- **Line 88**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{text}</p>
  ```

---

### apps/web/src/components/ui/optimized-image.tsx
**Total instances in file**: 3

- **Line 154**: `bg-gray-`
  ```tsx
  className={`bg-gray-200 animate-pulse ${className}`}
  ```

- **Line 298**: `bg-gray-`
  ```tsx
  className={`bg-gray-200 flex items-center justify-center ${className}`}
  ```

- **Line 301**: `text-gray-`
  ```tsx
  <span className="text-gray-400 text-sm">Image non disponible</span>
  ```

---

### apps/web/src/components/ui/progress.tsx
**Total instances in file**: 2

- **Line 130**: `to-blue-500`
  ```tsx
  cyan: 'from-kodo-cyan to-blue-500',
  ```

- **Line 170**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-xs text-gray-500 mt-1 font-mono">
  ```

---

### apps/web/src/components/ui/select.tsx
**Total instances in file**: 3

- **Line 363**: `text-gray-`
  ```tsx
  <div className="px-3 py-1.5 text-xs font-semibold text-gray-400 uppercase">
  ```

- **Line 382**: `text-gray-`
  ```tsx
  <div className="px-3 py-2 text-sm text-gray-400 text-center">
  ```

- **Line 444**: `text-gray-`
  ```tsx
  'transition-colors text-gray-300',
  ```

---

### apps/web/src/components/ui/table.tsx
**Total instances in file**: 3

- **Line 168**: `text-gray-`
  ```tsx
  'h-12 px-4 text-left align-middle font-bold text-gray-400 uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
  ```

- **Line 190**: `text-gray-`
  ```tsx
  'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-gray-300',
  ```

- **Line 212**: `text-gray-`
  ```tsx
  className={cn('mt-4 text-sm text-gray-400', className)}
  ```

---

### apps/web/src/components/ui/tabs.tsx
**Total instances in file**: 2

- **Line 171**: `text-gray-`
  ```tsx
  'inline-flex h-10 items-center justify-center rounded-md bg-kodo-graphite p-1 text-gray-400 border border-kodo-steel/30',
  ```

- **Line 256**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-500 hover:text-gray-300',
  ```

---

### apps/web/src/components/ui/textarea.tsx
**Total instances in file**: 1

- **Line 77**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2 font-body">
  ```

---

### apps/web/src/components/upload/BulkUploadModal.tsx
**Total instances in file**: 5

- **Line 41**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 mt-1">
  ```

- **Line 46**: `text-gray-`
  ```tsx
  <button onClick={onClose} className="text-gray-400 hover:text-white">
  ```

- **Line 53**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase mb-1">
  ```

- **Line 57**: `bg-gray-`
  ```tsx
  <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
  ```

- **Line 84**: `text-gray-`
  ```tsx
  className="text-gray-400 hover:text-white"
  ```

---

### apps/web/src/components/upload/FilePreviewCard.tsx
**Total instances in file**: 2

- **Line 51**: `text-gray-`
  ```tsx
  return <File className="w-6 h-6 text-gray-400" />;
  ```

- **Line 81**: `text-gray-`
  ```tsx
  <span className="text-[10px] text-gray-500 font-mono flex-shrink-0">
  ```

---

### apps/web/src/components/upload/FileUploadZone.tsx
**Total instances in file**: 3

- **Line 100**: `text-gray-`
  ```tsx
  <p className="text-gray-400 mb-6 max-w-sm">
  ```

- **Line 108**: `text-gray-`
  ```tsx
  className="px-2 py-1 bg-black/30 rounded text-[10px] font-mono text-gray-500 border border-white/5 uppercase"
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <p className="mt-4 text-[10px] text-gray-600">
  ```

---

### apps/web/src/components/upload/UploadProgressBar.tsx
**Total instances in file**: 1

- **Line 33**: `text-gray-`
  ```tsx
  <div className="flex justify-between text-[10px] uppercase font-bold text-gray-500 mb-1">
  ```

---

### apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
**Total instances in file**: 3

- **Line 117**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 126**: `text-gray-`
  ```tsx
  <Upload className="w-8 h-8 text-gray-500" />
  ```

- **Line 135**: `text-gray-`
  ```tsx
  <p className="text-gray-400 text-sm">
  ```

---

### apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
**Total instances in file**: 5

- **Line 48**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 55**: `text-gray-`
  ```tsx
  <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
  ```

- **Line 58**: `border-gray-`
  ```tsx
  className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
  ```

- **Line 64**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500 flex items-center gap-1">
  ```

- **Line 92**: `text-gray-`
  ```tsx
  <p className="text-right text-xs text-gray-500 mt-2">
  ```

---

### apps/web/src/components/upload/metadata/MetadataEditor.tsx
**Total instances in file**: 1

- **Line 148**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 font-mono">
  ```

---

### apps/web/src/components/upload/metadata/MetadataForm.tsx
**Total instances in file**: 7

- **Line 73**: `text-gray-`
  ```tsx
  <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-500 group-hover:text-kodo-cyan">
  ```

- **Line 84**: `text-gray-`
  ```tsx
  <p className="text-center text-xs text-gray-500 mt-2">
  ```

- **Line 185**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300 flex items-center gap-2">
  ```

- **Line 204**: `text-gray-`
  ```tsx
  className="text-[10px] bg-kodo-slate px-2 py-1 rounded text-gray-300"
  ```

- **Line 215**: `text-gray-`
  ```tsx
  <span className="text-sm text-gray-300 flex items-center gap-2">
  ```

- **Line 221**: `text-gray-`
  ```tsx
  className={data.lyrics ? 'text-kodo-lime' : 'text-gray-400'}
  ```

- **Line 236**: `text-gray-`
  ```tsx
  <label className="block text-sm font-medium text-gray-400 mb-2">
  ```

---

### apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
**Total instances in file**: 5

- **Line 67**: `text-gray-`
  ```tsx
  <X className="w-5 h-5 text-gray-400 hover:text-white" />
  ```

- **Line 104**: `text-gray-`
  ```tsx
  <span className="text-gray-500 text-sm italic">
  ```

- **Line 109**: `text-gray-`
  ```tsx
  <p className="text-right text-xs text-gray-500 mt-1">
  ```

- **Line 115**: `text-gray-`
  ```tsx
  <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">
  ```

- **Line 123**: `text-gray-`
  ```tsx
  className="px-3 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-gray-300 hover:text-white hover:border-white transition-colors flex items-center gap-1"
  ```

---

### apps/web/src/components/user/UserCard.tsx
**Total instances in file**: 5

- **Line 49**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-400 font-mono mb-3">@{user.username}</p>
  ```

- **Line 52**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mb-4 line-clamp-2 min-h-[2.5em]">
  ```

- **Line 60**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase">Tracks</div>
  ```

- **Line 66**: `text-gray-`
  ```tsx
  <div className="text-[10px] text-gray-500 uppercase">Fans</div>
  ```

- **Line 74**: `text-gray-`
  ```tsx
  className={`flex-1 ${isFollowing ? 'border border-kodo-steel text-gray-400' : ''}`}
  ```

---

### apps/web/src/components/views/DiscoverView.tsx
**Total instances in file**: 3

- **Line 22**: `from-gray-`
  ```tsx
  { name: 'Techno', color: 'from-gray-700 to-black' },
  ```

- **Line 23**: `from-blue-`
  ```tsx
  { name: 'Ambient', color: 'from-blue-400 to-teal-500' },
  ```

- **Line 26**: `to-blue-600`
  ```tsx
  { name: 'House', color: 'from-indigo-500 to-blue-600' },
  ```

---

### apps/web/src/components/views/FileDetailsView.tsx
**Total instances in file**: 1

- **Line 143**: `to-blue-600`
  ```tsx
  <div className="w-32 h-32 bg-gradient-to-br from-kodo-cyan to-blue-600 rounded-full mx-auto mb-8 flex items-center justify-center shadow-[0_0_50px_rgba(102,252,241,0.3)] animate-pulse">
  ```

---

### apps/web/src/features/auth/components/AuthButton.tsx
**Total instances in file**: 2

- **Line 23**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  ? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600'
  ```

- **Line 24**: `bg-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  : 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
  ```

---

### apps/web/src/features/auth/components/AuthFormField.tsx
**Total instances in file**: 4

- **Line 30**: `text-gray-`, `text-gray-`
  ```tsx
  className="block text-sm font-medium text-gray-700 dark:text-gray-300"
  ```

- **Line 34**: `text-red-`
  ```tsx
  <span className="text-red-500 ml-1" aria-label="required">
  ```

- **Line 41**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
  ```

- **Line 45**: `text-red-`, `text-red-`
  ```tsx
  className="text-sm text-red-600 dark:text-red-400"
  ```

---

### apps/web/src/features/auth/components/AuthInput.tsx
**Total instances in file**: 5

- **Line 26**: `text-gray-`, `text-gray-`
  ```tsx
  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
  ```

- **Line 35**: `bg-gray-`, `border-gray-`
  ```tsx
  'dark:bg-gray-800 dark:text-white dark:border-gray-600',
  ```

- **Line 37**: `border-red-`, `border-red-`
  ```tsx
  ? 'border-red-500 focus:ring-red-500 dark:border-red-500'
  ```

- **Line 38**: `border-gray-`, `border-gray-`
  ```tsx
  : 'border-gray-300 focus:ring-blue-500 dark:border-gray-600',
  ```

- **Line 63**: `text-red-`, `text-red-`
  ```tsx
  className="mt-1 text-sm text-red-600 dark:text-red-400"
  ```

---

### apps/web/src/features/auth/components/AuthLayout.tsx
**Total instances in file**: 1

- **Line 78**: `text-blue-`, `text-blue-`, `text-blue-`, `text-blue-`
  ```tsx
  className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
  ```

---

### apps/web/src/features/auth/components/EmailVerificationBadge.tsx
**Total instances in file**: 2

- **Line 14**: `bg-green-`, `text-green-`, `bg-green-`, `text-green-`
  ```tsx
  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
  ```

- **Line 21**: `bg-yellow-`, `text-yellow-`, `bg-yellow-`, `text-yellow-`
  ```tsx
  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  ```

---

### apps/web/src/features/auth/components/OAuthButtons.tsx
**Total instances in file**: 1

- **Line 43**: `text-gray-`
  ```tsx
  <div className="text-sm text-center text-gray-500 mb-4">
  ```

---

### apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx
**Total instances in file**: 9

- **Line 52**: `bg-red-`
  ```tsx
  color = 'bg-red-500';
  ```

- **Line 55**: `bg-orange-`
  ```tsx
  color = 'bg-orange-500';
  ```

- **Line 58**: `bg-yellow-`
  ```tsx
  color = 'bg-yellow-500';
  ```

- **Line 61**: `bg-green-`
  ```tsx
  color = 'bg-green-500';
  ```

- **Line 64**: `bg-green-`
  ```tsx
  color = 'bg-green-600';
  ```

- **Line 84**: `bg-gray-`
  ```tsx
  className="w-full bg-gray-200 rounded-full h-2"
  ```

- **Line 97**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-600 mt-1" id="password-strength-label">
  ```

- **Line 102**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-600">
  ```

- **Line 106**: `text-red-`
  ```tsx
  <li key={index} className="text-red-600">
  ```

---

### apps/web/src/features/auth/components/TwoFactorVerify.tsx
**Total instances in file**: 5

- **Line 78**: `text-blue-`
  ```tsx
  <Shield className="h-5 w-5 text-blue-500" />
  ```

- **Line 119**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-500">
  ```

- **Line 123**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline"
  ```

- **Line 144**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-500">
  ```

- **Line 147**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline"
  ```

---

### apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
**Total instances in file**: 4

- **Line 74**: `bg-green-`, `border-green-`, `text-green-`
  ```tsx
  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
  ```

- **Line 83**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-600">
  ```

- **Line 89**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline text-sm block focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
  ```

- **Line 102**: `bg-red-`, `border-red-`, `text-red-`
  ```tsx
  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
  ```

---

### apps/web/src/features/auth/pages/LoginPage.tsx
**Total instances in file**: 5

- **Line 206**: `border-gray-`
  ```tsx
  <div className="w-full border-t border-gray-300"></div>
  ```

- **Line 209**: `text-gray-`
  ```tsx
  <span className="px-2 bg-white text-gray-500" aria-hidden="true">
  ```

- **Line 224**: `bg-red-`, `border-red-`, `text-red-`
  ```tsx
  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
  ```

- **Line 266**: `text-blue-`, `border-gray-`
  ```tsx
  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
  ```

- **Line 271**: `text-gray-`
  ```tsx
  className="ml-2 block text-sm text-gray-900"
  ```

---

### apps/web/src/features/auth/pages/OAuthCallbackPage.tsx
**Total instances in file**: 2

- **Line 10**: `border-blue-`
  ```tsx
  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
  ```

- **Line 11**: `text-gray-`
  ```tsx
  <p className="mt-4 text-sm text-gray-600">
  ```

---

### apps/web/src/features/auth/pages/RegisterPage.tsx
**Total instances in file**: 13

- **Line 167**: `bg-green-`, `border-green-`, `text-green-`
  ```tsx
  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
  ```

- **Line 176**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-600">
  ```

- **Line 182**: `text-green-`
  ```tsx
  className="text-sm text-green-600"
  ```

- **Line 193**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline text-sm disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
  ```

- **Line 215**: `bg-red-`, `border-red-`, `text-red-`
  ```tsx
  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
  ```

- **Line 236**: `text-gray-`
  ```tsx
  <p className="text-xs text-gray-500" role="status">
  ```

- **Line 241**: `text-green-`
  ```tsx
  <p className="text-xs text-green-600" role="status">
  ```

- **Line 247**: `text-red-`
  ```tsx
  <p className="text-xs text-red-600" role="alert">
  ```

- **Line 300**: `text-blue-`, `border-gray-`
  ```tsx
  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-1"
  ```

- **Line 307**: `text-gray-`
  ```tsx
  <label htmlFor="terms" className="ml-2 block text-sm text-gray-900">
  ```

- **Line 311**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
  ```

- **Line 319**: `text-blue-`
  ```tsx
  className="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
  ```

- **Line 331**: `text-red-`
  ```tsx
  <p id="terms-error" className="text-sm text-red-600" role="alert">
  ```

---

### apps/web/src/features/auth/pages/ResetPasswordPage.tsx
**Total instances in file**: 2

- **Line 124**: `bg-red-`, `border-red-`, `text-red-`
  ```tsx
  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
  ```

- **Line 146**: `bg-green-`, `border-green-`, `text-green-`
  ```tsx
  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
  ```

---

### apps/web/src/features/auth/pages/VerifyEmailPage.tsx
**Total instances in file**: 5

- **Line 152**: `border-blue-`
  ```tsx
  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
  ```

- **Line 154**: `text-gray-`
  ```tsx
  <p className="text-gray-600">{message}</p>
  ```

- **Line 173**: `bg-green-`, `border-green-`, `text-green-`
  ```tsx
  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
  ```

- **Line 178**: `text-gray-`
  ```tsx
  <p className="text-xs mt-2 text-gray-600">
  ```

- **Line 196**: `bg-red-`, `border-red-`, `text-red-`
  ```tsx
  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
  ```

---

### apps/web/src/features/chat/components/ChatMessage.tsx
**Total instances in file**: 1

- **Line 72**: `text-gray-`
  ```tsx
  : 'bg-white/5 border border-white/10 text-gray-100 rounded-tl-sm hover:bg-white/10',
  ```

---

### apps/web/src/features/chat/components/MessageSearch.tsx
**Total instances in file**: 6

- **Line 63**: `text-gray-`
  ```tsx
  <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
  ```

- **Line 100**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-500 mb-2">
  ```

- **Line 106**: `bg-gray-`
  ```tsx
  className="p-2 hover:bg-gray-100 rounded cursor-pointer"
  ```

- **Line 115**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-600 truncate">
  ```

- **Line 118**: `text-gray-`
  ```tsx
  <div className="text-xs text-gray-400">
  ```

- **Line 128**: `text-gray-`
  ```tsx
  <div className="absolute z-10 w-full mt-2 bg-white border rounded-lg shadow-lg p-4 text-sm text-gray-500">
  ```

---

### apps/web/src/features/chat/components/TypingIndicator.tsx
**Total instances in file**: 1

- **Line 17**: `text-gray-`
  ```tsx
  <div className="px-4 py-1 text-xs text-gray-500 italic animate-pulse">
  ```

---

### apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
**Total instances in file**: 13

- **Line 49**: `border-gray-`, `bg-gray-`
  ```tsx
  className={`p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors ${
  ```

- **Line 58**: `bg-blue-`
  ```tsx
  <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
  ```

- **Line 66**: `text-gray-`
  ```tsx
  <span className="text-sm font-medium text-gray-900">
  ```

- **Line 69**: `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500">
  ```

- **Line 79**: `text-gray-`
  ```tsx
  className="text-sm text-gray-700 break-words"
  ```

- **Line 87**: `text-gray-`
  ```tsx
  <div className="mt-2 text-xs text-gray-500">
  ```

- **Line 88**: `bg-blue-`, `text-blue-`
  ```tsx
  <span className="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded-full">
  ```

- **Line 126**: `border-blue-`
  ```tsx
  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
  ```

- **Line 127**: `text-gray-`
  ```tsx
  <span className="ml-2 text-sm text-gray-500">
  ```

- **Line 139**: `text-gray-`
  ```tsx
  <div className="text-gray-400 text-6xl mb-4">💬</div>
  ```

- **Line 140**: `text-gray-`
  ```tsx
  <p className="text-gray-500">Aucun message dans cette conversation</p>
  ```

- **Line 141**: `text-gray-`
  ```tsx
  <p className="text-sm text-gray-400 mt-2">
  ```

- **Line 173**: `bg-blue-`, `bg-blue-`
  ```tsx
  className="absolute bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 shadow-lg transition-colors"
  ```

---

### apps/web/src/features/dashboard/pages/DashboardPage.tsx
**Total instances in file**: 8

- **Line 35**: `text-blue-`
  ```tsx
  color: 'text-blue-600',
  ```

- **Line 42**: `text-green-`
  ```tsx
  color: 'text-green-600',
  ```

- **Line 49**: `text-red-`
  ```tsx
  color: 'text-red-600',
  ```

- **Line 56**: `text-purple-`
  ```tsx
  color: 'text-purple-600',
  ```

- **Line 85**: `text-green-`
  ```tsx
  <span className="text-green-600">{stat.change}</span> par
  ```

- **Line 105**: `bg-blue-`
  ```tsx
  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
  ```

- **Line 114**: `bg-green-`
  ```tsx
  <div className="w-2 h-2 bg-green-600 rounded-full"></div>
  ```

- **Line 123**: `bg-purple-`
  ```tsx
  <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
  ```

---

### apps/web/src/features/error/pages/NotFoundPage.tsx
**Total instances in file**: 8

- **Line 24**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
  ```

- **Line 28**: `bg-blue-`, `bg-blue-`
  ```tsx
  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
  ```

- **Line 29**: `text-blue-`, `text-blue-`
  ```tsx
  <Search className="h-8 w-8 text-blue-600 dark:text-blue-400" />
  ```

- **Line 37**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
  ```

- **Line 40**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-gray-600 dark:text-gray-400">
  ```

- **Line 65**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
  ```

- **Line 91**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
  ```

- **Line 94**: `text-gray-`, `text-gray-`
  ```tsx
  <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
  ```

---

### apps/web/src/features/error/pages/ServerErrorPage.tsx
**Total instances in file**: 16

- **Line 40**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
  ```

- **Line 44**: `bg-red-`, `bg-red-`
  ```tsx
  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
  ```

- **Line 45**: `text-red-`, `text-red-`
  ```tsx
  <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
  ```

- **Line 53**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
  ```

- **Line 56**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-gray-600 dark:text-gray-400">
  ```

- **Line 63**: `bg-blue-`, `bg-blue-`, `border-blue-`, `border-blue-`
  ```tsx
  <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
  ```

- **Line 65**: `text-blue-`, `text-blue-`
  ```tsx
  <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
  ```

- **Line 67**: `text-blue-`, `text-blue-`
  ```tsx
  <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
  ```

- **Line 70**: `text-blue-`, `text-blue-`
  ```tsx
  <ul className="text-sm text-blue-800 dark:text-blue-200 mt-2 space-y-1 list-disc list-inside">
  ```

- **Line 103**: `text-gray-`, `text-gray-`
  ```tsx
  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
  ```

- **Line 107**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 108**: `text-green-`
  ```tsx
  <CheckCircle className="h-4 w-4 text-green-600" />
  ```

- **Line 113**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 114**: `text-blue-`
  ```tsx
  <Mail className="h-4 w-4 text-blue-600" />
  ```

- **Line 125**: `text-gray-`, `text-gray-`, `text-gray-`, `text-gray-`
  ```tsx
  <summary className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-gray-100">
  ```

- **Line 128**: `bg-gray-`, `bg-gray-`, `text-gray-`, `text-gray-`
  ```tsx
  <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
  ```

---

### apps/web/src/features/library/components/LibraryManager.tsx
**Total instances in file**: 1

- **Line 227**: `text-red-`
  ```tsx
  <div className="text-center text-red-500">
  ```

---

### apps/web/src/features/library/pages/LibraryPage.tsx
**Total instances in file**: 1

- **Line 782**: `text-red-`
  ```tsx
  <p className="text-sm text-red-400">
  ```

---

### apps/web/src/features/player/components/AudioPlayer.tsx
**Total instances in file**: 8

- **Line 192**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-sm text-gray-500 dark:text-gray-400">
  ```

- **Line 203**: `bg-gray-`
  ```tsx
  'bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6',
  ```

- **Line 308**: `border-gray-`, `border-gray-`
  ```tsx
  <div className="flex items-center justify-between gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
  ```

- **Line 313**: `text-gray-`
  ```tsx
  className={cn('gap-1', !isSynced && 'text-gray-500')}
  ```

- **Line 332**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 344**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 362**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-gray-500 dark:text-gray-400 mb-2">
  ```

- **Line 365**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-sm text-gray-400 dark:text-gray-500">
  ```

---

### apps/web/src/features/player/components/MiniPlayer.tsx
**Total instances in file**: 5

- **Line 51**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  'fixed left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg',
  ```

- **Line 118**: `text-gray-`, `text-gray-`
  ```tsx
  'p-2 rounded-lg text-gray-600 dark:text-gray-400',
  ```

- **Line 119**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 136**: `text-gray-`, `text-gray-`
  ```tsx
  'p-2 rounded-lg text-gray-600 dark:text-gray-400',
  ```

- **Line 137**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

---

### apps/web/src/features/player/components/NextPreviousButtons.tsx
**Total instances in file**: 3

- **Line 44**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
  ```

- **Line 46**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
  ```

- **Line 48**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
  ```

---

### apps/web/src/features/player/components/PlayPauseButton.tsx
**Total instances in file**: 3

- **Line 42**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
  ```

- **Line 44**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
  ```

- **Line 46**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
  ```

---

### apps/web/src/features/player/components/PlaybackSpeedControl.tsx
**Total instances in file**: 9

- **Line 90**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
  ```

- **Line 91**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300',
  ```

- **Line 92**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-50 dark:hover:bg-gray-700',
  ```

- **Line 116**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  className="absolute z-50 mt-1 w-32 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg"
  ```

- **Line 126**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-700',
  ```

- **Line 127**: `bg-gray-`, `bg-gray-`
  ```tsx
  'focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700',
  ```

- **Line 130**: `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-50 dark:bg-blue-900/20',
  ```

- **Line 135**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-900 dark:text-white">
  ```

- **Line 140**: `text-blue-`, `text-blue-`
  ```tsx
  className="h-4 w-4 text-blue-600 dark:text-blue-400"
  ```

---

### apps/web/src/features/player/components/PlayerLoading.tsx
**Total instances in file**: 2

- **Line 55**: `text-blue-`, `text-blue-`
  ```tsx
  'animate-spin text-blue-600 dark:text-blue-400',
  ```

- **Line 63**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300 text-center',
  ```

---

### apps/web/src/features/player/components/ProgressBar.tsx
**Total instances in file**: 6

- **Line 155**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
  ```

- **Line 160**: `bg-blue-`, `bg-blue-`
  ```tsx
  'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
  ```

- **Line 161**: `bg-blue-`, `bg-blue-`
  ```tsx
  isDragging && 'bg-blue-700 dark:bg-blue-600',
  ```

- **Line 169**: `bg-blue-`, `bg-blue-`
  ```tsx
  className="absolute top-0 h-full w-0.5 bg-blue-800 dark:bg-blue-400 opacity-50"
  ```

- **Line 177**: `bg-blue-`, `bg-blue-`
  ```tsx
  'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
  ```

- **Line 188**: `bg-gray-`, `bg-gray-`
  ```tsx
  className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded pointer-events-none whitespace-nowrap"
  ```

---

### apps/web/src/features/player/components/QualitySelector.tsx
**Total instances in file**: 10

- **Line 86**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
  ```

- **Line 87**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300',
  ```

- **Line 88**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-50 dark:hover:bg-gray-700',
  ```

- **Line 111**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  className="absolute z-50 mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg"
  ```

- **Line 121**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-700',
  ```

- **Line 122**: `bg-gray-`, `bg-gray-`
  ```tsx
  'focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700',
  ```

- **Line 125**: `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-50 dark:bg-blue-900/20',
  ```

- **Line 131**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-900 dark:text-white">
  ```

- **Line 135**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-xs text-gray-500 dark:text-gray-400">
  ```

- **Line 142**: `text-blue-`, `text-blue-`
  ```tsx
  className="h-4 w-4 text-blue-600 dark:text-blue-400"
  ```

---

### apps/web/src/features/player/components/RepeatShuffleButtons.tsx
**Total instances in file**: 6

- **Line 44**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
  ```

- **Line 46**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
  ```

- **Line 48**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
  ```

- **Line 98**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
  ```

- **Line 112**: `bg-blue-`, `bg-blue-`
  ```tsx
  className="absolute bottom-0 right-0 text-[8px] font-bold leading-none bg-blue-700 dark:bg-blue-600 rounded-full w-3 h-3 flex items-center justify-center"
  ```

- **Line 131**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
  ```

---

### apps/web/src/features/player/components/TimeDisplay.tsx
**Total instances in file**: 1

- **Line 30**: `text-gray-`, `text-gray-`
  ```tsx
  'flex items-center text-sm text-gray-600 dark:text-gray-400',
  ```

---

### apps/web/src/features/player/components/TrackInfo.tsx
**Total instances in file**: 8

- **Line 29**: `text-gray-`, `text-gray-`
  ```tsx
  'flex items-center gap-3 text-gray-500 dark:text-gray-400',
  ```

- **Line 56**: `bg-gray-`, `bg-gray-`
  ```tsx
  'rounded-lg object-cover bg-gray-200 dark:bg-gray-700',
  ```

- **Line 63**: `bg-gray-`, `bg-gray-`
  ```tsx
  'rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center',
  ```

- **Line 73**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-400 dark:text-gray-500',
  ```

- **Line 85**: `text-gray-`
  ```tsx
  className="text-sm font-semibold text-gray-900 dark:text-white truncate"
  ```

- **Line 92**: `text-gray-`, `text-gray-`
  ```tsx
  className="text-xs text-gray-600 dark:text-gray-400 truncate"
  ```

- **Line 101**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="flex items-center gap-2 mt-1 text-xs text-gray-500 dark:text-gray-500">
  ```

- **Line 108**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="text-gray-400 dark:text-gray-600">•</span>
  ```

---

### apps/web/src/features/player/components/VolumeControl.tsx
**Total instances in file**: 6

- **Line 110**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
  ```tsx
  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
  ```

- **Line 140**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
  ```

- **Line 145**: `bg-blue-`, `bg-blue-`
  ```tsx
  'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
  ```

- **Line 146**: `bg-blue-`, `bg-blue-`
  ```tsx
  isDragging && 'bg-blue-700 dark:bg-blue-600',
  ```

- **Line 154**: `bg-blue-`, `bg-blue-`
  ```tsx
  'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
  ```

- **Line 166**: `text-gray-`, `text-gray-`
  ```tsx
  className="text-xs text-gray-600 dark:text-gray-400 min-w-[3ch] text-right"
  ```

---

### apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
**Total instances in file**: 1

- **Line 267**: `border-gray-`
  ```tsx
  className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
  ```

---

### apps/web/src/features/playlists/components/PlaylistActions.tsx
**Total instances in file**: 1

- **Line 125**: `text-green-`
  ```tsx
  className="w-4 h-4 sm:mr-2 text-green-600"
  ```

---

### apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
**Total instances in file**: 2

- **Line 200**: `bg-blue-`, `bg-blue-`, `border-blue-`, `border-blue-`
  ```tsx
  'p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg',
  ```

- **Line 208**: `text-blue-`, `text-blue-`
  ```tsx
  <span className="text-sm font-medium text-blue-900 dark:text-blue-100">
  ```

---

### apps/web/src/features/playlists/components/PlaylistCard.tsx
**Total instances in file**: 5

- **Line 68**: `border-blue-`
  ```tsx
  selectable && selected && 'ring-2 ring-blue-500 border-blue-500',
  ```

- **Line 100**: `bg-blue-`, `border-blue-`
  ```tsx
  ? 'bg-blue-600 border-blue-600 text-white'
  ```

- **Line 101**: `bg-gray-`, `border-gray-`, `border-gray-`, `border-blue-`
  ```tsx
  : 'bg-white/90 dark:bg-gray-800/90 border-gray-300 dark:border-gray-600 text-transparent hover:border-blue-500',
  ```

- **Line 119**: `bg-green-`
  ```tsx
  className="bg-green-500/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
  ```

- **Line 127**: `bg-gray-`
  ```tsx
  className="bg-gray-700/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
  ```

---

### apps/web/src/features/playlists/components/PlaylistHeader.tsx
**Total instances in file**: 2

- **Line 56**: `bg-green-`
  ```tsx
  className="bg-green-500/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
  ```

- **Line 64**: `bg-gray-`
  ```tsx
  className="bg-gray-700/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
  ```

---

### apps/web/src/features/playlists/components/PlaylistList.tsx
**Total instances in file**: 7

- **Line 298**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  className="inline-flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
  ```

- **Line 307**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-200 dark:hover:bg-gray-700',
  ```

- **Line 311**: `bg-gray-`, `text-blue-`, `text-blue-`
  ```tsx
  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
  ```

- **Line 312**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

- **Line 325**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-200 dark:hover:bg-gray-700',
  ```

- **Line 329**: `bg-gray-`, `text-blue-`, `text-blue-`
  ```tsx
  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
  ```

- **Line 330**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

---

### apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
**Total instances in file**: 10

- **Line 66**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 67**: `bg-gray-`, `bg-gray-`
  ```tsx
  'active:bg-gray-200 dark:active:bg-gray-700',
  ```

- **Line 95**: `bg-gray-`, `bg-gray-`, `bg-gray-`, `bg-gray-`
  ```tsx
  className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600 transition-colors touch-manipulation min-h-[32px] min-w-[32px] sm:min-h-0 sm:min-w-0"
  ```

- **Line 103**: `text-gray-`, `text-gray-`
  ```tsx
  <Pause className="h-3 w-3 sm:h-4 sm:w-4 text-gray-700 dark:text-gray-300" />
  ```

- **Line 105**: `text-gray-`, `text-gray-`
  ```tsx
  <Play className="h-3 w-3 sm:h-4 sm:w-4 text-gray-700 dark:text-gray-300" />
  ```

- **Line 122**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
  ```

- **Line 123**: `text-gray-`, `text-gray-`
  ```tsx
  <Music className="h-5 w-5 sm:h-6 sm:w-6 text-gray-400 dark:text-gray-500" />
  ```

- **Line 130**: `text-gray-`
  ```tsx
  <div className="font-medium text-sm sm:text-base text-gray-900 dark:text-white truncate">
  ```

- **Line 133**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 truncate">
  ```

- **Line 142**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="hidden sm:block text-sm text-gray-500 dark:text-gray-500 flex-shrink-0">
  ```

---

### apps/web/src/features/playlists/components/PlaylistTrackList.tsx
**Total instances in file**: 1

- **Line 222**: `text-gray-`
  ```tsx
  <p className="text-lg font-medium text-gray-900 dark:text-white mb-2">
  ```

---

### apps/web/src/features/playlists/pages/PlaylistListPage.tsx
**Total instances in file**: 2

- **Line 109**: `text-gray-`
  ```tsx
  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
  ```

- **Line 126**: `bg-blue-`
  ```tsx
  <span className="ml-2 bg-blue-600 text-white rounded-full px-2 py-0.5 text-xs">
  ```

---

### apps/web/src/features/streaming/components/PlaybackDashboard.tsx
**Total instances in file**: 4

- **Line 145**: `text-green-`
  ```tsx
  {isPositive && <TrendingUp className="h-4 w-4 text-green-500" />}
  ```

- **Line 146**: `text-red-`
  ```tsx
  {isNegative && <TrendingDown className="h-4 w-4 text-red-500" />}
  ```

- **Line 151**: `text-green-`
  ```tsx
  ? 'text-green-500'
  ```

- **Line 153**: `text-red-`
  ```tsx
  ? 'text-red-500'
  ```

---

### apps/web/src/features/streaming/components/PlaybackHeatmap.tsx
**Total instances in file**: 1

- **Line 304**: `bg-gray-`
  ```tsx
  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block z-10 bg-gray-900 text-white text-xs rounded px-2 py-1 whitespace-nowrap">
  ```

---

### apps/web/src/features/streaming/components/PlaybackSummary.tsx
**Total instances in file**: 3

- **Line 145**: `text-blue-`
  ```tsx
  <Play className="h-4 w-4 text-blue-600" />
  ```

- **Line 163**: `text-green-`
  ```tsx
  <Clock className="h-4 w-4 text-green-600" />
  ```

- **Line 181**: `text-purple-`
  ```tsx
  <CheckCircle2 className="h-4 w-4 text-purple-600" />
  ```

---

### apps/web/src/features/tracks/components/LikeButton.tsx
**Total instances in file**: 1

- **Line 163**: `text-red-`, `text-red-`
  ```tsx
  isLiked && 'text-red-500 hover:text-red-600',
  ```

---

### apps/web/src/features/tracks/components/TrackCard.tsx
**Total instances in file**: 1

- **Line 155**: `text-red-`
  ```tsx
  className="text-white hover:text-red-500"
  ```

---

### apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
**Total instances in file**: 4

- **Line 53**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
  ```

- **Line 69**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-200 dark:hover:bg-gray-700',
  ```

- **Line 72**: `bg-gray-`, `text-blue-`, `text-blue-`
  ```tsx
  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
  ```

- **Line 73**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

---

### apps/web/src/features/tracks/components/TrackHistory.tsx
**Total instances in file**: 6

- **Line 125**: `text-green-`, `bg-green-`
  ```tsx
  return 'text-green-600 bg-green-50';
  ```

- **Line 127**: `text-blue-`, `bg-blue-`
  ```tsx
  return 'text-blue-600 bg-blue-50';
  ```

- **Line 129**: `text-red-`, `bg-red-`
  ```tsx
  return 'text-red-600 bg-red-50';
  ```

- **Line 131**: `text-purple-`, `bg-purple-`
  ```tsx
  return 'text-purple-600 bg-purple-50';
  ```

- **Line 133**: `text-orange-`, `bg-orange-`
  ```tsx
  return 'text-orange-600 bg-orange-50';
  ```

- **Line 137**: `text-gray-`, `bg-gray-`
  ```tsx
  return 'text-gray-600 bg-gray-50';
  ```

---

### apps/web/src/features/tracks/components/TrackList.tsx
**Total instances in file**: 2

- **Line 133**: `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-50 dark:bg-blue-900/20',
  ```

- **Line 162**: `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-50 dark:bg-blue-900/20',
  ```

---

### apps/web/src/features/tracks/components/TrackListContainer.tsx
**Total instances in file**: 1

- **Line 22**: `text-red-`
  ```tsx
  <div className="p-4 text-red-500">
  ```

---

### apps/web/src/features/tracks/components/TrackListEmpty.tsx
**Total instances in file**: 8

- **Line 85**: `text-red-`, `text-red-`
  ```tsx
  ? 'text-red-500 dark:text-red-400'
  ```

- **Line 86**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-400 dark:text-gray-500';
  ```

- **Line 106**: `text-red-`, `text-red-`
  ```tsx
  ? 'text-red-900 dark:text-red-100'
  ```

- **Line 107**: `text-gray-`
  ```tsx
  : 'text-gray-900 dark:text-white',
  ```

- **Line 117**: `text-red-`, `text-red-`
  ```tsx
  ? 'text-red-700 dark:text-red-300'
  ```

- **Line 118**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

- **Line 136**: `bg-red-`, `bg-red-`, `bg-red-`, `bg-red-`
  ```tsx
  ? 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:ring-red-500'
  ```

- **Line 137**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
  ```tsx
  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:ring-blue-500',
  ```

---

### apps/web/src/features/tracks/components/TrackListPagination.tsx
**Total instances in file**: 21

- **Line 104**: `border-gray-`, `border-gray-`
  ```tsx
  'px-4 py-3 border-t border-gray-200 dark:border-gray-700',
  ```

- **Line 112**: `text-gray-`, `text-gray-`
  ```tsx
  <div className="text-sm text-gray-600 dark:text-gray-400">
  ```

- **Line 114**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-900 dark:text-white">
  ```

- **Line 118**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-900 dark:text-white">
  ```

- **Line 122**: `text-gray-`
  ```tsx
  <span className="font-medium text-gray-900 dark:text-white">
  ```

- **Line 138**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-600 dark:text-gray-400',
  ```

- **Line 139**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 156**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-600 dark:text-gray-400',
  ```

- **Line 157**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 178**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300',
  ```

- **Line 179**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 188**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="px-2 text-gray-500 dark:text-gray-400">
  ```

- **Line 205**: `bg-blue-`, `bg-blue-`
  ```tsx
  ? 'bg-blue-600 text-white dark:bg-blue-500'
  ```

- **Line 206**: `text-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`
  ```tsx
  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 219**: `text-gray-`, `text-gray-`
  ```tsx
  <span className="px-2 text-gray-500 dark:text-gray-400">
  ```

- **Line 229**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300',
  ```

- **Line 230**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 250**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-600 dark:text-gray-400',
  ```

- **Line 251**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

- **Line 268**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-600 dark:text-gray-400',
  ```

- **Line 269**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-100 dark:hover:bg-gray-800',
  ```

---

### apps/web/src/features/tracks/components/TrackListRow.tsx
**Total instances in file**: 2

- **Line 71**: `bg-blue-`, `bg-blue-`
  ```tsx
  isSelected && 'bg-blue-50 dark:bg-blue-900/20',
  ```

- **Line 149**: `bg-blue-`, `bg-blue-`
  ```tsx
  isSelected && 'bg-blue-50 dark:bg-blue-900/20',
  ```

---

### apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
**Total instances in file**: 7

- **Line 60**: `bg-blue-`, `bg-blue-`
  ```tsx
  'bg-blue-600 dark:bg-blue-700 text-white',
  ```

- **Line 82**: `bg-blue-`, `bg-blue-`
  ```tsx
  'hover:bg-blue-700 dark:hover:bg-blue-600',
  ```

- **Line 98**: `bg-blue-`, `bg-blue-`
  ```tsx
  'hover:bg-blue-700 dark:hover:bg-blue-600',
  ```

- **Line 114**: `bg-blue-`, `bg-blue-`
  ```tsx
  'hover:bg-blue-700 dark:hover:bg-blue-600',
  ```

- **Line 130**: `bg-red-`, `bg-red-`
  ```tsx
  'hover:bg-red-600 dark:hover:bg-red-500',
  ```

- **Line 146**: `bg-blue-`, `bg-blue-`
  ```tsx
  'hover:bg-blue-700 dark:hover:bg-blue-600',
  ```

- **Line 164**: `bg-blue-`, `bg-blue-`
  ```tsx
  'hover:bg-blue-700 dark:hover:bg-blue-600',
  ```

---

### apps/web/src/features/tracks/components/TrackListSkeleton.tsx
**Total instances in file**: 5

- **Line 32**: `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
  ```

- **Line 37**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="w-12 h-12 rounded-md bg-gray-200 dark:bg-gray-700 animate-pulse" />
  ```

- **Line 43**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4" />
  ```

- **Line 45**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" />
  ```

- **Line 52**: `bg-gray-`, `bg-gray-`
  ```tsx
  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-12" />
  ```

---

### apps/web/src/features/tracks/components/TrackSort.tsx
**Total instances in file**: 9

- **Line 133**: `text-gray-`
  ```tsx
  <FieldIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
  ```

- **Line 141**: `border-gray-`, `border-gray-`
  ```tsx
  'pl-10 pr-8 py-2 border border-gray-300 dark:border-gray-600',
  ```

- **Line 142**: `bg-gray-`
  ```tsx
  'rounded-md bg-white dark:bg-gray-700',
  ```

- **Line 143**: `text-gray-`
  ```tsx
  'text-sm font-medium text-gray-900 dark:text-white',
  ```

- **Line 155**: `text-gray-`
  ```tsx
  <ArrowUpDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
  ```

- **Line 165**: `border-gray-`, `border-gray-`
  ```tsx
  'p-2 rounded-md border border-gray-300 dark:border-gray-600',
  ```

- **Line 166**: `bg-gray-`
  ```tsx
  'bg-white dark:bg-gray-700',
  ```

- **Line 167**: `text-gray-`, `text-gray-`
  ```tsx
  'text-gray-700 dark:text-gray-300',
  ```

- **Line 168**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-50 dark:hover:bg-gray-600',
  ```

---

### apps/web/src/features/tracks/components/UploadQuota.tsx
**Total instances in file**: 5

- **Line 132**: `text-yellow-`
  ```tsx
  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
  ```

- **Line 142**: `bg-yellow-`
  ```tsx
  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
  ```

- **Line 163**: `text-yellow-`
  ```tsx
  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
  ```

- **Line 174**: `bg-yellow-`
  ```tsx
  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
  ```

- **Line 186**: `bg-yellow-`, `bg-yellow-`, `text-yellow-`, `text-yellow-`
  ```tsx
  <div className="flex items-start gap-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-md text-xs text-yellow-800 dark:text-yellow-200">
  ```

---

### apps/web/src/features/tracks/components/ViewToggle.tsx
**Total instances in file**: 7

- **Line 69**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
  ```tsx
  'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
  ```

- **Line 83**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-200 dark:hover:bg-gray-700',
  ```

- **Line 87**: `bg-gray-`, `text-blue-`, `text-blue-`
  ```tsx
  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
  ```

- **Line 88**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

- **Line 106**: `bg-gray-`, `bg-gray-`
  ```tsx
  'hover:bg-gray-200 dark:hover:bg-gray-700',
  ```

- **Line 110**: `bg-gray-`, `text-blue-`, `text-blue-`
  ```tsx
  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
  ```

- **Line 111**: `text-gray-`, `text-gray-`
  ```tsx
  : 'text-gray-600 dark:text-gray-400',
  ```

---

### apps/web/src/features/upload/components/UploadModal.tsx
**Total instances in file**: 1

- **Line 426**: `bg-green-`, `border-green-`, `text-green-`
  ```tsx
  <Alert className="bg-green-50 border-green-200 text-green-800">
  ```

---

### apps/web/src/features/user/components/ProfileForm.tsx
**Total instances in file**: 17

- **Line 307**: `text-green-`
  ```tsx
  <CheckCircle2 className="h-5 w-5 text-green-600" />
  ```

- **Line 309**: `text-yellow-`
  ```tsx
  <AlertCircle className="h-5 w-5 text-yellow-600" />
  ```

- **Line 379**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 396**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">{errors.email.message}</p>
  ```

- **Line 411**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 426**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 444**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 465**: `text-red-`
  ```tsx
  <p className="text-red-500">{errors.bio.message}</p>
  ```

- **Line 493**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 514**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 535**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 556**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 577**: `text-red-`
  ```tsx
  <p className="text-sm text-red-500">
  ```

- **Line 596**: `text-blue-`
  ```tsx
  className="flex items-center gap-2 text-blue-500 hover:underline"
  ```

- **Line 607**: `text-pink-`
  ```tsx
  className="flex items-center gap-2 text-pink-500 hover:underline"
  ```

- **Line 618**: `text-blue-`
  ```tsx
  className="flex items-center gap-2 text-blue-600 hover:underline"
  ```

- **Line 629**: `text-red-`
  ```tsx
  className="flex items-center gap-2 text-red-500 hover:underline"
  ```

---

### apps/web/src/pages/marketplace/MarketplaceHome.tsx
**Total instances in file**: 2

- **Line 212**: `bg-blue-`
  ```tsx
  <Badge className="ml-2 bg-blue-600">{getItemCount()}</Badge>
  ```

- **Line 223**: `text-gray-`
  ```tsx
  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
  ```

---