Simplify modal, badge, and component styles to dark-first (#29)

Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>

.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md

@@ -5,7 +5,7 @@ status: in-progress
 type: feature
 priority: normal
 created_at: 2026-02-17T19:16:39Z
-updated_at: 2026-02-17T19:45:49Z
+updated_at: 2026-02-17T20:01:32Z
 ---
 
 Overhaul the UI to a dark-first, techy aesthetic with a cohesive brand identity derived from the ANT steel ant logo.
@@ -89,10 +89,10 @@ Self-host **Geist** (or Inter/JetBrains Mono pairing):
 - [x] Redesign home page hero section
 - [x] Update card/surface styles globally (Layout, PokemonCard, StatCard, GameCard)
 - [x] Update all page-level backgrounds and containers
-- [ ] Update modal styles (EncounterModal, StatusChangeModal, etc.)
+- [x] Update modal styles (EncounterModal, StatusChangeModal, etc.)
-- [ ] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
+- [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
 - [ ] Add dark/light mode toggle to nav
-- [ ] Polish hover states and transitions across all interactive elements
+- [x] Polish hover states and transitions across all interactive elements
 - [ ] Verify mobile layout and touch targets
 - [ ] Verify accessibility (contrast ratios, focus indicators)
 

frontend/src/components/BossDefeatModal.tsx

@@ -84,7 +84,7 @@ export function BossDefeatModal({
                     onClick={() => setSelectedVariant(label)}
                     className={`px-2 py-0.5 text-xs font-medium rounded-full transition-colors ${
                       selectedVariant === label
-                        ? 'bg-blue-600 text-white'
+                        ? 'bg-accent-600 text-white'
                         : 'bg-surface-2 text-text-secondary hover:bg-surface-3'
                     }`}
                   >

frontend/src/components/ConditionBadge.tsx

@@ -1,20 +1,8 @@
 const CONDITION_CONFIG: Record<string, { label: string; color: string }> = {
-  'Mega Evolution': {
+  'Mega Evolution': { label: 'Mega', color: 'bg-fuchsia-900/40 text-fuchsia-300' },
-    label: 'Mega',
+  Gigantamax: { label: 'G-Max', color: 'bg-red-900/40 text-red-300' },
-    color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900/40 dark:text-fuchsia-300',
+  Dynamax: { label: 'D-Max', color: 'bg-rose-900/40 text-rose-300' },
-  },
+  Terastallize: { label: 'Tera', color: 'bg-teal-900/40 text-teal-300' },
-  Gigantamax: {
-    label: 'G-Max',
-    color: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
-  },
-  Dynamax: {
-    label: 'D-Max',
-    color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
-  },
-  Terastallize: {
-    label: 'Tera',
-    color: 'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
-  },
 }
 
 export function ConditionBadge({

frontend/src/components/EggEncounterModal.tsx

@@ -77,13 +77,13 @@ export function EggEncounterModal({
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-surface-1 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
-        <div className="sticky top-0 bg-surface-1 border-b border-green-300 dark:border-green-600 px-6 py-4 rounded-t-xl">
+        <div className="sticky top-0 bg-surface-1 border-b border-green-600 px-6 py-4 rounded-t-xl">
           <div className="flex items-center justify-between">
             <h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
               <span className="text-green-500">&#x1F95A;</span>
               Log Egg Hatch
             </h2>
-            <button onClick={onClose} className="text-gray-400 hover:text-text-primary">
+            <button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -123,7 +123,7 @@ export function EggEncounterModal({
           <div>
             <label className="block text-sm font-medium text-text-secondary mb-1">Pokemon</label>
             {selectedPokemon ? (
-              <div className="flex items-center gap-3 p-3 rounded-lg border border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/20">
+              <div className="flex items-center gap-3 p-3 rounded-lg border border-green-600 bg-green-900/20">
                 {selectedPokemon.spriteUrl ? (
                   <img
                     src={selectedPokemon.spriteUrl}
@@ -144,7 +144,7 @@ export function EggEncounterModal({
                     setSearch('')
                     setSearchResults([])
                   }}
-                  className="ml-auto text-sm text-gray-500 hover:text-text-secondary"
+                  className="ml-auto text-sm text-text-tertiary hover:text-text-secondary"
                 >
                   Change
                 </button>
@@ -170,7 +170,7 @@ export function EggEncounterModal({
                         key={p.id}
                         type="button"
                         onClick={() => setSelectedPokemon(p)}
-                        className="flex flex-col items-center p-2 rounded-lg border border-border-default hover:border-green-400 dark:hover:border-green-600 text-center transition-colors"
+                        className="flex flex-col items-center p-2 rounded-lg border border-border-default hover:border-green-600 text-center transition-colors"
                       >
                         {p.spriteUrl ? (
                           <img src={p.spriteUrl} alt={p.name} className="w-10 h-10" />

frontend/src/components/EncounterMethodBadge.tsx

@@ -1,56 +1,17 @@
 export const METHOD_CONFIG: Record<string, { label: string; color: string }> = {
-  starter: {
+  starter: { label: 'Starter', color: 'bg-yellow-900/40 text-yellow-300' },
-    label: 'Starter',
+  gift: { label: 'Gift', color: 'bg-pink-900/40 text-pink-300' },
-    color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  fossil: { label: 'Fossil', color: 'bg-amber-900/40 text-amber-300' },
-  },
+  trade: { label: 'Trade', color: 'bg-emerald-900/40 text-emerald-300' },
-  gift: {
+  walk: { label: 'Grass', color: 'bg-green-900/40 text-green-300' },
-    label: 'Gift',
+  headbutt: { label: 'Headbutt', color: 'bg-lime-900/40 text-lime-300' },
-    color: 'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-300',
+  surf: { label: 'Surfing', color: 'bg-blue-900/40 text-blue-300' },
-  },
+  'rock-smash': { label: 'Rock Smash', color: 'bg-orange-900/40 text-orange-300' },
-  fossil: {
+  'old-rod': { label: 'Old Rod', color: 'bg-cyan-900/40 text-cyan-300' },
-    label: 'Fossil',
+  'good-rod': { label: 'Good Rod', color: 'bg-sky-900/40 text-sky-300' },
-    color: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+  'super-rod': { label: 'Super Rod', color: 'bg-indigo-900/40 text-indigo-300' },
-  },
+  horde: { label: 'Horde', color: 'bg-rose-900/40 text-rose-300' },
-  trade: {
+  sos: { label: 'SOS', color: 'bg-violet-900/40 text-violet-300' },
-    label: 'Trade',
-    color: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300',
-  },
-  walk: {
-    label: 'Grass',
-    color: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
-  },
-  headbutt: {
-    label: 'Headbutt',
-    color: 'bg-lime-100 text-lime-800 dark:bg-lime-900/40 dark:text-lime-300',
-  },
-  surf: {
-    label: 'Surfing',
-    color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
-  },
-  'rock-smash': {
-    label: 'Rock Smash',
-    color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
-  },
-  'old-rod': {
-    label: 'Old Rod',
-    color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
-  },
-  'good-rod': {
-    label: 'Good Rod',
-    color: 'bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300',
-  },
-  'super-rod': {
-    label: 'Super Rod',
-    color: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300',
-  },
-  horde: {
-    label: 'Horde',
-    color: 'bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300',
-  },
-  sos: {
-    label: 'SOS',
-    color: 'bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300',
-  },
 }
 
 /** Display order for encounter method groups */
@@ -78,9 +39,7 @@ export function getMethodLabel(method: string): string {
 }
 
 export function getMethodColor(method: string): string {
-  return (
+  return METHOD_CONFIG[method]?.color ?? 'bg-surface-3 text-text-secondary'
-    METHOD_CONFIG[method]?.color ?? 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
-  )
 }
 
 export function EncounterMethodBadge({

frontend/src/components/EncounterModal.tsx

@@ -43,14 +43,12 @@ const statusOptions: {
   {
     value: 'caught',
     label: 'Caught',
-    color:
+    color: 'bg-green-900/40 text-green-300 border-green-700',
-      'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700',
   },
   {
     value: 'fainted',
     label: 'Fainted',
-    color:
+    color: 'bg-red-900/40 text-red-300 border-red-700',
-      'bg-red-100 text-red-800 border-red-300 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700',
   },
   {
     value: 'missed',
@@ -266,7 +264,7 @@ export function EncounterModal({
             <h2 className="text-lg font-semibold text-text-primary">
               {isEditing ? 'Edit Encounter' : 'Log Encounter'}
             </h2>
-            <button onClick={onClose} className="text-gray-400 hover:text-text-primary">
+            <button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -301,7 +299,7 @@ export function EncounterModal({
                         setSelectedPokemon(pickRandomPokemon(routePokemon, dupedPokemonIds))
                       }
                     }}
-                    className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-300 dark:border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   >
                     {selectedPokemon ? 'Re-roll' : 'Randomize'}
                   </button>
@@ -309,7 +307,7 @@ export function EncounterModal({
               </div>
               {loadingPokemon ? (
                 <div className="flex items-center justify-center py-4">
-                  <div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                  <div className="w-10 h-10 border-2 border-accent-400 border-t-transparent rounded-full animate-spin" />
                 </div>
               ) : filteredPokemon && filteredPokemon.length > 0 ? (
                 <>
@@ -329,8 +327,8 @@ export function EncounterModal({
                         onClick={() => setSelectedCondition(null)}
                         className={`px-2.5 py-1 text-xs font-medium rounded-full border transition-colors ${
                           selectedCondition === null
-                            ? 'bg-purple-100 border-purple-300 text-purple-800 dark:bg-purple-900/40 dark:border-purple-600 dark:text-purple-300'
+                            ? 'bg-purple-900/40 border-purple-600 text-purple-300'
-                            : 'border-border-default text-text-tertiary hover:border-purple-300 dark:hover:border-purple-600'
+                            : 'border-border-default text-text-tertiary hover:border-purple-600'
                         }`}
                       >
                         All
@@ -342,8 +340,8 @@ export function EncounterModal({
                           onClick={() => setSelectedCondition(cond)}
                           className={`px-2.5 py-1 text-xs font-medium rounded-full border transition-colors capitalize ${
                             selectedCondition === cond
-                              ? 'bg-purple-100 border-purple-300 text-purple-800 dark:bg-purple-900/40 dark:border-purple-600 dark:text-purple-300'
+                              ? 'bg-purple-900/40 border-purple-600 text-purple-300'
-                              : 'border-border-default text-text-tertiary hover:border-purple-300 dark:hover:border-purple-600'
+                              : 'border-border-default text-text-tertiary hover:border-purple-600'
                           }`}
                         >
                           {cond}
@@ -376,7 +374,7 @@ export function EncounterModal({
                                   isDuped
                                     ? 'opacity-40 cursor-not-allowed border-border-default'
                                     : isSelected
-                                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+                                      ? 'border-accent-400 bg-accent-900/30'
                                       : 'border-border-default hover:border-border-default'
                                 }`}
                               >
@@ -395,7 +393,7 @@ export function EncounterModal({
                                   {rp.pokemon.name}
                                 </span>
                                 {isDuped && (
-                                  <span className="text-[10px] text-gray-400 italic">
+                                  <span className="text-[10px] text-text-tertiary italic">
                                     {retiredPokemonIds?.has(rp.pokemonId)
                                       ? 'retired (HoF)'
                                       : 'already caught'}
@@ -405,19 +403,19 @@ export function EncounterModal({
                                   <EncounterMethodBadge method={rp.encounterMethod} />
                                 )}
                                 {!isDuped && displayRate !== null && displayRate !== undefined && (
-                                  <span className="text-[10px] text-purple-500 dark:text-purple-400 font-medium">
+                                  <span className="text-[10px] text-purple-400 font-medium">
                                     {displayRate}%
                                   </span>
                                 )}
                                 {!isDuped &&
                                   selectedCondition === null &&
                                   conditions.length > 0 && (
-                                    <span className="text-[10px] text-purple-500 dark:text-purple-400">
+                                    <span className="text-[10px] text-purple-400">
                                       {conditions.join(', ')}
                                     </span>
                                   )}
                                 {!isDuped && (
-                                  <span className="text-[10px] text-gray-400">
+                                  <span className="text-[10px] text-text-tertiary">
                                     Lv. {rp.minLevel}
                                     {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
                                   </span>
@@ -454,7 +452,7 @@ export function EncounterModal({
                 <div className="font-medium text-text-primary capitalize">
                   {existing.pokemon.name}
                 </div>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-text-tertiary">
                   Caught at Lv. {existing.catchLevel ?? '?'}
                 </div>
               </div>
@@ -473,7 +471,7 @@ export function EncounterModal({
                   className={`flex-1 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
                     status === opt.value
                       ? opt.color
-                      : 'border-border-default text-text-tertiary hover:border-gray-300'
+                      : 'border-border-default text-text-tertiary hover:border-border-accent'
                   }`}
                 >
                   {opt.label}
@@ -507,7 +505,7 @@ export function EncounterModal({
                       type="button"
                       onClick={() => regenerate()}
                       disabled={loadingSuggestions}
-                      className="text-xs text-text-link hover:text-blue-700 dark:hover:text-blue-300 disabled:opacity-50 transition-colors"
+                      className="text-xs text-text-link hover:text-accent-300 disabled:opacity-50 transition-colors"
                     >
                       {loadingSuggestions ? 'Loading...' : 'Regenerate'}
                     </button>
@@ -520,8 +518,8 @@ export function EncounterModal({
                         onClick={() => setNickname(name)}
                         className={`px-2.5 py-1 text-xs rounded-full border transition-colors ${
                           nickname === name
-                            ? 'bg-blue-100 border-blue-300 text-blue-800 dark:bg-blue-900/40 dark:border-blue-600 dark:text-blue-300'
+                            ? 'bg-accent-900/40 border-accent-600 text-accent-300'
-                            : 'border-border-default text-text-secondary hover:border-blue-300 dark:hover:border-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                            : 'border-border-default text-text-secondary hover:border-accent-600 hover:bg-accent-900/20'
                         }`}
                       >
                         {name}
@@ -567,7 +565,7 @@ export function EncounterModal({
                   htmlFor="faint-level"
                   className="block text-sm font-medium text-text-secondary mb-1"
                 >
-                  Faint Level <span className="font-normal text-gray-400">(mark as dead)</span>
+                  Faint Level <span className="font-normal text-text-tertiary">(mark as dead)</span>
                 </label>
                 <input
                   id="faint-level"
@@ -585,7 +583,7 @@ export function EncounterModal({
                   htmlFor="death-cause"
                   className="block text-sm font-medium text-text-secondary mb-1"
                 >
-                  Cause of Death <span className="font-normal text-gray-400">(optional)</span>
+                  Cause of Death <span className="font-normal text-text-tertiary">(optional)</span>
                 </label>
                 <input
                   id="death-cause"
@@ -613,7 +611,7 @@ export function EncounterModal({
             type="button"
             disabled={!canSubmit || isPending}
             onClick={handleSubmit}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             {isPending ? 'Saving...' : isEditing ? 'Update' : 'Log Encounter'}
           </button>

frontend/src/components/EndRunModal.tsx

@@ -31,7 +31,7 @@ export function EndRunModal({ onConfirm, onClose, isPending, genlockeContext }:
             <button
               onClick={() => onConfirm('completed')}
               disabled={isPending}
-              className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:border-blue-400 dark:hover:border-blue-600 disabled:opacity-50 transition-colors"
+              className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-blue-800 bg-blue-900/20 text-blue-300 hover:border-blue-600 disabled:opacity-50 transition-colors"
             >
               <div className="font-semibold">Victory</div>
               <div className="text-sm opacity-80">{victoryDescription}</div>
@@ -39,7 +39,7 @@ export function EndRunModal({ onConfirm, onClose, isPending, genlockeContext }:
             <button
               onClick={() => onConfirm('failed')}
               disabled={isPending}
-              className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-red-200 dark:border-red-800 bg-status-failed-bg text-red-700 dark:text-red-300 hover:border-red-400 dark:hover:border-red-600 disabled:opacity-50 transition-colors"
+              className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-red-800 bg-status-failed-bg text-red-300 hover:border-red-600 disabled:opacity-50 transition-colors"
             >
               <div className="font-semibold">Defeat</div>
               <div className="text-sm opacity-80">{defeatDescription}</div>

frontend/src/components/GameCard.tsx

@@ -18,7 +18,7 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
     <button
       type="button"
       onClick={() => onSelect(game)}
-      className={`relative w-full rounded-lg overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
+      className={`relative w-full rounded-lg overflow-hidden transition-all duration-200 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 focus:ring-offset-surface-0 ${
         selected ? 'ring-2 ring-accent-500 scale-105 shadow-lg' : 'shadow'
       }`}
     >

frontend/src/components/GenlockeGraveyard.tsx

@@ -48,7 +48,7 @@ function GraveyardCard({ entry }: { entry: GraveyardEntry }) {
 
       <div className="text-xs text-text-muted mt-0.5">{entry.routeName}</div>
 
-      <div className="text-[10px] text-purple-600 dark:text-purple-400 mt-0.5 font-medium">
+      <div className="text-[10px] text-purple-400 mt-0.5 font-medium">
         Leg {entry.legOrder} &mdash; {entry.gameName}
       </div>
 

frontend/src/components/GenlockeLineage.tsx

@@ -29,7 +29,7 @@ function LegDot({ leg }: { leg: LineageLegEntry }) {
   return (
     <div className="group relative flex flex-col items-center">
       <div
-        className={`w-4 h-4 rounded-full ${color} ring-2 ring-offset-1 ring-offset-white dark:ring-offset-gray-800 ring-gray-200 dark:ring-gray-600`}
+        className={`w-4 h-4 rounded-full ${color} ring-2 ring-offset-1 ring-offset-surface-1 ring-border-default`}
       />
 
       {/* Tooltip */}
@@ -156,8 +156,8 @@ function LineageCard({ lineage, allLegOrders }: { lineage: LineageEntry; allLegO
         <span
           className={`px-2.5 py-1 rounded-full text-xs font-medium ${
             lineage.status === 'alive'
-              ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
+              ? 'bg-green-900/40 text-green-300'
-              : 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300'
+              : 'bg-red-900/40 text-red-300'
           }`}
         >
           {lineage.status === 'alive' ? 'Alive' : 'Dead'}

frontend/src/components/HofTeamModal.tsx

@@ -53,7 +53,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
                   disabled={atMax}
                   className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
                     isSelected
-                      ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                      ? 'border-yellow-500 bg-yellow-900/20'
                       : atMax
                         ? 'border-border-default opacity-40 cursor-not-allowed'
                         : 'border-border-default hover:border-border-default'
@@ -74,7 +74,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
                     {enc.nickname || displayPokemon.name}
                   </span>
                   {enc.nickname && (
-                    <span className="text-[10px] text-gray-400">{displayPokemon.name}</span>
+                    <span className="text-[10px] text-text-tertiary">{displayPokemon.name}</span>
                   )}
                 </button>
               )
@@ -97,7 +97,7 @@ export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModa
               type="button"
               disabled={selected.size === 0 || isPending}
               onClick={() => onSubmit([...selected])}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isPending ? 'Saving...' : 'Confirm'}
             </button>

frontend/src/components/RuleBadges.tsx

@@ -20,10 +20,10 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
           title={def.description}
           className={`px-2 py-0.5 rounded-full text-xs font-medium ${
             def.category === 'core'
-              ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
+              ? 'bg-blue-900/40 text-blue-300'
               : def.category === 'completion'
-                ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
+                ? 'bg-green-900/40 text-green-300'
-                : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
+                : 'bg-amber-900/40 text-amber-300'
           }`}
         >
           {def.name}

frontend/src/components/RuleToggle.tsx

@@ -17,7 +17,7 @@ export function RuleToggle({ name, description, enabled, onChange }: RuleToggleP
           <span className="font-medium text-text-primary">{name}</span>
           <button
             type="button"
-            className="text-gray-400 hover:text-text-secondary"
+            className="text-text-tertiary hover:text-text-secondary"
             onMouseEnter={() => setShowTooltip(true)}
             onMouseLeave={() => setShowTooltip(false)}
             onClick={() => setShowTooltip(!showTooltip)}

frontend/src/components/RulesConfiguration.tsx

@@ -46,7 +46,7 @@ export function RulesConfiguration({
         <button
           type="button"
           onClick={handleResetToDefault}
-          className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+          className="text-sm text-text-link hover:text-accent-300"
         >
           Reset to Default
         </button>

frontend/src/components/ShinyBox.tsx

@@ -8,8 +8,8 @@ interface ShinyBoxProps {
 
 export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
   return (
-    <div className="border-2 border-yellow-400 dark:border-yellow-600 rounded-lg p-4">
+    <div className="border-2 border-yellow-600 rounded-lg p-4">
-      <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-400 mb-3 flex items-center gap-1.5">
+      <h3 className="text-sm font-semibold text-yellow-400 mb-3 flex items-center gap-1.5">
         <span>&#10022;</span>
         Shiny Box
         <span className="text-xs font-normal text-text-muted ml-1">

frontend/src/components/ShinyEncounterModal.tsx

@@ -93,13 +93,13 @@ export function ShinyEncounterModal({
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="fixed inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-surface-1 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
-        <div className="sticky top-0 bg-surface-1 border-b border-yellow-300 dark:border-yellow-600 px-6 py-4 rounded-t-xl">
+        <div className="sticky top-0 bg-surface-1 border-b border-yellow-600 px-6 py-4 rounded-t-xl">
           <div className="flex items-center justify-between">
             <h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
               <span className="text-yellow-500">&#10022;</span>
               Log Shiny Encounter
             </h2>
-            <button onClick={onClose} className="text-gray-400 hover:text-text-primary">
+            <button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
@@ -110,7 +110,7 @@ export function ShinyEncounterModal({
               </svg>
             </button>
           </div>
-          <p className="text-sm text-yellow-600 dark:text-yellow-400 mt-1">
+          <p className="text-sm text-yellow-400 mt-1">
             Shiny catches bypass the one-per-route rule
           </p>
         </div>
@@ -169,7 +169,7 @@ export function ShinyEncounterModal({
                               onClick={() => setSelectedPokemon(rp)}
                               className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
                                 selectedPokemon?.id === rp.id
-                                  ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30'
+                                  ? 'border-yellow-500 bg-yellow-900/30'
                                   : 'border-border-default hover:border-border-default'
                               }`}
                             >
@@ -190,7 +190,7 @@ export function ShinyEncounterModal({
                               {SPECIAL_METHODS.includes(rp.encounterMethod) && (
                                 <EncounterMethodBadge method={rp.encounterMethod} />
                               )}
-                              <span className="text-[10px] text-gray-400">
+                              <span className="text-[10px] text-text-tertiary">
                                 Lv. {rp.minLevel}
                                 {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
                               </span>

frontend/src/components/StatusChangeModal.tsx

@@ -97,7 +97,7 @@ export function StatusChangeModal({
           <h2 className="text-lg font-semibold text-text-primary">
             {isDead ? 'Death Details' : 'Pokemon Status'}
           </h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-text-primary">
+          <button onClick={onClose} className="text-text-tertiary hover:text-text-primary">
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -170,7 +170,7 @@ export function StatusChangeModal({
               <button
                 type="button"
                 onClick={() => setShowEvolve(true)}
-                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                className="flex-1 px-4 py-2 bg-accent-600 text-white rounded-lg font-medium hover:bg-accent-500 transition-colors"
               >
                 Evolve
               </button>
@@ -201,7 +201,7 @@ export function StatusChangeModal({
                 <button
                   type="button"
                   onClick={() => setShowEvolve(false)}
-                  className="text-xs text-gray-500 hover:text-text-secondary"
+                  className="text-xs text-text-tertiary hover:text-text-secondary"
                 >
                   Back
                 </button>
@@ -220,7 +220,7 @@ export function StatusChangeModal({
                       type="button"
                       disabled={isPending}
                       onClick={() => handleEvolve(evo.toPokemon.id)}
-                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-600 transition-colors disabled:opacity-50"
+                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-accent-900/20 hover:border-accent-600 transition-colors disabled:opacity-50"
                     >
                       {evo.toPokemon.spriteUrl ? (
                         <img
@@ -261,12 +261,12 @@ export function StatusChangeModal({
                     setShedNickname('')
                     setShowEvolve(true)
                   }}
-                  className="text-xs text-gray-500 hover:text-text-secondary"
+                  className="text-xs text-text-tertiary hover:text-text-secondary"
                 >
                   Back
                 </button>
               </div>
-              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg p-3">
+              <div className="bg-amber-900/20 border border-amber-700 rounded-lg p-3">
                 <div className="flex items-center gap-3">
                   {shedCompanion.toPokemon.spriteUrl ? (
                     <img
@@ -279,7 +279,7 @@ export function StatusChangeModal({
                       {shedCompanion.toPokemon.name[0]?.toUpperCase()}
                     </div>
                   )}
-                  <p className="text-sm text-amber-800 dark:text-amber-300">
+                  <p className="text-sm text-amber-300">
                     {displayPokemon.name} shed its shell! Would you also like to add{' '}
                     <span className="font-semibold">{shedCompanion.toPokemon.name}</span>?
                   </p>
@@ -290,7 +290,7 @@ export function StatusChangeModal({
                   htmlFor="shed-nickname"
                   className="block text-sm font-medium text-text-secondary mb-1"
                 >
-                  Nickname <span className="font-normal text-gray-400">(optional)</span>
+                  Nickname <span className="font-normal text-text-tertiary">(optional)</span>
                 </label>
                 <input
                   id="shed-nickname"
@@ -331,7 +331,7 @@ export function StatusChangeModal({
                 <button
                   type="button"
                   onClick={() => setShowFormChange(false)}
-                  className="text-xs text-gray-500 hover:text-text-secondary"
+                  className="text-xs text-text-tertiary hover:text-text-secondary"
                 >
                   Back
                 </button>
@@ -344,7 +344,7 @@ export function StatusChangeModal({
                       type="button"
                       disabled={isPending}
                       onClick={() => handleEvolve(form.id)}
-                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-purple-50 dark:hover:bg-purple-900/20 hover:border-purple-300 dark:hover:border-purple-600 transition-colors disabled:opacity-50"
+                      className="w-full flex items-center gap-3 p-3 rounded-lg border border-border-default hover:bg-purple-900/20 hover:border-purple-600 transition-colors disabled:opacity-50"
                     >
                       {form.spriteUrl ? (
                         <img src={form.spriteUrl} alt={form.name} className="w-10 h-10" />
@@ -382,7 +382,7 @@ export function StatusChangeModal({
                   htmlFor="death-level"
                   className="block text-sm font-medium text-text-secondary mb-1"
                 >
-                  Level at Death <span className="font-normal text-gray-400">(optional)</span>
+                  Level at Death <span className="font-normal text-text-tertiary">(optional)</span>
                 </label>
                 <input
                   id="death-level"
@@ -401,7 +401,7 @@ export function StatusChangeModal({
                   htmlFor="death-cause"
                   className="block text-sm font-medium text-text-secondary mb-1"
                 >
-                  Cause of Death <span className="font-normal text-gray-400">(optional)</span>
+                  Cause of Death <span className="font-normal text-text-tertiary">(optional)</span>
                 </label>
                 <input
                   id="death-cause"

frontend/src/components/StepIndicator.tsx

@@ -27,7 +27,7 @@ export function StepIndicator({
                 disabled={!isCompleted}
                 className={`flex items-center gap-2 text-sm font-medium ${
                   isCompleted
-                    ? 'text-text-link cursor-pointer hover:text-blue-700 dark:hover:text-blue-300'
+                    ? 'text-text-link cursor-pointer hover:text-accent-300'
                     : isCurrent
                       ? 'text-text-primary'
                       : 'text-text-muted cursor-default'
@@ -38,7 +38,7 @@ export function StepIndicator({
                     isCompleted
                       ? 'bg-blue-600 text-white'
                       : isCurrent
-                        ? 'border-2 border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                        ? 'border-2 border-accent-400 text-accent-400'
                         : 'border-2 border-border-default text-text-muted'
                   }`}
                 >

frontend/src/components/TransferModal.tsx

@@ -48,7 +48,7 @@ export function TransferModal({ hofTeam, onSubmit, onSkip, isPending }: Transfer
                   onClick={() => toggle(enc.id)}
                   className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
                     isSelected
-                      ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
+                      ? 'border-indigo-500 bg-indigo-900/20'
                       : 'border-border-default hover:border-border-default'
                   }`}
                 >
@@ -67,9 +67,9 @@ export function TransferModal({ hofTeam, onSubmit, onSkip, isPending }: Transfer
                     {enc.nickname || displayPokemon.name}
                   </span>
                   {enc.nickname && (
-                    <span className="text-[10px] text-gray-400">{displayPokemon.name}</span>
+                    <span className="text-[10px] text-text-tertiary">{displayPokemon.name}</span>
                   )}
-                  <span className="text-[10px] text-gray-400 mt-0.5">{enc.route.name}</span>
+                  <span className="text-[10px] text-text-tertiary mt-0.5">{enc.route.name}</span>
                 </button>
               )
             })}

frontend/src/components/admin/AdminLayout.tsx

@@ -21,9 +21,7 @@ export function AdminLayout() {
                   to={item.to}
                   className={({ isActive }) =>
                     `block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
-                      isActive
+                      isActive ? 'bg-accent-900/40 text-accent-300' : 'hover:bg-surface-2'
-                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
-                        : 'hover:bg-surface-2'
                     }`
                   }
                 >

frontend/src/components/admin/BossTeamEditor.tsx

@@ -175,7 +175,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
                     e.stopPropagation()
                     removeVariant(i)
                   }}
-                  className="ml-1.5 text-gray-400 hover:text-red-500 cursor-pointer"
+                  className="ml-1.5 text-text-tertiary hover:text-red-500 cursor-pointer"
                   title="Remove variant"
                 >
                   ✕
@@ -187,7 +187,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
             <button
               type="button"
               onClick={() => setShowAddVariant(true)}
-              className="px-2 py-1.5 text-sm text-text-link hover:text-blue-700 dark:hover:text-blue-300"
+              className="px-2 py-1.5 text-sm text-text-link hover:text-accent-300"
               title="Add variant"
             >
               +
@@ -219,7 +219,7 @@ export function BossTeamEditor({ boss, onSave, onClose, isSaving }: BossTeamEdit
               <button
                 type="button"
                 onClick={() => setShowAddVariant(false)}
-                className="px-1 py-1 text-sm text-gray-400"
+                className="px-1 py-1 text-sm text-text-tertiary"
               >
                 &#10005;
               </button>

frontend/src/components/admin/BulkImportModal.tsx

@@ -77,7 +77,7 @@ export function BulkImportModal({
             )}
 
             {result && (
-              <div className="p-3 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-md text-sm">
+              <div className="p-3 bg-green-900/30 text-green-300 rounded-md text-sm">
                 <p>
                   {createdLabel}: {result.created}, {updatedLabel}: {result.updated}
                 </p>

frontend/src/components/admin/FormModal.tsx

@@ -53,7 +53,7 @@ export function FormModal({
                   }
                 }}
                 onBlur={() => setConfirmingDelete(false)}
-                className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
+                className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-600 hover:bg-red-900/20 disabled:opacity-50"
               >
                 {isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
               </button>

frontend/src/components/admin/PokemonFormModal.tsx

@@ -85,7 +85,7 @@ export function PokemonFormModal({
   const tabClass = (tab: Tab) =>
     `px-3 py-1.5 text-sm font-medium rounded-t-md border-b-2 transition-colors ${
       activeTab === tab
-        ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+        ? 'border-accent-400 text-accent-400'
         : 'border-transparent text-text-tertiary hover:text-text-secondary'
     }`
 
@@ -184,7 +184,7 @@ export function PokemonFormModal({
                       }
                     }}
                     onBlur={() => setConfirmingDelete(false)}
-                    className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
+                    className="px-4 py-2 text-sm font-medium rounded-md text-status-failed border border-red-600 hover:bg-red-900/20 disabled:opacity-50"
                   >
                     {isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
                   </button>

frontend/src/components/admin/PokemonSelector.tsx

@@ -58,7 +58,7 @@ export function PokemonSelector({
                 setOpen(false)
               }}
               className={`px-3 py-2 cursor-pointer hover:bg-surface-2 text-sm flex items-center gap-2 ${
-                p.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/30' : ''
+                p.id === selectedId ? 'bg-accent-900/30' : ''
               }`}
             >
               {p.spriteUrl && <img src={p.spriteUrl} alt="" className="w-6 h-6" />}

frontend/src/pages/GenlockeDetail.tsx

@@ -18,9 +18,9 @@ const statusRing: Record<RunStatus, string> = {
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active: 'bg-green-900/40 text-green-300',
-  completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  completed: 'bg-blue-900/40 text-blue-300',
-  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  failed: 'bg-red-900/40 text-red-300',
 }
 
 function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
@@ -29,7 +29,7 @@ function LegIndicator({ leg }: { leg: GenlockeLegDetail }) {
 
   const dot = status ? (
     <div
-      className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 ${statusRing[status]}`}
+      className={`w-4 h-4 rounded-full ${statusColors[status]} ring-2 ring-offset-2 ring-offset-surface-0 ${statusRing[status]}`}
     />
   ) : (
     <div className="w-4 h-4 rounded-full bg-surface-3" />
@@ -213,7 +213,7 @@ export function GenlockeDetail() {
             <h3 className="text-sm font-medium text-text-tertiary mb-2">Genlocke Rules</h3>
             <div className="flex flex-wrap gap-1.5">
               {genlocke.genlockeRules.retireHoF ? (
-                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300">
+                <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-900/40 text-purple-300">
                   Retire HoF Teams
                 </span>
               ) : (

frontend/src/pages/GenlockeList.tsx

@@ -3,9 +3,9 @@ import { useGenlockes } from '../hooks/useGenlockes'
 import type { RunStatus } from '../types'
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active: 'bg-green-900/40 text-green-300',
-  completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  completed: 'bg-blue-900/40 text-blue-300',
-  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  failed: 'bg-red-900/40 text-red-300',
 }
 
 export function GenlockeList() {

frontend/src/pages/NewGenlocke.tsx

@@ -183,7 +183,7 @@ export function NewGenlocke() {
                   onClick={() => handlePresetSelect(type)}
                   className={`flex-1 p-4 rounded-lg border-2 text-left transition-colors ${
                     isActive
-                      ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                      ? 'border-accent-600 bg-accent-900/20'
                       : 'border-border-default hover:border-border-default'
                   }`}
                 >
@@ -498,7 +498,7 @@ function LegRow({
           type="button"
           disabled={index === 0}
           onClick={() => onMove('up')}
-          className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
+          className="p-1 text-text-tertiary hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
           title="Move up"
         >
           <svg
@@ -515,7 +515,7 @@ function LegRow({
           type="button"
           disabled={index === total - 1}
           onClick={() => onMove('down')}
-          className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
+          className="p-1 text-text-tertiary hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
           title="Move down"
         >
           <svg
@@ -531,7 +531,7 @@ function LegRow({
         <button
           type="button"
           onClick={onRemove}
-          className="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300"
+          className="p-1 text-red-400 hover:text-red-300"
           title="Remove leg"
         >
           <svg
@@ -563,7 +563,7 @@ function AddLegDropdown({
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="flex items-center gap-2 text-sm text-text-link hover:text-blue-700 dark:hover:text-blue-300 font-medium"
+        className="flex items-center gap-2 text-sm text-text-link hover:text-accent-300 font-medium"
       >
         <svg
           className="w-4 h-4"

frontend/src/pages/RunDashboard.tsx

@@ -31,9 +31,9 @@ function sortEncounters(encounters: EncounterDetail[], key: TeamSortKey): Encoun
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active: 'bg-green-900/40 text-green-300',
-  completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  completed: 'bg-blue-900/40 text-blue-300',
-  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  failed: 'bg-red-900/40 text-red-300',
 }
 
 function formatDuration(start: string, end: string) {
@@ -136,8 +136,8 @@ export function RunDashboard() {
         <div
           className={`rounded-lg p-4 mb-6 ${
             run.status === 'completed'
-              ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
+              ? 'bg-blue-900/20 border border-blue-800'
-              : 'bg-status-failed-bg border border-red-200 dark:border-red-800'
+              : 'bg-status-failed-bg border border-red-800'
           }`}
         >
           <div className="flex items-center gap-3">
@@ -147,9 +147,7 @@ export function RunDashboard() {
             <div>
               <p
                 className={`font-semibold ${
-                  run.status === 'completed'
+                  run.status === 'completed' ? 'text-blue-200' : 'text-red-200'
-                    ? 'text-blue-800 dark:text-blue-200'
-                    : 'text-red-800 dark:text-red-200'
                 }`}
               >
                 {run.status === 'completed' ? 'Victory!' : 'Defeat'}

frontend/src/pages/RunEncounters.tsx

@@ -59,9 +59,9 @@ function sortEncounters(encounters: EncounterDetail[], key: TeamSortKey): Encoun
 }
 
 const statusStyles: Record<RunStatus, string> = {
-  active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  active: 'bg-green-900/40 text-green-300',
-  completed: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  completed: 'bg-blue-900/40 text-blue-300',
-  failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  failed: 'bg-red-900/40 text-red-300',
 }
 
 function formatDuration(start: string, end: string) {
@@ -83,12 +83,12 @@ const statusIndicator: Record<RouteStatus, { dot: string; label: string; bg: str
   caught: {
     dot: 'bg-green-500',
     label: 'Caught',
-    bg: 'bg-green-50 dark:bg-green-900/10',
+    bg: 'bg-green-900/10',
   },
   fainted: {
     dot: 'bg-red-500',
     label: 'Fainted',
-    bg: 'bg-red-50 dark:bg-red-900/10',
+    bg: 'bg-red-900/10',
   },
   missed: {
     dot: 'bg-gray-400',
@@ -335,7 +335,7 @@ function RouteGroup({
         </div>
         <span className="text-xs text-text-muted shrink-0">{si.label}</span>
         <svg
-          className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+          className={`w-4 h-4 text-text-tertiary transition-transform ${isExpanded ? 'rotate-180' : ''}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -801,7 +801,7 @@ export function RunEncounters() {
               })}
             </p>
             {run.genlocke && (
-              <p className="text-sm text-purple-600 dark:text-purple-400 mt-1 font-medium">
+              <p className="text-sm text-purple-400 mt-1 font-medium">
                 Leg {run.genlocke.legOrder} of {run.genlocke.totalLegs} &mdash;{' '}
                 {run.genlocke.genlockeName}
               </p>
@@ -811,7 +811,7 @@ export function RunEncounters() {
             {isActive && run.rules?.shinyClause && (
               <button
                 onClick={() => setShowShinyModal(true)}
-                className="px-3 py-1 text-sm border border-yellow-400 dark:border-yellow-600 text-yellow-600 dark:text-yellow-400 rounded-full font-medium hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors"
+                className="px-3 py-1 text-sm border border-yellow-600 text-yellow-400 rounded-full font-medium hover:bg-yellow-900/20 transition-colors"
               >
                 &#10022; Log Shiny
               </button>
@@ -819,7 +819,7 @@ export function RunEncounters() {
             {isActive && (
               <button
                 onClick={() => setShowEggModal(true)}
-                className="px-3 py-1 text-sm border border-green-400 dark:border-green-600 text-status-active rounded-full font-medium hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors"
+                className="px-3 py-1 text-sm border border-green-600 text-status-active rounded-full font-medium hover:bg-green-900/20 transition-colors"
               >
                 &#x1F95A; Log Egg
               </button>
@@ -846,8 +846,8 @@ export function RunEncounters() {
         <div
           className={`rounded-lg p-4 mb-6 ${
             run.status === 'completed'
-              ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
+              ? 'bg-blue-900/20 border border-blue-800'
-              : 'bg-status-failed-bg border border-red-200 dark:border-red-800'
+              : 'bg-status-failed-bg border border-red-800'
           }`}
         >
           <div className="flex items-center justify-between">
@@ -858,9 +858,7 @@ export function RunEncounters() {
               <div>
                 <p
                   className={`font-semibold ${
-                    run.status === 'completed'
+                    run.status === 'completed' ? 'text-blue-200' : 'text-red-200'
-                      ? 'text-blue-800 dark:text-blue-200'
-                      : 'text-red-800 dark:text-red-200'
                   }`}
                 >
                   {run.status === 'completed'
@@ -924,7 +922,7 @@ export function RunEncounters() {
           </div>
           {/* HoF Team Display */}
           {run.status === 'completed' && (
-            <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
+            <div className="mt-3 pt-3 border-t border-blue-800">
               <div className="flex items-center justify-between mb-2">
                 <span className="text-xs font-medium text-text-link uppercase tracking-wider">
                   Hall of Fame
@@ -932,7 +930,7 @@ export function RunEncounters() {
                 <button
                   type="button"
                   onClick={() => setShowHofModal(true)}
-                  className="text-xs text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
+                  className="text-xs text-blue-400 hover:text-accent-300"
                 >
                   {hofTeam ? 'Edit' : 'Select team'}
                 </button>
@@ -958,9 +956,7 @@ export function RunEncounters() {
                   })}
                 </div>
               ) : (
-                <p className="text-xs text-blue-500/60 dark:text-blue-400/60 italic">
+                <p className="text-xs text-blue-400/60 italic">No HoF team selected yet</p>
-                  No HoF team selected yet
-                </p>
               )}
             </div>
           )}
@@ -1017,8 +1013,8 @@ export function RunEncounters() {
                         <div
                           className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${
                             earned
-                              ? 'border-yellow-500 bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300'
+                              ? 'border-yellow-500 bg-yellow-900/40 text-yellow-300'
-                              : 'border-border-default text-gray-400'
+                              : 'border-border-default text-text-tertiary'
                           }`}
                         >
                           {boss.order}
@@ -1055,7 +1051,7 @@ export function RunEncounters() {
                 {dead.length > 0 ? `, ${dead.length} dead` : ''}
               </span>
               <svg
-                className={`w-4 h-4 text-gray-400 transition-transform ${showTeam ? 'rotate-180' : ''}`}
+                className={`w-4 h-4 text-text-tertiary transition-transform ${showTeam ? 'rotate-180' : ''}`}
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -1127,9 +1123,7 @@ export function RunEncounters() {
       {/* Transfer Encounters */}
       {transferEncounters.length > 0 && (
         <div className="mb-6">
-          <h2 className="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-2">
+          <h2 className="text-sm font-medium text-indigo-400 mb-2">Transferred Pokemon</h2>
-            Transferred Pokemon
-          </h2>
           <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
             {transferEncounters.map((enc) => (
               <PokemonCard
@@ -1159,7 +1153,7 @@ export function RunEncounters() {
                     bulkRandomize.mutate()
                   }
                 }}
-                className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-300 dark:border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                className="px-2.5 py-1 text-xs font-medium rounded-lg border border-purple-600 text-purple-400 hover:bg-purple-900/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
               >
                 {bulkRandomize.isPending ? 'Randomizing...' : 'Randomize All'}
               </button>
@@ -1303,14 +1297,14 @@ export function RunEncounters() {
                   other: 'Boss',
                 }
                 const bossTypeColors: Record<string, string> = {
-                  gym_leader: 'border-yellow-400 dark:border-yellow-600',
+                  gym_leader: 'border-yellow-600',
-                  elite_four: 'border-purple-400 dark:border-purple-600',
+                  elite_four: 'border-purple-600',
-                  champion: 'border-red-400 dark:border-red-600',
+                  champion: 'border-red-600',
-                  rival: 'border-blue-400 dark:border-blue-600',
+                  rival: 'border-blue-600',
-                  evil_team: 'border-gray-500 dark:border-gray-400',
+                  evil_team: 'border-gray-400',
-                  kahuna: 'border-orange-400 dark:border-orange-600',
+                  kahuna: 'border-orange-600',
-                  totem: 'border-teal-400 dark:border-teal-600',
+                  totem: 'border-teal-600',
-                  other: 'border-gray-400 dark:border-gray-500',
+                  other: 'border-gray-500',
                 }
 
                 const isBossExpanded = expandedBosses.has(boss.id)
@@ -1327,7 +1321,7 @@ export function RunEncounters() {
                   <div key={`boss-${boss.id}`}>
                     <div
                       className={`my-2 rounded-lg border-2 ${bossTypeColors[boss.bossType] ?? bossTypeColors['other']} ${
-                        isDefeated ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-surface-1'
+                        isDefeated ? 'bg-green-900/10' : 'bg-surface-1'
                       } px-4 py-3`}
                     >
                       <div
@@ -1336,7 +1330,7 @@ export function RunEncounters() {
                       >
                         <div className="flex items-center gap-3">
                           <svg
-                            className={`w-4 h-4 text-gray-400 transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
+                            className={`w-4 h-4 text-text-tertiary transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
@@ -1364,7 +1358,7 @@ export function RunEncounters() {
                         </div>
                         <div onClick={(e) => e.stopPropagation()}>
                           {isDefeated ? (
-                            <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
+                            <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-900/40 text-green-300">
                               Defeated &#10003;
                             </span>
                           ) : isActive ? (

frontend/src/pages/admin/AdminGameDetail.tsx

@@ -95,7 +95,7 @@ function SortableRouteGroup({
     <tbody
       ref={setNodeRef}
       style={style}
-      className={`${isDragging ? 'opacity-50 bg-blue-50 dark:bg-blue-900/20' : ''} divide-y divide-border-default`}
+      className={`${isDragging ? 'opacity-50 bg-accent-900/20' : ''} divide-y divide-border-default`}
     >
       <tr className="hover:bg-surface-2 cursor-pointer" onClick={() => onClick(group)}>
         <td className="px-4 py-3 text-sm w-12">
@@ -103,7 +103,7 @@ function SortableRouteGroup({
             {...attributes}
             {...listeners}
             onClick={(e) => e.stopPropagation()}
-            className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-text-secondary touch-none"
+            className="cursor-grab active:cursor-grabbing text-text-tertiary hover:text-text-secondary touch-none"
             title="Drag to reorder"
           >
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
@@ -189,7 +189,7 @@ function SortableBossRow({
     <tr
       ref={setNodeRef}
       style={style}
-      className={`${isDragging ? 'opacity-50 bg-blue-50 dark:bg-blue-900/20' : ''} hover:bg-surface-2 cursor-pointer`}
+      className={`${isDragging ? 'opacity-50 bg-accent-900/20' : ''} hover:bg-surface-2 cursor-pointer`}
       onClick={() => onClick(boss)}
     >
       <td className="px-4 py-3 text-sm w-12">
@@ -197,7 +197,7 @@ function SortableBossRow({
           {...attributes}
           {...listeners}
           onClick={(e) => e.stopPropagation()}
-          className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-text-secondary touch-none"
+          className="cursor-grab active:cursor-grabbing text-text-tertiary hover:text-text-secondary touch-none"
           title="Drag to reorder"
         >
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
@@ -287,8 +287,8 @@ export function AdminGameDetail() {
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   )
 
-  if (isLoading) return <div className="py-8 text-center text-gray-500">Loading...</div>
+  if (isLoading) return <div className="py-8 text-center text-text-secondary">Loading...</div>
-  if (!game) return <div className="py-8 text-center text-gray-500">Game not found</div>
+  if (!game) return <div className="py-8 text-center text-text-secondary">Game not found</div>
 
   const routes = game.routes ?? []
   const routeGroups = organizeRoutes(routes)
@@ -362,7 +362,7 @@ export function AdminGameDetail() {
           onClick={() => setTab('routes')}
           className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
             tab === 'routes'
-              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+              ? 'border-accent-400 text-accent-400'
               : 'border-transparent text-text-tertiary hover:text-text-secondary'
           }`}
         >
@@ -372,7 +372,7 @@ export function AdminGameDetail() {
           onClick={() => setTab('bosses')}
           className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
             tab === 'bosses'
-              ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+              ? 'border-accent-400 text-accent-400'
               : 'border-transparent text-text-tertiary hover:text-text-secondary'
           }`}
         >

frontend/src/pages/admin/AdminGenlockeDetail.tsx

@@ -28,8 +28,9 @@ export function AdminGenlockeDetail() {
   const [addingLeg, setAddingLeg] = useState(false)
   const [selectedGameId, setSelectedGameId] = useState<number | ''>('')
 
-  if (isLoading) return <div className="py-8 text-center text-gray-500">Loading...</div>
+  if (isLoading) return <div className="py-8 text-center text-text-secondary">Loading...</div>
-  if (!genlocke) return <div className="py-8 text-center text-gray-500">Genlocke not found</div>
+  if (!genlocke)
+    return <div className="py-8 text-center text-text-secondary">Genlocke not found</div>
 
   const editName = name ?? genlocke.name
   const editStatus = status ?? genlocke.status
@@ -108,7 +109,7 @@ export function AdminGenlockeDetail() {
           </button>
           <button
             onClick={() => setShowDelete(true)}
-            className="px-4 py-2 text-sm font-medium rounded-md border border-red-300 dark:border-red-600 text-status-failed hover:bg-red-50 dark:hover:bg-red-900/20"
+            className="px-4 py-2 text-sm font-medium rounded-md border border-red-600 text-status-failed hover:bg-red-900/20"
           >
             Delete
           </button>
@@ -229,7 +230,7 @@ export function AdminGenlockeDetail() {
                             Run #{leg.runId}
                           </Link>
                         ) : (
-                          <span className="text-gray-400">&mdash;</span>
+                          <span className="text-text-tertiary">&mdash;</span>
                         )}
                       </td>
                       <td className="px-4 py-3 text-sm whitespace-nowrap">
@@ -246,7 +247,7 @@ export function AdminGenlockeDetail() {
                             {leg.runStatus}
                           </span>
                         ) : (
-                          <span className="text-gray-400">&mdash;</span>
+                          <span className="text-text-tertiary">&mdash;</span>
                         )}
                       </td>
                       <td className="px-4 py-3 text-sm whitespace-nowrap">{leg.encounterCount}</td>
@@ -260,7 +261,7 @@ export function AdminGenlockeDetail() {
                               ? 'Cannot remove a leg with a linked run'
                               : 'Remove leg'
                           }
-                          className="text-status-failed hover:text-red-800 dark:hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
+                          className="text-status-failed hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
                         >
                           Remove
                         </button>