From 77fda736b62e1f3da04d4f0d5db0e2152227d03b Mon Sep 17 00:00:00 2001
From: Nusirat12345 <nusiratadenekan@gmail.com>
Date: Sat, 30 May 2026 13:27:21 +0000
Subject: [PATCH] feat: standardize color system with CSS variables across all
 pages and components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace mixed hardcoded Tailwind colors with a unified CSS variable-based
semantic token system throughout the entire frontend codebase.

## What changed

### globals.css — extended semantic token set
- Kept existing tokens: background, foreground, card, primary, secondary,
  muted, accent, destructive, border, input, ring
- Added surface tokens: --surface, --surface-raised, --surface-overlay
  (replaces bg-gray-800/700/900 dark surface patterns)
- Added status tokens: --success/foreground/muted/muted-foreground,
  --warning/..., --info/... (replaces green-500, red-500, blue-500 patterns)
- Updated --primary to blue (217 91% 60%) to match actual usage
- Updated --destructive to full-opacity red in dark mode (0 72% 51%)
- Both :root (light) and .dark variants defined for all new tokens

### tailwind.config.ts — new utility classes
Added Tailwind color mappings for all new tokens:
  bg-surface, bg-surface-raised, bg-surface-overlay
  bg-success, text-success, border-success, bg-success-muted, etc.
  bg-warning, text-warning, bg-warning-muted, etc.
  bg-info, text-info, bg-info-muted, etc.

### 97 component/page files migrated
Common patterns replaced:
  bg-blue-500/600   → bg-primary / bg-primary/90
  text-blue-500/600 → text-primary
  border-blue-500   → border-primary
  ring-blue-500     → ring-primary
  bg-green-500/600  → bg-success / bg-success/90
  text-green-500/600→ text-success
  bg-red-500        → bg-destructive
  text-red-500/600  → text-destructive
  bg-gray-800       → bg-surface
  bg-gray-900       → bg-background
  bg-gray-700       → bg-surface-raised
  border-gray-700   → border-border
  text-gray-400     → text-muted-foreground
  text-gray-300     → text-foreground/80
  text-slate-400/500→ text-muted-foreground
  text-slate-300    → text-foreground/80

### Tests updated
- profile-header.test.tsx: updated online-indicator assertions from
  bg-green-500 → bg-success to match migrated component

Closes #369
---
 .../src/__tests__/profile-header.test.tsx     |  4 +-
 frontend/src/app/accessibility/page.tsx       |  2 +-
 frontend/src/app/achievements/page.tsx        |  6 +-
 frontend/src/app/admin/disputes/page.tsx      | 24 ++++----
 frontend/src/app/admin/governance/page.tsx    | 12 ++--
 frontend/src/app/admin/kyc/page.tsx           | 14 ++---
 frontend/src/app/contact/ContactForm.tsx      |  4 +-
 frontend/src/app/dashboard/friends/page.tsx   |  2 +-
 frontend/src/app/dashboard/profile/page.tsx   |  2 +-
 frontend/src/app/friends/page.tsx             | 22 +++----
 frontend/src/app/leaderboards/page.tsx        | 22 +++----
 frontend/src/app/matches/[id]/page.tsx        | 54 ++++++++---------
 frontend/src/app/messages/page.tsx            | 34 +++++------
 frontend/src/app/party/page.tsx               | 20 +++----
 frontend/src/app/play/lobby/page.tsx          |  2 +-
 frontend/src/app/play/page.tsx                |  8 +--
 frontend/src/app/play/party/page.tsx          |  2 +-
 frontend/src/app/profile/edit/page.tsx        |  4 +-
 frontend/src/app/profile/page.tsx             |  2 +-
 frontend/src/app/profile/settings/page.tsx    |  2 +-
 .../src/app/settings/accessibility/page.tsx   |  2 +-
 frontend/src/app/settings/account/page.tsx    |  2 +-
 frontend/src/app/settings/game/page.tsx       |  2 +-
 .../src/app/settings/keybindings/page.tsx     |  2 +-
 .../src/app/settings/notifications/page.tsx   |  2 +-
 frontend/src/app/settings/privacy/page.tsx    |  2 +-
 frontend/src/app/settings/theme/page.tsx      |  2 +-
 frontend/src/app/tournaments/[id]/page.tsx    |  8 +--
 frontend/src/app/tournaments/create/page.tsx  | 60 +++++++++----------
 .../achievements/AchievementCard.tsx          |  2 +-
 .../achievements/AchievementDetails.tsx       |  4 +-
 .../components/achievements/ProgressBar.tsx   |  2 +-
 .../achievements/UnlockAnimation.tsx          |  4 +-
 frontend/src/components/auth/AuthLayout.tsx   | 10 ++--
 .../src/components/auth/EmailVerification.tsx |  8 +--
 frontend/src/components/auth/LoginForm.tsx    | 10 ++--
 .../src/components/auth/PasswordResetForm.tsx |  8 +--
 .../auth/PasswordStrengthIndicator.tsx        |  8 +--
 frontend/src/components/auth/RegisterForm.tsx | 18 +++---
 frontend/src/components/auth/SocialLogin.tsx  |  2 +-
 .../components/bracket/BracketMatchModal.tsx  | 36 +++++------
 .../bracket/SingleEliminationBracket.tsx      | 48 +++++++--------
 .../src/components/dashboard/FriendsList.tsx  |  2 +-
 .../src/components/dashboard/NewsFeed.tsx     |  2 +-
 .../src/components/dashboard/QuickPlay.tsx    |  4 +-
 .../src/components/dashboard/RecentGames.tsx  |  2 +-
 .../components/dashboard/StatsOverview.tsx    |  6 +-
 frontend/src/components/game/ChatPanel.tsx    |  4 +-
 .../src/components/game/CountdownTimer.tsx    |  2 +-
 .../src/components/game/GameModeSelector.tsx  |  6 +-
 frontend/src/components/game/GameSettings.tsx |  8 +--
 .../src/components/game/MatchmakingQueue.tsx  | 20 +++----
 frontend/src/components/game/PartyManager.tsx | 10 ++--
 frontend/src/components/game/PlayerList.tsx   |  4 +-
 .../leaderboard/CategorySelector.tsx          |  8 +--
 .../leaderboard/LeaderboardFilters.tsx        | 14 ++---
 .../leaderboard/LeaderboardTable.tsx          | 36 +++++------
 .../components/leaderboard/PersonalRank.tsx   | 20 +++----
 .../components/leaderboard/PlayerRankCard.tsx | 42 ++++++-------
 .../src/components/leaderboard/RankChange.tsx |  8 +--
 .../components/leaderboard/SeasonSelector.tsx |  6 +-
 .../src/components/match/MatchDetailView.tsx  | 26 ++++----
 .../src/components/notifications/Toast.tsx    |  4 +-
 .../profile/AchievementShowcase.tsx           | 12 ++--
 .../src/components/profile/ActivityFeed.tsx   |  4 +-
 .../src/components/profile/FriendsList.tsx    |  4 +-
 .../src/components/profile/MatchHistory.tsx   | 10 ++--
 .../src/components/profile/ProfileHeader.tsx  | 18 +++---
 .../src/components/profile/StatsOverview.tsx  | 18 +++---
 .../settings/AccessibilityOptions.tsx         | 14 ++---
 .../components/settings/AccountSettings.tsx   | 26 ++++----
 .../components/settings/GamePreferences.tsx   | 14 ++---
 .../src/components/settings/KeyBindings.tsx   | 14 ++---
 .../settings/NotificationSettings.tsx         | 26 ++++----
 .../components/settings/PrivacySettings.tsx   | 22 +++----
 .../src/components/settings/ThemeSelector.tsx | 42 ++++++-------
 .../src/components/social/ChatInterface.tsx   |  6 +-
 .../src/components/social/CommunityFeed.tsx   | 12 ++--
 .../src/components/social/FriendRequests.tsx  |  6 +-
 .../src/components/social/FriendsList.tsx     |  4 +-
 .../src/components/social/InviteFriends.tsx   |  6 +-
 .../src/components/social/OnlineStatus.tsx    |  6 +-
 .../src/components/social/PartyManager.tsx    | 10 ++--
 .../tournaments/JoinTournamentButton.tsx      | 48 +++++++--------
 .../src/components/tournaments/MatchCard.tsx  | 24 ++++----
 .../src/components/tournaments/PrizePool.tsx  |  2 +-
 .../components/tournaments/QuickJoinModal.tsx | 20 +++----
 .../tournaments/RegistrationForm.tsx          | 22 +++----
 .../tournaments/TournamentBracket.tsx         |  6 +-
 .../components/tournaments/TournamentCard.tsx | 16 ++---
 .../TournamentCardWithQuickJoin.tsx           | 18 +++---
 .../tournaments/TournamentHeader.tsx          | 22 +++----
 .../tournaments/TournamentParticipants.tsx    |  8 +--
 .../tournaments/TournamentRules.tsx           | 12 ++--
 frontend/src/components/ui/Button.tsx         |  8 +--
 frontend/src/components/ui/SkipLink.tsx       |  2 +-
 .../components/wallet/TransactionHistory.tsx  |  4 +-
 .../components/wallet/TransactionToasts.tsx   |  2 +-
 frontend/src/styles/globals.css               | 54 +++++++++++++++--
 frontend/tailwind.config.ts                   | 23 +++++++
 100 files changed, 674 insertions(+), 609 deletions(-)

diff --git a/frontend/src/__tests__/profile-header.test.tsx b/frontend/src/__tests__/profile-header.test.tsx
index 94e1472d..2c7179fa 100644
--- a/frontend/src/__tests__/profile-header.test.tsx
+++ b/frontend/src/__tests__/profile-header.test.tsx
@@ -101,7 +101,7 @@ describe('ProfileHeader', () => {
       <ProfileHeader user={{ ...baseUser, isOnline: true }} isOwner={false} friendshipStatus="none" />
     );
     const indicator = screen.getByTestId('online-indicator');
-    expect(indicator).toHaveClass('bg-green-500');
+    expect(indicator).toHaveClass('bg-success');
     expect(indicator).not.toHaveClass('bg-gray-400');
   });
 
@@ -111,6 +111,6 @@ describe('ProfileHeader', () => {
     );
     const indicator = screen.getByTestId('online-indicator');
     expect(indicator).toHaveClass('bg-gray-400');
-    expect(indicator).not.toHaveClass('bg-green-500');
+    expect(indicator).not.toHaveClass('bg-success');
   });
 });
diff --git a/frontend/src/app/accessibility/page.tsx b/frontend/src/app/accessibility/page.tsx
index 8ab046eb..b43124fc 100644
--- a/frontend/src/app/accessibility/page.tsx
+++ b/frontend/src/app/accessibility/page.tsx
@@ -60,7 +60,7 @@ export default function AccessibilityPage() {
             We welcome your feedback on the accessibility of ArenaX. Please let us know if you
             encounter accessibility barriers:
           </p>
-          <Link href="/contact" className="text-blue-600 hover:underline">
+          <Link href="/contact" className="text-primary hover:underline">
             Contact Us
           </Link>
         </CardContent>
diff --git a/frontend/src/app/achievements/page.tsx b/frontend/src/app/achievements/page.tsx
index 1bb7899f..4a960fd9 100644
--- a/frontend/src/app/achievements/page.tsx
+++ b/frontend/src/app/achievements/page.tsx
@@ -22,7 +22,7 @@ export default function AchievementsPage() {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
       </div>
     );
   }
@@ -40,14 +40,14 @@ export default function AchievementsPage() {
               <Trophy className="h-8 w-8 text-yellow-400" />
               Achievements
             </h1>
-            <p className="text-gray-400">
+            <p className="text-muted-foreground">
               {unlockedCount} of {totalAchievements} unlocked · {totalPoints}{" "}
               points earned
             </p>
           </div>
           <Link
             href="/achievements/progress"
-            className="inline-flex items-center gap-2 rounded-md bg-blue-600 hover:bg-blue-700 px-4 py-2 text-sm font-medium text-white transition-colors self-start"
+            className="inline-flex items-center gap-2 rounded-md bg-primary/90 hover:bg-blue-700 px-4 py-2 text-sm font-medium text-white transition-colors self-start"
           >
             📊 View Progress
           </Link>
diff --git a/frontend/src/app/admin/disputes/page.tsx b/frontend/src/app/admin/disputes/page.tsx
index 7d388eba..5a09d327 100644
--- a/frontend/src/app/admin/disputes/page.tsx
+++ b/frontend/src/app/admin/disputes/page.tsx
@@ -44,7 +44,7 @@ export default function DisputeDashboard() {
     <ProtectedPage requiredRole="admin">
       <div className="container mx-auto p-6 space-y-8">
       <header className="flex flex-col gap-2">
-        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
+        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
           Dispute Resolution
         </h1>
         <p className="text-xl text-muted-foreground">
@@ -81,16 +81,16 @@ export default function DisputeDashboard() {
                 <div className="grid md:grid-cols-2 gap-8">
                   <div className="space-y-4">
                     <div>
-                      <h4 className="text-sm font-bold text-gray-500 uppercase tracking-widest mb-1">Reason</h4>
-                      <p className="text-lg text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg border border-gray-100 dark:border-gray-700">
+                      <h4 className="text-sm font-bold text-muted-foreground uppercase tracking-widest mb-1">Reason</h4>
+                      <p className="text-lg text-gray-800 dark:text-gray-200 bg-muted dark:bg-surface/50 p-4 rounded-lg border border-gray-100 dark:border-border">
                         {dispute.reason}
                       </p>
                     </div>
                     <div>
-                      <h4 className="text-sm font-bold text-gray-500 uppercase tracking-widest mb-2">Evidence</h4>
+                      <h4 className="text-sm font-bold text-muted-foreground uppercase tracking-widest mb-2">Evidence</h4>
                       <div className="grid grid-cols-3 gap-2">
                         {dispute.evidenceUrls.map((url: string, index: number) => (
-                          <div key={index} className="aspect-square bg-gray-200 rounded-md overflow-hidden border">
+                          <div key={index} className="aspect-square bg-muted rounded-md overflow-hidden border">
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img src={url} alt={`Evidence ${index + 1}`} className="w-full h-full object-cover" />
                           </div>
@@ -100,19 +100,19 @@ export default function DisputeDashboard() {
                   </div>
                   <div className="flex flex-col justify-between border-l pl-8 border-indigo-50 dark:border-indigo-900">
                     <div className="space-y-4">
-                      <h4 className="text-sm font-bold text-gray-500 uppercase tracking-widest">Match Details</h4>
+                      <h4 className="text-sm font-bold text-muted-foreground uppercase tracking-widest">Match Details</h4>
                       <div className="grid grid-cols-2 gap-4">
-                        <div className="p-3 bg-red-50 dark:bg-red-950/20 rounded-lg">
-                          <p className="text-xs text-red-600 font-bold uppercase">Player A</p>
+                        <div className="p-3 bg-destructive/5 dark:bg-destructive/10/20 rounded-lg">
+                          <p className="text-xs text-destructive font-bold uppercase">Player A</p>
                           <p className="text-sm font-mono truncate">{dispute.match.playerAId}</p>
                         </div>
-                        <div className="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
-                          <p className="text-xs text-blue-600 font-bold uppercase">Player B</p>
+                        <div className="p-3 bg-info-muted dark:bg-info-muted/20 rounded-lg">
+                          <p className="text-xs text-primary font-bold uppercase">Player B</p>
                           <p className="text-sm font-mono truncate">{dispute.match.playerBId}</p>
                         </div>
                       </div>
-                      <div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg border border-green-100 dark:border-green-900/50">
-                        <p className="text-xs text-green-600 font-bold uppercase">Reported Winner</p>
+                      <div className="p-4 bg-success-muted dark:bg-success-muted/20 rounded-lg border border-green-100 dark:border-success/30/50">
+                        <p className="text-xs text-success font-bold uppercase">Reported Winner</p>
                         <p className="text-lg font-bold">{dispute.match.winnerId === dispute.match.playerAId ? "Player A" : "Player B"}</p>
                       </div>
                     </div>
diff --git a/frontend/src/app/admin/governance/page.tsx b/frontend/src/app/admin/governance/page.tsx
index a6486c74..bcfbe2fe 100644
--- a/frontend/src/app/admin/governance/page.tsx
+++ b/frontend/src/app/admin/governance/page.tsx
@@ -47,7 +47,7 @@ export default function GovernanceDashboard() {
       <div className="container mx-auto p-6 space-y-8">
       <header className="flex items-center justify-between">
         <div>
-          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
+          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
             Governance
           </h1>
           <p className="text-xl text-muted-foreground mt-2">
@@ -85,9 +85,9 @@ export default function GovernanceDashboard() {
               </CardHeader>
               <CardContent>
                 <div className="space-y-4">
-                  <div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700">
-                    <p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Target Contract</p>
-                    <p className="text-sm font-mono truncate text-gray-700 dark:text-gray-300">{proposal.targetContract}</p>
+                  <div className="p-4 bg-muted dark:bg-surface/50 rounded-lg border border-gray-100 dark:border-border">
+                    <p className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-2">Target Contract</p>
+                    <p className="text-sm font-mono truncate text-foreground/70 dark:text-foreground/80">{proposal.targetContract}</p>
                   </div>
                   <div className="flex items-center justify-between">
                     <div className="flex -space-x-2 overflow-hidden">
@@ -101,7 +101,7 @@ export default function GovernanceDashboard() {
                       {proposal._count.votes} / 3 signatures
                     </p>
                   </div>
-                  <div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
+                  <div className="w-full bg-muted dark:bg-surface rounded-full h-2">
                     <div 
                       className="bg-gradient-to-r from-indigo-500 to-purple-500 h-2 rounded-full transition-all duration-500" 
                       style={{ width: `${Math.min((proposal._count.votes / 3) * 100, 100)}%` }}
@@ -117,7 +117,7 @@ export default function GovernanceDashboard() {
                     </Button>
                   )}
                   {proposal.status === "VOTING" && (
-                    <Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => handleVote(proposal.id)}>
+                    <Button className="w-full bg-success/90 hover:bg-green-700" onClick={() => handleVote(proposal.id)}>
                       Sign Proposal
                     </Button>
                   )}
diff --git a/frontend/src/app/admin/kyc/page.tsx b/frontend/src/app/admin/kyc/page.tsx
index 7a58621b..7760c898 100644
--- a/frontend/src/app/admin/kyc/page.tsx
+++ b/frontend/src/app/admin/kyc/page.tsx
@@ -90,7 +90,7 @@ export default function KycDashboard() {
       <div className="container mx-auto p-6 space-y-8">
       <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <div>
-          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900 dark:text-gray-100">
+          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground dark:text-foreground">
             KYC Review Queue
           </h1>
           <p className="text-xl text-muted-foreground">
@@ -135,8 +135,8 @@ export default function KycDashboard() {
                     <CardTitle className="text-lg truncate">{review.user.username}</CardTitle>
                     <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
                       review.status === 'PENDING' ? 'bg-yellow-100 text-yellow-800' :
-                      review.status === 'APPROVED' ? 'bg-green-100 text-green-800' :
-                      review.status === 'REJECTED' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+                      review.status === 'APPROVED' ? 'bg-success-muted text-green-800' :
+                      review.status === 'REJECTED' ? 'bg-destructive/10 text-red-800' : 'bg-muted text-gray-800'
                     }`}>
                       {review.status}
                     </span>
@@ -213,7 +213,7 @@ export default function KycDashboard() {
                       <div className="flex flex-wrap gap-3 pt-2">
                         <Button 
                           variant="primary" 
-                          className="flex-1 min-w-[140px] bg-green-600 hover:bg-green-700 text-white font-bold"
+                          className="flex-1 min-w-[140px] bg-success/90 hover:bg-green-700 text-white font-bold"
                           onClick={() => handleProcess(selectedReview.id, "APPROVED")}
                           disabled={isSubmitting}
                         >
@@ -238,9 +238,9 @@ export default function KycDashboard() {
                       </div>
                     ) : (
                       <div className={`p-4 rounded-xl border flex items-center justify-between ${
-                        selectedReview.status === 'APPROVED' ? 'bg-green-50 border-green-200 text-green-800' :
-                        selectedReview.status === 'REJECTED' ? 'bg-red-50 border-red-200 text-red-800' :
-                        'bg-gray-50 border-gray-200 text-gray-800'
+                        selectedReview.status === 'APPROVED' ? 'bg-success-muted border-success/30 text-green-800' :
+                        selectedReview.status === 'REJECTED' ? 'bg-destructive/5 border-red-200 text-red-800' :
+                        'bg-muted border-gray-200 text-gray-800'
                       }`}>
                         <div className="flex items-center gap-3">
                           <span className="font-bold uppercase tracking-wider text-xs">Final State: {selectedReview.status}</span>
diff --git a/frontend/src/app/contact/ContactForm.tsx b/frontend/src/app/contact/ContactForm.tsx
index 7b81b4c2..b760ac8c 100644
--- a/frontend/src/app/contact/ContactForm.tsx
+++ b/frontend/src/app/contact/ContactForm.tsx
@@ -59,8 +59,8 @@ export function ContactForm() {
             animate={{ opacity: 1, y: 0 }}
             className="text-center py-8"
           >
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 mb-4">
-              <Send className="h-8 w-8 text-green-600 dark:text-green-400" />
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success-muted dark:bg-success-muted mb-4">
+              <Send className="h-8 w-8 text-success dark:text-success/80" />
             </div>
             <h3 className="text-xl font-bold mb-2">Message Sent!</h3>
             <p className="text-muted-foreground">
diff --git a/frontend/src/app/dashboard/friends/page.tsx b/frontend/src/app/dashboard/friends/page.tsx
index 206b1648..4ef99022 100644
--- a/frontend/src/app/dashboard/friends/page.tsx
+++ b/frontend/src/app/dashboard/friends/page.tsx
@@ -24,7 +24,7 @@ const mockFriends: Friend[] = [
 ];
 
 const statusConfig = {
-  online: { label: "Online", dot: "bg-green-500" },
+  online: { label: "Online", dot: "bg-success" },
   "in-game": { label: "In Game", dot: "bg-yellow-500" },
   offline: { label: "Offline", dot: "bg-muted-foreground/50" },
 };
diff --git a/frontend/src/app/dashboard/profile/page.tsx b/frontend/src/app/dashboard/profile/page.tsx
index fbe7ac49..9f364229 100644
--- a/frontend/src/app/dashboard/profile/page.tsx
+++ b/frontend/src/app/dashboard/profile/page.tsx
@@ -31,7 +31,7 @@ export default function DashboardProfilePage() {
               <span className="text-3xl font-bold text-muted-foreground">{user.username.charAt(0)}</span>
             )}
           </div>
-          <div className="absolute -bottom-1 -right-1 h-6 w-6 bg-green-500 border-4 border-card rounded-full" />
+          <div className="absolute -bottom-1 -right-1 h-6 w-6 bg-success border-4 border-card rounded-full" />
         </div>
         <div className="flex-1 space-y-2">
           <h1 className="text-3xl font-extrabold tracking-tight">{user.username}</h1>
diff --git a/frontend/src/app/friends/page.tsx b/frontend/src/app/friends/page.tsx
index f6fa9d3a..f9cf3564 100644
--- a/frontend/src/app/friends/page.tsx
+++ b/frontend/src/app/friends/page.tsx
@@ -32,19 +32,19 @@ export default function FriendsPage() {
             <Users className="w-8 h-8" />
             Friends
           </h1>
-          <p className="text-gray-400">
+          <p className="text-muted-foreground">
             {onlineFriends} of {friends.length} friends online
           </p>
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-4 mb-8 border-b border-gray-700">
+        <div className="flex gap-4 mb-8 border-b border-border">
           <button
             onClick={() => setActiveTab("list")}
             className={`px-4 py-2 font-medium transition-colors ${
               activeTab === "list"
-                ? "text-blue-400 border-b-2 border-blue-400"
-                : "text-gray-400 hover:text-gray-300"
+                ? "text-primary/80 border-b-2 border-primary/70"
+                : "text-muted-foreground hover:text-foreground/80"
             }`}
           >
             <Users className="w-4 h-4 inline mr-2" />
@@ -54,8 +54,8 @@ export default function FriendsPage() {
             onClick={() => setActiveTab("requests")}
             className={`px-4 py-2 font-medium transition-colors ${
               activeTab === "requests"
-                ? "text-blue-400 border-b-2 border-blue-400"
-                : "text-gray-400 hover:text-gray-300"
+                ? "text-primary/80 border-b-2 border-primary/70"
+                : "text-muted-foreground hover:text-foreground/80"
             }`}
           >
             <UserPlus className="w-4 h-4 inline mr-2" />
@@ -65,8 +65,8 @@ export default function FriendsPage() {
             onClick={() => setActiveTab("invite")}
             className={`px-4 py-2 font-medium transition-colors ${
               activeTab === "invite"
-                ? "text-blue-400 border-b-2 border-blue-400"
-                : "text-gray-400 hover:text-gray-300"
+                ? "text-primary/80 border-b-2 border-primary/70"
+                : "text-muted-foreground hover:text-foreground/80"
             }`}
           >
             <UserPlus className="w-4 h-4 inline mr-2" />
@@ -77,19 +77,19 @@ export default function FriendsPage() {
         {/* Search Bar */}
         {activeTab === "list" && (
           <div className="mb-6 relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
             <input
               type="text"
               placeholder="Search friends..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+              className="w-full pl-10 pr-4 py-2 bg-surface border border-border rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-primary"
             />
           </div>
         )}
 
         {/* Content */}
-        <div className="bg-gray-800/50 rounded-lg border border-gray-700 p-6">
+        <div className="bg-surface/50 rounded-lg border border-border p-6">
           {activeTab === "list" && (
             <FriendsList
               friends={filteredFriends}
diff --git a/frontend/src/app/leaderboards/page.tsx b/frontend/src/app/leaderboards/page.tsx
index 94e9536f..133aa826 100644
--- a/frontend/src/app/leaderboards/page.tsx
+++ b/frontend/src/app/leaderboards/page.tsx
@@ -29,32 +29,32 @@ export default function LeaderboardsPage() {
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-4xl font-bold text-white mb-2">Leaderboards</h1>
-          <p className="text-gray-400">Compete and climb the ranks</p>
+          <p className="text-muted-foreground">Compete and climb the ranks</p>
         </div>
 
         {/* Stats */}
         {statsData && (
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-              <p className="text-gray-400 text-sm mb-1">Total Players</p>
+            <div className="bg-surface/50 rounded-lg p-4 border border-border">
+              <p className="text-muted-foreground text-sm mb-1">Total Players</p>
               <p className="text-2xl font-bold text-white">
                 {statsData.totalPlayers}
               </p>
             </div>
-            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-              <p className="text-gray-400 text-sm mb-1">Average Elo</p>
+            <div className="bg-surface/50 rounded-lg p-4 border border-border">
+              <p className="text-muted-foreground text-sm mb-1">Average Elo</p>
               <p className="text-2xl font-bold text-white">
                 {Math.round(statsData.averageElo)}
               </p>
             </div>
-            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-              <p className="text-gray-400 text-sm mb-1">Median Elo</p>
+            <div className="bg-surface/50 rounded-lg p-4 border border-border">
+              <p className="text-muted-foreground text-sm mb-1">Median Elo</p>
               <p className="text-2xl font-bold text-white">
                 {statsData.medianElo}
               </p>
             </div>
-            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-              <p className="text-gray-400 text-sm mb-1">Top Player Elo</p>
+            <div className="bg-surface/50 rounded-lg p-4 border border-border">
+              <p className="text-muted-foreground text-sm mb-1">Top Player Elo</p>
               <p className="text-2xl font-bold text-white">
                 {statsData.topPlayerElo}
               </p>
@@ -75,7 +75,7 @@ export default function LeaderboardsPage() {
         <PersonalRank category={category} season={season} />
 
         {/* Leaderboard Table */}
-        <div className="bg-gray-800/50 rounded-lg p-6 backdrop-blur border border-gray-700">
+        <div className="bg-surface/50 rounded-lg p-6 backdrop-blur border border-border">
           <div className="flex justify-between items-center mb-6">
             <h2 className="text-2xl font-bold text-white">
               {category === "global"
@@ -86,7 +86,7 @@ export default function LeaderboardsPage() {
                     ? "Casual Rankings"
                     : "Ranked Rankings"}
             </h2>
-            <div className="text-sm text-gray-400">
+            <div className="text-sm text-muted-foreground">
               {filteredEntries.length} players
             </div>
           </div>
diff --git a/frontend/src/app/matches/[id]/page.tsx b/frontend/src/app/matches/[id]/page.tsx
index 4e5a0b09..8844127a 100644
--- a/frontend/src/app/matches/[id]/page.tsx
+++ b/frontend/src/app/matches/[id]/page.tsx
@@ -237,14 +237,14 @@ export default function MatchHubPage() {
 
         <div className="grid gap-6 xl:grid-cols-[1.35fr_0.95fr]">
           <section className="space-y-6">
-            <div className="overflow-hidden rounded-[32px] border border-slate-200 bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.16),_transparent_30%),linear-gradient(135deg,_rgba(15,23,42,1),_rgba(30,41,59,0.96))] p-6 text-white shadow-[0_30px_80px_-45px_rgba(14,165,233,0.7)]">
+            <div className="overflow-hidden rounded-[32px] border border-border bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.16),_transparent_30%),linear-gradient(135deg,_rgba(15,23,42,1),_rgba(30,41,59,0.96))] p-6 text-white shadow-[0_30px_80px_-45px_rgba(14,165,233,0.7)]">
               <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                 <div>
                   <p className="text-xs uppercase tracking-[0.35em] text-cyan-200/70">
                     Match Hub
                   </p>
                   <h1 className="mt-2 text-3xl font-semibold">{match.tournamentName}</h1>
-                  <p className="mt-2 text-sm text-slate-300">
+                  <p className="mt-2 text-sm text-foreground/80">
                     {match.gameType} | {match.roundLabel} | {match.bestOf > 0 ? `Best of ${match.bestOf}` : "Series"}
                   </p>
                 </div>
@@ -272,7 +272,7 @@ export default function MatchHubPage() {
                   isCurrentUser={match.player1.id === currentUserId}
                 />
                 <div className="flex items-center justify-center">
-                  <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs uppercase tracking-[0.3em] text-slate-300">
+                  <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs uppercase tracking-[0.3em] text-foreground/80">
                     VS
                   </div>
                 </div>
@@ -293,8 +293,8 @@ export default function MatchHubPage() {
             </div>
 
             <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
-              <div className="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
-                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+              <div className="rounded-[32px] border border-border bg-white p-6 shadow-sm">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
                   <RadioTower className="h-4 w-4 text-cyan-600" />
                   Real-Time Event Feed
                 </div>
@@ -302,11 +302,11 @@ export default function MatchHubPage() {
                   {liveFeed.map((event) => (
                     <div
                       key={event.id}
-                      className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4"
+                      className="rounded-2xl border border-border bg-slate-50 px-4 py-4"
                     >
                       <div className="flex flex-wrap items-center justify-between gap-2">
                         <EventTypeBadge type={event.type} />
-                        <span className="text-xs text-slate-500">
+                        <span className="text-xs text-muted-foreground">
                           {formatDate(event.createdAt)}
                         </span>
                       </div>
@@ -316,8 +316,8 @@ export default function MatchHubPage() {
                 </div>
               </div>
 
-              <div className="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
-                <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+              <div className="rounded-[32px] border border-border bg-white p-6 shadow-sm">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
                   <Trophy className="h-4 w-4 text-amber-500" />
                   Match Context
                 </div>
@@ -332,8 +332,8 @@ export default function MatchHubPage() {
           </section>
 
           <aside className="space-y-6">
-            <div className="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
-              <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <div className="rounded-[32px] border border-border bg-white p-6 shadow-sm">
+              <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
                 <ShieldAlert className="h-4 w-4 text-rose-500" />
                 Dual Score Reporting
               </div>
@@ -375,7 +375,7 @@ export default function MatchHubPage() {
 
               <div className="mt-5 grid gap-4 sm:grid-cols-2">
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-slate-900">
+                  <label className="mb-2 block text-sm font-medium text-foreground">
                     {match.player1.username} Score
                   </label>
                   <Input
@@ -386,7 +386,7 @@ export default function MatchHubPage() {
                   />
                 </div>
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-slate-900">
+                  <label className="mb-2 block text-sm font-medium text-foreground">
                     {match.player2.username} Score
                   </label>
                   <Input
@@ -431,8 +431,8 @@ export default function MatchHubPage() {
               ) : null}
             </div>
 
-            <div className="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
-              <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+            <div className="rounded-[32px] border border-border bg-white p-6 shadow-sm">
+              <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
                 <User className="h-4 w-4 text-slate-700" />
                 Submitted Reports
               </div>
@@ -440,16 +440,16 @@ export default function MatchHubPage() {
                 {match.reports.map((report) => (
                   <div
                     key={`${report.reporterId}-${report.submittedAt}`}
-                    className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4"
+                    className="rounded-2xl border border-border bg-slate-50 px-4 py-4"
                   >
                     <div className="flex items-center justify-between gap-3">
                       <div>
-                        <p className="font-medium text-slate-900">{report.reporterName}</p>
-                        <p className="text-xs text-slate-500">
+                        <p className="font-medium text-foreground">{report.reporterName}</p>
+                        <p className="text-xs text-muted-foreground">
                           {formatDate(report.submittedAt)}
                         </p>
                       </div>
-                      <p className="text-lg font-semibold text-slate-900">
+                      <p className="text-lg font-semibold text-foreground">
                         {report.player1Score} - {report.player2Score}
                       </p>
                     </div>
@@ -473,7 +473,7 @@ function ConnectionPill({
 }) {
   if (!active) {
     return (
-      <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300">
+      <div className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-foreground/80">
         Feed idle
       </div>
     );
@@ -526,7 +526,7 @@ function CompetitorCard({
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-3">
           <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5">
-            <User className="h-6 w-6 text-slate-300" />
+            <User className="h-6 w-6 text-foreground/80" />
           </div>
           <div>
             <div className="flex items-center gap-2">
@@ -537,7 +537,7 @@ function CompetitorCard({
                 </span>
               ) : null}
             </div>
-            <p className="text-sm text-slate-400">
+            <p className="text-sm text-muted-foreground">
               Seed {player.seed} | {player.region} | ELO {player.elo}
             </p>
           </div>
@@ -551,7 +551,7 @@ function CompetitorCard({
             key={`${player.id}-${stat.label}`}
             className="rounded-2xl border border-white/10 bg-black/10 px-3 py-2"
           >
-            <p className="text-[11px] uppercase tracking-[0.2em] text-slate-500">
+            <p className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
               {stat.label}
             </p>
             <p className="mt-1 text-sm font-medium text-white">{stat.value}</p>
@@ -565,7 +565,7 @@ function CompetitorCard({
 function HubStat({ label, value }: { label: string; value: string }) {
   return (
     <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
-      <p className="text-[11px] uppercase tracking-[0.25em] text-slate-400">{label}</p>
+      <p className="text-[11px] uppercase tracking-[0.25em] text-muted-foreground">{label}</p>
       <p className="mt-2 text-sm font-medium text-white">{value}</p>
     </div>
   );
@@ -598,14 +598,14 @@ function InfoRow({
   href?: string;
 }) {
   return (
-    <div className="border-b border-slate-200 pb-4 last:border-b-0 last:pb-0">
-      <p className="text-xs uppercase tracking-[0.25em] text-slate-500">{label}</p>
+    <div className="border-b border-border pb-4 last:border-b-0 last:pb-0">
+      <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">{label}</p>
       {href ? (
         <Link href={href} className="mt-2 inline-block font-medium text-cyan-700 hover:underline">
           {value}
         </Link>
       ) : (
-        <p className="mt-2 font-medium text-slate-900">{value}</p>
+        <p className="mt-2 font-medium text-foreground">{value}</p>
       )}
     </div>
   );
diff --git a/frontend/src/app/messages/page.tsx b/frontend/src/app/messages/page.tsx
index bde501c9..310587ca 100644
--- a/frontend/src/app/messages/page.tsx
+++ b/frontend/src/app/messages/page.tsx
@@ -44,7 +44,7 @@ export default function MessagesPage() {
             <MessageSquare className="w-8 h-8" />
             Messages
           </h1>
-          <p className="text-gray-400">
+          <p className="text-muted-foreground">
             Chat with friends and party members in real-time
           </p>
         </div>
@@ -52,24 +52,24 @@ export default function MessagesPage() {
         {/* Chat Interface */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-[600px]">
           {/* Conversations List */}
-          <div className="bg-gray-800/50 rounded-lg border border-gray-700 overflow-hidden flex flex-col">
-            <div className="p-4 border-b border-gray-700">
+          <div className="bg-surface/50 rounded-lg border border-border overflow-hidden flex flex-col">
+            <div className="p-4 border-b border-border">
               <h2 className="text-lg font-bold text-white">Conversations</h2>
             </div>
             <div className="flex-1 overflow-y-auto">
               {conversationsLoading ? (
                 <div className="flex items-center justify-center h-full">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                 </div>
               ) : conversations && conversations.length > 0 ? (
                 conversations.map((conv) => (
                   <button
                     key={conv.id}
                     onClick={() => setSelectedConversationId(conv.id)}
-                    className={`w-full p-4 border-b border-gray-700 text-left transition-colors ${
+                    className={`w-full p-4 border-b border-border text-left transition-colors ${
                       selectedConversationId === conv.id
-                        ? "bg-blue-600/20 border-l-2 border-l-blue-500"
-                        : "hover:bg-gray-700/50"
+                        ? "bg-primary/90/20 border-l-2 border-l-blue-500"
+                        : "hover:bg-surface-raised/50"
                     }`}
                   >
                     <div className="flex items-center justify-between">
@@ -77,12 +77,12 @@ export default function MessagesPage() {
                         <p className="font-medium text-white truncate">
                           {conv.participantUsername}
                         </p>
-                        <p className="text-sm text-gray-400 truncate">
+                        <p className="text-sm text-muted-foreground truncate">
                           {conv.lastMessage}
                         </p>
                       </div>
                       {conv.unreadCount > 0 && (
-                        <span className="ml-2 bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                        <span className="ml-2 bg-primary/90 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                           {conv.unreadCount}
                         </span>
                       )}
@@ -90,7 +90,7 @@ export default function MessagesPage() {
                   </button>
                 ))
               ) : (
-                <div className="flex items-center justify-center h-full text-gray-400">
+                <div className="flex items-center justify-center h-full text-muted-foreground">
                   No conversations yet
                 </div>
               )}
@@ -98,11 +98,11 @@ export default function MessagesPage() {
           </div>
 
           {/* Chat Area */}
-          <div className="md:col-span-2 bg-gray-800/50 rounded-lg border border-gray-700 overflow-hidden flex flex-col">
+          <div className="md:col-span-2 bg-surface/50 rounded-lg border border-border overflow-hidden flex flex-col">
             {selectedConversation ? (
               <>
                 {/* Chat Header */}
-                <div className="p-4 border-b border-gray-700">
+                <div className="p-4 border-b border-border">
                   <h3 className="text-lg font-bold text-white">
                     {selectedConversation.participantUsername}
                   </h3>
@@ -110,14 +110,14 @@ export default function MessagesPage() {
 
                 {/* Messages Area */}
                 <div className="flex-1 overflow-y-auto p-4 space-y-4">
-                  <div className="text-center text-gray-400 text-sm">
+                  <div className="text-center text-muted-foreground text-sm">
                     Start of conversation with{" "}
                     {selectedConversation.participantUsername}
                   </div>
                 </div>
 
                 {/* Message Input */}
-                <div className="p-4 border-t border-gray-700">
+                <div className="p-4 border-t border-border">
                   <div className="flex gap-2">
                     <input
                       type="text"
@@ -127,14 +127,14 @@ export default function MessagesPage() {
                       onKeyPress={(e) => {
                         if (e.key === "Enter") handleSendMessage();
                       }}
-                      className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                      className="flex-1 bg-surface-raised border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-primary"
                     />
                     <button
                       onClick={handleSendMessage}
                       disabled={
                         sendMessageMutation.isPending || !messageContent.trim()
                       }
-                      className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                      className="bg-primary/90 hover:bg-blue-700 disabled:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
                     >
                       Send
                     </button>
@@ -142,7 +142,7 @@ export default function MessagesPage() {
                 </div>
               </>
             ) : (
-              <div className="flex items-center justify-center h-full text-gray-400">
+              <div className="flex items-center justify-center h-full text-muted-foreground">
                 Select a conversation to start messaging
               </div>
             )}
diff --git a/frontend/src/app/party/page.tsx b/frontend/src/app/party/page.tsx
index 6cbd8921..aa087329 100644
--- a/frontend/src/app/party/page.tsx
+++ b/frontend/src/app/party/page.tsx
@@ -43,7 +43,7 @@ export default function PartyPage() {
             <Users className="w-8 h-8" />
             Party System
           </h1>
-          <p className="text-gray-400">
+          <p className="text-muted-foreground">
             Create or join a party to play with friends
           </p>
         </div>
@@ -51,7 +51,7 @@ export default function PartyPage() {
         {/* Create Party Button */}
         <button
           onClick={() => setShowCreateForm(!showCreateForm)}
-          className="mb-8 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-colors"
+          className="mb-8 bg-primary/90 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2 transition-colors"
         >
           <Plus className="w-5 h-5" />
           Create Party
@@ -59,13 +59,13 @@ export default function PartyPage() {
 
         {/* Create Party Form */}
         {showCreateForm && (
-          <div className="bg-gray-800/50 rounded-lg border border-gray-700 p-6 mb-8">
+          <div className="bg-surface/50 rounded-lg border border-border p-6 mb-8">
             <h2 className="text-xl font-bold text-white mb-4">
               Create New Party
             </h2>
             <div className="space-y-4">
               <div>
-                <label htmlFor="party-name-create" className="block text-sm font-medium text-gray-300 mb-2">
+                <label htmlFor="party-name-create" className="block text-sm font-medium text-foreground/80 mb-2">
                   Party Name
                 </label>
                 <input
@@ -74,12 +74,12 @@ export default function PartyPage() {
                   value={partyName}
                   onChange={(e) => setPartyName(e.target.value)}
                   placeholder="Enter party name..."
-                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                  className="w-full bg-surface-raised border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-primary"
                 />
               </div>
 
               <div>
-                <label htmlFor="party-description" className="block text-sm font-medium text-gray-300 mb-2">
+                <label htmlFor="party-description" className="block text-sm font-medium text-foreground/80 mb-2">
                   Description (Optional)
                 </label>
                 <textarea
@@ -87,12 +87,12 @@ export default function PartyPage() {
                   value={partyDescription}
                   onChange={(e) => setPartyDescription(e.target.value)}
                   placeholder="Enter party description..."
-                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 h-20 resize-none"
+                  className="w-full bg-surface-raised border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-primary h-20 resize-none"
                 />
               </div>
 
               <div>
-                <label htmlFor="max-members" className="block text-sm font-medium text-gray-300 mb-2">
+                <label htmlFor="max-members" className="block text-sm font-medium text-foreground/80 mb-2">
                   Max Members: {maxMembers}
                 </label>
                 <input
@@ -110,7 +110,7 @@ export default function PartyPage() {
                 <button
                   onClick={handleCreateParty}
                   disabled={createPartyMutation.isPending || !partyName.trim()}
-                  className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                  className="flex-1 bg-primary/90 hover:bg-blue-700 disabled:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
                 >
                   {createPartyMutation.isPending
                     ? "Creating..."
@@ -118,7 +118,7 @@ export default function PartyPage() {
                 </button>
                 <button
                   onClick={() => setShowCreateForm(false)}
-                  className="flex-1 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                  className="flex-1 bg-surface-raised hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
                 >
                   Cancel
                 </button>
diff --git a/frontend/src/app/play/lobby/page.tsx b/frontend/src/app/play/lobby/page.tsx
index 7f927441..6221746e 100644
--- a/frontend/src/app/play/lobby/page.tsx
+++ b/frontend/src/app/play/lobby/page.tsx
@@ -45,7 +45,7 @@ export default function LobbyPage() {
       <div className="container mx-auto px-4 py-8">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-white mb-2">Game Lobby</h1>
-          <p className="text-gray-300">Session: {sessionId}</p>
+          <p className="text-foreground/80">Session: {sessionId}</p>
         </div>
 
         {countdown ? (
diff --git a/frontend/src/app/play/page.tsx b/frontend/src/app/play/page.tsx
index c7c4771a..7f9772c3 100644
--- a/frontend/src/app/play/page.tsx
+++ b/frontend/src/app/play/page.tsx
@@ -41,7 +41,7 @@ export default function PlayPage() {
           <h1 className="text-5xl font-bold text-white mb-4">
             Choose Your Battle
           </h1>
-          <p className="text-xl text-gray-300">
+          <p className="text-xl text-foreground/80">
             Select a game mode and find your opponents
           </p>
         </div>
@@ -54,19 +54,19 @@ export default function PlayPage() {
         <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
           <div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
             <h3 className="text-xl font-bold text-white mb-2">Quick Play</h3>
-            <p className="text-gray-300 text-sm">
+            <p className="text-foreground/80 text-sm">
               Jump into a game instantly with casual matchmaking
             </p>
           </div>
           <div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
             <h3 className="text-xl font-bold text-white mb-2">Ranked Matches</h3>
-            <p className="text-gray-300 text-sm">
+            <p className="text-foreground/80 text-sm">
               Compete in skill-based matches and climb the leaderboard
             </p>
           </div>
           <div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
             <h3 className="text-xl font-bold text-white mb-2">Custom Games</h3>
-            <p className="text-gray-300 text-sm">
+            <p className="text-foreground/80 text-sm">
               Create private lobbies and play with friends
             </p>
           </div>
diff --git a/frontend/src/app/play/party/page.tsx b/frontend/src/app/play/party/page.tsx
index 1bb35dd8..a08b056a 100644
--- a/frontend/src/app/play/party/page.tsx
+++ b/frontend/src/app/play/party/page.tsx
@@ -84,7 +84,7 @@ export default function PlayPartyPage() {
                     <h1 className="text-4xl font-bold text-white mb-2">
                         Party Setup
                     </h1>
-                    <p className="text-gray-300">
+                    <p className="text-foreground/80">
                         Invite teammates, mark yourselves ready, then queue
                         together.
                     </p>
diff --git a/frontend/src/app/profile/edit/page.tsx b/frontend/src/app/profile/edit/page.tsx
index fb5ce803..223ae660 100644
--- a/frontend/src/app/profile/edit/page.tsx
+++ b/frontend/src/app/profile/edit/page.tsx
@@ -332,7 +332,7 @@ function ProfileEditContent() {
               {username.length} / {USERNAME_MAX_LENGTH} characters
             </p>
             {username === originalValues.current.username && (
-              <span className="text-xs text-green-600 flex items-center gap-1">
+              <span className="text-xs text-success flex items-center gap-1">
                 <CheckCircle className="h-3 w-3" />
                 Available
               </span>
@@ -455,7 +455,7 @@ function ProfileEditContent() {
 
       {/* Success Message */}
       {saved && (
-        <div className="flex items-center gap-2 p-4 bg-green-600 text-white rounded-md">
+        <div className="flex items-center gap-2 p-4 bg-success/90 text-white rounded-md">
           <CheckCircle className="h-5 w-5" />
           <p className="text-sm font-medium">Profile saved successfully!</p>
         </div>
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index d5182d8d..83ed42da 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -57,7 +57,7 @@ export default function ProfilePage() {
               </span>
             )}
           </div>
-          <div className="absolute -bottom-1 -right-1 h-8 w-8 bg-green-500 border-4 border-card rounded-full" title="Online" />
+          <div className="absolute -bottom-1 -right-1 h-8 w-8 bg-success border-4 border-card rounded-full" title="Online" />
         </div>
 
         <div className="flex-1 space-y-2">
diff --git a/frontend/src/app/profile/settings/page.tsx b/frontend/src/app/profile/settings/page.tsx
index 383a702a..fd2dd900 100644
--- a/frontend/src/app/profile/settings/page.tsx
+++ b/frontend/src/app/profile/settings/page.tsx
@@ -356,7 +356,7 @@ export default function ProfileSettingsPage() {
 
       {/* Success Message */}
       {saved && (
-        <div className="flex items-center gap-2 p-4 bg-green-600 text-white rounded-md">
+        <div className="flex items-center gap-2 p-4 bg-success/90 text-white rounded-md">
           <CheckCircle className="h-5 w-5" />
           <p className="text-sm font-medium">Settings saved successfully!</p>
         </div>
diff --git a/frontend/src/app/settings/accessibility/page.tsx b/frontend/src/app/settings/accessibility/page.tsx
index 2d82cf50..763fa17a 100644
--- a/frontend/src/app/settings/accessibility/page.tsx
+++ b/frontend/src/app/settings/accessibility/page.tsx
@@ -99,7 +99,7 @@ export default function AccessibilitySettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/account/page.tsx b/frontend/src/app/settings/account/page.tsx
index b5c97e52..6d84a51b 100644
--- a/frontend/src/app/settings/account/page.tsx
+++ b/frontend/src/app/settings/account/page.tsx
@@ -100,7 +100,7 @@ export default function AccountSettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/game/page.tsx b/frontend/src/app/settings/game/page.tsx
index 94561de7..5691bc60 100644
--- a/frontend/src/app/settings/game/page.tsx
+++ b/frontend/src/app/settings/game/page.tsx
@@ -99,7 +99,7 @@ export default function GameSettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/keybindings/page.tsx b/frontend/src/app/settings/keybindings/page.tsx
index 703529d4..1a058601 100644
--- a/frontend/src/app/settings/keybindings/page.tsx
+++ b/frontend/src/app/settings/keybindings/page.tsx
@@ -101,7 +101,7 @@ export default function KeyBindingsSettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/notifications/page.tsx b/frontend/src/app/settings/notifications/page.tsx
index 09386f67..bd456044 100644
--- a/frontend/src/app/settings/notifications/page.tsx
+++ b/frontend/src/app/settings/notifications/page.tsx
@@ -99,7 +99,7 @@ export default function NotificationSettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/privacy/page.tsx b/frontend/src/app/settings/privacy/page.tsx
index a57b7b53..c8adf011 100644
--- a/frontend/src/app/settings/privacy/page.tsx
+++ b/frontend/src/app/settings/privacy/page.tsx
@@ -99,7 +99,7 @@ export default function PrivacySettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/settings/theme/page.tsx b/frontend/src/app/settings/theme/page.tsx
index 6e3a4b61..21af9857 100644
--- a/frontend/src/app/settings/theme/page.tsx
+++ b/frontend/src/app/settings/theme/page.tsx
@@ -99,7 +99,7 @@ export default function ThemeSettingsPage() {
                   href={item.href}
                   className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                     item.active
-                      ? "bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                      ? "bg-primary/10 text-primary border border-primary/20"
                       : "hover:bg-muted text-foreground"
                   }`}
                 >
diff --git a/frontend/src/app/tournaments/[id]/page.tsx b/frontend/src/app/tournaments/[id]/page.tsx
index b73cb574..2a8cca9a 100644
--- a/frontend/src/app/tournaments/[id]/page.tsx
+++ b/frontend/src/app/tournaments/[id]/page.tsx
@@ -154,7 +154,7 @@ export default function TournamentDetailsPage() {
                 />
               </div>
 
-              <div className="rounded-[32px] border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
+              <div className="rounded-[32px] border border-border bg-white p-4 shadow-sm sm:p-6">
                 <div className="mb-6 flex flex-wrap items-start justify-between gap-4">
                   <div>
                     <p className="text-xs uppercase tracking-[0.35em] text-cyan-700/70">
@@ -192,7 +192,7 @@ export default function TournamentDetailsPage() {
 
         <div className="space-y-6">
           <JoinTournamentButton tournament={tournament} />
-          <div className="sticky top-24 rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
+          <div className="sticky top-24 rounded-[32px] border border-border bg-white p-6 shadow-sm">
             <h3 className="font-semibold text-foreground">Quick Stats</h3>
             <div className="mt-5 space-y-4">
               <SidebarRow
@@ -244,12 +244,12 @@ function HighlightCard({
   value: string;
 }) {
   return (
-    <div className="rounded-[28px] border border-slate-200 bg-[linear-gradient(135deg,_rgba(15,23,42,0.96),_rgba(30,41,59,0.92))] p-5 text-white shadow-[0_20px_60px_-45px_rgba(15,23,42,0.9)]">
+    <div className="rounded-[28px] border border-border bg-[linear-gradient(135deg,_rgba(15,23,42,0.96),_rgba(30,41,59,0.92))] p-5 text-white shadow-[0_20px_60px_-45px_rgba(15,23,42,0.9)]">
       <div className="flex items-center gap-2 text-sm font-semibold">
         {icon}
         {title}
       </div>
-      <p className="mt-3 text-sm leading-6 text-slate-300">{value}</p>
+      <p className="mt-3 text-sm leading-6 text-foreground/80">{value}</p>
     </div>
   );
 }
diff --git a/frontend/src/app/tournaments/create/page.tsx b/frontend/src/app/tournaments/create/page.tsx
index 5bfb5151..7aeeac48 100644
--- a/frontend/src/app/tournaments/create/page.tsx
+++ b/frontend/src/app/tournaments/create/page.tsx
@@ -262,10 +262,10 @@ export default function CreateTournamentPage() {
                       <div
                         className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${
                           isActive
-                            ? "border-blue-600 bg-blue-600 text-white"
+                            ? "border-blue-600 bg-primary/90 text-white"
                             : isCompleted
-                            ? "border-green-600 bg-green-600 text-white"
-                            : "border-gray-300 bg-background text-muted-foreground"
+                            ? "border-green-600 bg-success/90 text-white"
+                            : "border-border bg-background text-muted-foreground"
                         }`}
                       >
                         {isCompleted ? (
@@ -285,7 +285,7 @@ export default function CreateTournamentPage() {
                     {index < steps.length - 1 && (
                       <div
                         className={`flex-1 h-0.5 mx-2 transition-all ${
-                          isCompleted ? "bg-green-600" : "bg-gray-300"
+                          isCompleted ? "bg-success/90" : "bg-gray-300"
                         }`}
                       />
                     )}
@@ -324,7 +324,7 @@ export default function CreateTournamentPage() {
                 <CardContent className="space-y-6">
                   <div className="space-y-2">
                     <label htmlFor="name" className="text-sm font-medium">
-                      Tournament Name <span className="text-red-500">*</span>
+                      Tournament Name <span className="text-destructive">*</span>
                     </label>
                     <Input
                       id="name"
@@ -333,12 +333,12 @@ export default function CreateTournamentPage() {
                       onChange={(e) => handleFieldChange("name", e.target.value)}
                       error={!!errors.name}
                     />
-                    {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
+                    {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
                   </div>
 
                   <div className="space-y-2">
                     <label htmlFor="gameType" className="text-sm font-medium">
-                      Game <span className="text-red-500">*</span>
+                      Game <span className="text-destructive">*</span>
                     </label>
                     <select
                       id="gameType"
@@ -353,12 +353,12 @@ export default function CreateTournamentPage() {
                         </option>
                       ))}
                     </select>
-                    {errors.gameType && <p className="text-sm text-red-500">{errors.gameType}</p>}
+                    {errors.gameType && <p className="text-sm text-destructive">{errors.gameType}</p>}
                   </div>
 
                   <div className="space-y-2">
                     <label htmlFor="description" className="text-sm font-medium">
-                      Description <span className="text-red-500">*</span>
+                      Description <span className="text-destructive">*</span>
                     </label>
                     <textarea
                       id="description"
@@ -367,7 +367,7 @@ export default function CreateTournamentPage() {
                       value={formData.description}
                       onChange={(e) => handleFieldChange("description", e.target.value)}
                     />
-                    {errors.description && <p className="text-sm text-red-500">{errors.description}</p>}
+                    {errors.description && <p className="text-sm text-destructive">{errors.description}</p>}
                   </div>
                 </CardContent>
               </Card>
@@ -402,8 +402,8 @@ export default function CreateTournamentPage() {
                           onClick={() => handleFieldChange("tournamentType", type.value)}
                           className={`p-4 rounded-lg border-2 text-left transition-all ${
                             formData.tournamentType === type.value
-                              ? "border-blue-600 bg-blue-50 dark:bg-blue-950/20"
-                              : "border-gray-300 hover:border-gray-400"
+                              ? "border-blue-600 bg-info-muted dark:bg-info-muted/20"
+                              : "border-border hover:border-gray-400"
                           }`}
                         >
                           <div className="font-medium text-foreground">{type.label}</div>
@@ -415,7 +415,7 @@ export default function CreateTournamentPage() {
 
                   <div className="space-y-2">
                     <label htmlFor="matchFormat" className="text-sm font-medium">
-                      Match Format <span className="text-red-500">*</span>
+                      Match Format <span className="text-destructive">*</span>
                     </label>
                     <select
                       id="matchFormat"
@@ -429,12 +429,12 @@ export default function CreateTournamentPage() {
                         </option>
                       ))}
                     </select>
-                    {errors.matchFormat && <p className="text-sm text-red-500">{errors.matchFormat}</p>}
+                    {errors.matchFormat && <p className="text-sm text-destructive">{errors.matchFormat}</p>}
                   </div>
 
                   <div className="space-y-2">
                     <label htmlFor="rules" className="text-sm font-medium">
-                      Tournament Rules <span className="text-red-500">*</span>
+                      Tournament Rules <span className="text-destructive">*</span>
                     </label>
                     <textarea
                       id="rules"
@@ -443,7 +443,7 @@ export default function CreateTournamentPage() {
                       value={formData.rules}
                       onChange={(e) => handleFieldChange("rules", e.target.value)}
                     />
-                    {errors.rules && <p className="text-sm text-red-500">{errors.rules}</p>}
+                    {errors.rules && <p className="text-sm text-destructive">{errors.rules}</p>}
                   </div>
                 </CardContent>
               </Card>
@@ -484,7 +484,7 @@ export default function CreateTournamentPage() {
                         error={!!errors.entryFee}
                       />
                     </div>
-                    {errors.entryFee && <p className="text-sm text-red-500">{errors.entryFee}</p>}
+                    {errors.entryFee && <p className="text-sm text-destructive">{errors.entryFee}</p>}
                     <p className="text-xs text-muted-foreground">Set to 0 for free tournaments</p>
                   </div>
 
@@ -506,13 +506,13 @@ export default function CreateTournamentPage() {
                         error={!!errors.prizePool}
                       />
                     </div>
-                    {errors.prizePool && <p className="text-sm text-red-500">{errors.prizePool}</p>}
+                    {errors.prizePool && <p className="text-sm text-destructive">{errors.prizePool}</p>}
                   </div>
 
                   <div className="space-y-2">
                     <label htmlFor="prizeDistribution" className="text-sm font-medium">
                       Prize Distribution
-                      {formData.prizePool > 0 && <span className="text-red-500">*</span>}
+                      {formData.prizePool > 0 && <span className="text-destructive">*</span>}
                     </label>
                     <textarea
                       id="prizeDistribution"
@@ -521,7 +521,7 @@ export default function CreateTournamentPage() {
                       value={formData.prizeDistribution}
                       onChange={(e) => handleFieldChange("prizeDistribution", e.target.value)}
                     />
-                    {errors.prizeDistribution && <p className="text-sm text-red-500">{errors.prizeDistribution}</p>}
+                    {errors.prizeDistribution && <p className="text-sm text-destructive">{errors.prizeDistribution}</p>}
                   </div>
                 </CardContent>
               </Card>
@@ -562,7 +562,7 @@ export default function CreateTournamentPage() {
 
                   <div className="space-y-2">
                     <label htmlFor="maxParticipants" className="text-sm font-medium">
-                      Maximum Participants <span className="text-red-500">*</span>
+                      Maximum Participants <span className="text-destructive">*</span>
                     </label>
                     <div className="relative">
                       <Users className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -577,13 +577,13 @@ export default function CreateTournamentPage() {
                         error={!!errors.maxParticipants}
                       />
                     </div>
-                    {errors.maxParticipants && <p className="text-sm text-red-500">{errors.maxParticipants}</p>}
+                    {errors.maxParticipants && <p className="text-sm text-destructive">{errors.maxParticipants}</p>}
                   </div>
 
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="space-y-2">
                       <label htmlFor="registrationOpenDate" className="text-sm font-medium">
-                        Registration Opens <span className="text-red-500">*</span>
+                        Registration Opens <span className="text-destructive">*</span>
                       </label>
                       <Input
                         id="registrationOpenDate"
@@ -592,12 +592,12 @@ export default function CreateTournamentPage() {
                         onChange={(e) => handleFieldChange("registrationOpenDate", e.target.value)}
                         error={!!errors.registrationOpenDate}
                       />
-                      {errors.registrationOpenDate && <p className="text-sm text-red-500">{errors.registrationOpenDate}</p>}
+                      {errors.registrationOpenDate && <p className="text-sm text-destructive">{errors.registrationOpenDate}</p>}
                     </div>
 
                     <div className="space-y-2">
                       <label htmlFor="registrationCloseDate" className="text-sm font-medium">
-                        Registration Closes <span className="text-red-500">*</span>
+                        Registration Closes <span className="text-destructive">*</span>
                       </label>
                       <Input
                         id="registrationCloseDate"
@@ -606,14 +606,14 @@ export default function CreateTournamentPage() {
                         onChange={(e) => handleFieldChange("registrationCloseDate", e.target.value)}
                         error={!!errors.registrationCloseDate}
                       />
-                      {errors.registrationCloseDate && <p className="text-sm text-red-500">{errors.registrationCloseDate}</p>}
+                      {errors.registrationCloseDate && <p className="text-sm text-destructive">{errors.registrationCloseDate}</p>}
                     </div>
                   </div>
 
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="space-y-2">
                       <label htmlFor="startDate" className="text-sm font-medium">
-                        Tournament Start <span className="text-red-500">*</span>
+                        Tournament Start <span className="text-destructive">*</span>
                       </label>
                       <Input
                         id="startDate"
@@ -622,7 +622,7 @@ export default function CreateTournamentPage() {
                         onChange={(e) => handleFieldChange("startDate", e.target.value)}
                         error={!!errors.startDate}
                       />
-                      {errors.startDate && <p className="text-sm text-red-500">{errors.startDate}</p>}
+                      {errors.startDate && <p className="text-sm text-destructive">{errors.startDate}</p>}
                     </div>
 
                     <div className="space-y-2">
@@ -726,8 +726,8 @@ export default function CreateTournamentPage() {
             >
               <Card>
                 <CardContent className="pt-12 pb-12 text-center">
-                  <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-green-100 dark:bg-green-900 mb-6">
-                    <Check className="h-10 w-10 text-green-600 dark:text-green-400" />
+                  <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-success-muted dark:bg-success-muted mb-6">
+                    <Check className="h-10 w-10 text-success dark:text-success/80" />
                   </div>
                   <h2 className="text-2xl font-bold text-foreground mb-2">
                     Tournament Created!
diff --git a/frontend/src/components/achievements/AchievementCard.tsx b/frontend/src/components/achievements/AchievementCard.tsx
index f17c0c09..6b6570ba 100644
--- a/frontend/src/components/achievements/AchievementCard.tsx
+++ b/frontend/src/components/achievements/AchievementCard.tsx
@@ -28,7 +28,7 @@ export function AchievementCard({ achievement, showLink = true }: AchievementCar
     >
       {/* New badge */}
       {isNew && (
-        <span className="absolute top-2 right-2 rounded-full bg-green-500 px-2 py-0.5 text-xs font-bold text-white">
+        <span className="absolute top-2 right-2 rounded-full bg-success px-2 py-0.5 text-xs font-bold text-white">
           NEW
         </span>
       )}
diff --git a/frontend/src/components/achievements/AchievementDetails.tsx b/frontend/src/components/achievements/AchievementDetails.tsx
index e5adca5e..190342b4 100644
--- a/frontend/src/components/achievements/AchievementDetails.tsx
+++ b/frontend/src/components/achievements/AchievementDetails.tsx
@@ -50,7 +50,7 @@ export function AchievementDetails({ achievement }: AchievementDetailsProps) {
                   <h1 className="text-2xl font-bold">{achievement.title}</h1>
                   <RarityIndicator rarity={achievement.rarity} />
                   {achievement.unlocked && (
-                    <span className="rounded-full bg-green-100 dark:bg-green-900 px-2 py-0.5 text-xs font-semibold text-green-700 dark:text-green-300">
+                    <span className="rounded-full bg-success-muted dark:bg-success-muted px-2 py-0.5 text-xs font-semibold text-green-700 dark:text-green-300">
                       ✓ Unlocked
                     </span>
                   )}
@@ -92,7 +92,7 @@ export function AchievementDetails({ achievement }: AchievementDetailsProps) {
             <ul className="space-y-2">
               {achievement.requirements.map((req, i) => (
                 <li key={i} className="flex items-start gap-2 text-sm">
-                  <span className={achievement.unlocked ? 'text-green-500' : 'text-muted-foreground'}>
+                  <span className={achievement.unlocked ? 'text-success' : 'text-muted-foreground'}>
                     {achievement.unlocked ? '✓' : '○'}
                   </span>
                   <span>{req}</span>
diff --git a/frontend/src/components/achievements/ProgressBar.tsx b/frontend/src/components/achievements/ProgressBar.tsx
index 5f14c528..aa5a4106 100644
--- a/frontend/src/components/achievements/ProgressBar.tsx
+++ b/frontend/src/components/achievements/ProgressBar.tsx
@@ -24,7 +24,7 @@ export function ProgressBar({ value, max, className, showLabel = false, animated
           className={cn(
             'h-full rounded-full bg-primary transition-all duration-700 ease-out',
             animated && 'animate-in slide-in-from-left-full',
-            pct === 100 && 'bg-green-500'
+            pct === 100 && 'bg-success'
           )}
           style={{ width: `${pct}%` }}
           role="progressbar"
diff --git a/frontend/src/components/achievements/UnlockAnimation.tsx b/frontend/src/components/achievements/UnlockAnimation.tsx
index 315fa975..97406398 100644
--- a/frontend/src/components/achievements/UnlockAnimation.tsx
+++ b/frontend/src/components/achievements/UnlockAnimation.tsx
@@ -46,8 +46,8 @@ export function UnlockAnimation({ achievement, onClose }: UnlockAnimationProps)
           visible ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-75 translate-y-8',
           achievement.rarity === 'legendary' && 'border-yellow-400 shadow-yellow-400/30',
           achievement.rarity === 'epic' && 'border-purple-400 shadow-purple-400/30',
-          achievement.rarity === 'rare' && 'border-blue-400 shadow-blue-400/30',
-          achievement.rarity === 'common' && 'border-gray-300',
+          achievement.rarity === 'rare' && 'border-primary/70 shadow-blue-400/30',
+          achievement.rarity === 'common' && 'border-border',
         )}
       >
         {/* Sparkles for legendary/epic */}
diff --git a/frontend/src/components/auth/AuthLayout.tsx b/frontend/src/components/auth/AuthLayout.tsx
index d2a2fde4..4a5b96f9 100644
--- a/frontend/src/components/auth/AuthLayout.tsx
+++ b/frontend/src/components/auth/AuthLayout.tsx
@@ -21,7 +21,7 @@ export function AuthLayout({ children, title, subtitle, type }: AuthLayoutProps)
             <span className="text-2xl font-bold">ArenaX</span>
           </div>
           <h1 className="text-3xl font-bold mb-4">Competitive Gaming Platform</h1>
-          <p className="text-blue-100 text-lg">
+          <p className="text-info-muted-foreground text-lg">
             Join tournaments, compete for prizes, and climb the leaderboard
           </p>
         </div>
@@ -54,26 +54,26 @@ export function AuthLayout({ children, title, subtitle, type }: AuthLayoutProps)
             {type === 'login' ? (
               <>
                 Don&apos;t have an account?{' '}
-                <Link href="/auth/register" className="text-blue-600 hover:text-blue-700 font-medium">
+                <Link href="/auth/register" className="text-primary hover:text-info font-medium">
                   Sign up
                 </Link>
               </>
             ) : type === 'register' ? (
               <>
                 Already have an account?{' '}
-                <Link href="/auth/login" className="text-blue-600 hover:text-blue-700 font-medium">
+                <Link href="/auth/login" className="text-primary hover:text-info font-medium">
                   Sign in
                 </Link>
               </>
             ) : type === 'forgot-password' ? (
               <>
                 Remember your password?{' '}
-                <Link href="/auth/login" className="text-blue-600 hover:text-blue-700 font-medium">
+                <Link href="/auth/login" className="text-primary hover:text-info font-medium">
                   Sign in
                 </Link>
               </>
             ) : (
-              <Link href="/auth/login" className="text-blue-600 hover:text-blue-700 font-medium">
+              <Link href="/auth/login" className="text-primary hover:text-info font-medium">
                 Return to login
               </Link>
             )}
diff --git a/frontend/src/components/auth/EmailVerification.tsx b/frontend/src/components/auth/EmailVerification.tsx
index e882ef9f..364f6899 100644
--- a/frontend/src/components/auth/EmailVerification.tsx
+++ b/frontend/src/components/auth/EmailVerification.tsx
@@ -72,7 +72,7 @@ export function EmailVerification({ className }: EmailVerificationProps) {
   if (success) {
     return (
       <div className={cn('text-center py-8', className)}>
-        <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
+        <CheckCircle className="h-16 w-16 text-success mx-auto mb-4" />
         <h2 className="text-xl font-bold text-foreground mb-2">Email verified!</h2>
         <p className="text-muted-foreground mb-6">
           Your email has been successfully verified.
@@ -84,7 +84,7 @@ export function EmailVerification({ className }: EmailVerificationProps) {
   return (
     <div className={cn('space-y-6', className)}>
       <div className="text-center">
-        <Mail className="h-12 w-12 text-blue-500 mx-auto mb-4" />
+        <Mail className="h-12 w-12 text-primary mx-auto mb-4" />
         <p className="text-muted-foreground mb-2">
           We&apos;ve sent a verification code to your email
         </p>
@@ -109,7 +109,7 @@ export function EmailVerification({ className }: EmailVerificationProps) {
         </div>
         
         {error && (
-          <div className="flex gap-2 p-3 rounded-md bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-200">
+          <div className="flex gap-2 p-3 rounded-md bg-destructive/5 text-red-800 dark:bg-destructive/10/30 dark:text-red-200">
             <AlertCircle className="h-5 w-5 flex-shrink-0 mt-0.5" />
             <p className="text-sm">{error}</p>
           </div>
@@ -127,7 +127,7 @@ export function EmailVerification({ className }: EmailVerificationProps) {
             type="button"
             onClick={handleResend}
             disabled={resending}
-            className="text-blue-600 hover:text-blue-700 font-medium disabled:opacity-50"
+            className="text-primary hover:text-info font-medium disabled:opacity-50"
           >
             {resending ? 'Sending...' : 'Resend code'}
           </button>
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
index a19d99b7..46738355 100644
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -89,7 +89,7 @@ export function LoginForm({ className }: LoginFormProps) {
             aria-invalid={!!errors.email || !!error}
           />
           {errors.email && (
-            <p id="email-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="email-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.email}
             </p>
@@ -101,7 +101,7 @@ export function LoginForm({ className }: LoginFormProps) {
             <label htmlFor="password" className="block text-sm font-medium text-foreground">
               Password
             </label>
-            <Link href="/auth/forgot-password" className="text-sm text-blue-600 hover:text-blue-700 font-medium">
+            <Link href="/auth/forgot-password" className="text-sm text-primary hover:text-info font-medium">
               Forgot password?
             </Link>
           </div>
@@ -117,7 +117,7 @@ export function LoginForm({ className }: LoginFormProps) {
             aria-invalid={!!errors.password || !!error}
           />
           {errors.password && (
-            <p id="password-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="password-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.password}
             </p>
@@ -125,7 +125,7 @@ export function LoginForm({ className }: LoginFormProps) {
         </div>
         
         {error && (
-          <div className="flex gap-2 p-3 rounded-md bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-200">
+          <div className="flex gap-2 p-3 rounded-md bg-destructive/5 text-red-800 dark:bg-destructive/10/30 dark:text-red-200">
             <AlertCircle className="h-5 w-5 flex-shrink-0 mt-0.5" />
             <p className="text-sm">{error}</p>
           </div>
@@ -137,7 +137,7 @@ export function LoginForm({ className }: LoginFormProps) {
             type="checkbox"
             checked={formData.rememberMe}
             onChange={(e) => setFormData({ ...formData, rememberMe: e.target.checked })}
-            className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
           />
           <label htmlFor="remember-me" className="ml-2 block text-sm text-muted-foreground">
             Remember me
diff --git a/frontend/src/components/auth/PasswordResetForm.tsx b/frontend/src/components/auth/PasswordResetForm.tsx
index 317f8cd5..8a6760f1 100644
--- a/frontend/src/components/auth/PasswordResetForm.tsx
+++ b/frontend/src/components/auth/PasswordResetForm.tsx
@@ -58,7 +58,7 @@ export function PasswordResetForm({ className }: PasswordResetFormProps) {
   if (step === 'request' && success) {
     return (
       <div className={cn('text-center py-8', className)}>
-        <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
+        <CheckCircle className="h-16 w-16 text-success mx-auto mb-4" />
         <h2 className="text-xl font-bold text-foreground mb-2">Check your email</h2>
         <p className="text-muted-foreground mb-6">
           We&apos;ve sent a password reset link to <span className="font-medium">{email}</span>
@@ -67,7 +67,7 @@ export function PasswordResetForm({ className }: PasswordResetFormProps) {
           Didn&apos;t receive the email? Check your spam folder or{' '}
           <button
             onClick={() => setSuccess(false)}
-            className="text-blue-600 hover:text-blue-700 font-medium"
+            className="text-primary hover:text-info font-medium"
           >
             try again
           </button>
@@ -95,7 +95,7 @@ export function PasswordResetForm({ className }: PasswordResetFormProps) {
               aria-invalid={!!error}
             />
             {error && (
-              <p id="reset-email-error" className="flex items-center gap-1 text-xs text-red-500">
+              <p id="reset-email-error" className="flex items-center gap-1 text-xs text-destructive">
                 <AlertCircle className="h-3 w-3" aria-hidden="true" />
                 {error}
               </p>
@@ -138,7 +138,7 @@ export function PasswordResetForm({ className }: PasswordResetFormProps) {
               aria-invalid={!!error}
             />
             {error && (
-              <p id="confirm-new-password-error" className="flex items-center gap-1 text-xs text-red-500">
+              <p id="confirm-new-password-error" className="flex items-center gap-1 text-xs text-destructive">
                 <AlertCircle className="h-3 w-3" aria-hidden="true" />
                 {error}
               </p>
diff --git a/frontend/src/components/auth/PasswordStrengthIndicator.tsx b/frontend/src/components/auth/PasswordStrengthIndicator.tsx
index 6663104b..6935311f 100644
--- a/frontend/src/components/auth/PasswordStrengthIndicator.tsx
+++ b/frontend/src/components/auth/PasswordStrengthIndicator.tsx
@@ -22,17 +22,17 @@ export function PasswordStrengthIndicator({ password }: PasswordStrengthIndicato
   const getStrengthLabel = () => {
     switch (strength) {
       case 0: return '';
-      case 1: return { text: 'Very Weak', color: 'text-red-500' };
+      case 1: return { text: 'Very Weak', color: 'text-destructive' };
       case 2: return { text: 'Weak', color: 'text-orange-500' };
       case 3: return { text: 'Good', color: 'text-yellow-500' };
-      case 4: return { text: 'Strong', color: 'text-green-500' };
+      case 4: return { text: 'Strong', color: 'text-success' };
       default: return { text: '', color: '' };
     }
   };
 
   const getBarColors = () => {
-    const colors = ['bg-gray-200', 'bg-gray-200', 'bg-gray-200', 'bg-gray-200'];
-    const activeColor = strength === 1 ? 'bg-red-500' : strength === 2 ? 'bg-orange-500' : strength === 3 ? 'bg-yellow-500' : 'bg-green-500';
+    const colors = ['bg-muted', 'bg-muted', 'bg-muted', 'bg-muted'];
+    const activeColor = strength === 1 ? 'bg-destructive' : strength === 2 ? 'bg-orange-500' : strength === 3 ? 'bg-yellow-500' : 'bg-success';
     
     for (let i = 0; i < strength && i < colors.length; i++) {
       colors[i] = activeColor;
diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
index 772b4bd0..d6c19923 100644
--- a/frontend/src/components/auth/RegisterForm.tsx
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -102,7 +102,7 @@ export function RegisterForm({ className }: RegisterFormProps) {
             aria-invalid={!!errors.username}
           />
           {errors.username && (
-            <p id="username-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="username-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.username}
             </p>
@@ -125,7 +125,7 @@ export function RegisterForm({ className }: RegisterFormProps) {
             aria-invalid={!!errors.email || !!error}
           />
           {errors.email && (
-            <p id="register-email-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="register-email-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.email}
             </p>
@@ -149,7 +149,7 @@ export function RegisterForm({ className }: RegisterFormProps) {
           />
           <PasswordStrengthIndicator password={formData.password} />
           {errors.password && (
-            <p id="register-password-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="register-password-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.password}
             </p>
@@ -172,7 +172,7 @@ export function RegisterForm({ className }: RegisterFormProps) {
             aria-invalid={!!errors.confirmPassword}
           />
           {errors.confirmPassword && (
-            <p id="confirm-password-error" className="flex items-center gap-1 text-xs text-red-500">
+            <p id="confirm-password-error" className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" aria-hidden="true" />
               {errors.confirmPassword}
             </p>
@@ -180,7 +180,7 @@ export function RegisterForm({ className }: RegisterFormProps) {
         </div>
         
         {error && (
-          <div className="flex gap-2 p-3 rounded-md bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-200">
+          <div className="flex gap-2 p-3 rounded-md bg-destructive/5 text-red-800 dark:bg-destructive/10/30 dark:text-red-200">
             <AlertCircle className="h-5 w-5 flex-shrink-0 mt-0.5" />
             <p className="text-sm">{error}</p>
           </div>
@@ -193,22 +193,22 @@ export function RegisterForm({ className }: RegisterFormProps) {
               type="checkbox"
               checked={formData.agreeToTerms}
               onChange={(e) => setFormData({ ...formData, agreeToTerms: e.target.checked })}
-              className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
             />
           </div>
           <div className="ml-2 text-sm">
             <label htmlFor="agree-terms" className="text-muted-foreground">
               I agree to the{' '}
-              <a href="/terms" className="text-blue-600 hover:text-blue-700 font-medium">
+              <a href="/terms" className="text-primary hover:text-info font-medium">
                 Terms of Service
               </a>{' '}
               and{' '}
-              <a href="/privacy" className="text-blue-600 hover:text-blue-700 font-medium">
+              <a href="/privacy" className="text-primary hover:text-info font-medium">
                 Privacy Policy
               </a>
             </label>
             {errors.agreeToTerms && (
-              <p className="flex items-center gap-1 mt-1 text-xs text-red-500">
+              <p className="flex items-center gap-1 mt-1 text-xs text-destructive">
                 <AlertCircle className="h-3 w-3" />
                 {errors.agreeToTerms}
               </p>
diff --git a/frontend/src/components/auth/SocialLogin.tsx b/frontend/src/components/auth/SocialLogin.tsx
index 2ebc32a9..06207649 100644
--- a/frontend/src/components/auth/SocialLogin.tsx
+++ b/frontend/src/components/auth/SocialLogin.tsx
@@ -14,7 +14,7 @@ export function SocialLogin({ className }: SocialLoginProps) {
     <div className={className}>
       <div className="relative mb-6">
         <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-gray-300" />
+          <div className="w-full border-t border-border" />
         </div>
         <div className="relative flex justify-center text-sm">
           <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
diff --git a/frontend/src/components/bracket/BracketMatchModal.tsx b/frontend/src/components/bracket/BracketMatchModal.tsx
index 27737bc5..b1e6f2aa 100644
--- a/frontend/src/components/bracket/BracketMatchModal.tsx
+++ b/frontend/src/components/bracket/BracketMatchModal.tsx
@@ -52,14 +52,14 @@ export function BracketMatchModal({
             <h2 className="mt-1 text-2xl font-semibold">
               {match.label ?? `Match ${match.matchNumber}`}
             </h2>
-            <p className="text-sm text-slate-400">
+            <p className="text-sm text-muted-foreground">
               {match.roundLabel ?? `Round ${match.round}`}
             </p>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-full border border-white/10 p-2 text-slate-300 transition hover:border-white/30 hover:text-white"
+            className="rounded-full border border-white/10 p-2 text-foreground/80 transition hover:border-white/30 hover:text-white"
             aria-label="Close match details"
           >
             <X className="h-5 w-5" />
@@ -76,7 +76,7 @@ export function BracketMatchModal({
                   {match.status.replace("_", " ")}
                 </span>
                 {typeof match.bestOf === "number" && (
-                  <span className="rounded-full border border-white/10 px-3 py-1 text-xs text-slate-300">
+                  <span className="rounded-full border border-white/10 px-3 py-1 text-xs text-foreground/80">
                     Best of {match.bestOf}
                   </span>
                 )}
@@ -105,7 +105,7 @@ export function BracketMatchModal({
                       <div className="flex items-center justify-between gap-4">
                         <div className="flex items-center gap-3">
                           <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/5">
-                            <User className="h-5 w-5 text-slate-300" />
+                            <User className="h-5 w-5 text-foreground/80" />
                           </div>
                           <div>
                             <div className="flex items-center gap-2">
@@ -121,7 +121,7 @@ export function BracketMatchModal({
                                 <ShieldCheck className="h-4 w-4 text-emerald-300" />
                               )}
                             </div>
-                            <p className="text-sm text-slate-400">
+                            <p className="text-sm text-muted-foreground">
                               {player
                                 ? `Seed ${player.seed ?? "-"} | ${player.region ?? "Global"} | ELO ${player.elo}`
                                 : "Awaiting previous match result"}
@@ -130,7 +130,7 @@ export function BracketMatchModal({
                         </div>
                         <div className="text-right">
                           <div className="text-3xl font-semibold">{score}</div>
-                          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
+                          <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                             Series
                           </p>
                         </div>
@@ -143,7 +143,7 @@ export function BracketMatchModal({
                               key={`${player.id}-${stat.label}`}
                               className="rounded-xl border border-white/8 bg-black/10 px-3 py-2"
                             >
-                              <p className="text-[11px] uppercase tracking-[0.2em] text-slate-500">
+                              <p className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
                                 {stat.label}
                               </p>
                               <p className="mt-1 text-sm font-medium text-slate-100">
@@ -161,11 +161,11 @@ export function BracketMatchModal({
 
             <div className="space-y-4">
               <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
-                <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-slate-300">
+                <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-foreground/80">
                   <Clock3 className="h-4 w-4 text-cyan-300" />
                   Schedule
                 </h3>
-                <div className="mt-4 space-y-3 text-sm text-slate-300">
+                <div className="mt-4 space-y-3 text-sm text-foreground/80">
                   <p>{match.scheduledTime ? formatDate(match.scheduledTime) : "TBD"}</p>
                   <p>{match.venue ?? "ArenaX Digital Stage"}</p>
                   {match.streamTitle ? <p>{match.streamTitle}</p> : null}
@@ -173,11 +173,11 @@ export function BracketMatchModal({
               </div>
 
               <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
-                <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-slate-300">
+                <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-foreground/80">
                   <Activity className="h-4 w-4 text-fuchsia-300" />
                   Match Notes
                 </h3>
-                <p className="mt-4 text-sm leading-6 text-slate-300">
+                <p className="mt-4 text-sm leading-6 text-foreground/80">
                   {match.notes ?? "No additional notes posted for this match yet."}
                 </p>
                 {match.conflictReason ? (
@@ -195,7 +195,7 @@ export function BracketMatchModal({
 
           <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
             <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
-              <h3 className="text-sm font-semibold uppercase tracking-[0.25em] text-slate-300">
+              <h3 className="text-sm font-semibold uppercase tracking-[0.25em] text-foreground/80">
                 Score Reports
               </h3>
               <div className="mt-4 space-y-3">
@@ -208,7 +208,7 @@ export function BracketMatchModal({
                       <div className="flex items-center justify-between gap-3">
                         <div>
                           <p className="font-medium text-slate-100">{report.reporterName}</p>
-                          <p className="text-xs text-slate-500">
+                          <p className="text-xs text-muted-foreground">
                             {formatDate(report.submittedAt)}
                           </p>
                         </div>
@@ -219,7 +219,7 @@ export function BracketMatchModal({
                     </div>
                   ))
                 ) : (
-                  <p className="text-sm text-slate-400">
+                  <p className="text-sm text-muted-foreground">
                     No score submissions recorded yet.
                   </p>
                 )}
@@ -227,7 +227,7 @@ export function BracketMatchModal({
             </div>
 
             <div className="rounded-2xl border border-white/10 bg-white/5 p-5">
-              <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-slate-300">
+              <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.25em] text-foreground/80">
                 <Medal className="h-4 w-4 text-amber-300" />
                 Prize Breakdown
               </h3>
@@ -242,7 +242,7 @@ export function BracketMatchModal({
                         <p className="font-medium text-slate-100">
                           {prize.label ?? `Top ${prize.position}`}
                         </p>
-                        <p className="text-xs text-slate-500">
+                        <p className="text-xs text-muted-foreground">
                           Position {prize.position}
                         </p>
                       </div>
@@ -252,12 +252,12 @@ export function BracketMatchModal({
                             ? `$${prize.amount.toLocaleString()}`
                             : `${prize.percentage}%`}
                         </p>
-                        <p className="text-xs text-slate-500">{prize.percentage}% share</p>
+                        <p className="text-xs text-muted-foreground">{prize.percentage}% share</p>
                       </div>
                     </div>
                   ))
                 ) : (
-                  <div className="rounded-2xl border border-dashed border-white/10 px-4 py-6 text-center text-sm text-slate-400">
+                  <div className="rounded-2xl border border-dashed border-white/10 px-4 py-6 text-center text-sm text-muted-foreground">
                     Prize tiers will appear once the event payout rules are published.
                   </div>
                 )}
diff --git a/frontend/src/components/bracket/SingleEliminationBracket.tsx b/frontend/src/components/bracket/SingleEliminationBracket.tsx
index 2e84a4a3..b89e2a90 100644
--- a/frontend/src/components/bracket/SingleEliminationBracket.tsx
+++ b/frontend/src/components/bracket/SingleEliminationBracket.tsx
@@ -61,7 +61,7 @@ export function SingleEliminationBracket({
   return (
     <div className="space-y-8">
       <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_300px]">
-        <div className="rounded-[28px] border border-slate-200/80 bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.12),_transparent_28%),linear-gradient(135deg,_rgba(15,23,42,0.98),_rgba(30,41,59,0.96))] p-4 text-white shadow-[0_30px_80px_-45px_rgba(14,165,233,0.65)] sm:p-6">
+        <div className="rounded-[28px] border border-border/80 bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.12),_transparent_28%),linear-gradient(135deg,_rgba(15,23,42,0.98),_rgba(30,41,59,0.96))] p-4 text-white shadow-[0_30px_80px_-45px_rgba(14,165,233,0.65)] sm:p-6">
           <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
             <div>
               <p className="text-xs uppercase tracking-[0.35em] text-cyan-200/70">
@@ -72,7 +72,7 @@ export function SingleEliminationBracket({
                   ? "Interactive Double Elimination View"
                   : "Interactive Single Elimination View"}
               </h3>
-              <p className="mt-2 max-w-2xl text-sm text-slate-300">
+              <p className="mt-2 max-w-2xl text-sm text-foreground/80">
                 Live-active matches glow, user paths are accented, and every node opens richer match intelligence.
               </p>
             </div>
@@ -96,8 +96,8 @@ export function SingleEliminationBracket({
         </div>
 
         <aside className="space-y-4">
-          <div className="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm">
-            <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+          <div className="rounded-[28px] border border-border bg-white p-5 shadow-sm">
+            <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
               <Eye className="h-4 w-4 text-cyan-600" />
               ArenaX View State
             </div>
@@ -121,8 +121,8 @@ export function SingleEliminationBracket({
             </div>
           </div>
 
-          <div className="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm">
-            <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
+          <div className="rounded-[28px] border border-border bg-white p-5 shadow-sm">
+            <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
               <Trophy className="h-4 w-4 text-amber-500" />
               Prize Distribution
             </div>
@@ -130,23 +130,23 @@ export function SingleEliminationBracket({
               {processedBracketData.prizeDistribution.map((prize) => (
                 <div
                   key={prize.position}
-                  className="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3"
+                  className="flex items-center justify-between rounded-2xl border border-border bg-slate-50 px-4 py-3"
                 >
                   <div>
-                    <p className="font-medium text-slate-900">
+                    <p className="font-medium text-foreground">
                       {prize.label ?? `Top ${prize.position}`}
                     </p>
-                    <p className="text-xs text-slate-500">
+                    <p className="text-xs text-muted-foreground">
                       Position {prize.position}
                     </p>
                   </div>
                   <div className="text-right">
-                    <p className="font-semibold text-slate-900">
+                    <p className="font-semibold text-foreground">
                       {prize.amount !== undefined
                         ? `$${prize.amount.toLocaleString()}`
                         : `${prize.percentage}%`}
                     </p>
-                    <p className="text-xs text-slate-500">{prize.percentage}%</p>
+                    <p className="text-xs text-muted-foreground">{prize.percentage}%</p>
                   </div>
                 </div>
               ))}
@@ -187,7 +187,7 @@ function BracketSectionBoard({
       <div className="mb-4 flex items-center justify-between gap-3">
         <div>
           <h4 className="text-lg font-semibold text-white">{section.title}</h4>
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-muted-foreground">
             {section.type === "losers"
               ? "Elimination pressure and comeback routes."
               : section.type === "finals"
@@ -254,13 +254,13 @@ function BracketSectionBoard({
           >
             <div className="mb-4 flex items-center justify-between">
               <div>
-                <p className="text-xs uppercase tracking-[0.25em] text-slate-400">
+                <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
                   {round.shortLabel ?? `R${round.roundNumber}`}
                 </p>
                 <h5 className="text-sm font-semibold text-white">{round.roundName}</h5>
               </div>
               {roundIndex < section.rounds.length - 1 ? (
-                <ChevronRight className="h-4 w-4 text-slate-500" />
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
               ) : null}
             </div>
 
@@ -316,10 +316,10 @@ function MatchCard({
       >
         <div className="mb-3 flex items-center justify-between gap-3">
           <div>
-            <p className="text-xs uppercase tracking-[0.25em] text-slate-400">
+            <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
               {match.label ?? `Match ${match.matchNumber}`}
             </p>
-            <p className="text-xs text-slate-500">
+            <p className="text-xs text-muted-foreground">
               {match.roundLabel ?? `Round ${match.round}`}
             </p>
           </div>
@@ -337,7 +337,7 @@ function MatchCard({
           winnerId={match.winnerId}
         />
 
-        <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-slate-400">
+        <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
           {match.scheduledTime ? (
             <span className="inline-flex items-center gap-1">
               <Clock3 className="h-3.5 w-3.5" />
@@ -345,7 +345,7 @@ function MatchCard({
             </span>
           ) : null}
           {match.streamTitle ? (
-            <span className="rounded-full border border-white/10 px-2 py-1 text-[10px] text-slate-300">
+            <span className="rounded-full border border-white/10 px-2 py-1 text-[10px] text-foreground/80">
               Stream
             </span>
           ) : null}
@@ -366,7 +366,7 @@ function MatchCard({
           <p className="mt-3 font-medium text-white">
             {match.player1?.username ?? "TBD"} vs {match.player2?.username ?? "TBD"}
           </p>
-          <p className="mt-2 text-xs leading-5 text-slate-400">
+          <p className="mt-2 text-xs leading-5 text-muted-foreground">
             {match.notes ?? "Open full details for player stats, reports, and payout context."}
           </p>
           {match.conflictReason ? (
@@ -400,13 +400,13 @@ function PlayerRow({
     >
       <div className="flex min-w-0 items-center gap-2">
         <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-white/5">
-          <User className="h-4 w-4 text-slate-400" />
+          <User className="h-4 w-4 text-muted-foreground" />
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-medium text-white">
             {player?.username ?? "Awaiting Result"}
           </p>
-          <p className="text-xs text-slate-500">
+          <p className="text-xs text-muted-foreground">
             {player
               ? `Seed ${player.seed ?? "-"} | ${player.record ?? `ELO ${player.elo}`}`
               : "Bracket slot pending"}
@@ -462,9 +462,9 @@ function LegendPill({
 
 function StatCard({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
-      <p className="text-xs uppercase tracking-[0.25em] text-slate-500">{label}</p>
-      <p className="mt-2 text-lg font-semibold text-slate-900">{value}</p>
+    <div className="rounded-2xl border border-border bg-slate-50 px-4 py-3">
+      <p className="text-xs uppercase tracking-[0.25em] text-muted-foreground">{label}</p>
+      <p className="mt-2 text-lg font-semibold text-foreground">{value}</p>
     </div>
   );
 }
diff --git a/frontend/src/components/dashboard/FriendsList.tsx b/frontend/src/components/dashboard/FriendsList.tsx
index 95954272..6253d27a 100644
--- a/frontend/src/components/dashboard/FriendsList.tsx
+++ b/frontend/src/components/dashboard/FriendsList.tsx
@@ -21,7 +21,7 @@ const mockFriends: Friend[] = [
 ];
 
 const statusConfig = {
-  online: { label: "Online", color: "bg-green-500" },
+  online: { label: "Online", color: "bg-success" },
   "in-game": { label: "In Game", color: "bg-yellow-500" },
   offline: { label: "Offline", color: "bg-muted-foreground" },
 };
diff --git a/frontend/src/components/dashboard/NewsFeed.tsx b/frontend/src/components/dashboard/NewsFeed.tsx
index 4cff9c92..25e9a61b 100644
--- a/frontend/src/components/dashboard/NewsFeed.tsx
+++ b/frontend/src/components/dashboard/NewsFeed.tsx
@@ -23,7 +23,7 @@ const mockNews: NewsItem[] = [
 const tagColors: Record<string, string> = {
   Season: "bg-purple-500/10 text-purple-500",
   Tournament: "bg-yellow-500/10 text-yellow-600",
-  Update: "bg-blue-500/10 text-blue-500",
+  Update: "bg-primary/10 text-primary",
   Notice: "bg-muted text-muted-foreground",
 };
 
diff --git a/frontend/src/components/dashboard/QuickPlay.tsx b/frontend/src/components/dashboard/QuickPlay.tsx
index d4b33169..c523efef 100644
--- a/frontend/src/components/dashboard/QuickPlay.tsx
+++ b/frontend/src/components/dashboard/QuickPlay.tsx
@@ -5,9 +5,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 
 const gameModes = [
-  { label: "Quick Match", description: "Jump into a ranked 1v1", href: "/tournaments", icon: "⚡", color: "bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/20" },
+  { label: "Quick Match", description: "Jump into a ranked 1v1", href: "/tournaments", icon: "⚡", color: "bg-primary/10 hover:bg-primary/20 border-primary/20" },
   { label: "Tournament", description: "Browse open tournaments", href: "/tournaments", icon: "🏆", color: "bg-yellow-500/10 hover:bg-yellow-500/20 border-yellow-500/20" },
-  { label: "Practice", description: "Unranked casual match", href: "/tournaments", icon: "🎮", color: "bg-green-500/10 hover:bg-green-500/20 border-green-500/20" },
+  { label: "Practice", description: "Unranked casual match", href: "/tournaments", icon: "🎮", color: "bg-success/10 hover:bg-success/20 border-green-500/20" },
 ];
 
 export function QuickPlay() {
diff --git a/frontend/src/components/dashboard/RecentGames.tsx b/frontend/src/components/dashboard/RecentGames.tsx
index b25fda41..ece47fcc 100644
--- a/frontend/src/components/dashboard/RecentGames.tsx
+++ b/frontend/src/components/dashboard/RecentGames.tsx
@@ -37,7 +37,7 @@ export function RecentGames({ matches, currentUserId }: RecentGamesProps) {
                 <span
                   className={cn(
                     "text-xs font-bold uppercase w-8 text-center py-1 rounded",
-                    isWin ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
+                    isWin ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
                   )}
                 >
                   {isWin ? "W" : "L"}
diff --git a/frontend/src/components/dashboard/StatsOverview.tsx b/frontend/src/components/dashboard/StatsOverview.tsx
index 1f5640bf..34c8f6d9 100644
--- a/frontend/src/components/dashboard/StatsOverview.tsx
+++ b/frontend/src/components/dashboard/StatsOverview.tsx
@@ -40,13 +40,13 @@ export function StatsOverview({ elo, wins, losses, winRate, rank, streak }: Stat
       value: `${winRate}%`,
       change: 2.5,
       icon: <Target className="h-5 w-5" />,
-      accent: "text-green-500",
+      accent: "text-success",
     },
     {
       label: "W / L",
       value: `${wins} / ${losses}`,
       icon: <Swords className="h-5 w-5" />,
-      accent: "text-blue-500",
+      accent: "text-primary",
     },
   ];
 
@@ -63,7 +63,7 @@ export function StatsOverview({ elo, wins, losses, winRate, rank, streak }: Stat
             </div>
             <p className="text-2xl font-black tracking-tight">{stat.value}</p>
             {stat.change !== undefined && (
-              <p className={`text-xs mt-1 flex items-center gap-1 ${stat.change >= 0 ? "text-green-500" : "text-red-500"}`}>
+              <p className={`text-xs mt-1 flex items-center gap-1 ${stat.change >= 0 ? "text-success" : "text-destructive"}`}>
                 {stat.change >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                 {stat.change >= 0 ? "+" : ""}{stat.change} this week
               </p>
diff --git a/frontend/src/components/game/ChatPanel.tsx b/frontend/src/components/game/ChatPanel.tsx
index 1b93c134..31959386 100644
--- a/frontend/src/components/game/ChatPanel.tsx
+++ b/frontend/src/components/game/ChatPanel.tsx
@@ -5,12 +5,12 @@ export default function ChatPanel({ roomId }: { roomId: string }) {
     <div className="bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 p-6">
       <h3 className="text-xl font-bold text-white mb-4">Chat</h3>
       <div className="h-64 overflow-y-auto mb-4 space-y-2">
-        <p className="text-gray-400 text-sm">Chat messages will appear here...</p>
+        <p className="text-muted-foreground text-sm">Chat messages will appear here...</p>
       </div>
       <input
         type="text"
         placeholder="Type a message..."
-        className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500"
+        className="w-full px-4 py-2 bg-surface/50 border border-border rounded-lg text-white placeholder-gray-500"
       />
     </div>
   );
diff --git a/frontend/src/components/game/CountdownTimer.tsx b/frontend/src/components/game/CountdownTimer.tsx
index 7009ca19..744464f0 100644
--- a/frontend/src/components/game/CountdownTimer.tsx
+++ b/frontend/src/components/game/CountdownTimer.tsx
@@ -29,7 +29,7 @@ export default function CountdownTimer({ seconds, onComplete }: CountdownTimerPr
         <div className="text-9xl font-bold text-white mb-8 animate-pulse">
           {timeLeft}
         </div>
-        <p className="text-2xl text-gray-300">Game Starting...</p>
+        <p className="text-2xl text-foreground/80">Game Starting...</p>
       </div>
     </div>
   );
diff --git a/frontend/src/components/game/GameModeSelector.tsx b/frontend/src/components/game/GameModeSelector.tsx
index 6e3249bf..9967e039 100644
--- a/frontend/src/components/game/GameModeSelector.tsx
+++ b/frontend/src/components/game/GameModeSelector.tsx
@@ -94,13 +94,13 @@ export default function GameModeSelector({ onSelect, selectedMode }: GameModeSel
             }
           `}
         >
-          <div className="bg-gradient-to-br from-gray-800 to-gray-900 p-6 border border-gray-700 h-full">
+          <div className="bg-gradient-to-br from-gray-800 to-gray-900 p-6 border border-border h-full">
             <div className="text-5xl mb-4">{mode.icon}</div>
             <h3 className="text-2xl font-bold text-white mb-2">{mode.name}</h3>
-            <p className="text-gray-400 mb-4">{mode.description}</p>
+            <p className="text-muted-foreground mb-4">{mode.description}</p>
             
             <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-300 bg-gray-700 px-3 py-1 rounded-full">
+              <span className="text-foreground/80 bg-surface-raised px-3 py-1 rounded-full">
                 {mode.players}
               </span>
               <span className="text-purple-400 font-semibold">
diff --git a/frontend/src/components/game/GameSettings.tsx b/frontend/src/components/game/GameSettings.tsx
index ce930f8b..69d0bedb 100644
--- a/frontend/src/components/game/GameSettings.tsx
+++ b/frontend/src/components/game/GameSettings.tsx
@@ -14,12 +14,12 @@ export default function GameSettings() {
       <h3 className="text-xl font-bold text-white mb-4">Game Settings</h3>
       <div className="space-y-4">
         <div>
-          <label htmlFor="difficulty" className="block text-gray-300 text-sm mb-2">Difficulty</label>
+          <label htmlFor="difficulty" className="block text-foreground/80 text-sm mb-2">Difficulty</label>
           <select
             id="difficulty"
             value={settings.difficulty}
             onChange={(e) => setSettings({ ...settings, difficulty: e.target.value })}
-            className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white"
+            className="w-full px-4 py-2 bg-surface/50 border border-border rounded-lg text-white"
           >
             <option value="easy">Easy</option>
             <option value="medium">Medium</option>
@@ -27,12 +27,12 @@ export default function GameSettings() {
           </select>
         </div>
         <div>
-          <label htmlFor="map" className="block text-gray-300 text-sm mb-2">Map</label>
+          <label htmlFor="map" className="block text-foreground/80 text-sm mb-2">Map</label>
           <select
             id="map"
             value={settings.map}
             onChange={(e) => setSettings({ ...settings, map: e.target.value })}
-            className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white"
+            className="w-full px-4 py-2 bg-surface/50 border border-border rounded-lg text-white"
           >
             <option value="default">Default</option>
             <option value="arena">Arena</option>
diff --git a/frontend/src/components/game/MatchmakingQueue.tsx b/frontend/src/components/game/MatchmakingQueue.tsx
index c4164389..039d2435 100644
--- a/frontend/src/components/game/MatchmakingQueue.tsx
+++ b/frontend/src/components/game/MatchmakingQueue.tsx
@@ -53,30 +53,30 @@ export default function MatchmakingQueue({ gameMode, onCancel, onMatchFound }: M
             Finding Opponents...
           </h2>
           
-          <p className="text-gray-300 mb-6">
+          <p className="text-foreground/80 mb-6">
             Game Mode: <span className="text-purple-400 font-semibold">{gameMode}</span>
           </p>
 
-          <div className="bg-gray-800/50 rounded-xl p-6 mb-6">
+          <div className="bg-surface/50 rounded-xl p-6 mb-6">
             <div className="text-5xl font-mono font-bold text-white mb-2">
               {formatTime(waitTime)}
             </div>
-            <p className="text-gray-400 text-sm">Wait Time</p>
+            <p className="text-muted-foreground text-sm">Wait Time</p>
           </div>
 
           <div className="grid grid-cols-2 gap-4 mb-8">
-            <div className="bg-gray-800/50 rounded-lg p-4">
+            <div className="bg-surface/50 rounded-lg p-4">
               <div className="text-2xl font-bold text-purple-400">{playerCount}</div>
-              <div className="text-gray-400 text-xs">Players Found</div>
+              <div className="text-muted-foreground text-xs">Players Found</div>
             </div>
-            <div className="bg-gray-800/50 rounded-lg p-4">
-              <div className="text-2xl font-bold text-green-400">~{estimatedTime - waitTime}s</div>
-              <div className="text-gray-400 text-xs">Estimated</div>
+            <div className="bg-surface/50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-success/80">~{estimatedTime - waitTime}s</div>
+              <div className="text-muted-foreground text-xs">Estimated</div>
             </div>
           </div>
 
           <div className="space-y-3">
-            <div className="w-full bg-gray-700 rounded-full h-2">
+            <div className="w-full bg-surface-raised rounded-full h-2">
               <div 
                 className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-1000"
                 style={{ width: `${Math.min((waitTime / estimatedTime) * 100, 100)}%` }}
@@ -85,7 +85,7 @@ export default function MatchmakingQueue({ gameMode, onCancel, onMatchFound }: M
             
             <button
               onClick={onCancel}
-              className="w-full px-6 py-3 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-colors duration-200 border border-red-500/30"
+              className="w-full px-6 py-3 bg-destructive/20 hover:bg-destructive/30 text-destructive/80 rounded-lg transition-colors duration-200 border border-red-500/30"
             >
               Cancel Matchmaking
             </button>
diff --git a/frontend/src/components/game/PartyManager.tsx b/frontend/src/components/game/PartyManager.tsx
index c738e8eb..d67c8999 100644
--- a/frontend/src/components/game/PartyManager.tsx
+++ b/frontend/src/components/game/PartyManager.tsx
@@ -42,7 +42,7 @@ export default function PartyManager({
         <div>
           <h3 className="text-2xl font-bold text-white">Party</h3>
           {partyId && (
-            <p className="text-sm text-gray-400">ID: {partyId}</p>
+            <p className="text-sm text-muted-foreground">ID: {partyId}</p>
           )}
         </div>
         <div className="text-purple-400 font-semibold">
@@ -54,7 +54,7 @@ export default function PartyManager({
         {players.map((player) => (
           <div
             key={player.id}
-            className="flex items-center justify-between bg-gray-800/50 rounded-lg p-4"
+            className="flex items-center justify-between bg-surface/50 rounded-lg p-4"
           >
             <div className="flex items-center gap-3">
               <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
@@ -73,13 +73,13 @@ export default function PartyManager({
             <div className="flex items-center gap-2">
               <div
                 className={`w-3 h-3 rounded-full ${
-                  player.isReady ? 'bg-green-500' : 'bg-gray-500'
+                  player.isReady ? 'bg-success' : 'bg-gray-500'
                 }`}
               />
               {isHost && player.id !== currentUserId && (
                 <button
                   onClick={() => onKick?.(player.id)}
-                  className="text-red-400 hover:text-red-300 text-sm"
+                  className="text-destructive/80 hover:text-red-300 text-sm"
                 >
                   Kick
                 </button>
@@ -99,7 +99,7 @@ export default function PartyManager({
         </button>
         <button
           onClick={onLeave}
-          className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-colors border border-red-500/30"
+          className="px-4 py-2 bg-destructive/20 hover:bg-destructive/30 text-destructive/80 rounded-lg transition-colors border border-red-500/30"
         >
           Leave Party
         </button>
diff --git a/frontend/src/components/game/PlayerList.tsx b/frontend/src/components/game/PlayerList.tsx
index 1ceef0e4..8d456bdc 100644
--- a/frontend/src/components/game/PlayerList.tsx
+++ b/frontend/src/components/game/PlayerList.tsx
@@ -6,12 +6,12 @@ export default function PlayerList({ players }: { players: any[] }) {
       <h3 className="text-xl font-bold text-white mb-4">Players</h3>
       <div className="space-y-2">
         {players.map((player) => (
-          <div key={player.id} className="flex items-center justify-between bg-gray-800/50 rounded-lg p-3">
+          <div key={player.id} className="flex items-center justify-between bg-surface/50 rounded-lg p-3">
             <div className="flex items-center gap-3">
               <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500" />
               <span className="text-white">{player.username}</span>
             </div>
-            <div className={`w-2 h-2 rounded-full ${player.isReady ? 'bg-green-500' : 'bg-gray-500'}`} />
+            <div className={`w-2 h-2 rounded-full ${player.isReady ? 'bg-success' : 'bg-gray-500'}`} />
           </div>
         ))}
       </div>
diff --git a/frontend/src/components/leaderboard/CategorySelector.tsx b/frontend/src/components/leaderboard/CategorySelector.tsx
index 59583bd2..5df0ac8f 100644
--- a/frontend/src/components/leaderboard/CategorySelector.tsx
+++ b/frontend/src/components/leaderboard/CategorySelector.tsx
@@ -32,8 +32,8 @@ export const CategorySelector: React.FC<CategorySelectorProps> = ({
   onChange,
 }) => {
   return (
-    <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-      <h3 className="text-sm font-semibold text-gray-300 mb-3">Category</h3>
+    <div className="bg-surface/50 rounded-lg p-4 border border-border">
+      <h3 className="text-sm font-semibold text-foreground/80 mb-3">Category</h3>
       <div className="flex gap-2">
         {categories.map((cat) => (
           <button
@@ -41,8 +41,8 @@ export const CategorySelector: React.FC<CategorySelectorProps> = ({
             onClick={() => onChange(cat.id)}
             className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
               category === cat.id
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                ? 'bg-primary/90 text-white'
+                : 'bg-surface-raised text-foreground/80 hover:bg-gray-600'
             }`}
             title={cat.description}
           >
diff --git a/frontend/src/components/leaderboard/LeaderboardFilters.tsx b/frontend/src/components/leaderboard/LeaderboardFilters.tsx
index a660255f..2ba2a256 100644
--- a/frontend/src/components/leaderboard/LeaderboardFilters.tsx
+++ b/frontend/src/components/leaderboard/LeaderboardFilters.tsx
@@ -46,18 +46,18 @@ export const LeaderboardFilters: React.FC<LeaderboardFiltersProps> = ({
     <div className="space-y-4">
       {/* Search Bar */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
         <input
           type="text"
           placeholder="Search players..."
           value={searchQuery}
           onChange={(e) => handleSearch(e.target.value)}
-          className="w-full pl-10 pr-10 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+          className="w-full pl-10 pr-10 py-2 bg-surface border border-border rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-primary"
         />
         {searchQuery && (
           <button
             onClick={handleClear}
-            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-200"
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-gray-200"
           >
             <X className="w-5 h-5" />
           </button>
@@ -67,16 +67,16 @@ export const LeaderboardFilters: React.FC<LeaderboardFiltersProps> = ({
       {/* Advanced Filters Toggle */}
       <button
         onClick={() => setShowAdvanced(!showAdvanced)}
-        className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
+        className="text-sm text-primary/80 hover:text-blue-300 transition-colors"
       >
         {showAdvanced ? "Hide" : "Show"} Advanced Filters
       </button>
 
       {/* Advanced Filters */}
       {showAdvanced && (
-        <div className="bg-gray-800/50 rounded-lg p-4 space-y-4 border border-gray-700">
+        <div className="bg-surface/50 rounded-lg p-4 space-y-4 border border-border">
           <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
+            <label className="block text-sm font-medium text-foreground/80 mb-2">
               Minimum Win Rate: {minWinRate}%
             </label>
             <input
@@ -91,7 +91,7 @@ export const LeaderboardFilters: React.FC<LeaderboardFiltersProps> = ({
 
           <button
             onClick={handleFilterChange}
-            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition-colors"
+            className="w-full bg-primary/90 hover:bg-blue-700 text-white font-medium py-2 rounded-lg transition-colors"
           >
             Apply Filters
           </button>
diff --git a/frontend/src/components/leaderboard/LeaderboardTable.tsx b/frontend/src/components/leaderboard/LeaderboardTable.tsx
index b8c4808c..e92c5d80 100644
--- a/frontend/src/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/components/leaderboard/LeaderboardTable.tsx
@@ -87,15 +87,15 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
     <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
       <table className="w-full">
         <thead>
-          <tr className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">
+          <tr className="bg-muted dark:bg-background border-b border-gray-200 dark:border-gray-800">
+            <th className="px-4 py-3 text-left text-sm font-semibold text-foreground/70 dark:text-foreground/80">
               Rank
             </th>
-            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">
+            <th className="px-4 py-3 text-left text-sm font-semibold text-foreground/70 dark:text-foreground/80">
               Player
             </th>
             <th
-              className="px-4 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="px-4 py-3 text-right text-sm font-semibold text-foreground/70 dark:text-foreground/80 cursor-pointer hover:bg-muted dark:hover:bg-surface"
               onClick={() => handleSort('points')}
             >
               <div className="flex items-center justify-end gap-2">
@@ -104,7 +104,7 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
               </div>
             </th>
             <th
-              className="px-4 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="px-4 py-3 text-right text-sm font-semibold text-foreground/70 dark:text-foreground/80 cursor-pointer hover:bg-muted dark:hover:bg-surface"
               onClick={() => handleSort('wins')}
             >
               <div className="flex items-center justify-end gap-2">
@@ -113,7 +113,7 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
               </div>
             </th>
             <th
-              className="px-4 py-3 text-right text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="px-4 py-3 text-right text-sm font-semibold text-foreground/70 dark:text-foreground/80 cursor-pointer hover:bg-muted dark:hover:bg-surface"
               onClick={() => handleSort('winRate')}
             >
               <div className="flex items-center justify-end gap-2">
@@ -121,7 +121,7 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
                 <SortIcon column="winRate" />
               </div>
             </th>
-            <th className="px-4 py-3 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
+            <th className="px-4 py-3 text-center text-sm font-semibold text-foreground/70 dark:text-foreground/80">
               Trend
             </th>
           </tr>
@@ -130,11 +130,11 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
           {sortedEntries.map((entry, index) => (
             <tr
               key={entry.userId}
-              className={`border-b border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900/50 ${
-                index % 2 === 0 ? 'bg-white dark:bg-gray-950' : 'bg-gray-50 dark:bg-gray-900/20'
+              className={`border-b border-gray-200 dark:border-gray-800 hover:bg-muted dark:hover:bg-background/50 ${
+                index % 2 === 0 ? 'bg-white dark:bg-gray-950' : 'bg-muted dark:bg-background/20'
               }`}
             >
-              <td className="px-4 py-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
+              <td className="px-4 py-3 text-sm font-semibold text-foreground dark:text-foreground">
                 #{entry.rank}
               </td>
               <td className="px-4 py-3 text-sm">
@@ -148,29 +148,29 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
                       className="w-8 h-8 rounded-full"
                     />
                   )}
-                  <span className="font-medium text-gray-900 dark:text-gray-100">
+                  <span className="font-medium text-foreground dark:text-foreground">
                     {entry.username}
                   </span>
                 </div>
               </td>
-              <td className="px-4 py-3 text-sm text-right font-semibold text-gray-900 dark:text-gray-100">
+              <td className="px-4 py-3 text-sm text-right font-semibold text-foreground dark:text-foreground">
                 {entry.points.toLocaleString()}
               </td>
-              <td className="px-4 py-3 text-sm text-right font-semibold text-gray-900 dark:text-gray-100">
+              <td className="px-4 py-3 text-sm text-right font-semibold text-foreground dark:text-foreground">
                 {entry.wins}
               </td>
-              <td className="px-4 py-3 text-sm text-right font-semibold text-gray-900 dark:text-gray-100">
+              <td className="px-4 py-3 text-sm text-right font-semibold text-foreground dark:text-foreground">
                 {(entry.winRate * 100).toFixed(1)}%
               </td>
               <td className="px-4 py-3 text-center">
                 {entry.trend === 'up' && (
-                  <ChevronUp className="w-5 h-5 text-green-500 mx-auto" />
+                  <ChevronUp className="w-5 h-5 text-success mx-auto" />
                 )}
                 {entry.trend === 'down' && (
-                  <ChevronDown className="w-5 h-5 text-red-500 mx-auto" />
+                  <ChevronDown className="w-5 h-5 text-destructive mx-auto" />
                 )}
                 {entry.trend === 'stable' && (
-                  <div className="w-5 h-5 mx-auto text-gray-400">—</div>
+                  <div className="w-5 h-5 mx-auto text-muted-foreground">—</div>
                 )}
               </td>
             </tr>
@@ -179,7 +179,7 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
       </table>
 
       {sortedEntries.length === 0 && !isLoading && (
-        <div className="py-8 text-center text-gray-500 dark:text-gray-400">
+        <div className="py-8 text-center text-muted-foreground dark:text-muted-foreground">
           No leaderboard entries found
         </div>
       )}
diff --git a/frontend/src/components/leaderboard/PersonalRank.tsx b/frontend/src/components/leaderboard/PersonalRank.tsx
index a78e690e..f863a1cd 100644
--- a/frontend/src/components/leaderboard/PersonalRank.tsx
+++ b/frontend/src/components/leaderboard/PersonalRank.tsx
@@ -45,8 +45,8 @@ export const PersonalRank: React.FC<PersonalRankProps> = ({ category, season })
 
   if (isLoading) {
     return (
-      <div className="mb-8 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-lg p-6 border border-blue-500/50">
-        <div className="animate-pulse h-20 bg-gray-700 rounded"></div>
+      <div className="mb-8 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-lg p-6 border border-primary/50">
+        <div className="animate-pulse h-20 bg-surface-raised rounded"></div>
       </div>
     )
   }
@@ -61,28 +61,28 @@ export const PersonalRank: React.FC<PersonalRankProps> = ({ category, season })
   const isRankImproved = rankChange > 0
 
   return (
-    <div className="mb-8 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-lg p-6 border border-blue-500/50">
+    <div className="mb-8 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-lg p-6 border border-primary/50">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <div className="bg-blue-600 rounded-full p-3">
+          <div className="bg-primary/90 rounded-full p-3">
             <Trophy className="w-6 h-6 text-white" />
           </div>
           <div>
-            <p className="text-sm text-gray-400">Your Rank</p>
+            <p className="text-sm text-muted-foreground">Your Rank</p>
             <h2 className="text-3xl font-bold text-white">#{personalRank.rank}</h2>
           </div>
         </div>
 
         <div className="flex gap-6">
           <div className="text-center">
-            <p className="text-sm text-gray-400">Points</p>
+            <p className="text-sm text-muted-foreground">Points</p>
             <p className="text-2xl font-bold text-white">
               {personalRank.points.toLocaleString()}
             </p>
           </div>
 
           <div className="text-center">
-            <p className="text-sm text-gray-400">Percentile</p>
+            <p className="text-sm text-muted-foreground">Percentile</p>
             <p className="text-2xl font-bold text-white">
               Top {Math.max(1, 100 - personalRank.percentile)}%
             </p>
@@ -90,10 +90,10 @@ export const PersonalRank: React.FC<PersonalRankProps> = ({ category, season })
 
           {rankChange !== 0 && (
             <div className="text-center">
-              <p className="text-sm text-gray-400">Change</p>
+              <p className="text-sm text-muted-foreground">Change</p>
               <div
                 className={`flex items-center justify-center gap-1 text-lg font-bold ${
-                  isRankImproved ? 'text-green-400' : 'text-red-400'
+                  isRankImproved ? 'text-success/80' : 'text-destructive/80'
                 }`}
               >
                 <TrendingUp
@@ -107,7 +107,7 @@ export const PersonalRank: React.FC<PersonalRankProps> = ({ category, season })
           )}
         </div>
 
-        <button className="p-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-300 hover:text-white transition-colors">
+        <button className="p-2 bg-surface-raised hover:bg-gray-600 rounded-lg text-foreground/80 hover:text-white transition-colors">
           <Share2 className="w-5 h-5" />
         </button>
       </div>
diff --git a/frontend/src/components/leaderboard/PlayerRankCard.tsx b/frontend/src/components/leaderboard/PlayerRankCard.tsx
index 5be5ed4d..c556dfa1 100644
--- a/frontend/src/components/leaderboard/PlayerRankCard.tsx
+++ b/frontend/src/components/leaderboard/PlayerRankCard.tsx
@@ -39,18 +39,18 @@ export const PlayerRankCard: React.FC<PlayerRankCardProps> = ({
 
   const getTrophyColor = (rank: number) => {
     if (rank <= 10) return "text-yellow-400";
-    if (rank <= 50) return "text-gray-300";
+    if (rank <= 50) return "text-foreground/80";
     if (rank <= 100) return "text-orange-500";
-    return "text-blue-400";
+    return "text-primary/80";
   };
 
   return (
     <div
       className={`rounded-lg border ${
         isCurrentUser
-          ? "border-blue-500 bg-blue-500/10"
-          : "border-gray-700 bg-gray-800/50"
-      } p-6 backdrop-blur transition-all hover:border-blue-400`}
+          ? "border-primary bg-primary/10"
+          : "border-border bg-surface/50"
+      } p-6 backdrop-blur transition-all hover:border-primary/70`}
     >
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-4">
@@ -60,13 +60,13 @@ export const PlayerRankCard: React.FC<PlayerRankCardProps> = ({
               alt={username}
               width={64}
               height={64}
-              className="w-16 h-16 rounded-full border-2 border-gray-700 object-cover"
+              className="w-16 h-16 rounded-full border-2 border-border object-cover"
             />
           )}
           <div>
             <h3 className="text-xl font-bold text-white">{username}</h3>
             {isCurrentUser && (
-              <span className="text-xs bg-blue-600 text-white px-2 py-1 rounded mt-1 inline-block">
+              <span className="text-xs bg-primary/90 text-white px-2 py-1 rounded mt-1 inline-block">
                 Your Rank
               </span>
             )}
@@ -88,21 +88,21 @@ export const PlayerRankCard: React.FC<PlayerRankCardProps> = ({
 
       {/* Stats Grid */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
-        <div className="bg-gray-900/50 rounded p-3">
-          <p className="text-xs text-gray-400 mb-1">Elo Rating</p>
+        <div className="bg-background/50 rounded p-3">
+          <p className="text-xs text-muted-foreground mb-1">Elo Rating</p>
           <p className="text-lg font-bold text-white">{eloRating}</p>
         </div>
-        <div className="bg-gray-900/50 rounded p-3">
-          <p className="text-xs text-gray-400 mb-1">Matches</p>
+        <div className="bg-background/50 rounded p-3">
+          <p className="text-xs text-muted-foreground mb-1">Matches</p>
           <p className="text-lg font-bold text-white">{matchesPlayed}</p>
         </div>
-        <div className="bg-gray-900/50 rounded p-3">
-          <p className="text-xs text-gray-400 mb-1">Wins</p>
-          <p className="text-lg font-bold text-green-400">{wins}</p>
+        <div className="bg-background/50 rounded p-3">
+          <p className="text-xs text-muted-foreground mb-1">Wins</p>
+          <p className="text-lg font-bold text-success/80">{wins}</p>
         </div>
-        <div className="bg-gray-900/50 rounded p-3">
-          <p className="text-xs text-gray-400 mb-1">Win Rate</p>
-          <p className="text-lg font-bold text-blue-400">
+        <div className="bg-background/50 rounded p-3">
+          <p className="text-xs text-muted-foreground mb-1">Win Rate</p>
+          <p className="text-lg font-bold text-primary/80">
             {(winRate * 100).toFixed(1)}%
           </p>
         </div>
@@ -111,20 +111,20 @@ export const PlayerRankCard: React.FC<PlayerRankCardProps> = ({
       {/* Rank Change */}
       {rankChange !== null && rankChange !== undefined && (
         <div className="flex items-center gap-2 text-sm">
-          <span className="text-gray-400">Rank Change:</span>
+          <span className="text-muted-foreground">Rank Change:</span>
           <RankChange change={rankChange} />
         </div>
       )}
 
       {/* Win/Loss Ratio */}
-      <div className="mt-4 pt-4 border-t border-gray-700">
+      <div className="mt-4 pt-4 border-t border-border">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-gray-400">W/L Ratio</span>
+          <span className="text-muted-foreground">W/L Ratio</span>
           <span className="text-white font-semibold">
             {wins}W - {losses}L
           </span>
         </div>
-        <div className="mt-2 w-full bg-gray-900 rounded-full h-2 overflow-hidden">
+        <div className="mt-2 w-full bg-background rounded-full h-2 overflow-hidden">
           <div
             className="bg-gradient-to-r from-green-500 to-blue-500 h-full"
             style={{
diff --git a/frontend/src/components/leaderboard/RankChange.tsx b/frontend/src/components/leaderboard/RankChange.tsx
index ef22776d..3556b650 100644
--- a/frontend/src/components/leaderboard/RankChange.tsx
+++ b/frontend/src/components/leaderboard/RankChange.tsx
@@ -14,7 +14,7 @@ export const RankChange: React.FC<RankChangeProps> = ({
 }) => {
   if (change === null || change === undefined) {
     return (
-      <div className={`flex items-center gap-1 text-gray-400 ${className}`}>
+      <div className={`flex items-center gap-1 text-muted-foreground ${className}`}>
         <Minus className="w-4 h-4" />
         <span className="text-xs">—</span>
       </div>
@@ -23,7 +23,7 @@ export const RankChange: React.FC<RankChangeProps> = ({
 
   if (change === 0) {
     return (
-      <div className={`flex items-center gap-1 text-gray-400 ${className}`}>
+      <div className={`flex items-center gap-1 text-muted-foreground ${className}`}>
         <Minus className="w-4 h-4" />
         <span className="text-xs">0</span>
       </div>
@@ -31,8 +31,8 @@ export const RankChange: React.FC<RankChangeProps> = ({
   }
 
   const isPositive = change > 0;
-  const color = isPositive ? "text-green-500" : "text-red-500";
-  const bgColor = isPositive ? "bg-green-500/10" : "bg-red-500/10";
+  const color = isPositive ? "text-success" : "text-destructive";
+  const bgColor = isPositive ? "bg-success/10" : "bg-destructive/10";
 
   return (
     <div
diff --git a/frontend/src/components/leaderboard/SeasonSelector.tsx b/frontend/src/components/leaderboard/SeasonSelector.tsx
index b2eda1e5..b25580a6 100644
--- a/frontend/src/components/leaderboard/SeasonSelector.tsx
+++ b/frontend/src/components/leaderboard/SeasonSelector.tsx
@@ -22,12 +22,12 @@ export const SeasonSelector: React.FC<SeasonSelectorProps> = ({
   onChange,
 }) => {
   return (
-    <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
-      <h3 className="text-sm font-semibold text-gray-300 mb-3">Season</h3>
+    <div className="bg-surface/50 rounded-lg p-4 border border-border">
+      <h3 className="text-sm font-semibold text-foreground/80 mb-3">Season</h3>
       <select
         value={season}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full px-4 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="w-full px-4 py-2 bg-surface-raised text-white rounded-lg border border-gray-600 hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-primary"
       >
         {seasons.map((s) => (
           <option key={s.id} value={s.id}>
diff --git a/frontend/src/components/match/MatchDetailView.tsx b/frontend/src/components/match/MatchDetailView.tsx
index 306a8e68..049d6a8d 100644
--- a/frontend/src/components/match/MatchDetailView.tsx
+++ b/frontend/src/components/match/MatchDetailView.tsx
@@ -74,7 +74,7 @@ export function MatchDetailView({
             <div
               className={cn(
                 "text-center flex-1",
-                player1Won ? "text-green-600 dark:text-green-400" : "",
+                player1Won ? "text-success dark:text-success/80" : "",
               )}
             >
               <p className="text-2xl font-bold">{match.player1Username}</p>
@@ -92,7 +92,7 @@ export function MatchDetailView({
             <div
               className={cn(
                 "text-center flex-1",
-                player2Won ? "text-green-600 dark:text-green-400" : "",
+                player2Won ? "text-success dark:text-success/80" : "",
               )}
             >
               <p className="text-2xl font-bold">{match.player2Username}</p>
@@ -193,12 +193,12 @@ export function MatchDetailView({
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <div className="flex items-center justify-between p-3 bg-success-muted dark:bg-success-muted/20 rounded-lg">
                 <div className="flex items-center gap-2">
-                  <Trophy className="h-5 w-5 text-green-600" />
+                  <Trophy className="h-5 w-5 text-success" />
                   <span className="font-medium">Winner</span>
                 </div>
-                <span className="text-xl font-bold text-green-600">
+                <span className="text-xl font-bold text-success">
                   {match.prizeDistribution.currency || "$"}
                   {match.prizeDistribution.winner.toLocaleString()}
                 </span>
@@ -245,15 +245,15 @@ function RoundRow({
 }) {
   const winnerColor =
     round.winner === "player1"
-      ? "text-green-600 dark:text-green-400"
+      ? "text-success dark:text-success/80"
       : round.winner === "player2"
-        ? "text-blue-600 dark:text-blue-400"
+        ? "text-primary dark:text-primary/80"
         : "";
   const winnerBg =
     round.winner === "player1"
-      ? "bg-green-50 dark:bg-green-900/20"
+      ? "bg-success-muted dark:bg-success-muted/20"
       : round.winner === "player2"
-        ? "bg-blue-50 dark:bg-blue-900/20"
+        ? "bg-info-muted dark:bg-info-muted/20"
         : "";
 
   return (
@@ -408,11 +408,11 @@ function ScoreProgressionChart({ match }: { match: MatchDetail }) {
 
       <div className="flex items-center justify-center gap-6 mt-4">
         <div className="flex items-center gap-2">
-          <div className="w-3 h-3 rounded-full bg-green-500" />
+          <div className="w-3 h-3 rounded-full bg-success" />
           <span className="text-sm">{match.player1Username}</span>
         </div>
         <div className="flex items-center gap-2">
-          <div className="w-3 h-3 rounded-full bg-blue-500" />
+          <div className="w-3 h-3 rounded-full bg-primary" />
           <span className="text-sm">{match.player2Username}</span>
         </div>
       </div>
@@ -428,12 +428,12 @@ function PlayerStatsCard({
   isWinner: boolean;
 }) {
   return (
-    <Card className={isWinner ? "border-green-200 dark:border-green-800" : ""}>
+    <Card className={isWinner ? "border-success/30 dark:border-green-800" : ""}>
       <CardHeader>
         <CardTitle
           className={cn(
             "flex items-center gap-2",
-            isWinner ? "text-green-600 dark:text-green-400" : "",
+            isWinner ? "text-success dark:text-success/80" : "",
           )}
         >
           {isWinner && <Trophy className="h-5 w-5" />}
diff --git a/frontend/src/components/notifications/Toast.tsx b/frontend/src/components/notifications/Toast.tsx
index 07b5f879..4d41c3a3 100644
--- a/frontend/src/components/notifications/Toast.tsx
+++ b/frontend/src/components/notifications/Toast.tsx
@@ -12,10 +12,10 @@ const typeConfig: Record<
   NotificationType,
   { icon: React.ComponentType<{ className?: string }>; className: string }
 > = {
-  info: { icon: Info, className: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20" },
+  info: { icon: Info, className: "bg-primary/10 text-primary dark:text-primary/80 border-primary/20" },
   success: { icon: CheckCircle, className: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" },
   warning: { icon: AlertTriangle, className: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20" },
-  error: { icon: AlertCircle, className: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20" },
+  error: { icon: AlertCircle, className: "bg-destructive/10 text-destructive dark:text-destructive/80 border-red-500/20" },
   match: { icon: CheckCircle, className: "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20" },
 };
 
diff --git a/frontend/src/components/profile/AchievementShowcase.tsx b/frontend/src/components/profile/AchievementShowcase.tsx
index 90021329..2d3432f8 100644
--- a/frontend/src/components/profile/AchievementShowcase.tsx
+++ b/frontend/src/components/profile/AchievementShowcase.tsx
@@ -29,15 +29,15 @@ const CATEGORY_ICONS: Record<AchievementCategory, React.ReactNode> = {
 };
 
 const RARITY_COLORS: Record<AchievementRarity, string> = {
-  common: "border-gray-400 bg-gray-50 dark:bg-gray-900/50",
-  rare: "border-blue-400 bg-blue-50 dark:bg-blue-900/20",
+  common: "border-gray-400 bg-muted dark:bg-background/50",
+  rare: "border-primary/70 bg-info-muted dark:bg-info-muted/20",
   epic: "border-purple-400 bg-purple-50 dark:bg-purple-900/20",
   legendary: "border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20",
 };
 
 const RARITY_TEXT_COLORS: Record<AchievementRarity, string> = {
-  common: "text-gray-600 dark:text-gray-400",
-  rare: "text-blue-600 dark:text-blue-400",
+  common: "text-gray-600 dark:text-muted-foreground",
+  rare: "text-primary dark:text-primary/80",
   epic: "text-purple-600 dark:text-purple-400",
   legendary: "text-yellow-600 dark:text-yellow-400",
 };
@@ -168,7 +168,7 @@ export function AchievementShowcase({ achievements }: AchievementShowcaseProps)
 
                   {/* Unlocked indicator */}
                   {achievement.unlocked && (
-                    <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400 font-medium">
+                    <span className="inline-flex items-center gap-1 text-xs text-success dark:text-success/80 font-medium">
                       <span>✓</span> Unlocked
                     </span>
                   )}
@@ -179,7 +179,7 @@ export function AchievementShowcase({ achievements }: AchievementShowcaseProps)
                     isRecentUnlock(achievement.unlockedAt) && (
                       <span
                         data-testid="new-badge"
-                        className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+                        className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-info dark:bg-info-muted/40 dark:text-blue-300"
                       >
                         New
                       </span>
diff --git a/frontend/src/components/profile/ActivityFeed.tsx b/frontend/src/components/profile/ActivityFeed.tsx
index a96a9b33..c63cfdea 100644
--- a/frontend/src/components/profile/ActivityFeed.tsx
+++ b/frontend/src/components/profile/ActivityFeed.tsx
@@ -78,7 +78,7 @@ function getEventContent(event: ActivityEvent): {
         icon: <Swords className="h-4 w-4 flex-shrink-0" />,
         text: `${event.payload.result} vs ${event.payload.opponent}`,
         subtext: event.payload.gameType ? `${event.payload.gameType} • ${event.payload.score || 'No score'}` : undefined,
-        color: isWin ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400",
+        color: isWin ? "text-success dark:text-success/80" : "text-destructive dark:text-destructive/80",
       };
     case "achievement_unlocked":
       return {
@@ -92,7 +92,7 @@ function getEventContent(event: ActivityEvent): {
         icon: <Flag className="h-4 w-4 flex-shrink-0" />,
         text: `Joined tournament: ${event.payload.tournamentName}`,
         subtext: event.payload.tournamentType ? `${event.payload.tournamentType} tournament` : undefined,
-        color: "text-blue-600 dark:text-blue-400",
+        color: "text-primary dark:text-primary/80",
       };
     case "tournament_completed":
       return {
diff --git a/frontend/src/components/profile/FriendsList.tsx b/frontend/src/components/profile/FriendsList.tsx
index b8374a63..eefd5c7d 100644
--- a/frontend/src/components/profile/FriendsList.tsx
+++ b/frontend/src/components/profile/FriendsList.tsx
@@ -29,7 +29,7 @@ const STATUS_ORDER: Record<FriendEntry["status"], number> = {
 };
 
 const STATUS_COLOR: Record<FriendEntry["status"], string> = {
-  online: "bg-green-500",
+  online: "bg-success",
   "in-game": "bg-yellow-400",
   offline: "bg-gray-400",
 };
@@ -211,7 +211,7 @@ export function FriendsList({
                               onRemoveFriend?.(friend.id);
                               setSelectedFriend(null);
                             }}
-                            className="w-full px-3 py-2 text-left text-sm hover:bg-muted flex items-center gap-2 text-red-600 dark:text-red-400"
+                            className="w-full px-3 py-2 text-left text-sm hover:bg-muted flex items-center gap-2 text-destructive dark:text-destructive/80"
                           >
                             <UserMinus className="h-4 w-4" />
                             Remove Friend
diff --git a/frontend/src/components/profile/MatchHistory.tsx b/frontend/src/components/profile/MatchHistory.tsx
index a886a7e9..15b77e97 100644
--- a/frontend/src/components/profile/MatchHistory.tsx
+++ b/frontend/src/components/profile/MatchHistory.tsx
@@ -176,11 +176,11 @@ export function MatchHistory({
         {filteredMatches.length > 0 && (
           <div className="grid grid-cols-3 gap-4 pt-4 border-t">
             <div className="text-center">
-              <p className="text-2xl font-bold text-green-600">{wins}</p>
+              <p className="text-2xl font-bold text-success">{wins}</p>
               <p className="text-xs text-muted-foreground">Wins</p>
             </div>
             <div className="text-center">
-              <p className="text-2xl font-bold text-red-600">{losses}</p>
+              <p className="text-2xl font-bold text-destructive">{losses}</p>
               <p className="text-xs text-muted-foreground">Losses</p>
             </div>
             <div className="text-center">
@@ -328,8 +328,8 @@ export function MatchHistory({
                         className={cn(
                           "flex items-center justify-center h-12 w-12 rounded-full font-bold text-sm transition-all",
                           isWinner
-                            ? "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400 border-2 border-green-200 dark:border-green-800"
-                            : "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400 border-2 border-red-200 dark:border-red-800"
+                            ? "bg-success-muted text-green-700 dark:bg-success-muted/40 dark:text-success/80 border-2 border-success/30 dark:border-green-800"
+                            : "bg-destructive/10 text-red-700 dark:bg-destructive/20/40 dark:text-destructive/80 border-2 border-red-200 dark:border-red-800"
                         )}
                       >
                         {isWinner ? "W" : "L"}
@@ -379,7 +379,7 @@ export function MatchHistory({
                         
                         <div className={cn(
                           "text-xs font-medium flex items-center gap-1",
-                          eloChange > 0 ? "text-green-600" : "text-red-600"
+                          eloChange > 0 ? "text-success" : "text-destructive"
                         )}>
                           {eloChange > 0 ? (
                             <TrendingUp className="h-3 w-3" />
diff --git a/frontend/src/components/profile/ProfileHeader.tsx b/frontend/src/components/profile/ProfileHeader.tsx
index 6e676bd1..afa1ff77 100644
--- a/frontend/src/components/profile/ProfileHeader.tsx
+++ b/frontend/src/components/profile/ProfileHeader.tsx
@@ -67,17 +67,17 @@ export function ProfileHeader({
   const getRankColor = (rank: number) => {
     if (rank <= 10) return 'text-yellow-500';
     if (rank <= 100) return 'text-orange-500';
-    if (rank <= 1000) return 'text-blue-500';
-    return 'text-gray-500';
+    if (rank <= 1000) return 'text-primary';
+    return 'text-muted-foreground';
   };
 
   const getEloTier = (elo: number) => {
     if (elo >= 2400) return { tier: 'Grandmaster', color: 'text-purple-500' };
-    if (elo >= 2200) return { tier: 'Master', color: 'text-red-500' };
-    if (elo >= 2000) return { tier: 'Diamond', color: 'text-blue-500' };
+    if (elo >= 2200) return { tier: 'Master', color: 'text-destructive' };
+    if (elo >= 2000) return { tier: 'Diamond', color: 'text-primary' };
     if (elo >= 1800) return { tier: 'Platinum', color: 'text-cyan-500' };
     if (elo >= 1600) return { tier: 'Gold', color: 'text-yellow-500' };
-    if (elo >= 1400) return { tier: 'Silver', color: 'text-gray-400' };
+    if (elo >= 1400) return { tier: 'Silver', color: 'text-muted-foreground' };
     return { tier: 'Bronze', color: 'text-orange-600' };
   };
 
@@ -147,7 +147,7 @@ export function ProfileHeader({
               {/* Online indicator */}
               <span
                 className={`absolute bottom-2 right-2 w-6 h-6 rounded-full border-4 border-white shadow-md ${
-                  user.isOnline ? 'bg-green-500' : 'bg-gray-400'
+                  user.isOnline ? 'bg-success' : 'bg-gray-400'
                 }`}
                 aria-label={user.isOnline ? 'Online' : 'Offline'}
                 data-testid="online-indicator"
@@ -167,7 +167,7 @@ export function ProfileHeader({
                     {eloTier.tier}
                   </span>
                   {user.isOnline && (
-                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-green-600 bg-green-100">
+                    <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-success bg-success-muted">
                       Online
                     </span>
                   )}
@@ -205,7 +205,7 @@ export function ProfileHeader({
                       href={user.socialLinks.twitter}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors"
+                      className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-info hover:bg-blue-200 transition-colors"
                     >
                       <Twitter className="h-3 w-3" />
                       Twitter
@@ -235,7 +235,7 @@ export function ProfileHeader({
                       href={user.socialLinks.github}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors"
+                      className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-muted text-foreground/70 hover:bg-muted transition-colors"
                     >
                       <Github className="h-3 w-3" />
                       GitHub
diff --git a/frontend/src/components/profile/StatsOverview.tsx b/frontend/src/components/profile/StatsOverview.tsx
index fc42540f..9cd11dd7 100644
--- a/frontend/src/components/profile/StatsOverview.tsx
+++ b/frontend/src/components/profile/StatsOverview.tsx
@@ -36,7 +36,7 @@ function StatCard({ label, value, icon, accent, trend, description }: StatCardPr
         <div className="space-y-1">
           <p className="text-2xl font-black tracking-tight">{value}</p>
           {trend && (
-            <div className={`flex items-center gap-1 text-xs ${trend.isPositive ? 'text-green-600' : 'text-red-600'}`}>
+            <div className={`flex items-center gap-1 text-xs ${trend.isPositive ? 'text-success' : 'text-destructive'}`}>
               {trend.isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
               <span>{Math.abs(trend.value)}</span>
             </div>
@@ -65,10 +65,10 @@ export function StatsOverview({ stats, eloHistory }: StatsOverviewProps) {
   // Get performance rating
   const getPerformanceRating = (winRate: number) => {
     if (winRate >= 80) return { rating: 'Exceptional', color: 'text-purple-600' };
-    if (winRate >= 70) return { rating: 'Excellent', color: 'text-green-600' };
-    if (winRate >= 60) return { rating: 'Good', color: 'text-blue-600' };
+    if (winRate >= 70) return { rating: 'Excellent', color: 'text-success' };
+    if (winRate >= 60) return { rating: 'Good', color: 'text-primary' };
     if (winRate >= 50) return { rating: 'Average', color: 'text-yellow-600' };
-    return { rating: 'Below Average', color: 'text-red-600' };
+    return { rating: 'Below Average', color: 'text-destructive' };
   };
 
   const performance = getPerformanceRating(winRate);
@@ -100,21 +100,21 @@ export function StatsOverview({ stats, eloHistory }: StatsOverviewProps) {
       label: "Win Rate",
       value: `${winRate.toFixed(1)}%`,
       icon: <Target className="h-5 w-5" />,
-      accent: "text-green-500",
+      accent: "text-success",
       description: performance.rating
     },
     {
       label: "Games Played",
       value: totalGames.toLocaleString(),
       icon: <Swords className="h-5 w-5" />,
-      accent: "text-blue-500",
+      accent: "text-primary",
       description: `${wins}W / ${losses}L`
     },
     {
       label: "Current Streak",
       value: currentStreak > 0 ? `+${currentStreak}` : `${currentStreak}`,
       icon: <Flame className="h-5 w-5" />,
-      accent: currentStreak > 0 ? "text-orange-500" : "text-red-500",
+      accent: currentStreak > 0 ? "text-orange-500" : "text-destructive",
       description: currentStreak > 0 ? "Win streak" : currentStreak < 0 ? "Loss streak" : "No streak"
     },
   ];
@@ -130,7 +130,7 @@ export function StatsOverview({ stats, eloHistory }: StatsOverviewProps) {
     {
       title: "Games This Week",
       value: "12", // Mock data
-      color: "text-blue-600",
+      color: "text-primary",
       icon: <Calendar className="h-4 w-4" />
     },
     {
@@ -240,7 +240,7 @@ export function StatsOverview({ stats, eloHistory }: StatsOverviewProps) {
                 </div>
                 <div className="flex justify-between">
                   <span>Online:</span>
-                  <span className="font-medium text-green-600">23</span>
+                  <span className="font-medium text-success">23</span>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/components/settings/AccessibilityOptions.tsx b/frontend/src/components/settings/AccessibilityOptions.tsx
index 99e329a8..c39a551e 100644
--- a/frontend/src/components/settings/AccessibilityOptions.tsx
+++ b/frontend/src/components/settings/AccessibilityOptions.tsx
@@ -57,8 +57,8 @@ export function AccessibilityOptions({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Eye className="h-5 w-5 text-blue-500" />
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Eye className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle>Visual Settings</CardTitle>
@@ -97,7 +97,7 @@ export function AccessibilityOptions({
                   colorblindMode: e.target.value as AccessibilityOptionsType["colorblindMode"],
                 })
               }
-              className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
             >
               {colorblindModes.map((mode) => (
                 <option key={mode.value} value={mode.value}>
@@ -165,8 +165,8 @@ export function AccessibilityOptions({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-500/10 rounded-lg">
-              <Volume2 className="h-5 w-5 text-green-500" />
+            <div className="p-2 bg-success/10 rounded-lg">
+              <Volume2 className="h-5 w-5 text-success" />
             </div>
             <div>
               <CardTitle>Audio & Captions</CardTitle>
@@ -202,7 +202,7 @@ export function AccessibilityOptions({
                       onClick={() => onUpdate({ subtitleSize: size })}
                       className={`px-3 py-2 rounded-md text-sm font-medium capitalize transition-colors ${
                         settings.subtitleSize === size
-                          ? "bg-blue-500 text-white"
+                          ? "bg-primary text-white"
                           : "bg-muted hover:bg-muted/80"
                       }`}
                     >
@@ -311,7 +311,7 @@ export function AccessibilityOptions({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/settings/AccountSettings.tsx b/frontend/src/components/settings/AccountSettings.tsx
index 547e46bb..25a59269 100644
--- a/frontend/src/components/settings/AccountSettings.tsx
+++ b/frontend/src/components/settings/AccountSettings.tsx
@@ -52,8 +52,8 @@ export function AccountSettings({
     <Card>
       <CardHeader>
         <div className="flex items-center gap-3">
-          <div className="p-2 bg-blue-500/10 rounded-lg">
-            <User className="h-5 w-5 text-blue-500" />
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <User className="h-5 w-5 text-primary" />
           </div>
           <div>
             <CardTitle>Account Settings</CardTitle>
@@ -74,13 +74,13 @@ export function AccountSettings({
               type="email"
               value={settings.email}
               onChange={(e) => onUpdate({ email: e.target.value })}
-              className="w-full pl-10 pr-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full pl-10 pr-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
               placeholder="your@email.com"
             />
             <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           </div>
           {getFieldError("email") && (
-            <p className="text-sm text-red-500 flex items-center gap-1">
+            <p className="text-sm text-destructive flex items-center gap-1">
               <AlertCircle className="h-3 w-3" />
               {getFieldError("email")}
             </p>
@@ -99,7 +99,7 @@ export function AccountSettings({
               type="text"
               value={settings.username}
               onChange={(e) => onUpdate({ username: e.target.value })}
-              className="w-full pl-10 pr-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full pl-10 pr-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
               placeholder="Your username"
             />
             <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -138,7 +138,7 @@ export function AccountSettings({
                     type={showPasswords.current ? "text" : "password"}
                     value={settings.currentPassword}
                     onChange={(e) => onUpdate({ currentPassword: e.target.value })}
-                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     placeholder="Enter current password"
                   />
                   <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -165,7 +165,7 @@ export function AccountSettings({
                     type={showPasswords.new ? "text" : "password"}
                     value={settings.newPassword || ""}
                     onChange={(e) => onUpdate({ newPassword: e.target.value })}
-                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     placeholder="Enter new password"
                   />
                   <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -178,7 +178,7 @@ export function AccountSettings({
                   </button>
                 </div>
                 {getFieldError("newPassword") && (
-                  <p className="text-sm text-red-500 flex items-center gap-1">
+                  <p className="text-sm text-destructive flex items-center gap-1">
                     <AlertCircle className="h-3 w-3" />
                     {getFieldError("newPassword")}
                   </p>
@@ -194,7 +194,7 @@ export function AccountSettings({
                     type={showPasswords.confirm ? "text" : "password"}
                     value={settings.confirmNewPassword || ""}
                     onChange={(e) => onUpdate({ confirmNewPassword: e.target.value })}
-                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full pl-10 pr-10 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     placeholder="Confirm new password"
                   />
                   <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -207,7 +207,7 @@ export function AccountSettings({
                   </button>
                 </div>
                 {getFieldError("confirmNewPassword") && (
-                  <p className="text-sm text-red-500 flex items-center gap-1">
+                  <p className="text-sm text-destructive flex items-center gap-1">
                     <AlertCircle className="h-3 w-3" />
                     {getFieldError("confirmNewPassword")}
                   </p>
@@ -220,8 +220,8 @@ export function AccountSettings({
         {/* Two-Factor Authentication */}
         <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg border">
           <div className="flex items-center gap-3">
-            <div className={`p-2 rounded-lg ${settings.twoFactorEnabled ? "bg-green-500/10" : "bg-muted"}`}>
-              <Shield className={`h-5 w-5 ${settings.twoFactorEnabled ? "text-green-500" : "text-muted-foreground"}`} />
+            <div className={`p-2 rounded-lg ${settings.twoFactorEnabled ? "bg-success/10" : "bg-muted"}`}>
+              <Shield className={`h-5 w-5 ${settings.twoFactorEnabled ? "text-success" : "text-muted-foreground"}`} />
             </div>
             <div>
               <p className="text-sm font-medium">Two-Factor Authentication</p>
@@ -236,7 +236,7 @@ export function AccountSettings({
         {/* Save Button */}
         <div className="flex items-center justify-end gap-3 pt-4 border-t">
           {saveSuccess && (
-            <span className="text-sm text-green-500 flex items-center gap-1">
+            <span className="text-sm text-success flex items-center gap-1">
               <Check className="h-4 w-4" />
               Settings saved successfully
             </span>
diff --git a/frontend/src/components/settings/GamePreferences.tsx b/frontend/src/components/settings/GamePreferences.tsx
index 6c9f1fc8..249386fa 100644
--- a/frontend/src/components/settings/GamePreferences.tsx
+++ b/frontend/src/components/settings/GamePreferences.tsx
@@ -71,7 +71,7 @@ export function GamePreferences({
                   onClick={() => onUpdate({ quality: preset })}
                   className={`p-3 rounded-lg border-2 transition-all text-left ${
                     settings.quality === preset
-                      ? "border-blue-500 bg-blue-500/10"
+                      ? "border-primary bg-primary/10"
                       : "border-muted hover:border-muted-foreground/50"
                   }`}
                 >
@@ -81,7 +81,7 @@ export function GamePreferences({
                     {qualityPresets[preset].description}
                   </div>
                   {settings.quality === preset && (
-                    <Check className="absolute top-2 right-2 h-4 w-4 text-blue-500" />
+                    <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />
                   )}
                 </button>
               ))}
@@ -98,7 +98,7 @@ export function GamePreferences({
               id="resolution"
               value={settings.resolution}
               onChange={(e) => onUpdate({ resolution: e.target.value as GamePreferencesType["resolution"] })}
-              className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
             >
               {resolutionOptions.map((option) => (
                 <option key={option.value} value={option.value}>
@@ -121,7 +121,7 @@ export function GamePreferences({
                   onClick={() => onUpdate({ frameRate: option.value as GamePreferencesType["frameRate"] })}
                   className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                     settings.frameRate === option.value
-                      ? "bg-blue-500 text-white"
+                      ? "bg-primary text-white"
                       : "bg-muted hover:bg-muted/80"
                   }`}
                 >
@@ -179,8 +179,8 @@ export function GamePreferences({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-500/10 rounded-lg">
-              <Volume2 className="h-5 w-5 text-green-500" />
+            <div className="p-2 bg-success/10 rounded-lg">
+              <Volume2 className="h-5 w-5 text-success" />
             </div>
             <div>
               <CardTitle>Audio</CardTitle>
@@ -302,7 +302,7 @@ export function GamePreferences({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/settings/KeyBindings.tsx b/frontend/src/components/settings/KeyBindings.tsx
index bb2fb2fd..efad0442 100644
--- a/frontend/src/components/settings/KeyBindings.tsx
+++ b/frontend/src/components/settings/KeyBindings.tsx
@@ -114,7 +114,7 @@ export function KeyBindings({
               autoFocus
               onKeyDown={(e) => handleKeyDown(e, binding.action, true)}
               onBlur={() => setListeningFor(null)}
-              className="w-20 px-2 py-1 text-center text-sm bg-blue-500/20 border-2 border-blue-500 rounded-md focus:outline-none"
+              className="w-20 px-2 py-1 text-center text-sm bg-primary/20 border-2 border-primary rounded-md focus:outline-none"
               placeholder="..."
             />
           ) : (
@@ -136,7 +136,7 @@ export function KeyBindings({
                 autoFocus
                 onKeyDown={(e) => handleKeyDown(e, binding.action, false)}
                 onBlur={() => setListeningFor(null)}
-                className="w-20 px-2 py-1 text-center text-sm bg-blue-500/20 border-2 border-blue-500 rounded-md focus:outline-none"
+                className="w-20 px-2 py-1 text-center text-sm bg-primary/20 border-2 border-primary rounded-md focus:outline-none"
                 placeholder="..."
               />
             ) : (
@@ -168,8 +168,8 @@ export function KeyBindings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Keyboard className="h-5 w-5 text-blue-500" />
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Keyboard className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle>Movement</CardTitle>
@@ -188,8 +188,8 @@ export function KeyBindings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-500/10 rounded-lg">
-              <Keyboard className="h-5 w-5 text-green-500" />
+            <div className="p-2 bg-success/10 rounded-lg">
+              <Keyboard className="h-5 w-5 text-success" />
             </div>
             <div>
               <CardTitle>Actions</CardTitle>
@@ -242,7 +242,7 @@ export function KeyBindings({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/settings/NotificationSettings.tsx b/frontend/src/components/settings/NotificationSettings.tsx
index 3eb40e82..3e5ec022 100644
--- a/frontend/src/components/settings/NotificationSettings.tsx
+++ b/frontend/src/components/settings/NotificationSettings.tsx
@@ -75,7 +75,7 @@ export function NotificationSettings({
     },
     {
       type: "matchStarted",
-      icon: <Gamepad2 className="h-5 w-5 text-blue-500" />,
+      icon: <Gamepad2 className="h-5 w-5 text-primary" />,
       title: "Match Started",
       message: "Your match vs ProGamer123 has begun. Good luck!",
       time: "15 min ago",
@@ -83,7 +83,7 @@ export function NotificationSettings({
     },
     {
       type: "prizeWinnings",
-      icon: <DollarSign className="h-5 w-5 text-green-500" />,
+      icon: <DollarSign className="h-5 w-5 text-success" />,
       title: "Prize Won!",
       message: "Congratulations! You've won $500 from the Weekend Tournament.",
       time: "1 hour ago",
@@ -120,8 +120,8 @@ export function NotificationSettings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Bell className="h-5 w-5 text-blue-500" />
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Bell className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle>Notification Types</CardTitle>
@@ -168,13 +168,13 @@ export function NotificationSettings({
               <div
                 key={channelValue}
                 className={`flex items-center justify-between p-4 rounded-lg border-2 transition-all ${isChannelEnabled(channelValue)
-                  ? "border-blue-500/50 bg-blue-500/5"
+                  ? "border-primary/50 bg-primary/5"
                   : "border-muted hover:border-muted-foreground/50"
                   }`}
               >
                 <div className="flex items-center gap-3">
                   <div
-                    className={`p-2 rounded-lg ${isChannelEnabled(channelValue) ? "bg-blue-500/20" : "bg-muted"
+                    className={`p-2 rounded-lg ${isChannelEnabled(channelValue) ? "bg-primary/20" : "bg-muted"
                       }`}
                   >
                     {getChannelIcon(channelValue)}
@@ -234,7 +234,7 @@ export function NotificationSettings({
                       quietHours: { ...settings.quietHours, start: e.target.value },
                     })
                   }
-                  className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <div className="space-y-2">
@@ -248,7 +248,7 @@ export function NotificationSettings({
                       quietHours: { ...settings.quietHours, end: e.target.value },
                     })
                   }
-                  className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
             </div>
@@ -261,8 +261,8 @@ export function NotificationSettings({
         <CardHeader>
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <div className="p-2 bg-green-500/10 rounded-lg">
-                <Eye className="h-5 w-5 text-green-500" />
+              <div className="p-2 bg-success/10 rounded-lg">
+                <Eye className="h-5 w-5 text-success" />
               </div>
               <div>
                 <CardTitle>Notification Preview</CardTitle>
@@ -295,7 +295,7 @@ export function NotificationSettings({
                       <span className="text-xs text-muted-foreground flex-shrink-0">{notif.time}</span>
                     </div>
                     <p className="text-sm text-muted-foreground mb-2">{notif.message}</p>
-                    <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-500">
+                    <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
                       {notif.category}
                     </span>
                   </div>
@@ -317,7 +317,7 @@ export function NotificationSettings({
                   </span>
                 ))
               ) : (
-                <span className="text-red-500">No channels enabled</span>
+                <span className="text-destructive">No channels enabled</span>
               )}
             </div>
           </CardContent>
@@ -327,7 +327,7 @@ export function NotificationSettings({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/settings/PrivacySettings.tsx b/frontend/src/components/settings/PrivacySettings.tsx
index 9a264e10..8b5d36cc 100644
--- a/frontend/src/components/settings/PrivacySettings.tsx
+++ b/frontend/src/components/settings/PrivacySettings.tsx
@@ -79,8 +79,8 @@ export function PrivacySettings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Eye className="h-5 w-5 text-blue-500" />
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Eye className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle>Profile Visibility</CardTitle>
@@ -101,7 +101,7 @@ export function PrivacySettings({
                   }
                   className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
                     settings.profileVisibility === option.value
-                      ? "border-blue-500 bg-blue-500/10"
+                      ? "border-primary bg-primary/10"
                       : "border-muted hover:border-muted-foreground/50"
                   }`}
                 >
@@ -197,8 +197,8 @@ export function PrivacySettings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-500/10 rounded-lg">
-              <UserPlus className="h-5 w-5 text-green-500" />
+            <div className="p-2 bg-success/10 rounded-lg">
+              <UserPlus className="h-5 w-5 text-success" />
             </div>
             <div>
               <CardTitle>Interaction Settings</CardTitle>
@@ -319,8 +319,8 @@ export function PrivacySettings({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-red-500/10 rounded-lg">
-              <Ban className="h-5 w-5 text-red-500" />
+            <div className="p-2 bg-destructive/10 rounded-lg">
+              <Ban className="h-5 w-5 text-destructive" />
             </div>
             <div>
               <CardTitle>Blocked Users</CardTitle>
@@ -336,7 +336,7 @@ export function PrivacySettings({
               onChange={(e) => setBlockedUserInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && addBlockedUser()}
               placeholder="Enter username to block"
-              className="flex-1 px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 px-4 py-2.5 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
             />
             <Button variant="primary" size="sm" onClick={addBlockedUser}>
               Block User
@@ -351,14 +351,14 @@ export function PrivacySettings({
                   className="flex items-center justify-between p-3 bg-muted/30 rounded-lg"
                 >
                   <div className="flex items-center gap-2">
-                    <Ban className="h-4 w-4 text-red-500" />
+                    <Ban className="h-4 w-4 text-destructive" />
                     <span className="text-sm font-medium">{username}</span>
                   </div>
                   <button
                     onClick={() => removeBlockedUser(username)}
                     className="p-1 hover:bg-muted rounded transition-colors"
                   >
-                    <Trash2 className="h-4 w-4 text-muted-foreground hover:text-red-500" />
+                    <Trash2 className="h-4 w-4 text-muted-foreground hover:text-destructive" />
                   </button>
                 </div>
               ))}
@@ -375,7 +375,7 @@ export function PrivacySettings({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/settings/ThemeSelector.tsx b/frontend/src/components/settings/ThemeSelector.tsx
index bd989559..1b611b93 100644
--- a/frontend/src/components/settings/ThemeSelector.tsx
+++ b/frontend/src/components/settings/ThemeSelector.tsx
@@ -55,11 +55,11 @@ export function ThemeSelector({
 
   const getAccentColorPreview = (color: AccentColor) => {
     const colorMap: Record<AccentColor, string> = {
-      blue: "bg-blue-500",
+      blue: "bg-primary",
       purple: "bg-purple-500",
-      green: "bg-green-500",
+      green: "bg-success",
       orange: "bg-orange-500",
-      red: "bg-red-500",
+      red: "bg-destructive",
       pink: "bg-pink-500",
     };
     return colorMap[color];
@@ -71,8 +71,8 @@ export function ThemeSelector({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-500/10 rounded-lg">
-              <Monitor className="h-5 w-5 text-blue-500" />
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Monitor className="h-5 w-5 text-primary" />
             </div>
             <div>
               <CardTitle>Theme Mode</CardTitle>
@@ -88,13 +88,13 @@ export function ThemeSelector({
                 onClick={() => onUpdate({ mode })}
                 className={`flex flex-col items-center gap-3 p-6 rounded-xl border-2 transition-all ${
                   settings.mode === mode
-                    ? "border-blue-500 bg-blue-500/10"
+                    ? "border-primary bg-primary/10"
                     : "border-muted hover:border-muted-foreground/50"
                 }`}
               >
                 <div
                   className={`p-3 rounded-full ${
-                    settings.mode === mode ? "bg-blue-500 text-white" : "bg-muted"
+                    settings.mode === mode ? "bg-primary text-white" : "bg-muted"
                   }`}
                 >
                   {getThemeModeIcon(mode)}
@@ -102,7 +102,7 @@ export function ThemeSelector({
                 <span className="text-sm font-medium">{getThemeModeLabel(mode)}</span>
                 {settings.mode === mode && (
                   <div className="absolute top-3 right-3">
-                    <Check className="h-4 w-4 text-blue-500" />
+                    <Check className="h-4 w-4 text-primary" />
                   </div>
                 )}
               </button>
@@ -132,18 +132,18 @@ export function ThemeSelector({
                 onClick={() => onUpdate({ accentColor: color.value as AccentColor })}
                 className={`flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all ${
                   settings.accentColor === color.value
-                    ? "border-blue-500 bg-blue-500/10"
+                    ? "border-primary bg-primary/10"
                     : "border-muted hover:border-muted-foreground/50"
                 }`}
               >
                 <div
                   className={`w-10 h-10 rounded-full ${color.hex} shadow-lg ${
-                    settings.accentColor === color.value ? "ring-2 ring-blue-500 ring-offset-2" : ""
+                    settings.accentColor === color.value ? "ring-2 ring-primary ring-offset-2" : ""
                   }`}
                 />
                 <span className="text-xs font-medium">{color.label}</span>
                 {settings.accentColor === color.value && (
-                  <Check className="absolute top-2 right-2 h-4 w-4 text-blue-500" />
+                  <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />
                 )}
               </button>
             ))}
@@ -155,8 +155,8 @@ export function ThemeSelector({
       <Card>
         <CardHeader>
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-500/10 rounded-lg">
-              <Layout className="h-5 w-5 text-green-500" />
+            <div className="p-2 bg-success/10 rounded-lg">
+              <Layout className="h-5 w-5 text-success" />
             </div>
             <div>
               <CardTitle>Display Options</CardTitle>
@@ -206,9 +206,9 @@ export function ThemeSelector({
           <div
             className={`p-6 rounded-lg border-2 ${
               settings.mode === "dark"
-                ? "bg-gray-900 border-gray-700"
+                ? "bg-background border-border"
                 : settings.mode === "light"
-                ? "bg-gray-100 border-gray-300"
+                ? "bg-muted border-border"
                 : "bg-gradient-to-br from-gray-100 to-gray-900 border-gray-400"
             }`}
           >
@@ -216,15 +216,15 @@ export function ThemeSelector({
               <div className="flex items-center gap-3">
                 <div className={`w-10 h-10 rounded-full ${accentColors.find(c => c.value === settings.accentColor)?.hex}`} />
                 <div className="space-y-1">
-                  <div className={`h-3 w-32 rounded ${settings.mode === "dark" ? "bg-gray-700" : "bg-gray-300"}`} />
-                  <div className={`h-2 w-24 rounded ${settings.mode === "dark" ? "bg-gray-800" : "bg-gray-200"}`} />
+                  <div className={`h-3 w-32 rounded ${settings.mode === "dark" ? "bg-surface-raised" : "bg-gray-300"}`} />
+                  <div className={`h-2 w-24 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
                 </div>
               </div>
-              <div className={`h-2 w-full rounded ${settings.mode === "dark" ? "bg-gray-800" : "bg-gray-200"}`} />
-              <div className={`h-2 w-3/4 rounded ${settings.mode === "dark" ? "bg-gray-800" : "bg-gray-200"}`} />
+              <div className={`h-2 w-full rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
+              <div className={`h-2 w-3/4 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
               <div className="flex gap-2">
                 <div className={`h-8 w-24 rounded ${accentColors.find(c => c.value === settings.accentColor)?.hex}`} />
-                <div className={`h-8 w-20 rounded ${settings.mode === "dark" ? "bg-gray-800" : "bg-gray-200"}`} />
+                <div className={`h-8 w-20 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
               </div>
             </div>
           </div>
@@ -234,7 +234,7 @@ export function ThemeSelector({
       {/* Save Button */}
       <div className="flex items-center justify-end gap-3">
         {saveSuccess && (
-          <span className="text-sm text-green-500 flex items-center gap-1">
+          <span className="text-sm text-success flex items-center gap-1">
             <Check className="h-4 w-4" />
             Settings saved successfully
           </span>
diff --git a/frontend/src/components/social/ChatInterface.tsx b/frontend/src/components/social/ChatInterface.tsx
index 9cfcaeac..b3fc40c2 100644
--- a/frontend/src/components/social/ChatInterface.tsx
+++ b/frontend/src/components/social/ChatInterface.tsx
@@ -76,7 +76,7 @@ export function ChatInterface({
       case "delivered":
         return <CheckCheck className="h-4 w-4 text-muted-foreground" />;
       case "read":
-        return <CheckCheck className="h-4 w-4 text-blue-500" />;
+        return <CheckCheck className="h-4 w-4 text-primary" />;
       default:
         return null;
     }
@@ -168,7 +168,7 @@ export function ChatInterface({
               type="text"
               placeholder="Search conversations..."
               onChange={(e) => onSearchConversations?.(e.target.value)}
-              className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
             />
           </div>
         </div>
@@ -326,7 +326,7 @@ export function ChatInterface({
                   placeholder="Type a message..."
                   value={messageInput}
                   onChange={(e) => setMessageInput(e.target.value)}
-                  className="w-full px-4 py-2 bg-muted rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-4 py-2 bg-muted rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <Button
diff --git a/frontend/src/components/social/CommunityFeed.tsx b/frontend/src/components/social/CommunityFeed.tsx
index 1ee5fbb7..1bef9806 100644
--- a/frontend/src/components/social/CommunityFeed.tsx
+++ b/frontend/src/components/social/CommunityFeed.tsx
@@ -102,7 +102,7 @@ export function CommunityFeed({
               placeholder="Share something with the community..."
               value={newPostContent}
               onChange={(e) => setNewPostContent(e.target.value)}
-              className="w-full p-3 bg-muted rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full p-3 bg-muted rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
               rows={3}
             />
             <div className="flex items-center justify-between">
@@ -111,7 +111,7 @@ export function CommunityFeed({
                 placeholder="Tags (comma separated, e.g., guide, tips)"
                 value={newPostTags}
                 onChange={(e) => setNewPostTags(e.target.value)}
-                className="flex-1 mr-3 px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex-1 mr-3 px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
               />
               <Button
                 variant="primary"
@@ -203,7 +203,7 @@ export function CommunityFeed({
                     Share
                   </button>
                   <button
-                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-red-600"
+                    className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-destructive"
                     onClick={() => {
                       onReportPost?.(post.id);
                       setActiveMenu(null);
@@ -216,7 +216,7 @@ export function CommunityFeed({
                     <>
                       <div className="border-t my-1" />
                       <button
-                        className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-red-600"
+                        className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-destructive"
                         onClick={() => setActiveMenu(null)}
                       >
                         <Trash2 className="h-4 w-4" />
@@ -274,7 +274,7 @@ export function CommunityFeed({
             <Button
               variant="ghost"
               size="sm"
-              className={`flex-1 ${isLiked ? "text-red-500" : ""}`}
+              className={`flex-1 ${isLiked ? "text-destructive" : ""}`}
               onClick={() => onLikePost(post.id)}
             >
               <Heart className={`h-4 w-4 mr-2 ${isLiked ? "fill-current" : ""}`} />
@@ -314,7 +314,7 @@ export function CommunityFeed({
                       handleAddComment(post.id);
                     }
                   }}
-                  className="flex-1 px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                 />
                 <Button
                   variant="primary"
diff --git a/frontend/src/components/social/FriendRequests.tsx b/frontend/src/components/social/FriendRequests.tsx
index e392f373..33473d40 100644
--- a/frontend/src/components/social/FriendRequests.tsx
+++ b/frontend/src/components/social/FriendRequests.tsx
@@ -156,8 +156,8 @@ export function FriendRequestManager({
                     <span
                       className={
                         request.status === "accepted"
-                          ? "text-green-600"
-                          : "text-red-600"
+                          ? "text-success"
+                          : "text-destructive"
                       }
                     >
                       {request.status === "accepted" ? "Accepted" : "Declined"}
@@ -191,7 +191,7 @@ export function FriendRequestBadge({ count, onClick }: FriendRequestBadgeProps)
       className="relative inline-flex items-center justify-center"
     >
       <AlertCircle className="h-5 w-5 text-muted-foreground" />
-      <span className="absolute -top-1 -right-1 h-4 min-w-[16px] flex items-center justify-center bg-red-500 text-white text-[10px] font-bold rounded-full px-1">
+      <span className="absolute -top-1 -right-1 h-4 min-w-[16px] flex items-center justify-center bg-destructive text-white text-[10px] font-bold rounded-full px-1">
         {count}
       </span>
     </button>
diff --git a/frontend/src/components/social/FriendsList.tsx b/frontend/src/components/social/FriendsList.tsx
index 71b2007c..b80b55b5 100644
--- a/frontend/src/components/social/FriendsList.tsx
+++ b/frontend/src/components/social/FriendsList.tsx
@@ -144,7 +144,7 @@ export function FriendsList({
                 </button>
                 <div className="border-t my-1" />
                 <button
-                  className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-red-600"
+                  className="w-full px-3 py-2 text-sm text-left hover:bg-muted flex items-center gap-2 text-destructive"
                   onClick={() => {
                     onRemoveFriend(friend.id);
                     setActiveMenu(null);
@@ -212,7 +212,7 @@ export function FriendsList({
             placeholder="Search friends..."
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
-            className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
           />
         </div>
       </div>
diff --git a/frontend/src/components/social/InviteFriends.tsx b/frontend/src/components/social/InviteFriends.tsx
index fe01f703..c3c98d38 100644
--- a/frontend/src/components/social/InviteFriends.tsx
+++ b/frontend/src/components/social/InviteFriends.tsx
@@ -105,7 +105,7 @@ export function InviteFriends({
                 placeholder="Search by username..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full pl-9 pr-4 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
 
@@ -246,7 +246,7 @@ export function InviteFriends({
                     placeholder="friend@example.com"
                     value={emailInput}
                     onChange={(e) => setEmailInput(e.target.value)}
-                    className="w-full px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                   />
                 </div>
                 <Button type="submit" variant="primary" className="w-full">
@@ -291,7 +291,7 @@ export function QuickInviteButton({
 
   if (invited) {
     return (
-      <Button variant="outline" size="sm" className="h-8 text-green-600" disabled>
+      <Button variant="outline" size="sm" className="h-8 text-success" disabled>
         <Check className="h-4 w-4 mr-1" />
         Invited
       </Button>
diff --git a/frontend/src/components/social/OnlineStatus.tsx b/frontend/src/components/social/OnlineStatus.tsx
index a5cea5f9..b790b996 100644
--- a/frontend/src/components/social/OnlineStatus.tsx
+++ b/frontend/src/components/social/OnlineStatus.tsx
@@ -4,10 +4,10 @@ import { cn } from "@/lib/utils";
 import type { UserStatus } from "@/types/social";
 
 const statusConfig: Record<UserStatus, { label: string; color: string; bgColor: string }> = {
-  online: { label: "Online", color: "bg-green-500", bgColor: "bg-green-500/20" },
+  online: { label: "Online", color: "bg-success", bgColor: "bg-success/20" },
   "in-game": { label: "In Game", color: "bg-yellow-500", bgColor: "bg-yellow-500/20" },
   away: { label: "Away", color: "bg-orange-500", bgColor: "bg-orange-500/20" },
-  busy: { label: "Busy", color: "bg-red-500", bgColor: "bg-red-500/20" },
+  busy: { label: "Busy", color: "bg-destructive", bgColor: "bg-destructive/20" },
   offline: { label: "Offline", color: "bg-gray-500", bgColor: "bg-gray-500/20" },
 };
 
@@ -81,7 +81,7 @@ export function StatusSelector({ currentStatus, onStatusChange, className }: Sta
               isActive
                 ? cn(config.bgColor, "ring-2", config.color.replace("bg-", "ring-"))
                 : "hover:bg-muted",
-              "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
             )}
             title={config.label}
           >
diff --git a/frontend/src/components/social/PartyManager.tsx b/frontend/src/components/social/PartyManager.tsx
index 08ced6c4..de0306c7 100644
--- a/frontend/src/components/social/PartyManager.tsx
+++ b/frontend/src/components/social/PartyManager.tsx
@@ -107,7 +107,7 @@ export function PartyManager({
                       placeholder="Enter party name..."
                       value={partyName}
                       onChange={(e) => setPartyName(e.target.value)}
-                      className="w-full px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full px-3 py-2 bg-muted rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     />
                   </div>
                   <div className="flex items-center justify-between">
@@ -289,7 +289,7 @@ export function PartyManager({
                     size="md"
                   />
                   {member.isSpeaking && (
-                    <div className="absolute -bottom-1 -right-1 h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
+                    <div className="absolute -bottom-1 -right-1 h-4 w-4 bg-success rounded-full flex items-center justify-center">
                       <Volume2 className="h-2 w-2 text-white" />
                     </div>
                   )}
@@ -301,7 +301,7 @@ export function PartyManager({
                       <Crown className="h-4 w-4 text-yellow-500" />
                     )}
                     {member.isReady && (
-                      <Check className="h-4 w-4 text-green-500" />
+                      <Check className="h-4 w-4 text-success" />
                     )}
                   </div>
                   <span className="text-xs text-muted-foreground">
@@ -318,7 +318,7 @@ export function PartyManager({
                     <Button
                       variant="ghost"
                       size="sm"
-                      className="h-7 w-7 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
+                      className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/5"
                       onClick={() => onKickFromParty(member.user.id)}
                     >
                       <X className="h-4 w-4" />
@@ -334,7 +334,7 @@ export function PartyManager({
         <div className="flex items-center justify-between p-3 rounded-lg bg-muted/30">
           <div className="flex items-center gap-2">
             {party.voiceChatEnabled ? (
-              <Mic className="h-5 w-5 text-green-500" />
+              <Mic className="h-5 w-5 text-success" />
             ) : (
               <MicOff className="h-5 w-5 text-muted-foreground" />
             )}
diff --git a/frontend/src/components/tournaments/JoinTournamentButton.tsx b/frontend/src/components/tournaments/JoinTournamentButton.tsx
index 62134ad4..9237a3b9 100644
--- a/frontend/src/components/tournaments/JoinTournamentButton.tsx
+++ b/frontend/src/components/tournaments/JoinTournamentButton.tsx
@@ -152,18 +152,18 @@ export function JoinTournamentButton({
         {canJoin && (
           <>
             {tournament.entryFee > 0 && (
-              <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900 rounded-lg p-3">
-                <p className="text-xs text-blue-900 dark:text-blue-100">
+              <div className="bg-info-muted dark:bg-info-muted/20 border border-blue-200 dark:border-info/30 rounded-lg p-3">
+                <p className="text-xs text-info dark:text-info-muted-foreground">
                   <span className="font-semibold">Entry Fee:</span> You will be
                   charged ${tournament.entryFee} upon joining.
                 </p>
               </div>
             )}
 
-            <div className="bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg p-3">
+            <div className="bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg p-3">
               <div className="flex gap-2">
-                <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
-                <p className="text-xs text-green-900 dark:text-green-100">
+                <CheckCircle className="h-4 w-4 text-success dark:text-success/80 flex-shrink-0 mt-0.5" />
+                <p className="text-xs text-green-900 dark:text-success-muted-foreground">
                   Tournament starts on{" "}
                   <span className="font-semibold">
                     {new Date(tournament.startTime).toLocaleDateString()}
@@ -175,10 +175,10 @@ export function JoinTournamentButton({
         )}
 
         {isJoined && (
-          <div className="bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg p-3">
+          <div className="bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg p-3">
             <div className="flex gap-2">
-              <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
-              <p className="text-xs text-green-900 dark:text-green-100">
+              <CheckCircle className="h-4 w-4 text-success dark:text-success/80 flex-shrink-0 mt-0.5" />
+              <p className="text-xs text-green-900 dark:text-success-muted-foreground">
                 You are registered for this tournament!
               </p>
             </div>
@@ -186,10 +186,10 @@ export function JoinTournamentButton({
         )}
 
         {isFull && (
-          <div className="bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 rounded-lg p-3">
+          <div className="bg-destructive/5 dark:bg-destructive/10/20 border border-red-200 dark:border-red-900 rounded-lg p-3">
             <div className="flex gap-2">
-              <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
-              <p className="text-xs text-red-900 dark:text-red-100">
+              <AlertCircle className="h-4 w-4 text-destructive dark:text-destructive/80 flex-shrink-0 mt-0.5" />
+              <p className="text-xs text-red-900 dark:text-destructive-foreground">
                 All slots are filled. Join the waitlist.
               </p>
             </div>
@@ -197,10 +197,10 @@ export function JoinTournamentButton({
         )}
 
         {isOngoing && (
-          <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900 rounded-lg p-3">
+          <div className="bg-info-muted dark:bg-info-muted/20 border border-blue-200 dark:border-info/30 rounded-lg p-3">
             <div className="flex gap-2">
-              <Clock className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
-              <p className="text-xs text-blue-900 dark:text-blue-100">
+              <Clock className="h-4 w-4 text-primary dark:text-primary/80 flex-shrink-0 mt-0.5" />
+              <p className="text-xs text-info dark:text-info-muted-foreground">
                 This tournament is currently in progress.
               </p>
             </div>
@@ -208,8 +208,8 @@ export function JoinTournamentButton({
         )}
 
         {isCompleted && (
-          <div className="bg-gray-50 dark:bg-gray-950/20 border border-gray-200 dark:border-gray-900 rounded-lg p-3">
-            <p className="text-xs text-gray-900 dark:text-gray-100">
+          <div className="bg-muted dark:bg-gray-950/20 border border-gray-200 dark:border-gray-900 rounded-lg p-3">
+            <p className="text-xs text-foreground dark:text-foreground">
               This tournament has already concluded.
             </p>
           </div>
@@ -224,13 +224,13 @@ export function JoinTournamentButton({
             <div className="flex items-center justify-between p-6 border-b">
               <div className="flex items-center gap-3">
                 {joinStatus === "success" && (
-                  <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
+                  <CheckCircle className="h-5 w-5 text-success dark:text-success/80" />
                 )}
                 {joinStatus === "confirming" && (
-                  <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400 animate-spin" />
+                  <Clock className="h-5 w-5 text-primary dark:text-primary/80 animate-spin" />
                 )}
                 {joinStatus === "idle" && (
-                  <Users className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                  <Users className="h-5 w-5 text-primary dark:text-primary/80" />
                 )}
                 <h2 className="font-semibold text-foreground">
                   {joinStatus === "idle" && !localStorage.getItem("auth_token")
@@ -257,8 +257,8 @@ export function JoinTournamentButton({
                     You need to be signed in to join a tournament. Create an
                     account or log in to continue.
                   </p>
-                  <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900 rounded-lg p-3">
-                    <p className="text-xs text-blue-900 dark:text-blue-100">
+                  <div className="bg-info-muted dark:bg-info-muted/20 border border-blue-200 dark:border-info/30 rounded-lg p-3">
+                    <p className="text-xs text-info dark:text-info-muted-foreground">
                       <span className="font-semibold">Entry Fee:</span> You will
                       be charged ${tournament.entryFee} upon joining.
                     </p>
@@ -292,7 +292,7 @@ export function JoinTournamentButton({
               )}
 
               {joinStatus === "error" && (
-                <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-900 dark:border-red-900 dark:bg-red-950/20 dark:text-red-100">
+                <div className="rounded-lg border border-red-200 bg-destructive/5 p-4 text-sm text-red-900 dark:border-red-900 dark:bg-destructive/10/20 dark:text-destructive-foreground">
                   <p className="font-semibold">Unable to join tournament</p>
                   <p className="mt-2">{errorMessage}</p>
                 </div>
@@ -305,8 +305,8 @@ export function JoinTournamentButton({
                     Congratulations! You have successfully joined the
                     tournament. Check your email for confirmation details.
                   </p>
-                  <div className="bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg p-3">
-                    <p className="text-sm text-green-900 dark:text-green-100">
+                  <div className="bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg p-3">
+                    <p className="text-sm text-green-900 dark:text-success-muted-foreground">
                       Tournament starts on{" "}
                       <span className="font-semibold">
                         {new Date(tournament.startTime).toLocaleDateString()}
diff --git a/frontend/src/components/tournaments/MatchCard.tsx b/frontend/src/components/tournaments/MatchCard.tsx
index 555f6258..b03a01ef 100644
--- a/frontend/src/components/tournaments/MatchCard.tsx
+++ b/frontend/src/components/tournaments/MatchCard.tsx
@@ -14,11 +14,11 @@ interface MatchCardProps {
 }
 
 const statusConfig = {
-  pending: { label: "Pending", color: "text-gray-500", bg: "bg-gray-100 dark:bg-gray-800" },
-  ready: { label: "Ready", color: "text-blue-600", bg: "bg-blue-100 dark:bg-blue-900" },
-  in_progress: { label: "Live", color: "text-green-600", bg: "bg-green-100 dark:bg-green-900" },
+  pending: { label: "Pending", color: "text-muted-foreground", bg: "bg-muted dark:bg-surface" },
+  ready: { label: "Ready", color: "text-primary", bg: "bg-blue-100 dark:bg-info-muted" },
+  in_progress: { label: "Live", color: "text-success", bg: "bg-success-muted dark:bg-success-muted" },
   completed: { label: "Completed", color: "text-purple-600", bg: "bg-purple-100 dark:bg-purple-900" },
-  disputed: { label: "Disputed", color: "text-red-600", bg: "bg-red-100 dark:bg-red-900" },
+  disputed: { label: "Disputed", color: "text-destructive", bg: "bg-destructive/10 dark:bg-destructive/20" },
 };
 
 export function MatchCard({ match, currentUserId, showLink = true }: MatchCardProps) {
@@ -35,8 +35,8 @@ export function MatchCard({ match, currentUserId, showLink = true }: MatchCardPr
       {/* Header */}
       <div className="flex items-center justify-between border-b px-4 py-3">
         <div className="flex items-center gap-2">
-          {isLive && <RadioTower className="h-4 w-4 animate-pulse text-green-500" />}
-          {isDisputed && <AlertTriangle className="h-4 w-4 text-red-500" />}
+          {isLive && <RadioTower className="h-4 w-4 animate-pulse text-success" />}
+          {isDisputed && <AlertTriangle className="h-4 w-4 text-destructive" />}
           {isCompleted && <CheckCircle className="h-4 w-4 text-purple-500" />}
           {!isLive && !isDisputed && !isCompleted && <Swords className="h-4 w-4 text-muted-foreground" />}
           <span className="text-sm font-medium text-foreground">
@@ -60,14 +60,14 @@ export function MatchCard({ match, currentUserId, showLink = true }: MatchCardPr
           <div
             key={idx}
             className={`flex items-center justify-between px-4 py-3 ${
-              isWinner ? "bg-green-50 dark:bg-green-950/20" : ""
+              isWinner ? "bg-success-muted dark:bg-success-muted/20" : ""
             }`}
           >
             <div className="flex items-center gap-3">
               <div
                 className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold text-white ${
                   player?.id === currentUserId
-                    ? "bg-blue-600"
+                    ? "bg-primary/90"
                     : "bg-gradient-to-br from-slate-500 to-slate-700"
                 }`}
               >
@@ -77,7 +77,7 @@ export function MatchCard({ match, currentUserId, showLink = true }: MatchCardPr
                 <p className={`text-sm font-semibold ${isWinner ? "text-green-700 dark:text-green-300" : "text-foreground"}`}>
                   {player ? player.username : "TBD"}
                   {player?.id === currentUserId && (
-                    <span className="ml-1 text-xs text-blue-500">(you)</span>
+                    <span className="ml-1 text-xs text-primary">(you)</span>
                   )}
                 </p>
                 {player?.elo && (
@@ -86,9 +86,9 @@ export function MatchCard({ match, currentUserId, showLink = true }: MatchCardPr
               </div>
             </div>
             <div className="flex items-center gap-2">
-              {isWinner && <CheckCircle className="h-4 w-4 text-green-500" />}
+              {isWinner && <CheckCircle className="h-4 w-4 text-success" />}
               {score !== undefined && (
-                <span className={`text-lg font-bold ${isWinner ? "text-green-600 dark:text-green-400" : "text-foreground"}`}>
+                <span className={`text-lg font-bold ${isWinner ? "text-success dark:text-success/80" : "text-foreground"}`}>
                   {score}
                 </span>
               )}
@@ -125,7 +125,7 @@ export function MatchCard({ match, currentUserId, showLink = true }: MatchCardPr
 
       {/* Dispute notice */}
       {isDisputed && match.conflictReason && (
-        <div className="border-t bg-red-50 px-4 py-2 dark:bg-red-950/20">
+        <div className="border-t bg-destructive/5 px-4 py-2 dark:bg-destructive/10/20">
           <p className="text-xs text-red-700 dark:text-red-300">{match.conflictReason}</p>
         </div>
       )}
diff --git a/frontend/src/components/tournaments/PrizePool.tsx b/frontend/src/components/tournaments/PrizePool.tsx
index a79a7231..235f97e4 100644
--- a/frontend/src/components/tournaments/PrizePool.tsx
+++ b/frontend/src/components/tournaments/PrizePool.tsx
@@ -10,7 +10,7 @@ interface PrizePoolProps {
 
 const positionIcons = [
   <Trophy key={1} className="h-5 w-5 text-amber-400" />,
-  <Medal key={2} className="h-5 w-5 text-slate-400" />,
+  <Medal key={2} className="h-5 w-5 text-muted-foreground" />,
   <Medal key={3} className="h-5 w-5 text-orange-400" />,
 ];
 
diff --git a/frontend/src/components/tournaments/QuickJoinModal.tsx b/frontend/src/components/tournaments/QuickJoinModal.tsx
index 8b09bb3b..cf2a867c 100644
--- a/frontend/src/components/tournaments/QuickJoinModal.tsx
+++ b/frontend/src/components/tournaments/QuickJoinModal.tsx
@@ -73,16 +73,16 @@ export function QuickJoinModal({
         <div className="flex items-center justify-between p-6 border-b">
           <div className="flex items-center gap-3">
             {joinStatus === "success" && (
-              <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
+              <CheckCircle className="h-5 w-5 text-success dark:text-success/80" />
             )}
             {joinStatus === "confirming" && (
-              <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400 animate-spin" />
+              <Clock className="h-5 w-5 text-primary dark:text-primary/80 animate-spin" />
             )}
             {joinStatus === "idle" && (
-              <Users className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              <Users className="h-5 w-5 text-primary dark:text-primary/80" />
             )}
             {joinStatus === "error" && (
-              <X className="h-5 w-5 text-red-600 dark:text-red-400" />
+              <X className="h-5 w-5 text-destructive dark:text-destructive/80" />
             )}
             <h2 className="font-semibold text-foreground">
               {joinStatus === "success"
@@ -136,8 +136,8 @@ export function QuickJoinModal({
                 </div>
               </div>
               {tournament.entryFee > 0 && (
-                <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900 rounded-lg p-3">
-                  <p className="text-xs text-blue-900 dark:text-blue-100">
+                <div className="bg-info-muted dark:bg-info-muted/20 border border-blue-200 dark:border-info/30 rounded-lg p-3">
+                  <p className="text-xs text-info dark:text-info-muted-foreground">
                     <span className="font-semibold">Note:</span> You will be
                     charged ${tournament.entryFee} upon confirmation.
                   </p>
@@ -175,8 +175,8 @@ export function QuickJoinModal({
               <p className="text-sm text-muted-foreground">
                 Congratulations! You have successfully joined the tournament.
               </p>
-              <div className="bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg p-3">
-                <p className="text-sm text-green-900 dark:text-green-100">
+              <div className="bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg p-3">
+                <p className="text-sm text-green-900 dark:text-success-muted-foreground">
                   Tournament starts on{" "}
                   <span className="font-semibold">
                     {new Date(tournament.startTime).toLocaleDateString()}
@@ -190,8 +190,8 @@ export function QuickJoinModal({
           {joinStatus === "error" && (
             <>
               <p className="text-sm text-destructive">{error}</p>
-              <div className="bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 rounded-lg p-3">
-                <p className="text-sm text-red-900 dark:text-red-100">
+              <div className="bg-destructive/5 dark:bg-destructive/10/20 border border-red-200 dark:border-red-900 rounded-lg p-3">
+                <p className="text-sm text-red-900 dark:text-destructive-foreground">
                   There was an error joining the tournament. Please try again.
                 </p>
               </div>
diff --git a/frontend/src/components/tournaments/RegistrationForm.tsx b/frontend/src/components/tournaments/RegistrationForm.tsx
index 615788bb..5cdc6b31 100644
--- a/frontend/src/components/tournaments/RegistrationForm.tsx
+++ b/frontend/src/components/tournaments/RegistrationForm.tsx
@@ -79,13 +79,13 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
   if (status === "success") {
     return (
       <div className="flex flex-col items-center gap-4 py-8 text-center">
-        <CheckCircle className="h-16 w-16 text-green-500" />
+        <CheckCircle className="h-16 w-16 text-success" />
         <h3 className="text-xl font-bold text-foreground">Registration Confirmed</h3>
         <p className="text-muted-foreground">
           You&apos;re registered for <span className="font-semibold">{tournament.name}</span>.
           We&apos;ll notify you when your first match is ready.
         </p>
-        <div className="rounded-lg border border-green-200 bg-green-50 p-4 text-sm text-green-800 dark:border-green-900 dark:bg-green-950/20 dark:text-green-200">
+        <div className="rounded-lg border border-success/30 bg-success-muted p-4 text-sm text-green-800 dark:border-success/30 dark:bg-success-muted/20 dark:text-green-200">
           Tournament starts on{" "}
           <span className="font-semibold">
             {new Date(tournament.startTime).toLocaleDateString("en-US", {
@@ -125,7 +125,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
       <div className="space-y-4">
         <div className="space-y-1">
           <label htmlFor="reg-username" className="text-sm font-medium text-foreground">
-            In-game Username <span className="text-red-500">*</span>
+            In-game Username <span className="text-destructive">*</span>
           </label>
           <Input
             id="reg-username"
@@ -135,7 +135,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
             aria-invalid={!!errors.username}
           />
           {errors.username && (
-            <p className="flex items-center gap-1 text-xs text-red-500">
+            <p className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" /> {errors.username}
             </p>
           )}
@@ -143,7 +143,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
 
         <div className="space-y-1">
           <label htmlFor="reg-email" className="text-sm font-medium text-foreground">
-            Email <span className="text-red-500">*</span>
+            Email <span className="text-destructive">*</span>
           </label>
           <Input
             id="reg-email"
@@ -154,7 +154,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
             aria-invalid={!!errors.email}
           />
           {errors.email && (
-            <p className="flex items-center gap-1 text-xs text-red-500">
+            <p className="flex items-center gap-1 text-xs text-destructive">
               <AlertCircle className="h-3 w-3" /> {errors.email}
             </p>
           )}
@@ -174,7 +174,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
       </div>
 
       {submitError ? (
-        <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-900 dark:border-red-900 dark:bg-red-950/20 dark:text-red-100">
+        <div className="rounded-lg border border-red-200 bg-destructive/5 p-3 text-sm text-red-900 dark:border-red-900 dark:bg-destructive/10/20 dark:text-destructive-foreground">
           <p className="font-semibold">Registration failed</p>
           <p className="mt-1">{submitError}</p>
         </div>
@@ -184,7 +184,7 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
       <label className="flex cursor-pointer items-start gap-3">
         <input
           type="checkbox"
-          className="mt-0.5 h-4 w-4 rounded border-gray-300 accent-blue-600"
+          className="mt-0.5 h-4 w-4 rounded border-border accent-blue-600"
           checked={form.agreedToRules}
           onChange={(e) => setForm((f) => ({ ...f, agreedToRules: e.target.checked }))}
         />
@@ -195,15 +195,15 @@ export function RegistrationForm({ tournament, onSuccess, onCancel }: Registrati
         </span>
       </label>
       {errors.agreedToRules === false && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="flex items-center gap-1 text-xs text-destructive">
           <AlertCircle className="h-3 w-3" /> You must agree to the rules
         </p>
       )}
 
       {/* Entry fee notice */}
       {tournament.entryFee > 0 && (
-        <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950/20">
-          <p className="text-xs text-blue-900 dark:text-blue-100">
+        <div className="rounded-lg border border-blue-200 bg-info-muted p-3 dark:border-info/30 dark:bg-info-muted/20">
+          <p className="text-xs text-info dark:text-info-muted-foreground">
             <span className="font-semibold">Payment:</span> Your wallet will be charged{" "}
             <span className="font-semibold">${tournament.entryFee}</span> upon confirmation.
           </p>
diff --git a/frontend/src/components/tournaments/TournamentBracket.tsx b/frontend/src/components/tournaments/TournamentBracket.tsx
index d7b75747..94e5e01d 100644
--- a/frontend/src/components/tournaments/TournamentBracket.tsx
+++ b/frontend/src/components/tournaments/TournamentBracket.tsx
@@ -22,8 +22,8 @@ export function TournamentBracket({ bracketData, currentUserId }: TournamentBrac
     <div className="space-y-6">
       {/* Live indicator */}
       {liveMatchCount > 0 && (
-        <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-2 dark:border-green-900 dark:bg-green-950/20">
-          <RadioTower className="h-4 w-4 animate-pulse text-green-500" />
+        <div className="flex items-center gap-2 rounded-lg border border-success/30 bg-success-muted px-4 py-2 dark:border-success/30 dark:bg-success-muted/20">
+          <RadioTower className="h-4 w-4 animate-pulse text-success" />
           <span className="text-sm font-medium text-green-700 dark:text-green-300">
             {liveMatchCount} match{liveMatchCount > 1 ? "es" : ""} live
           </span>
@@ -39,7 +39,7 @@ export function TournamentBracket({ bracketData, currentUserId }: TournamentBrac
               onClick={() => setActiveSection(section.id)}
               className={`whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors ${
                 activeSection === section.id
-                  ? "bg-blue-600 text-white"
+                  ? "bg-primary/90 text-white"
                   : "bg-muted text-muted-foreground hover:text-foreground"
               }`}
             >
diff --git a/frontend/src/components/tournaments/TournamentCard.tsx b/frontend/src/components/tournaments/TournamentCard.tsx
index 51709382..fba7b99f 100644
--- a/frontend/src/components/tournaments/TournamentCard.tsx
+++ b/frontend/src/components/tournaments/TournamentCard.tsx
@@ -16,12 +16,12 @@ const statusConfig: Record<
   draft: {
     label: "Draft",
     color: "text-gray-600",
-    bgColor: "bg-gray-100 dark:bg-gray-800",
+    bgColor: "bg-muted dark:bg-surface",
   },
   registration_open: {
     label: "Registration Open",
-    color: "text-green-600",
-    bgColor: "bg-green-100 dark:bg-green-900",
+    color: "text-success",
+    bgColor: "bg-success-muted dark:bg-success-muted",
   },
   registration_closed: {
     label: "Registration Closed",
@@ -30,8 +30,8 @@ const statusConfig: Record<
   },
   in_progress: {
     label: "Ongoing",
-    color: "text-blue-600",
-    bgColor: "bg-blue-100 dark:bg-blue-900",
+    color: "text-primary",
+    bgColor: "bg-blue-100 dark:bg-info-muted",
   },
   completed: {
     label: "Completed",
@@ -40,8 +40,8 @@ const statusConfig: Record<
   },
   cancelled: {
     label: "Cancelled",
-    color: "text-red-600",
-    bgColor: "bg-red-100 dark:bg-red-900",
+    color: "text-destructive",
+    bgColor: "bg-destructive/10 dark:bg-destructive/20",
   },
 };
 
@@ -142,7 +142,7 @@ export function TournamentCard({ tournament }: TournamentCardProps) {
           <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
             <div
               className={`h-full transition-all duration-300 ${
-                isFull ? "bg-orange-500" : "bg-blue-500"
+                isFull ? "bg-orange-500" : "bg-primary"
               }`}
               style={{ width: `${participantPercentage}%` }}
             />
diff --git a/frontend/src/components/tournaments/TournamentCardWithQuickJoin.tsx b/frontend/src/components/tournaments/TournamentCardWithQuickJoin.tsx
index 97c2e590..456daf19 100644
--- a/frontend/src/components/tournaments/TournamentCardWithQuickJoin.tsx
+++ b/frontend/src/components/tournaments/TournamentCardWithQuickJoin.tsx
@@ -21,12 +21,12 @@ const statusConfig: Record<
   draft: {
     label: "Draft",
     color: "text-gray-600",
-    bgColor: "bg-gray-100 dark:bg-gray-800",
+    bgColor: "bg-muted dark:bg-surface",
   },
   registration_open: {
     label: "Registration Open",
-    color: "text-green-600",
-    bgColor: "bg-green-100 dark:bg-green-900",
+    color: "text-success",
+    bgColor: "bg-success-muted dark:bg-success-muted",
   },
   registration_closed: {
     label: "Registration Closed",
@@ -35,8 +35,8 @@ const statusConfig: Record<
   },
   in_progress: {
     label: "Ongoing",
-    color: "text-blue-600",
-    bgColor: "bg-blue-100 dark:bg-blue-900",
+    color: "text-primary",
+    bgColor: "bg-blue-100 dark:bg-info-muted",
   },
   completed: {
     label: "Completed",
@@ -45,8 +45,8 @@ const statusConfig: Record<
   },
   cancelled: {
     label: "Cancelled",
-    color: "text-red-600",
-    bgColor: "bg-red-100 dark:bg-red-900",
+    color: "text-destructive",
+    bgColor: "bg-destructive/10 dark:bg-destructive/20",
   },
 };
 
@@ -171,7 +171,7 @@ export function TournamentCardWithQuickJoin({
             <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
               <div
                 className={`h-full transition-all duration-300 ${
-                  isFull ? "bg-orange-500" : "bg-blue-500"
+                  isFull ? "bg-orange-500" : "bg-primary"
                 }`}
                 style={{ width: `${participantPercentage}%` }}
               />
@@ -180,7 +180,7 @@ export function TournamentCardWithQuickJoin({
 
           {/* Joined Badge */}
           {isJoined && (
-            <div className="bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg p-2 text-center">
+            <div className="bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg p-2 text-center">
               <p className="text-xs font-medium text-green-700 dark:text-green-300">
                 ✓ You have joined this tournament
               </p>
diff --git a/frontend/src/components/tournaments/TournamentHeader.tsx b/frontend/src/components/tournaments/TournamentHeader.tsx
index 68d2e019..212f5114 100644
--- a/frontend/src/components/tournaments/TournamentHeader.tsx
+++ b/frontend/src/components/tournaments/TournamentHeader.tsx
@@ -14,12 +14,12 @@ const statusConfig: Record<
   draft: {
     label: "Draft",
     color: "text-gray-600",
-    bgColor: "bg-gray-100 dark:bg-gray-800",
+    bgColor: "bg-muted dark:bg-surface",
   },
   registration_open: {
     label: "Registration Open",
-    color: "text-green-600",
-    bgColor: "bg-green-100 dark:bg-green-900",
+    color: "text-success",
+    bgColor: "bg-success-muted dark:bg-success-muted",
   },
   registration_closed: {
     label: "Registration Closed",
@@ -28,8 +28,8 @@ const statusConfig: Record<
   },
   in_progress: {
     label: "Ongoing",
-    color: "text-blue-600",
-    bgColor: "bg-blue-100 dark:bg-blue-900",
+    color: "text-primary",
+    bgColor: "bg-blue-100 dark:bg-info-muted",
   },
   completed: {
     label: "Completed",
@@ -38,8 +38,8 @@ const statusConfig: Record<
   },
   cancelled: {
     label: "Cancelled",
-    color: "text-red-600",
-    bgColor: "bg-red-100 dark:bg-red-900",
+    color: "text-destructive",
+    bgColor: "bg-destructive/10 dark:bg-destructive/20",
   },
 };
 
@@ -127,7 +127,7 @@ export function TournamentHeader({ tournament }: TournamentHeaderProps) {
 
         {/* Start Date */}
         <div className="flex items-start gap-3">
-          <Calendar className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+          <Calendar className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
           <div className="min-w-0">
             <p className="text-xs text-muted-foreground uppercase tracking-wide">
               Start Date
@@ -141,7 +141,7 @@ export function TournamentHeader({ tournament }: TournamentHeaderProps) {
 
         {/* Participants */}
         <div className="flex items-start gap-3">
-          <Users className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+          <Users className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
           <div className="min-w-0">
             <p className="text-xs text-muted-foreground uppercase tracking-wide">
               Participants
@@ -149,10 +149,10 @@ export function TournamentHeader({ tournament }: TournamentHeaderProps) {
             <p className="text-lg font-bold text-foreground">
               {tournament.currentParticipants}/{tournament.maxParticipants}
             </p>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1">
+            <div className="w-full bg-muted dark:bg-surface-raised rounded-full h-1.5 mt-1">
               <div
                 className={`h-1.5 rounded-full transition-all ${
-                  isFull ? "bg-red-500" : "bg-green-500"
+                  isFull ? "bg-destructive" : "bg-success"
                 }`}
                 style={{ width: `${participantPercentage}%` }}
               />
diff --git a/frontend/src/components/tournaments/TournamentParticipants.tsx b/frontend/src/components/tournaments/TournamentParticipants.tsx
index 26a827ee..ddb6554d 100644
--- a/frontend/src/components/tournaments/TournamentParticipants.tsx
+++ b/frontend/src/components/tournaments/TournamentParticipants.tsx
@@ -83,14 +83,14 @@ export function TournamentParticipants({
               {tournament.currentParticipants} of {tournament.maxParticipants}{" "}
               slots filled
               {!isFull && (
-                <span className="text-green-600 dark:text-green-400 font-medium">
+                <span className="text-success dark:text-success/80 font-medium">
                   {" "}
                   • {availableSlots} spot{availableSlots > 1 ? "s" : ""}{" "}
                   available
                 </span>
               )}
               {isFull && (
-                <span className="text-red-600 dark:text-red-400 font-medium">
+                <span className="text-destructive dark:text-destructive/80 font-medium">
                   {" "}
                   • Tournament is full
                 </span>
@@ -187,8 +187,8 @@ export function TournamentParticipants({
 
         {/* Available Slots Info */}
         {!isFull && (
-          <div className="mt-6 p-4 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-900 rounded-lg">
-            <p className="text-sm text-green-900 dark:text-green-100">
+          <div className="mt-6 p-4 bg-success-muted dark:bg-success-muted/20 border border-success/30 dark:border-success/30 rounded-lg">
+            <p className="text-sm text-green-900 dark:text-success-muted-foreground">
               <span className="font-semibold">
                 {availableSlots} spot{availableSlots > 1 ? "s" : ""} available!
               </span>{" "}
diff --git a/frontend/src/components/tournaments/TournamentRules.tsx b/frontend/src/components/tournaments/TournamentRules.tsx
index b236d369..029a001e 100644
--- a/frontend/src/components/tournaments/TournamentRules.tsx
+++ b/frontend/src/components/tournaments/TournamentRules.tsx
@@ -23,14 +23,14 @@ export function TournamentRules({ tournament }: TournamentRulesProps) {
         title: "Eligibility",
         description:
           "Players must be 18+ years old and have a valid account to participate in this tournament.",
-        color: "text-green-600",
+        color: "text-success",
       },
       {
         icon: Clock,
         title: "Check-in Requirement",
         description:
           "Players must check in 15 minutes before their match starts. Failure to do so results in forfeit.",
-        color: "text-blue-600",
+        color: "text-primary",
       },
       {
         icon: Users,
@@ -50,7 +50,7 @@ export function TournamentRules({ tournament }: TournamentRulesProps) {
         title: "Disqualification",
         description:
           "Players will be disqualified for: cheating, abusive conduct, failure to show up, or violating tournament rules.",
-        color: "text-red-600",
+        color: "text-destructive",
       },
       {
         icon: Trophy,
@@ -112,11 +112,11 @@ export function TournamentRules({ tournament }: TournamentRulesProps) {
       </div>
 
       {/* Additional Info Section */}
-      <div className="bg-blue-50 dark:bg-blue-950/20 border-t border-blue-200 dark:border-blue-900 p-6 md:p-8">
+      <div className="bg-info-muted dark:bg-info-muted/20 border-t border-blue-200 dark:border-info/30 p-6 md:p-8">
         <div className="flex gap-3">
-          <AlertCircle className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+          <AlertCircle className="h-5 w-5 text-primary dark:text-primary/80 flex-shrink-0 mt-0.5" />
           <div>
-            <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
+            <h4 className="font-semibold text-info dark:text-info-muted-foreground mb-2">
               Important: Before You Join
             </h4>
             <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 55c5da63..bb3189c9 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -12,10 +12,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
 
     const variantClasses = {
-      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500',
-      secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500',
-      outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus-visible:ring-gray-500',
-      ghost: 'text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-500',
+      primary: 'bg-primary/90 text-white hover:bg-blue-700 focus-visible:ring-primary',
+      secondary: 'bg-gray-600 text-white hover:bg-surface-raised focus-visible:ring-gray-500',
+      outline: 'border border-border bg-white text-foreground/70 hover:bg-muted focus-visible:ring-gray-500',
+      ghost: 'text-foreground/70 hover:bg-muted focus-visible:ring-gray-500',
     };
 
     const sizeClasses = {
diff --git a/frontend/src/components/ui/SkipLink.tsx b/frontend/src/components/ui/SkipLink.tsx
index 15e9d6c3..fe8eb05d 100644
--- a/frontend/src/components/ui/SkipLink.tsx
+++ b/frontend/src/components/ui/SkipLink.tsx
@@ -12,7 +12,7 @@ export const SkipLink: React.FC<SkipLinkProps> = ({
   return (
     <a
       href={`#${targetId}`}
-      className="fixed top-4 left-4 z-50 -translate-y-full rounded-md bg-blue-600 px-4 py-2 text-white font-medium focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-transform"
+      className="fixed top-4 left-4 z-50 -translate-y-full rounded-md bg-primary/90 px-4 py-2 text-white font-medium focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-transform"
     >
       {label}
     </a>
diff --git a/frontend/src/components/wallet/TransactionHistory.tsx b/frontend/src/components/wallet/TransactionHistory.tsx
index 3d882fee..15dadd4b 100644
--- a/frontend/src/components/wallet/TransactionHistory.tsx
+++ b/frontend/src/components/wallet/TransactionHistory.tsx
@@ -26,7 +26,7 @@ const statusStyles: Record<TxHistoryItem["status"], string> = {
     "bg-amber-100 text-amber-900 dark:bg-amber-900/25 dark:text-amber-100",
   success:
     "bg-emerald-100 text-emerald-900 dark:bg-emerald-900/25 dark:text-emerald-100",
-  failed: "bg-red-100 text-red-900 dark:bg-red-900/25 dark:text-red-100",
+  failed: "bg-destructive/10 text-red-900 dark:bg-destructive/20/25 dark:text-destructive-foreground",
 };
 
 export function TransactionHistory({ items, onClear }: TransactionHistoryProps) {
@@ -85,7 +85,7 @@ export function TransactionHistory({ items, onClear }: TransactionHistoryProps)
                       href={item.explorerUrl}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-blue-600 hover:underline dark:text-blue-400"
+                      className="text-primary hover:underline dark:text-primary/80"
                     >
                       View Explorer
                     </a>
diff --git a/frontend/src/components/wallet/TransactionToasts.tsx b/frontend/src/components/wallet/TransactionToasts.tsx
index f50400a3..acebf7ff 100644
--- a/frontend/src/components/wallet/TransactionToasts.tsx
+++ b/frontend/src/components/wallet/TransactionToasts.tsx
@@ -9,7 +9,7 @@ const toastStyles: Record<string, string> = {
   success:
     "border-emerald-300 bg-emerald-100/90 text-emerald-950 dark:border-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-100",
   failed:
-    "border-red-300 bg-red-100/90 text-red-950 dark:border-red-700 dark:bg-red-900/50 dark:text-red-100",
+    "border-red-300 bg-destructive/10/90 text-red-950 dark:border-red-700 dark:bg-destructive/20/50 dark:text-destructive-foreground",
 };
 
 export function TransactionToasts() {
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 492123e3..8945af01 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 217 91% 60%;
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -30,10 +30,31 @@
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 217 91% 60%;
 
     --radius: 0.5rem;
-    
+
+    /* Semantic surface tokens */
+    --surface: 220 13% 18%;
+    --surface-raised: 220 13% 22%;
+    --surface-overlay: 220 13% 26%;
+
+    /* Semantic status tokens */
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --success-muted: 142 71% 95%;
+    --success-muted-foreground: 142 71% 25%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --warning-muted: 38 92% 95%;
+    --warning-muted-foreground: 38 92% 25%;
+
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+    --info-muted: 217 91% 95%;
+    --info-muted-foreground: 217 91% 30%;
+
     /* Safe area insets */
     --sat: env(safe-area-inset-top);
     --sar: env(safe-area-inset-right);
@@ -51,7 +72,7 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
+    --primary: 217 91% 60%;
     --primary-foreground: 222.2 47.4% 11.2%;
 
     --secondary: 217.2 32.6% 17.5%;
@@ -63,12 +84,33 @@
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 217 91% 60%;
+
+    /* Semantic surface tokens — dark gaming palette */
+    --surface: 220 13% 18%;
+    --surface-raised: 220 13% 22%;
+    --surface-overlay: 220 13% 26%;
+
+    /* Semantic status tokens — dark */
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --success-muted: 142 71% 10%;
+    --success-muted-foreground: 142 71% 70%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --warning-muted: 38 92% 10%;
+    --warning-muted-foreground: 38 92% 70%;
+
+    --info: 217 91% 60%;
+    --info-foreground: 0 0% 100%;
+    --info-muted: 217 91% 10%;
+    --info-muted-foreground: 217 91% 75%;
   }
 }
 
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e3ea9eeb..96da2a08 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -89,6 +89,29 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        surface: {
+          DEFAULT: "hsl(var(--surface))",
+          raised: "hsl(var(--surface-raised))",
+          overlay: "hsl(var(--surface-overlay))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+          muted: "hsl(var(--success-muted))",
+          "muted-foreground": "hsl(var(--success-muted-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+          muted: "hsl(var(--warning-muted))",
+          "muted-foreground": "hsl(var(--warning-muted-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+          muted: "hsl(var(--info-muted))",
+          "muted-foreground": "hsl(var(--info-muted-foreground))",
+        },
       },
       // Animations for mobile
       keyframes: {