refactor(edition): tokenize artist and set colors

src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx

@@ -10,31 +10,33 @@ import {
 export function EmptyArtistsState() {
   return (
     <div className="flex items-center justify-center py-16">
-      <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 max-w-md mx-auto text-center">
+      <Card className="bg-surface-raised backdrop-blur-md border max-w-md mx-auto text-center">
         <CardHeader>
           <div className="flex justify-center mb-4">
             <div className="relative">
-              <Music className="h-16 w-16 text-purple-400" />
-              <Sparkles className="h-6 w-6 text-yellow-400 absolute -top-1 -right-1" />
+              <Music className="h-16 w-16 text-accent" />
+              <Sparkles className="h-6 w-6 text-notice absolute -top-1 -right-1" />
             </div>
           </div>
-          <CardTitle className="text-white text-2xl">No Artists Yet</CardTitle>
-          <CardDescription className="text-purple-200">
+          <CardTitle className="text-foreground text-2xl">
+            No Artists Yet
+          </CardTitle>
+          <CardDescription className="text-muted-foreground">
             Be the first to add artists to the Boom Festival voting list!
           </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Users className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Users className="h-4 w-4 text-accent" />
               <span>Connect with fellow festival-goers</span>
             </div>
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Music className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Music className="h-4 w-4 text-accent" />
               <span>Discover new electronic artists</span>
             </div>
-            <div className="flex items-center gap-3 text-sm text-purple-200">
-              <Sparkles className="h-4 w-4 text-purple-400" />
+            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+              <Sparkles className="h-4 w-4 text-accent" />
               <span>Vote for your favorites</span>
             </div>
           </div>

src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx

@@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/SetVotingButtons";
 
 export function MultiArtistSetCard() {
   return (
-    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
+    <Card className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 overflow-hidden">
       <CardHeader className="pb-4">
         {/* Set Image with Mixed Artists */}
         <SetImage />

src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx

@@ -20,7 +20,9 @@ export function MultiArtistInfo({
     <div className="flex gap-4">
       {artists.map((artist) => (
         <div key={artist.id} className="flex items-center gap-2">
-          <span className="text-xs text-purple-200 mr-1">{artist.name}</span>
+          <span className="text-xs text-muted-foreground mr-1">
+            {artist.name}
+          </span>
           <SocialPlatformLinkList artist={artist} size={size} />
         </div>
       ))}

src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx

@@ -8,7 +8,7 @@ interface SetDescriptionProps {
 }
 
 export function SetDescription({
-  className = "text-purple-200 text-sm leading-relaxed",
+  className = "text-muted-foreground text-sm leading-relaxed",
 }: SetDescriptionProps) {
   const { set } = useFestivalSet();
   const isMultiArtist = set.artists.length > 1;

src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx

@@ -14,8 +14,8 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) {
 
   const titleClass =
     size === "sm"
-      ? "text-white text-lg font-semibold truncate"
-      : "text-white text-xl";
+      ? "text-foreground text-lg font-semibold truncate"
+      : "text-foreground text-xl";
 
   return (
     <div className="flex items-center gap-2 mb-2">
@@ -24,7 +24,7 @@ export function SetHeader({ size = "lg" }: SetHeaderProps) {
       {isMultiArtist && (
         <Badge
           variant="secondary"
-          className="bg-purple-600/50 text-purple-100 text-xs"
+          className="bg-accent-soft text-foreground text-xs"
         >
           <Users className="h-3 w-3 mr-1" />
           {set.artists.length}

src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx

@@ -55,7 +55,7 @@ export function SetMetadata() {
           <StageBadgeById stageId={set.stage_id} />
         )}
         {timeRangeFormatted && (
-          <div className="flex items-center gap-1 text-sm text-purple-200">
+          <div className="flex items-center gap-1 text-sm text-muted-foreground">
             <Clock className="h-3 w-3" />
             <span>{timeRangeFormatted}</span>
           </div>
@@ -67,7 +67,7 @@ export function SetMetadata() {
           </div>
         )}
         {(timeRangeFormatted || dayOnlyFormatted) && (
-          <span className="text-xs text-purple-200/60">
+          <span className="text-xs text-muted-foreground/60">
             {festival.timezone}
           </span>
         )}

src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx

@@ -26,7 +26,7 @@ export function SocialPlatformLink({
       asChild
       variant="secondary"
       size="sm"
-      className={`p-1 ${buttonSize} bg-white/20 hover:bg-white/30 backdrop-blur-sm border-0 ${platformInfo.color}`}
+      className={`p-1 ${buttonSize} bg-surface-active hover:bg-foreground/30 backdrop-blur-sm border-0 ${platformInfo.color}`}
       title={`Open ${artistName} in ${platformInfo.platform}`}
     >
       <a href={url} target="_blank" rel="noopener noreferrer">

src/pages/EditionView/tabs/VoteTab/SetListItem.tsx

@@ -7,7 +7,7 @@ import { SetActionButtons } from "./SetCard/SetActionButtons";
 export function SetListItem() {
   return (
     <div
-      className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 rounded-lg p-4"
+      className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 rounded-lg p-4"
       data-testid="artist-item"
     >
       {/* Mobile Layout (sm and below) */}
@@ -20,7 +20,7 @@ export function SetListItem() {
           </div>
         </div>
 
-        <SetDescription className="text-purple-200 text-sm" />
+        <SetDescription className="text-muted-foreground text-sm" />
 
         <div className="self-end">
           <SetActionButtons size="sm" layout="horizontal" />

src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx

@@ -7,7 +7,7 @@ import { SetVotingButtons } from "./SetCard/SetVotingButtons";
 
 export function SingleArtistSetCard() {
   return (
-    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
+    <Card className="bg-surface-raised backdrop-blur-md border hover:bg-surface-active transition-all duration-300 overflow-hidden">
       <CardHeader className="pb-4">
         <SetImage />
 

src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx

@@ -39,10 +39,14 @@ export function DesktopFilters({
       {/* Stage Filter */}
       {canShowStage && (
         <div>
-          <h4 className="text-sm font-medium text-purple-200 mb-2">Stages</h4>
+          <h4 className="text-sm font-medium text-muted-foreground mb-2">
+            Stages
+          </h4>
           <div className="flex flex-wrap gap-2">
             {stagesLoading ? (
-              <div className="text-sm text-purple-300">Loading stages...</div>
+              <div className="text-sm text-subtle-foreground">
+                Loading stages...
+              </div>
             ) : (
               stages.map((stage) => (
                 <Button
@@ -54,8 +58,8 @@ export function DesktopFilters({
                   onClick={() => handleStageToggle(stage.id)}
                   className={
                     state.stages.includes(stage.id)
-                      ? "bg-purple-600 hover:bg-purple-700"
-                      : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+                      ? "bg-accent text-accent-foreground hover:bg-accent-hover"
+                      : "border-ring text-ring hover:bg-ring hover:text-foreground"
                   }
                 >
                   {stage.name}

src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx

@@ -42,8 +42,8 @@ export function FestivalModeToggle({ onModeChange }: FestivalModeToggleProps) {
           onClick={toggleMode}
           className={
             isFestivalMode
-              ? "bg-orange-600 hover:bg-orange-700 text-white border-orange-600"
-              : "border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white"
+              ? "bg-orange-600 hover:bg-orange-700 text-foreground border-orange-600"
+              : "border-ring text-ring hover:bg-ring hover:text-foreground"
           }
         >
           {isFestivalMode ? (
@@ -67,7 +67,7 @@ export function FestivalModeToggle({ onModeChange }: FestivalModeToggleProps) {
       <Tooltip>
         <TooltipTrigger asChild>
           <Button variant="ghost" size="sm" className="p-1 h-6 w-6">
-            <Info className="h-3 w-3 text-purple-400" />
+            <Info className="h-3 w-3 text-accent" />
           </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom" className="max-w-xs">

src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx

@@ -47,23 +47,25 @@ export function MobileFilters({
       {/* Stage Filter Select */}
       {canShowStage && (
         <div>
-          <h4 className="text-sm font-medium text-purple-200 mb-2">Stage</h4>
+          <h4 className="text-sm font-medium text-muted-foreground mb-2">
+            Stage
+          </h4>
           <Select
             value={state.stages.length === 1 ? state.stages[0] : "all"}
             onValueChange={handleStageSelect}
           >
-            <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+            <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
               <SelectValue placeholder="All Stages" />
             </SelectTrigger>
-            <SelectContent className="bg-gray-800 border-purple-400/30">
-              <SelectItem value="all" className="text-purple-100">
+            <SelectContent className="bg-popover border">
+              <SelectItem value="all" className="text-popover-foreground">
                 All Stages
               </SelectItem>
               {stagesLoading ? (
                 <SelectItem
                   value="loading"
                   disabled
-                  className="text-purple-300"
+                  className="text-subtle-foreground"
                 >
                   Loading stages...
                 </SelectItem>
@@ -72,7 +74,7 @@ export function MobileFilters({
                   <SelectItem
                     key={stage.id}
                     value={stage.id}
-                    className="text-purple-100"
+                    className="text-popover-foreground"
                   >
                     {stage.name}
                   </SelectItem>
@@ -85,23 +87,25 @@ export function MobileFilters({
 
       {/* Genre Filter Select */}
       <div>
-        <h4 className="text-sm font-medium text-purple-200 mb-2">Genre</h4>
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
+          Genre
+        </h4>
         <Select
           value={state.genres.length === 1 ? state.genres[0] : "all"}
           onValueChange={handleGenreSelect}
         >
-          <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
             <SelectValue placeholder="All Genres" />
           </SelectTrigger>
-          <SelectContent className="bg-gray-800 border-purple-400/30">
-            <SelectItem value="all" className="text-purple-100">
+          <SelectContent className="bg-popover border">
+            <SelectItem value="all" className="text-popover-foreground">
               All Genres
             </SelectItem>
             {genres.map((genre) => (
               <SelectItem
                 key={genre.id}
                 value={genre.id}
-                className="text-purple-100"
+                className="text-popover-foreground"
               >
                 {genre.name}
               </SelectItem>
@@ -112,7 +116,7 @@ export function MobileFilters({
 
       {/* Rating Filter */}
       <div>
-        <h4 className="text-sm font-medium text-purple-200 mb-2">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2">
           Minimum Rating
         </h4>
         <Select
@@ -121,20 +125,20 @@ export function MobileFilters({
             onStateChange({ minRating: parseInt(value) })
           }
         >
-          <SelectTrigger className="w-full bg-white/10 border-purple-400/30 text-purple-100">
+          <SelectTrigger className="w-full bg-surface-raised border-border text-popover-foreground">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="bg-gray-800 border-purple-400/30">
-            <SelectItem value="0" className="text-purple-100">
+          <SelectContent className="bg-popover border">
+            <SelectItem value="0" className="text-popover-foreground">
               Any Rating
             </SelectItem>
-            <SelectItem value="1" className="text-purple-100">
+            <SelectItem value="1" className="text-popover-foreground">
               1+ Rating
             </SelectItem>
-            <SelectItem value="2" className="text-purple-100">
+            <SelectItem value="2" className="text-popover-foreground">
               2+ Rating
             </SelectItem>
-            <SelectItem value="3" className="text-purple-100">
+            <SelectItem value="3" className="text-popover-foreground">
               3+ Rating
             </SelectItem>
           </SelectContent>