From b29732a6535794fa4a68fb557eca045f33507b9b Mon Sep 17 00:00:00 2001
From: Lars Behrends <larsbehrends@yahoo.de>
Date: Fri, 10 Apr 2026 14:59:40 +0200
Subject: [PATCH] Introduce ThemeContext and apply theme tokens

Add a ThemeContext and provider, wrap the app with ThemeProvider, and sync user settings' theme into the context. Replace hardcoded color classes with design token classes (background, muted, foreground, border, card, etc.) across multiple UI components to centralize theming and enable consistent light/dark styling. Files updated include App.tsx (useTheme, setTheme, ThemeProvider, footer/background tokens), several views and components (AddMediaView, BrowseView, CastDetailView, CastView, MediaCard, MediaListItem, SettingsView, ImporterView) to use tokenized classes, and add new src/contexts/ThemeContext.tsx.
---
 src/App.tsx                       |  25 ++++---
 src/components/AddMediaView.tsx   |  89 ++++++++++++------------
 src/components/BrowseView.tsx     |  38 +++++-----
 src/components/CastDetailView.tsx | 106 ++++++++++++++--------------
 src/components/CastView.tsx       |  70 +++++++++----------
 src/components/DetailView.tsx     |  88 +++++++++++------------
 src/components/ImporterView.tsx   | 112 +++++++++++++++---------------
 src/components/MediaCard.tsx      |   6 +-
 src/components/MediaListItem.tsx  |  18 ++---
 src/components/SettingsView.tsx   |  70 ++++++++++---------
 src/contexts/ThemeContext.tsx     |  74 ++++++++++++++++++++
 11 files changed, 392 insertions(+), 304 deletions(-)
 create mode 100644 src/contexts/ThemeContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 52b65c8..836ab45 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,11 +17,13 @@ import SettingsView from './components/SettingsView';
 import { MOCK_MEDIA, DETAIL_MEDIA } from './data';
 import { Media, Staff, MediaCategory, UserSettings } from './types';
 import { fetchAllMedia, fetchMediaById, fetchCastById, convertApiCastToStaff, fetchSettings, updateSettings } from './api';
+import { ThemeProvider, useTheme } from './contexts/ThemeContext';
 
 function AppContent() {
   const navigate = useNavigate();
   const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { setTheme } = useTheme();
   const [activeCategory, setActiveCategory] = useState<MediaCategory>(
     (searchParams.get('category') as MediaCategory) || 'Anime'
   );
@@ -43,6 +45,8 @@ function AppContent() {
         if (loadedSettings) {
           setSettings(loadedSettings);
           setEnabledCategories(loadedSettings.enabledCategories);
+          // Sync theme with theme context
+          setTheme(loadedSettings.theme);
         }
       } catch (error) {
         console.error('Failed to load settings from API:', error);
@@ -50,7 +54,7 @@ function AppContent() {
     };
     
     loadSettingsFromApi();
-  }, []);
+  }, [setTheme]);
 
   const reloadSettings = async () => {
     try {
@@ -58,6 +62,8 @@ function AppContent() {
       if (loadedSettings) {
         setSettings(loadedSettings);
         setEnabledCategories(loadedSettings.enabledCategories);
+        // Sync theme with theme context
+        setTheme(loadedSettings.theme);
       }
     } catch (error) {
       console.error('Failed to reload settings from API:', error);
@@ -270,7 +276,7 @@ function AppContent() {
   };
 
   return (
-    <div className="min-h-screen bg-white font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
+    <div className="min-h-screen bg-background font-sans selection:bg-[#6d28d9]/20 selection:text-[#6d28d9]">
       <Header
         onSearch={handleSearch}
         activeCategory={activeCategory}
@@ -315,6 +321,7 @@ function AppContent() {
             <Route path="/add" element={
               <AddMediaView
                 activeCategory={activeCategory}
+                enabledCategories={enabledCategories}
                 onAddComplete={handleAddMedia}
               />
             } />
@@ -329,18 +336,18 @@ function AppContent() {
       </main>
 
       {/* Footer */}
-      <footer className="py-12 px-6 border-t border-zinc-100 bg-zinc-50">
+      <footer className="py-12 px-6 border-t border-border bg-muted/50">
         <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
-          <div className="flex items-center gap-2 text-xl font-black text-zinc-400">
-            <div className="w-5 h-5 bg-zinc-300 rounded-full" />
+          <div className="flex items-center gap-2 text-xl font-black text-muted-foreground">
+            <div className="w-5 h-5 bg-muted rounded-full" />
             kyoo
           </div>
-          <div className="flex items-center gap-8 text-sm font-bold text-zinc-400">
+          <div className="flex items-center gap-8 text-sm font-bold text-muted-foreground">
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Terms</a>
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Privacy</a>
             <a href="#" className="hover:text-[#6d28d9] transition-colors">Contact</a>
           </div>
-          <p className="text-xs font-medium text-zinc-400">
+          <p className="text-xs font-medium text-muted-foreground">
             © 2026 Kyoo Media Discovery. All rights reserved.
           </p>
         </div>
@@ -428,7 +435,9 @@ function CastDetailRoute({ selectedPerson, setSelectedPerson }: any) {
 export default function App() {
   return (
     <BrowserRouter>
-      <AppContent />
+      <ThemeProvider>
+        <AppContent />
+      </ThemeProvider>
     </BrowserRouter>
   );
 }
diff --git a/src/components/AddMediaView.tsx b/src/components/AddMediaView.tsx
index 97aee5c..c85ad2d 100644
--- a/src/components/AddMediaView.tsx
+++ b/src/components/AddMediaView.tsx
@@ -10,10 +10,11 @@ import { cn } from '@/lib/utils';
 
 interface AddMediaViewProps {
   activeCategory: MediaCategory;
+  enabledCategories: MediaCategory[];
   onAddComplete: () => void;
 }
 
-export default function AddMediaView({ activeCategory, onAddComplete }: AddMediaViewProps) {
+export default function AddMediaView({ activeCategory, enabledCategories, onAddComplete }: AddMediaViewProps) {
   const navigate = useNavigate();
   const [newMedia, setNewMedia] = useState({
     title: '',
@@ -151,62 +152,62 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
       <Button 
         variant="ghost" 
         onClick={() => navigate('/')}
-        className="mb-6 gap-2 text-zinc-600 hover:text-zinc-900"
+        className="mb-6 gap-2 text-muted-foreground hover:text-foreground"
       >
         <ArrowLeft size={20} />
         Back to Browse
       </Button>
 
-      <div className="bg-white rounded-3xl shadow-xl p-8">
-        <h1 className="text-3xl font-black text-zinc-900 mb-2">Add New Media</h1>
-        <p className="text-zinc-500 font-medium mb-8">
+      <div className="bg-card rounded-3xl shadow-xl p-8 border border-border">
+        <h1 className="text-3xl font-black text-foreground mb-2">Add New Media</h1>
+        <p className="text-muted-foreground font-medium mb-8">
           Add a new item to your {activeCategory} library.
         </p>
 
         {submitStatus === 'success' && (
-          <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl">
-            <p className="text-green-800 font-bold">✓ Successfully added to library!</p>
+          <div className="mb-6 p-4 bg-green-500/10 border border-green-500/30 rounded-xl">
+            <p className="text-green-500 font-bold">✓ Successfully added to library!</p>
           </div>
         )}
 
         {submitStatus === 'error' && (
-          <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
-            <p className="text-red-800 font-bold">✗ Error: {errorMessage}</p>
+          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-xl">
+            <p className="text-red-500 font-bold">✗ Error: {errorMessage}</p>
           </div>
         )}
 
         <form onSubmit={handleAddSubmit} className="space-y-6">
           <div className="grid gap-2">
-            <Label htmlFor="title" className="text-sm font-black text-zinc-700">Title</Label>
+            <Label htmlFor="title" className="text-sm font-black text-foreground">Title</Label>
             <Input 
               id="title" 
               value={newMedia.title}
               onChange={e => setNewMedia(prev => ({ ...prev, title: e.target.value }))}
               placeholder="e.g. Mob Psycho 100" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               required
             />
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="grid gap-2">
-              <Label htmlFor="year" className="text-sm font-black text-zinc-700">Year</Label>
+              <Label htmlFor="year" className="text-sm font-black text-foreground">Year</Label>
               <Input 
                 id="year" 
                 value={newMedia.year}
                 onChange={e => setNewMedia(prev => ({ ...prev, year: e.target.value }))}
                 placeholder="2024" 
-                className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               />
             </div>
             <div className="grid gap-2">
-              <Label htmlFor="category" className="text-sm font-black text-zinc-700">Category</Label>
+              <Label htmlFor="category" className="text-sm font-black text-foreground">Category</Label>
               <select 
                 id="category"
                 value={newMedia.category}
                 onChange={e => setNewMedia(prev => ({ ...prev, category: e.target.value as MediaCategory }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
-                {['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult'].map(cat => (
+                {enabledCategories.map(cat => (
                   <option key={cat} value={cat}>{cat}</option>
                 ))}
               </select>
@@ -214,12 +215,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="grid gap-2">
-              <Label htmlFor="type" className="text-sm font-black text-zinc-700">Type</Label>
+              <Label htmlFor="type" className="text-sm font-black text-foreground">Type</Label>
               <select 
                 id="type"
                 value={newMedia.type}
                 onChange={e => setNewMedia(prev => ({ ...prev, type: e.target.value }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 {newMedia.category === 'Music' ? (
                   <>
@@ -253,12 +254,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
               </select>
             </div>
             <div className="grid gap-2">
-              <Label htmlFor="status" className="text-sm font-black text-zinc-700">Status</Label>
+              <Label htmlFor="status" className="text-sm font-black text-foreground">Status</Label>
               <select 
                 id="status"
                 value={newMedia.status}
                 onChange={e => setNewMedia(prev => ({ ...prev, status: e.target.value }))}
-                className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="Released">Released</option>
                 <option value="Ongoing">Ongoing</option>
@@ -274,12 +275,12 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
             </div>
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="aspectRatio" className="text-sm font-black text-zinc-700">Aspect Ratio (Format)</Label>
+            <Label htmlFor="aspectRatio" className="text-sm font-black text-foreground">Aspect Ratio (Format)</Label>
             <select 
               id="aspectRatio"
               value={newMedia.aspectRatio}
               onChange={e => setNewMedia(prev => ({ ...prev, aspectRatio: e.target.value as '2/3' | '16/9' | '1/1' }))}
-              className="bg-zinc-50 border border-zinc-100 rounded-xl h-11 px-3 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-background border-border rounded-xl h-11 px-3 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               <option value="2/3">2:3 (Standard Poster)</option>
               <option value="16/9">16:9 (Wide Thumbnail)</option>
@@ -287,38 +288,38 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
             </select>
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="poster" className="text-sm font-black text-zinc-700">Poster URL</Label>
+            <Label htmlFor="poster" className="text-sm font-black text-foreground">Poster URL</Label>
             <Input 
               id="poster" 
               value={newMedia.poster}
               onChange={e => setNewMedia(prev => ({ ...prev, poster: e.target.value }))}
               placeholder="https://example.com/poster.jpg" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
               required
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="banner" className="text-sm font-black text-zinc-700">Banner URL (Optional)</Label>
+            <Label htmlFor="banner" className="text-sm font-black text-foreground">Banner URL (Optional)</Label>
             <Input 
               id="banner" 
               value={newMedia.banner}
               onChange={e => setNewMedia(prev => ({ ...prev, banner: e.target.value }))}
               placeholder="https://example.com/banner.jpg" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="description" className="text-sm font-black text-zinc-700">Description (Optional)</Label>
+            <Label htmlFor="description" className="text-sm font-black text-foreground">Description (Optional)</Label>
             <textarea 
               id="description"
               value={newMedia.description}
               onChange={e => setNewMedia(prev => ({ ...prev, description: e.target.value }))}
               placeholder="Brief description..."
-              className="bg-zinc-50 border-zinc-100 rounded-xl p-3 h-20 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none resize-none"
+              className="bg-muted border-border rounded-xl p-3 h-20 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none resize-none"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="rating" className="text-sm font-black text-zinc-700">Rating (Optional)</Label>
+            <Label htmlFor="rating" className="text-sm font-black text-foreground">Rating (Optional)</Label>
             <Input 
               id="rating" 
               type="number"
@@ -328,84 +329,84 @@ export default function AddMediaView({ activeCategory, onAddComplete }: AddMedia
               value={newMedia.rating}
               onChange={e => setNewMedia(prev => ({ ...prev, rating: e.target.value }))}
               placeholder="8.5" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           {(newMedia.category === 'Anime' || newMedia.category === 'Movies' || newMedia.category === 'TV Series' || newMedia.category === 'Adult') && (
             <>
               <div className="grid grid-cols-2 gap-4">
                 <div className="grid gap-2">
-                  <Label htmlFor="runtime" className="text-sm font-black text-zinc-700">Runtime (min)</Label>
+                  <Label htmlFor="runtime" className="text-sm font-black text-foreground">Runtime (min)</Label>
                   <Input 
                     id="runtime" 
                     type="number"
                     value={newMedia.runtime}
                     onChange={e => setNewMedia(prev => ({ ...prev, runtime: e.target.value }))}
                     placeholder="120" 
-                    className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                    className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                   />
                 </div>
                 <div className="grid gap-2">
-                  <Label htmlFor="releaseDate" className="text-sm font-black text-zinc-700">Release Date</Label>
+                  <Label htmlFor="releaseDate" className="text-sm font-black text-foreground">Release Date</Label>
                   <Input 
                     id="releaseDate" 
                     type="date"
                     value={newMedia.releaseDate}
                     onChange={e => setNewMedia(prev => ({ ...prev, releaseDate: e.target.value }))}
-                    className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                    className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                   />
                 </div>
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="director" className="text-sm font-black text-zinc-700">Director</Label>
+                <Label htmlFor="director" className="text-sm font-black text-foreground">Director</Label>
                 <Input 
                   id="director" 
                   value={newMedia.director}
                   onChange={e => setNewMedia(prev => ({ ...prev, director: e.target.value }))}
                   placeholder="Director name" 
-                  className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                  className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                 />
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="writer" className="text-sm font-black text-zinc-700">Writer</Label>
+                <Label htmlFor="writer" className="text-sm font-black text-foreground">Writer</Label>
                 <Input 
                   id="writer" 
                   value={newMedia.writer}
                   onChange={e => setNewMedia(prev => ({ ...prev, writer: e.target.value }))}
                   placeholder="Writer name" 
-                  className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+                  className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
                 />
               </div>
             </>
           )}
           <div className="grid gap-2">
-            <Label htmlFor="genres" className="text-sm font-black text-zinc-700">Genres (comma-separated)</Label>
+            <Label htmlFor="genres" className="text-sm font-black text-foreground">Genres (comma-separated)</Label>
             <Input 
               id="genres" 
               value={newMedia.genres}
               onChange={e => setNewMedia(prev => ({ ...prev, genres: e.target.value }))}
               placeholder="Action, Drama, Sci-Fi" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="tags" className="text-sm font-black text-zinc-700">Tags (comma-separated)</Label>
+            <Label htmlFor="tags" className="text-sm font-black text-foreground">Tags (comma-separated)</Label>
             <Input 
               id="tags" 
               value={newMedia.tags}
               onChange={e => setNewMedia(prev => ({ ...prev, tags: e.target.value }))}
               placeholder="Classic, Best-selling" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <div className="grid gap-2">
-            <Label htmlFor="studios" className="text-sm font-black text-zinc-700">Studios (comma-separated)</Label>
+            <Label htmlFor="studios" className="text-sm font-black text-foreground">Studios (comma-separated)</Label>
             <Input 
               id="studios" 
               value={newMedia.studios}
               onChange={e => setNewMedia(prev => ({ ...prev, studios: e.target.value }))}
               placeholder="Studio A, Studio B" 
-              className="bg-zinc-50 border-zinc-100 rounded-xl h-11 focus:ring-[#6d28d9]"
+              className="bg-muted border-border rounded-xl h-11 focus:ring-[#6d28d9]"
             />
           </div>
           <Button 
diff --git a/src/components/BrowseView.tsx b/src/components/BrowseView.tsx
index 78d1d11..f3afab6 100644
--- a/src/components/BrowseView.tsx
+++ b/src/components/BrowseView.tsx
@@ -92,7 +92,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {/* Genre Filter */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedGenre ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedGenre ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                 <Star size={16} />
                 {selectedGenre || 'Genres'}
               </button>
@@ -108,7 +108,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {/* Studio Filter */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedStudio ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+              <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedStudio ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                 Studios
               </button>
             </DropdownMenuTrigger>
@@ -124,7 +124,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedPlatform ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedPlatform ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <Monitor size={16} />
                   {selectedPlatform || 'Platforms'}
                 </button>
@@ -142,7 +142,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedDeveloper ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedDeveloper ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <Users size={16} />
                   {selectedDeveloper || 'Developers'}
                 </button>
@@ -160,7 +160,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
           {activeCategory === 'Games' && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedCategory ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedCategory ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-muted-foreground")}>
                   <FolderTree size={16} />
                   {selectedCategory || 'Categories'}
                 </button>
@@ -178,7 +178,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             <Button 
               variant="link" 
               size="sm" 
-              className="text-zinc-400 font-bold"
+              className="text-muted-foreground font-bold"
               onClick={() => {
                 setSelectedGenre(null);
                 setSelectedStudio(null);
@@ -195,7 +195,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
         <div className="flex items-center gap-4">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button type="button" className="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 text-zinc-600 font-bold gap-2">
+              <button type="button" className="group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 text-muted-foreground font-bold gap-2">
                 <ArrowUpDown size={16} />
                 {sortBy === 'default' ? 'Sort' : sortBy === 'title-asc' ? 'Title (A-Z)' : 'Title (Z-A)'}
               </button>
@@ -207,13 +207,13 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             </DropdownMenuContent>
           </DropdownMenu>
           
-          <div className="flex items-center bg-zinc-100 rounded-md p-1">
+          <div className="flex items-center bg-muted rounded-md p-1">
             <Button 
               variant="ghost" 
               size="icon" 
               className={cn(
                 "h-8 w-8 transition-all",
-                viewMode === 'grid' ? "bg-white shadow-sm text-[#6d28d9]" : "text-zinc-400"
+                viewMode === 'grid' ? "bg-background shadow-sm text-[#6d28d9]" : "text-muted-foreground"
               )}
               onClick={() => setViewMode('grid')}
             >
@@ -224,7 +224,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="icon" 
               className={cn(
                 "h-8 w-8 transition-all",
-                viewMode === 'list' ? "bg-white shadow-sm text-[#6d28d9]" : "text-zinc-400"
+                viewMode === 'list' ? "bg-background shadow-sm text-[#6d28d9]" : "text-muted-foreground"
               )}
               onClick={() => setViewMode('list')}
             >
@@ -236,8 +236,8 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
 
       {/* Content */}
       {mediaList.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
-          <div className="w-16 h-16 bg-zinc-100 rounded-full flex items-center justify-center mb-4">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
             <Search size={32} />
           </div>
           <p className="text-lg font-bold">No results found</p>
@@ -271,16 +271,16 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
 
       {/* Pagination Controls */}
       {mediaList.length > 0 && (
-        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-zinc-100 pt-8">
+        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-border pt-8">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-zinc-500 font-medium">Items per page:</span>
+            <span className="text-sm text-muted-foreground font-medium">Items per page:</span>
             <select 
               value={itemsPerPage}
               onChange={(e) => {
                 setItemsPerPage(Number(e.target.value));
                 setCurrentPage(1);
               }}
-              className="bg-zinc-100 border-none rounded-md px-2 py-1 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-muted border-none rounded-md px-2 py-1 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               {[12, 20, 36, 48, 60].map(size => (
                 <option key={size} value={size}>{size}</option>
@@ -294,7 +294,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="sm" 
               onClick={handlePrevPage}
               disabled={currentPage === 1}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               <ChevronLeft size={16} />
               Previous
@@ -302,8 +302,8 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
             
             <div className="flex items-center gap-2">
               <span className="text-sm font-black text-[#6d28d9]">{currentPage}</span>
-              <span className="text-sm text-zinc-400 font-medium">of</span>
-              <span className="text-sm font-bold text-zinc-700">{totalPages || 1}</span>
+              <span className="text-sm text-muted-foreground font-medium">of</span>
+              <span className="text-sm font-bold text-foreground">{totalPages || 1}</span>
             </div>
 
             <Button 
@@ -311,7 +311,7 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory, it
               size="sm" 
               onClick={handleNextPage}
               disabled={currentPage === totalPages || totalPages === 0}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               Next
               <ChevronRight size={16} />
diff --git a/src/components/CastDetailView.tsx b/src/components/CastDetailView.tsx
index 534ffca..22fb726 100644
--- a/src/components/CastDetailView.tsx
+++ b/src/components/CastDetailView.tsx
@@ -17,7 +17,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
     navigate(`/media/${mediaId}`);
   };
   return (
-    <div className="min-h-screen bg-white pb-20">
+    <div className="min-h-screen bg-background pb-20">
       {/* Hero Section */}
       <div className="relative h-[40vh] md:h-[50vh] overflow-hidden bg-zinc-900">
         <img 
@@ -26,14 +26,14 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
           className="w-full h-full object-cover opacity-40 blur-xl scale-110"
           referrerPolicy="no-referrer"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
         
         <div className="absolute inset-0 flex items-end px-6 pb-12">
           <div className="max-w-[1200px] mx-auto w-full flex flex-col md:flex-row items-center md:items-end gap-8">
             <motion.div 
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className="w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden border-4 border-white shadow-2xl shrink-0"
+              className="w-48 h-48 md:w-64 md:h-64 rounded-2xl overflow-hidden border-4 border-background shadow-2xl shrink-0"
             >
               <img 
                 src={person.photo} 
@@ -49,7 +49,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ delay: 0.1 }}
               >
-                <h1 className="text-4xl md:text-6xl font-black text-zinc-900 mb-4 drop-shadow-sm">
+                <h1 className="text-4xl md:text-6xl font-black text-foreground mb-4 drop-shadow-sm">
                   {person.name}
                 </h1>
                 <div className="flex flex-wrap justify-center md:justify-start gap-3">
@@ -78,90 +78,90 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
       <div className="max-w-[1200px] mx-auto px-6 mt-12 grid grid-cols-1 lg:grid-cols-3 gap-12">
         {/* Sidebar Info */}
         <div className="space-y-8">
-          <div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
-            <h3 className="text-xl font-black text-zinc-900">Personal Info</h3>
+          <div className="bg-muted/50 rounded-3xl p-8 space-y-6 border border-border">
+            <h3 className="text-xl font-black text-foreground">Personal Info</h3>
             
             <div className="space-y-4">
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <Calendar size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Birth Date</p>
-                  <p className="font-bold text-zinc-700">{person.birthDate || 'Unknown'}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Birth Date</p>
+                  <p className="font-bold text-foreground">{person.birthDate || 'Unknown'}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <MapPin size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Birth Place</p>
-                  <p className="font-bold text-zinc-700">{person.birthPlace || 'Unknown'}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Birth Place</p>
+                  <p className="font-bold text-foreground">{person.birthPlace || 'Unknown'}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
-                <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                   <Briefcase size={20} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Known For</p>
-                  <p className="font-bold text-zinc-700">{person.role}</p>
+                  <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Known For</p>
+                  <p className="font-bold text-foreground">{person.role}</p>
                 </div>
               </div>
 
               {(person.ethnicity || person.adult_specifics?.ethnicity) && (
                 <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                  <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                     <User size={20} />
                   </div>
                   <div>
-                    <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Ethnicity</p>
-                    <p className="font-bold text-zinc-700">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
+                    <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Ethnicity</p>
+                    <p className="font-bold text-foreground">{person.adult_specifics?.ethnicity || person.ethnicity}</p>
                   </div>
                 </div>
               )}
             </div>
           </div>
 
-            <div className="bg-zinc-50 rounded-3xl p-8 space-y-6">
-              <h3 className="text-xl font-black text-zinc-900">Measurements</h3>
+            <div className="bg-muted/50 rounded-3xl p-8 space-y-6 border border-border">
+              <h3 className="text-xl font-black text-foreground">Measurements</h3>
 
               <div className="space-y-4">
                 
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Height</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.height || person.height} cm</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Height</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.height || person.height} cm</p>
                     </div>
                   </div>
                 
 
                 {(person.weight || person.adult_specifics?.weight) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Weight</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.weight || person.weight} kg</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Weight</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.weight || person.weight} kg</p>
                     </div>
                   </div>
                 )}
 
                 {(person.adult_specifics?.measurements || person.bust_size || person.cup_size || person.waist_size || person.hip_size) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Ruler size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Measurements</p>
-                      <p className="font-bold text-zinc-700">
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Measurements</p>
+                      <p className="font-bold text-foreground">
                         {person.adult_specifics?.measurements || (
                           <>
                             {person.bust_size && `${person.bust_size}`}
@@ -179,48 +179,48 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
                 {(person.hair_color || person.adult_specifics?.hair_color) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Hair Color</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.hair_color || person.hair_color}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Hair Color</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.hair_color || person.hair_color}</p>
                     </div>
                   </div>
                 )}
 
                 {(person.eye_color || person.adult_specifics?.eye_color) && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Eye size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Eye Color</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics?.eye_color || person.eye_color}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Eye Color</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics?.eye_color || person.eye_color}</p>
                     </div>
                   </div>
                 )}
 
                 {person.adult_specifics?.tattoos && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Tattoos</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics.tattoos}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Tattoos</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics.tattoos}</p>
                     </div>
                   </div>
                 )}
 
                 {person.adult_specifics?.piercings && (
                   <div className="flex items-start gap-4">
-                    <div className="w-10 h-10 rounded-xl bg-white flex items-center justify-center text-[#6d28d9] shadow-sm">
+                    <div className="w-10 h-10 rounded-xl bg-background flex items-center justify-center text-[#6d28d9] shadow-sm border border-border">
                       <Palette size={20} />
                     </div>
                     <div>
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest">Piercings</p>
-                      <p className="font-bold text-zinc-700">{person.adult_specifics.piercings}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">Piercings</p>
+                      <p className="font-bold text-foreground">{person.adult_specifics.piercings}</p>
                     </div>
                   </div>
                 )}
@@ -232,10 +232,10 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
         <div className="lg:col-span-2 space-y-12">
           {person.bio && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 Biography
               </h2>
-              <p className="text-zinc-600 leading-relaxed text-lg">
+              <p className="text-foreground leading-relaxed text-lg">
                 {person.bio}
               </p>
             </section>
@@ -243,7 +243,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
           {person.filmography && person.filmography.length > 0 && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 <User className="text-[#6d28d9]" />
                 Characters
               </h2>
@@ -251,9 +251,9 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                 {person.filmography.map(item => (
                   <div 
                     key={`${item.id}-char`}
-                    className="flex items-center gap-4 p-4 rounded-2xl bg-zinc-50 border border-zinc-100"
+                    className="flex items-center gap-4 p-4 rounded-2xl bg-muted/50 border border-border"
                   >
-                    <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-white">
+                    <div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 shadow-sm border-2 border-background">
                       <img 
                         src={item.poster || person.photo} 
                         alt={item.title} 
@@ -262,8 +262,8 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                       />
                     </div>
                     <div className="min-w-0 flex-1">
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Character</p>
-                      <h4 className="font-black text-zinc-900 truncate">{item.characterName || item.role}</h4>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1">Character</p>
+                      <h4 className="font-black text-foreground truncate">{item.characterName || item.role}</h4>
                       <button 
                         onClick={() => handleMediaClick(item.id.toString())}
                         className="text-xs font-bold text-[#6d28d9] hover:underline mt-1 text-left"
@@ -279,7 +279,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
 
           {person.filmography && person.filmography.length > 0 && (
             <section>
-              <h2 className="text-2xl font-black text-zinc-900 mb-6 flex items-center gap-3">
+              <h2 className="text-2xl font-black text-foreground mb-6 flex items-center gap-3">
                 <Film className="text-[#6d28d9]" />
                 Filmography
               </h2>
@@ -288,7 +288,7 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                   <div 
                     key={item.id}
                     onClick={() => handleMediaClick(item.id.toString())}
-                    className="group flex items-center gap-4 p-4 rounded-2xl bg-white border border-zinc-100 hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
+                    className="group flex items-center gap-4 p-4 rounded-2xl bg-card border border-border hover:border-[#6d28d9]/30 hover:shadow-lg transition-all cursor-pointer"
                   >
                     <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 shadow-sm">
                       <img 
@@ -299,14 +299,14 @@ export default function CastDetailView({ person, relatedMedia }: CastDetailViewP
                       />
                     </div>
                     <div className="min-w-0">
-                      <h4 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+                      <h4 className="font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
                         {item.title}
                       </h4>
-                      <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">
+                      <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-1">
                         {item.year || 'Unknown'}
                       </p>
                       <div className="flex items-center gap-2">
-                        <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-zinc-200">
+                        <Badge variant="outline" className="text-[10px] font-bold py-0 h-5 border-border">
                           {item.role}
                         </Badge>
                       </div>
diff --git a/src/components/CastView.tsx b/src/components/CastView.tsx
index 1662de6..7acded7 100644
--- a/src/components/CastView.tsx
+++ b/src/components/CastView.tsx
@@ -177,24 +177,24 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
     <div className="pt-24 pb-12 px-6 max-w-[1200px] mx-auto">
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
         <div>
-          <h1 className="text-4xl font-black text-zinc-900 mb-2">Cast & Staff</h1>
-          <p className="text-zinc-500 font-medium">Discover the people behind your favorite media</p>
+          <h1 className="text-4xl font-black text-foreground mb-2">Cast & Staff</h1>
+          <p className="text-muted-foreground font-medium">Discover the people behind your favorite media</p>
         </div>
 
         <div className="flex items-center gap-4">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={18} />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
             <Input 
               placeholder="Search cast..." 
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 w-full md:w-[300px] bg-zinc-100 border-none rounded-full h-11"
+              className="pl-10 w-full md:w-[300px] bg-muted border-none rounded-full h-11"
             />
           </div>
           <Button 
             variant={showFilters ? 'default' : 'outline'}
             size="icon" 
-            className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-zinc-200'}`}
+            className={`rounded-full h-11 w-11 ${showFilters ? 'bg-[#6d28d9] text-white border-[#6d28d9]' : 'border-border'}`}
             onClick={() => setShowFilters(!showFilters)}
           >
             <Filter size={20} />
@@ -202,7 +202,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
           <Button 
             variant="outline" 
             size="icon" 
-            className="rounded-full h-11 w-11 border-zinc-200"
+            className="rounded-full h-11 w-11 border-border"
             onClick={() => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')}
           >
             <ArrowUpDown size={20} />
@@ -211,7 +211,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             <Button 
               variant="ghost" 
               size="icon" 
-              className="rounded-full h-11 w-11 text-zinc-400 hover:text-zinc-900"
+              className="rounded-full h-11 w-11 text-muted-foreground hover:text-foreground"
               onClick={handleResetFilters}
               title="Reset filters"
             >
@@ -226,15 +226,15 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
           initial={{ opacity: 0, height: 0 }}
           animate={{ opacity: 1, height: 'auto' }}
           exit={{ opacity: 0, height: 0 }}
-          className="bg-zinc-50 rounded-2xl p-6 mb-6"
+          className="bg-muted/50 rounded-2xl p-6 mb-6 border border-border"
         >
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Sort By</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Sort By</label>
               <select 
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value as any)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="name">Name</option>
                 <option value="role">Role</option>
@@ -243,11 +243,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               </select>
             </div>
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Occupation</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Occupation</label>
               <select 
                 value={filterOccupation}
                 onChange={(e) => setFilterOccupation(e.target.value)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="">All Occupations</option>
                 {uniqueOccupations.map(occ => (
@@ -256,11 +256,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               </select>
             </div>
             <div>
-              <label className="text-sm font-bold text-zinc-700 mb-2 block">Media Type</label>
+              <label className="text-sm font-bold text-foreground mb-2 block">Media Type</label>
               <select 
                 value={filterMediaType}
                 onChange={(e) => setFilterMediaType(e.target.value)}
-                className="w-full bg-white border-zinc-200 rounded-lg px-3 py-2 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+                className="w-full bg-background border-border rounded-lg px-3 py-2 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
               >
                 <option value="">All Media Types</option>
                 {uniqueMediaTypes.map(type => (
@@ -273,7 +273,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {searchQuery && (
               <Badge variant="secondary" className="gap-1">
                 Search: {searchQuery}
-                <button onClick={() => setSearchQuery('')} className="hover:text-zinc-900">
+                <button onClick={() => setSearchQuery('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -281,7 +281,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {filterOccupation && (
               <Badge variant="secondary" className="gap-1">
                 Occupation: {filterOccupation}
-                <button onClick={() => setFilterOccupation('')} className="hover:text-zinc-900">
+                <button onClick={() => setFilterOccupation('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -289,7 +289,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {filterMediaType && (
               <Badge variant="secondary" className="gap-1">
                 Media Type: {filterMediaType}
-                <button onClick={() => setFilterMediaType('')} className="hover:text-zinc-900">
+                <button onClick={() => setFilterMediaType('')} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -297,7 +297,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             {(sortBy !== 'name' || sortOrder !== 'asc') && (
               <Badge variant="secondary" className="gap-1">
                 Sort: {sortBy} ({sortOrder})
-                <button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-zinc-900">
+                <button onClick={() => { setSortBy('name'); setSortOrder('asc'); }} className="hover:text-foreground">
                   <X size={12} />
                 </button>
               </Badge>
@@ -307,12 +307,12 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
       )}
 
       {loading ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#6d28d9] mb-4" />
           <p className="text-lg font-bold">Loading cast...</p>
         </div>
       ) : filteredStaff.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 text-zinc-400">
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <User size={48} className="mb-4 opacity-20" />
           <p className="text-lg font-bold">No cast members found</p>
         </div>
@@ -326,11 +326,11 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.9 }}
-                className="group bg-white rounded-2xl p-4 shadow-sm border border-zinc-100 hover:shadow-xl hover:border-[#6d28d9]/20 transition-all duration-300 cursor-pointer"
+                className="group bg-card rounded-2xl p-4 shadow-sm border border-border hover:shadow-xl hover:border-[#6d28d9]/20 transition-all duration-300 cursor-pointer"
                 onClick={() => onPersonClick(person)}
               >
                 <div className="flex items-center gap-4 mb-4">
-                  <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-zinc-100 group-hover:border-[#6d28d9] transition-colors">
+                  <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-border group-hover:border-[#6d28d9] transition-colors">
                     <img 
                       src={person.photo} 
                       alt={person.name} 
@@ -339,18 +339,18 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                     />
                   </div>
                   <div className="min-w-0">
-                    <h3 className="font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+                    <h3 className="font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
                       {person.name}
                     </h3>
-                    <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
+                    <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider">
                       {person.role}
                     </p>
                   </div>
                 </div>
 
                 {person.filmography && person.filmography.length > 0 && (
-                  <div className="bg-zinc-50 rounded-xl p-3 flex items-center gap-3">
-                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-white">
+                  <div className="bg-muted/50 rounded-xl p-3 flex items-center gap-3">
+                    <div className="w-10 h-12 rounded-lg overflow-hidden shrink-0 bg-background">
                       <img 
                         src={person.filmography[0].poster || person.photo} 
                         alt={person.filmography[0].title} 
@@ -359,8 +359,8 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
                       />
                     </div>
                     <div className="min-w-0">
-                      <p className="text-[10px] font-black text-zinc-400 uppercase tracking-widest leading-none mb-1">Latest Role</p>
-                      <p className="text-xs font-bold text-zinc-700 truncate">{person.filmography[0].title}</p>
+                      <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest leading-none mb-1">Latest Role</p>
+                      <p className="text-xs font-bold text-foreground truncate">{person.filmography[0].title}</p>
                       <p className="text-[10px] text-[#6d28d9] font-bold truncate mt-1">{person.filmography[0].role}</p>
                     </div>
                   </div>
@@ -373,15 +373,15 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
 
       {/* Pagination Controls */}
       {filteredStaff.length > 0 && (
-        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-zinc-100 pt-8">
+        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-border pt-8">
           <div className="flex items-center gap-4">
-            <span className="text-sm text-zinc-500 font-medium">Items per page:</span>
+            <span className="text-sm text-muted-foreground font-medium">Items per page:</span>
             <select 
               value={itemsPerPage}
               onChange={(e) => {
                 setItemsPerPage(Number(e.target.value));
               }}
-              className="bg-zinc-100 border-none rounded-md px-2 py-1 text-sm font-bold text-zinc-700 focus:ring-2 focus:ring-[#6d28d9] outline-none"
+              className="bg-muted border-none rounded-md px-2 py-1 text-sm font-bold text-foreground focus:ring-2 focus:ring-[#6d28d9] outline-none"
             >
               {[12, 20, 36, 48, 60].map(size => (
                 <option key={size} value={size}>{size}</option>
@@ -395,7 +395,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               size="sm" 
               onClick={handlePrevPage}
               disabled={currentPage === 1}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               <ChevronLeft size={16} />
               Previous
@@ -403,8 +403,8 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
             
             <div className="flex items-center gap-2">
               <span className="text-sm font-black text-[#6d28d9]">{currentPage}</span>
-              <span className="text-sm text-zinc-400 font-medium">of</span>
-              <span className="text-sm font-bold text-zinc-700">{totalPages || 1}</span>
+              <span className="text-sm text-muted-foreground font-medium">of</span>
+              <span className="text-sm font-bold text-foreground">{totalPages || 1}</span>
             </div>
 
             <Button 
@@ -412,7 +412,7 @@ export default function CastView({ onPersonClick, enabledCategories, itemsPerPag
               size="sm" 
               onClick={handleNextPage}
               disabled={currentPage === totalPages || totalPages === 0}
-              className="gap-2 font-bold border-zinc-200"
+              className="gap-2 font-bold border-border"
             >
               Next
               <ChevronRight size={16} />
diff --git a/src/components/DetailView.tsx b/src/components/DetailView.tsx
index 633c066..30636b5 100644
--- a/src/components/DetailView.tsx
+++ b/src/components/DetailView.tsx
@@ -24,7 +24,7 @@ interface DetailViewProps {
 export default function DetailView({ media, onPersonClick }: DetailViewProps) {
   const navigate = useNavigate();
   return (
-    <div className="min-h-screen bg-zinc-50">
+    <div className="min-h-screen bg-background">
       {/* Banner */}
       <div className="relative h-[400px] w-full overflow-hidden">
         <img 
@@ -33,7 +33,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           className="w-full h-full object-cover"
           referrerPolicy="no-referrer"
         />
-        <div className="absolute inset-0 bg-gradient-to-t from-zinc-50 via-zinc-50/40 to-transparent" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
         
         <button 
           onClick={() => navigate(-1)}
@@ -50,7 +50,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           <div className="w-full md:w-[300px] shrink-0">
             <motion.div 
               layoutId={`media-${media.id}`}
-              className={`rounded-xl overflow-hidden shadow-2xl bg-zinc-800 ${
+              className={`rounded-xl overflow-hidden shadow-2xl bg-card ${
                 media.aspectRatio === '16/9' ? 'aspect-video' : 
                 media.aspectRatio === '1/1' ? 'aspect-square' : 
                 'aspect-[2/3]'
@@ -69,22 +69,22 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
           <div className="flex-1 pt-32 md:pt-40">
             <div className="flex flex-wrap items-end justify-between gap-4 mb-6">
               <div>
-                <h1 className="text-4xl font-black text-zinc-900 mb-2">
-                  {media.title} <span className="text-zinc-400 font-medium">({media.year})</span>
+                <h1 className="text-4xl font-black text-foreground mb-2">
+                  {media.title} <span className="text-muted-foreground font-medium">({media.year})</span>
                 </h1>
                 <div className="flex items-center gap-4">
                   <div className="flex items-center gap-2">
                     <Button size="icon" className="rounded-full bg-[#6d28d9] hover:bg-[#5b21b6]">
                       <Play size={20} fill="currentColor" />
                     </Button>
-                    <Button size="icon" variant="outline" className="rounded-full border-zinc-300">
+                    <Button size="icon" variant="outline" className="rounded-full border-border">
                       <Bookmark size={20} />
                     </Button>
-                    <Button size="icon" variant="outline" className="rounded-full border-zinc-300">
+                    <Button size="icon" variant="outline" className="rounded-full border-border">
                       <MoreHorizontal size={20} />
                     </Button>
                   </div>
-                  <div className="flex items-center gap-1 text-zinc-600 font-bold">
+                  <div className="flex items-center gap-1 text-foreground font-bold">
                     <Star size={18} className="text-yellow-500" fill="currentColor" />
                     {media.rating} / 10
                   </div>
@@ -95,7 +95,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
                 <h3 className="text-xs font-black text-[#6d28d9] uppercase tracking-wider mb-2">Genres</h3>
                 <div className="flex flex-col items-end gap-1">
                   {media.genres?.map(genre => (
-                    <span key={genre} className="text-sm font-bold text-zinc-600 hover:text-[#6d28d9] cursor-pointer transition-colors">
+                    <span key={genre} className="text-sm font-bold text-foreground hover:text-[#6d28d9] cursor-pointer transition-colors">
                       • {genre}
                     </span>
                   ))}
@@ -103,7 +103,7 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               </div>
             </div>
 
-            <p className="text-zinc-600 leading-relaxed mb-8 max-w-3xl">
+            <p className="text-foreground leading-relaxed mb-8 max-w-3xl">
               {media.description}
             </p>
 
@@ -118,16 +118,16 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
 
             <div className="space-y-4">
               {media.studios && media.studios.length > 0 && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Studios:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Studios:</span>
                   {media.studios.join(', ')}
                 </p>
               )}
               {media.developers && media.developers.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Developers:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Developers:</span>
                   {media.developers.map(dev => (
-                    <Badge key={dev} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={dev} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {dev}
                     </Badge>
                   ))}
@@ -135,9 +135,9 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               )}
               {media.platforms && media.platforms.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Platforms:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Platforms:</span>
                   {media.platforms.map(platform => (
-                    <Badge key={platform} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={platform} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {platform}
                     </Badge>
                   ))}
@@ -145,46 +145,46 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               )}
               {media.categories && media.categories.length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Categories:</span>
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Categories:</span>
                   {media.categories.map(category => (
-                    <Badge key={category} variant="secondary" className="bg-zinc-100 text-zinc-700 hover:bg-zinc-200 border-none px-3 py-1 font-bold text-[10px]">
+                    <Badge key={category} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
                       {category}
                     </Badge>
                   ))}
                 </div>
               )}
               {media.completionStatus && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Completion:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Completion:</span>
                   {media.completionStatus}
                 </p>
               )}
               {media.source && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Source:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Source:</span>
                   {media.source}
                 </p>
               )}
               {media.playCount !== undefined && media.playCount !== null && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Play Count:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Play Count:</span>
                   {media.playCount}
                 </p>
               )}
               {media.playtime !== undefined && media.playtime !== null && media.playtime > 0 && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Playtime:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Playtime:</span>
                   {media.playtime}h
                 </p>
               )}
               {media.lastActivity && (
-                <p className="text-xs font-bold text-zinc-500">
-                  <span className="text-zinc-400 uppercase tracking-widest mr-2">Last Activity:</span>
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Last Activity:</span>
                   {media.lastActivity}
                 </p>
               )}
               <div className="flex items-center gap-4">
-                <span className="text-xs font-bold text-zinc-400 uppercase tracking-widest">Links:</span>
+                <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Links:</span>
                 <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">Tvdb</Button>
                 <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">AniDb</Button>
               </div>
@@ -196,12 +196,12 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
         {media.staff && media.staff.length > 0 && (
           <section className="mt-20">
             <div className="flex items-center justify-between mb-8">
-              <h2 className="text-2xl font-black text-zinc-900">Cast & Crew</h2>
+              <h2 className="text-2xl font-black text-foreground">Cast & Crew</h2>
               <div className="flex gap-2">
-                <Button variant="outline" size="icon" className="rounded-full border-zinc-200">
+                <Button variant="outline" size="icon" className="rounded-full border-border">
                   <ChevronLeft size={18} />
                 </Button>
-                <Button variant="outline" size="icon" className="rounded-full border-zinc-200">
+                <Button variant="outline" size="icon" className="rounded-full border-border">
                   <ChevronRight size={18} />
                 </Button>
               </div>
@@ -210,17 +210,17 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               {media.staff.map(person => (
                 <div 
                   key={person.id} 
-                  className="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-zinc-100 hover:shadow-md transition-shadow cursor-pointer group"
+                  className="flex items-center gap-4 bg-card p-3 rounded-xl shadow-sm border border-border hover:shadow-md transition-shadow cursor-pointer group"
                   onClick={() => onPersonClick(person)}
                 >
                   <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0">
                     <img src={person.photo} alt={person.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform" referrerPolicy="no-referrer" />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <h4 className="font-bold text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">{person.name}</h4>
-                    <p className="text-xs text-zinc-500 truncate">{person.role}</p>
+                    <h4 className="font-bold text-foreground truncate group-hover:text-[#6d28d9] transition-colors">{person.name}</h4>
+                    <p className="text-xs text-muted-foreground truncate">{person.role}</p>
                   </div>
-                  <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 bg-zinc-50">
+                  <div className="w-16 h-20 rounded-lg overflow-hidden shrink-0 bg-muted">
                     <img src={person.characterImage} alt={person.characterName} className="w-full h-full object-contain" referrerPolicy="no-referrer" />
                   </div>
                 </div>
@@ -240,13 +240,13 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               </div>
               <div className="flex items-center gap-2">
                 <div className="relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
-                  <Input placeholder="Search" className="pl-10 w-[200px] bg-zinc-100 border-none rounded-full h-9 text-sm" />
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
+                  <Input placeholder="Search" className="pl-10 w-[200px] bg-muted border-none rounded-full h-9 text-sm" />
                 </div>
-                <Button variant="ghost" size="icon" className="text-zinc-400">
+                <Button variant="ghost" size="icon" className="text-muted-foreground">
                   <MoreHorizontal size={20} />
                 </Button>
-                <Button variant="ghost" size="icon" className="text-zinc-400">
+                <Button variant="ghost" size="icon" className="text-muted-foreground">
                   <ListFilter size={20} />
                 </Button>
               </div>
@@ -262,17 +262,17 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
                     </div>
                     <div className="flex-1 py-1">
                       <div className="flex items-center justify-between mb-2">
-                        <h3 className="font-black text-zinc-900 group-hover:text-[#6d28d9] transition-colors">
+                        <h3 className="font-black text-foreground group-hover:text-[#6d28d9] transition-colors">
                           S1:E{episode.number} • {episode.title}
                         </h3>
-                        <span className="text-xs font-bold text-zinc-400">{episode.date} • {episode.duration}</span>
+                        <span className="text-xs font-bold text-muted-foreground">{episode.date} • {episode.duration}</span>
                       </div>
-                      <p className="text-sm text-zinc-500 leading-relaxed line-clamp-3">
+                      <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
                         {episode.description}
                       </p>
                     </div>
                   </div>
-                  <Separator className="mt-6 bg-zinc-200" />
+                  <Separator className="mt-6 bg-border" />
                 </div>
               ))}
             </div>
diff --git a/src/components/ImporterView.tsx b/src/components/ImporterView.tsx
index c753163..8be50f5 100644
--- a/src/components/ImporterView.tsx
+++ b/src/components/ImporterView.tsx
@@ -164,13 +164,13 @@ export default function ImporterView() {
             variant="ghost"
             size="icon"
             onClick={() => navigate('/')}
-            className="text-zinc-600 hover:text-[#6d28d9]"
+            className="text-muted-foreground hover:text-[#6d28d9]"
           >
             <ArrowLeft size={20} />
           </Button>
           <div>
-            <h1 className="text-2xl font-black text-zinc-900">Media Importers</h1>
-            <p className="text-sm text-zinc-500 font-medium">Import media from external platforms</p>
+            <h1 className="text-2xl font-black text-foreground">Media Importers</h1>
+            <p className="text-sm text-muted-foreground font-medium">Import media from external platforms</p>
           </div>
         </div>
       </div>
@@ -179,38 +179,38 @@ export default function ImporterView() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
         {/* XBVR Importer Card */}
         {xbvrConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                 <Film className="text-purple-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">XBVR</h3>
-                <p className="text-xs text-zinc-500 font-medium">Adult Video Manager</p>
+                <h3 className="font-bold text-foreground">XBVR</h3>
+                <p className="text-xs text-muted-foreground font-medium">Adult Video Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import adult videos and actors from your XBVR database.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">XBVR URL</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">XBVR URL</label>
               <input
                 type="text"
                 value={xbvrConfig.url}
                 onChange={(e) => setXbvrConfig({ ...xbvrConfig, url: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="http://192.168.1.102:10001"
               />
             </div>
@@ -237,49 +237,49 @@ export default function ImporterView() {
 
         {/* StashAPP Importer Card */}
         {stashappConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                 <Film className="text-blue-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">StashAPP</h3>
-                <p className="text-xs text-zinc-500 font-medium">Adult Content Manager</p>
+                <h3 className="font-bold text-foreground">StashAPP</h3>
+                <p className="text-xs text-muted-foreground font-medium">Adult Content Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import adult videos and performers from your StashAPP database.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">StashAPP URL</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">StashAPP URL</label>
               <input
                 type="text"
                 value={stashappConfig.url}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, url: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="http://192.168.1.102:10001"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Key (optional)</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
               <input
                 type="password"
                 value={stashappConfig.apiKey || ''}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="Enter API key if required"
               />
             </div>
@@ -306,38 +306,38 @@ export default function ImporterView() {
 
         {/* StashAPP Actor Updater Card */}
         {stashappConfig.url && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                 <Users className="text-green-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">StashAPP Actor Updater</h3>
-                <p className="text-xs text-zinc-500 font-medium">Update existing actors</p>
+                <h3 className="font-bold text-foreground">StashAPP Actor Updater</h3>
+                <p className="text-xs text-muted-foreground font-medium">Update existing actors</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Update existing actors with fresh data from StashAPP and create missing ones.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Key (optional)</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Key (optional)</label>
               <input
                 type="password"
                 value={stashappConfig.apiKey || ''}
                 onChange={(e) => setStashappConfig({ ...stashappConfig, apiKey: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="Enter API key if required"
               />
             </div>
@@ -364,60 +364,60 @@ export default function ImporterView() {
 
         {/* Playnite Importer Card */}
         {playniteConfig.ip && playniteConfig.apiToken && (
-          <div className="bg-white border border-zinc-200 rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
+          <div className="bg-card border border-border rounded-xl p-6 hover:border-[#6d28d9]/50 transition-colors">
           <div className="flex items-start justify-between mb-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                 <Film className="text-orange-600" size={24} />
               </div>
               <div>
-                <h3 className="font-bold text-zinc-900">Playnite</h3>
-                <p className="text-xs text-zinc-500 font-medium">Game Library Manager</p>
+                <h3 className="font-bold text-foreground">Playnite</h3>
+                <p className="text-xs text-muted-foreground font-medium">Game Library Manager</p>
               </div>
             </div>
             <Button
               variant="outline"
               size="icon"
-              className="h-8 w-8 border-zinc-200"
+              className="h-8 w-8 border-border"
               onClick={() => {}}
             >
               <Settings size={16} />
             </Button>
           </div>
-          <p className="text-sm text-zinc-600 mb-4">
+          <p className="text-sm text-muted-foreground mb-4">
             Import games from your Playnite library via Bridge API.
           </p>
           <div className="space-y-3">
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">IP Address</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">IP Address</label>
               <input
                 type="text"
                 value={playniteConfig.ip}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, ip: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="localhost"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">Port</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">Port</label>
               <input
                 type="number"
                 value={playniteConfig.port || 19821}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, port: parseInt(e.target.value) || 19821 })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="19821"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-zinc-500 mb-1 block">API Token</label>
+              <label className="text-xs font-bold text-muted-foreground mb-1 block">API Token</label>
               <input
                 type="password"
                 value={playniteConfig.apiToken}
                 onChange={(e) => setPlayniteConfig({ ...playniteConfig, apiToken: e.target.value })}
                 disabled={progress.stage !== 'idle'}
-                className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-zinc-100 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:ring-2 focus:ring-[#6d28d9] focus:border-transparent outline-none disabled:bg-muted disabled:cursor-not-allowed"
                 placeholder="pb_your_token_here"
               />
             </div>
@@ -445,7 +445,7 @@ export default function ImporterView() {
 
       {/* Progress Section */}
       {progress.stage !== 'idle' && (
-        <div className="bg-white border border-zinc-200 rounded-xl p-6">
+        <div className="bg-card border border-border rounded-xl p-6">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
               {progress.stage === 'complete' ? (
@@ -458,12 +458,12 @@ export default function ImporterView() {
                 </div>
               ) : (
                 <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
-                  <Loader2 className="text-purple-600 animate-spin" size={20} />
+                  <Loader2 className="text-muted-foreground animate-spin" size={20} />
                 </div>
               )}
               <div>
-                <h3 className="font-bold text-zinc-900">{progress.message}</h3>
-                <p className="text-xs text-zinc-500 font-medium">
+                <h3 className="font-bold text-foreground">{progress.message}</h3>
+                <p className="text-xs text-muted-foreground font-medium">
                   {progress.stage === 'fetching' && 'Connecting to external service...'}
                   {progress.stage === 'importing' && `Processing items... ${getProgressPercentage()}%`}
                   {progress.stage === 'complete' && 'Import finished'}
@@ -476,7 +476,7 @@ export default function ImporterView() {
                 variant="outline"
                 size="sm"
                 onClick={resetImport}
-                className="gap-2 font-bold border-zinc-200"
+                className="gap-2 font-bold border-border"
               >
                 <RefreshCw size={16} />
                 Reset
@@ -487,7 +487,7 @@ export default function ImporterView() {
           {/* Progress Bar */}
           {progress.stage === 'fetching' || progress.stage === 'importing' ? (
             <div className="mb-6">
-              <div className="h-2 bg-zinc-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-muted rounded-full overflow-hidden">
                 <div
                   className={cn(
                     "h-full transition-all duration-300 ease-out",
@@ -496,7 +496,7 @@ export default function ImporterView() {
                   style={{ width: `${getProgressPercentage()}%` }}
                 />
               </div>
-              <div className="flex justify-between mt-2 text-xs text-zinc-500 font-medium">
+              <div className="flex justify-between mt-2 text-xs text-muted-foreground font-medium">
                 <span>{progress.current} / {progress.total} items</span>
                 <span>{getProgressPercentage()}%</span>
               </div>
@@ -505,26 +505,26 @@ export default function ImporterView() {
 
           {/* Stats */}
           <div className="grid grid-cols-3 gap-4 mb-6">
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <Film size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">{(progress as any).gamesImported !== undefined ? 'Games' : 'Videos'}</span>
+                <Film size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">{(progress as any).gamesImported !== undefined ? 'Games' : 'Videos'}</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{(progress as any).gamesImported !== undefined ? (progress as any).gamesImported : progress.videosImported}</p>
+              <p className="text-2xl font-black text-foreground">{(progress as any).gamesImported !== undefined ? (progress as any).gamesImported : progress.videosImported}</p>
             </div>
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <Users size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">Actors</span>
+                <Users size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">Actors</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{progress.actorsImported}</p>
+              <p className="text-2xl font-black text-foreground">{progress.actorsImported}</p>
             </div>
-            <div className="bg-zinc-50 rounded-lg p-4">
+            <div className="bg-muted rounded-lg p-4">
               <div className="flex items-center gap-2 mb-2">
-                <AlertCircle size={16} className="text-zinc-400" />
-                <span className="text-xs font-bold text-zinc-500">Errors</span>
+                <AlertCircle size={16} className="text-muted-foreground" />
+                <span className="text-xs font-bold text-muted-foreground">Errors</span>
               </div>
-              <p className="text-2xl font-black text-zinc-900">{progress.errors.length}</p>
+              <p className="text-2xl font-black text-foreground">{progress.errors.length}</p>
             </div>
           </div>
 
diff --git a/src/components/MediaCard.tsx b/src/components/MediaCard.tsx
index 02db5be..8e807d7 100644
--- a/src/components/MediaCard.tsx
+++ b/src/components/MediaCard.tsx
@@ -52,7 +52,7 @@ export default function MediaCard({ media, onClick }: MediaCardProps) {
       transition={{ duration: 0.2 }}
     >
       <div className={cn(
-        "relative rounded-lg overflow-hidden shadow-lg bg-zinc-800 transition-all duration-300",
+        "relative rounded-lg overflow-hidden shadow-lg bg-card transition-all duration-300",
         aspectRatioClass
       )}>
         <img 
@@ -70,10 +70,10 @@ export default function MediaCard({ media, onClick }: MediaCardProps) {
         <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
       </div>
       <div className="mt-3 space-y-1">
-        <h3 className="text-sm font-bold text-zinc-900 line-clamp-1 group-hover:text-[#6d28d9] transition-colors">
+        <h3 className="text-sm font-bold text-foreground line-clamp-1 group-hover:text-[#6d28d9] transition-colors">
           {media.title}
         </h3>
-        <p className="text-xs font-medium text-zinc-500">
+        <p className="text-xs font-medium text-muted-foreground">
           {media.year}
         </p>
       </div>
diff --git a/src/components/MediaListItem.tsx b/src/components/MediaListItem.tsx
index 7a0b1d7..7e4d9ce 100644
--- a/src/components/MediaListItem.tsx
+++ b/src/components/MediaListItem.tsx
@@ -44,11 +44,11 @@ export default function MediaListItem({ media, onClick }: MediaListItemProps) {
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -10 }}
-      className="group flex items-center gap-6 p-4 rounded-xl hover:bg-zinc-50 transition-colors cursor-pointer border border-transparent hover:border-zinc-200"
+      className="group flex items-center gap-6 p-4 rounded-xl hover:bg-muted/50 transition-colors cursor-pointer border border-transparent hover:border-border"
       onClick={() => onClick(media)}
     >
       <div className={cn(
-        "relative rounded-lg overflow-hidden shrink-0 shadow-md bg-zinc-800 transition-all duration-300",
+        "relative rounded-lg overflow-hidden shrink-0 shadow-md bg-card transition-all duration-300",
         aspectRatioClass
       )}>
         <img 
@@ -67,32 +67,32 @@ export default function MediaListItem({ media, onClick }: MediaListItemProps) {
 
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-3 mb-1">
-          <h3 className="text-lg font-black text-zinc-900 truncate group-hover:text-[#6d28d9] transition-colors">
+          <h3 className="text-lg font-black text-foreground truncate group-hover:text-[#6d28d9] transition-colors">
             {media.title}
           </h3>
-          <span className="text-sm font-bold text-zinc-400">({media.year})</span>
+          <span className="text-sm font-bold text-muted-foreground">({media.year})</span>
         </div>
         
         <div className="flex items-center gap-4 mb-3">
-          <div className="flex items-center gap-1 text-xs font-bold text-zinc-500">
+          <div className="flex items-center gap-1 text-xs font-bold text-muted-foreground">
             <Star size={14} className="text-yellow-500" fill="currentColor" />
             {media.rating || 'N/A'}
           </div>
-          <div className="text-xs font-bold text-zinc-400 uppercase tracking-wider">
+          <div className="text-xs font-bold text-muted-foreground uppercase tracking-wider">
             {media.genres?.slice(0, 3).join(' • ') || 'Anime'}
           </div>
         </div>
 
-        <p className="text-sm text-zinc-500 line-clamp-2 max-w-2xl">
+        <p className="text-sm text-muted-foreground line-clamp-2 max-w-2xl">
           {media.description || "No description available for this title."}
         </p>
       </div>
 
       <div className="hidden md:flex items-center gap-2">
-        <Button size="icon" variant="ghost" className="rounded-full text-zinc-400 hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
+        <Button size="icon" variant="ghost" className="rounded-full text-muted-foreground hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
           <Play size={18} fill="currentColor" />
         </Button>
-        <Button size="icon" variant="ghost" className="rounded-full text-zinc-400 hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
+        <Button size="icon" variant="ghost" className="rounded-full text-muted-foreground hover:text-[#6d28d9] hover:bg-[#6d28d9]/10">
           <Bookmark size={18} />
         </Button>
       </div>
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 906ca56..119a508 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label';
 import { Film, Music, Book, Tv, Gamepad2, ShieldAlert, LayoutGrid, List, Globe, Monitor, Sun, Moon, Save, ArrowLeft } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { fetchSettings, updateSettings } from '@/api';
+import { useTheme } from '@/contexts/ThemeContext';
 
 const CATEGORY_ICONS: Record<MediaCategory, React.ReactNode> = {
   Anime: <Tv size={18} />,
@@ -31,6 +32,7 @@ interface SettingsViewProps {
 }
 
 export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
+  const { setTheme } = useTheme();
   const [settings, setSettings] = useState<UserSettings>({
     enabledCategories: ['Anime', 'Movies', 'TV Series', 'Music', 'Books', 'Consoles', 'Games', 'Adult'],
     itemsPerPage: 20,
@@ -69,6 +71,8 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
       if (savedSettings) {
         setSettings(savedSettings);
         setSaveStatus('success');
+        // Sync theme with theme context
+        setTheme(savedSettings.theme);
         onSettingsSaved?.();
       } else {
         setSaveStatus('error');
@@ -93,26 +97,26 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
-        <div className="text-zinc-400 font-medium">Loading settings...</div>
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-muted-foreground font-medium">Loading settings...</div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-white pt-20">
+    <div className="min-h-screen bg-background pt-20">
       {/* Content */}
       <div className="max-w-[1600px] mx-auto px-6 py-12">
         <div className="flex items-center justify-between mb-8">
           <div>
             <Link
               to="/"
-              className="inline-flex items-center gap-2 text-sm font-bold text-zinc-400 hover:text-[#6d28d9] transition-colors mb-2"
+              className="inline-flex items-center gap-2 text-sm font-bold text-muted-foreground hover:text-[#6d28d9] transition-colors mb-2"
             >
               <ArrowLeft size={16} />
               Back to home
             </Link>
-            <h1 className="text-3xl font-black text-zinc-900">Settings</h1>
+            <h1 className="text-3xl font-black text-foreground">Settings</h1>
           </div>
           <button
             onClick={handleSave}
@@ -144,23 +148,23 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
         <div className="grid gap-8">
           {/* Library Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Library Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100">
-              <p className="text-sm font-medium text-zinc-500 mb-4">
+            <h2 className="text-xl font-black text-foreground mb-6">Library Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border">
+              <p className="text-sm font-medium text-muted-foreground mb-4">
                 Toggle which media areas you want to see in your library.
               </p>
               <div className="grid gap-4">
                 {(['Anime', 'Movies', 'Music', 'Books', 'Consoles', 'Games', 'Adult'] as MediaCategory[]).map((category) => (
-                  <div key={category} className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100 transition-all hover:border-[#6d28d9]/20">
+                  <div key={category} className="flex items-center justify-between p-4 rounded-xl bg-background border border-border transition-all hover:border-[#6d28d9]/20">
                     <div className="flex items-center gap-4">
-                      <div className="w-10 h-10 rounded-lg bg-zinc-50 flex items-center justify-center text-[#6d28d9]">
+                      <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-[#6d28d9]">
                         {CATEGORY_ICONS[category]}
                       </div>
                       <div>
-                        <Label htmlFor={category} className="text-sm font-black text-zinc-900 cursor-pointer">
+                        <Label htmlFor={category} className="text-sm font-black text-foreground cursor-pointer">
                           {category}
                         </Label>
-                        <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">
+                        <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
                           {settings.enabledCategories.includes(category) ? 'Enabled' : 'Disabled'}
                         </p>
                       </div>
@@ -178,11 +182,11 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Display Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Display Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100 space-y-6">
+            <h2 className="text-xl font-black text-foreground mb-6">Display Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border space-y-6">
               {/* Items per page */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Items per page</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Items per page</Label>
                 <div className="flex gap-2 flex-wrap">
                   {ITEMS_PER_PAGE_OPTIONS.map((option) => (
                     <button
@@ -191,7 +195,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                       className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${
                         settings.itemsPerPage === option
                           ? 'bg-[#6d28d9] text-white'
-                          : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                          : 'bg-background text-foreground hover:bg-muted border border-border'
                       }`}
                     >
                       {option}
@@ -202,14 +206,14 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
               {/* Default view */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Default view</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Default view</Label>
                 <div className="flex gap-2">
                   <button
                     onClick={() => setSettings(prev => ({ ...prev, defaultView: 'grid' }))}
                     className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                       settings.defaultView === 'grid'
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     <LayoutGrid size={18} />
@@ -220,7 +224,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                     className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                       settings.defaultView === 'list'
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     <List size={18} />
@@ -231,7 +235,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
               {/* Theme */}
               <div>
-                <Label className="text-sm font-black text-zinc-900 mb-2 block">Theme</Label>
+                <Label className="text-sm font-black text-foreground mb-2 block">Theme</Label>
                 <div className="flex gap-2">
                   {(['light', 'dark', 'system'] as const).map((theme) => (
                     <button
@@ -240,7 +244,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                       className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-bold transition-all ${
                         settings.theme === theme
                           ? 'bg-[#6d28d9] text-white'
-                          : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                          : 'bg-background text-foreground hover:bg-muted border border-border'
                       }`}
                     >
                       {theme === 'light' && <Sun size={18} />}
@@ -256,15 +260,15 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Content Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Content Settings</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100 space-y-4">
+            <h2 className="text-xl font-black text-foreground mb-6">Content Settings</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border space-y-4">
               {/* Show adult content */}
-              <div className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100">
+              <div className="flex items-center justify-between p-4 rounded-xl bg-background border border-border">
                 <div>
-                  <Label htmlFor="showAdult" className="text-sm font-black text-zinc-900 cursor-pointer">
+                  <Label htmlFor="showAdult" className="text-sm font-black text-foreground cursor-pointer">
                     Show adult content
                   </Label>
-                  <p className="text-xs font-medium text-zinc-500 mt-1">
+                  <p className="text-xs font-medium text-muted-foreground mt-1">
                     Display adult media in your library
                   </p>
                 </div>
@@ -276,12 +280,12 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
               </div>
 
               {/* Auto-play trailers */}
-              <div className="flex items-center justify-between p-4 rounded-xl bg-white border border-zinc-100">
+              <div className="flex items-center justify-between p-4 rounded-xl bg-background border border-border">
                 <div>
-                  <Label htmlFor="autoPlay" className="text-sm font-black text-zinc-900 cursor-pointer">
+                  <Label htmlFor="autoPlay" className="text-sm font-black text-foreground cursor-pointer">
                     Auto-play trailers
                   </Label>
-                  <p className="text-xs font-medium text-zinc-500 mt-1">
+                  <p className="text-xs font-medium text-muted-foreground mt-1">
                     Automatically play trailers when viewing media
                   </p>
                 </div>
@@ -296,11 +300,11 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
 
           {/* Language Settings */}
           <section>
-            <h2 className="text-xl font-black text-zinc-900 mb-6">Language</h2>
-            <div className="bg-zinc-50 rounded-2xl p-6 border border-zinc-100">
+            <h2 className="text-xl font-black text-foreground mb-6">Language</h2>
+            <div className="bg-muted/50 rounded-2xl p-6 border border-border">
               <div className="flex items-center gap-2 mb-4">
                 <Globe size={18} className="text-[#6d28d9]" />
-                <Label className="text-sm font-black text-zinc-900">Interface language</Label>
+                <Label className="text-sm font-black text-foreground">Interface language</Label>
               </div>
               <div className="flex gap-2 flex-wrap">
                 {LANGUAGE_OPTIONS.map((option) => (
@@ -310,7 +314,7 @@ export default function SettingsView({ onSettingsSaved }: SettingsViewProps) {
                     className={`px-4 py-2 rounded-lg text-sm font-bold transition-all ${
                       settings.language === option.value
                         ? 'bg-[#6d28d9] text-white'
-                        : 'bg-white text-zinc-600 hover:bg-zinc-100 border border-zinc-200'
+                        : 'bg-background text-foreground hover:bg-muted border border-border'
                     }`}
                   >
                     {option.label}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..ed48324
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  effectiveTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem('theme') as Theme;
+    return stored || 'system';
+  });
+  const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    const applyTheme = () => {
+      let resolved: 'light' | 'dark';
+      
+      if (theme === 'system') {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      } else {
+        resolved = theme;
+      }
+      
+      setEffectiveTheme(resolved);
+      
+      if (resolved === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+    };
+
+    applyTheme();
+
+    // Listen for system theme changes when in system mode
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme();
+      }
+    };
+    
+    mediaQuery.addEventListener('change', handleChange);
+    
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}