From 620ebc0b6c85964e7028c46b975b087ba23bea12 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Fri, 8 May 2026 12:26:37 +0200
Subject: [PATCH] fix: normalize heading font weights and replace hardcoded
 colors with css variables

---
 templates/base.gohtml                         |  6 +-
 templates/browse.gohtml                       |  2 +-
 templates/components/anime_card.gohtml        |  2 +-
 templates/components/footer.gohtml            |  4 +-
 templates/components/header.gohtml            | 14 ++--
 templates/components/watch_order.gohtml       |  2 +-
 templates/components/watchlist_actions.gohtml |  4 +-
 templates/discover.gohtml                     |  8 +-
 templates/index.gohtml                        |  4 +-
 templates/login.gohtml                        | 14 ++--
 templates/not_found.gohtml                    |  4 +-
 templates/watch.gohtml                        | 74 +++++++++----------
 templates/watchlist.gohtml                    |  4 +-
 templates/watchlist_partial.gohtml            | 46 ++++++------
 14 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/templates/base.gohtml b/templates/base.gohtml
index 8e0479e..7772cc8 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -34,10 +34,10 @@
   </style>
   <script type="module" src="/dist/static/theme.js" defer></script>
   <template id="toast-template">
-    <div class="toast bg-white/10 border border-white/20 flex items-center gap-3 px-4 py-3 shadow-lg transform transition-all duration-300 translate-y-2 opacity-0">
-      <span class="toast-message text-sm text-neutral-200"></span>
+    <div class="toast bg-foreground/10 border border-border flex items-center gap-3 px-4 py-3 shadow-lg transform transition-all duration-300 translate-y-2 opacity-0">
+      <span class="toast-message text-sm text-foreground"></span>
       <button class="toast-close ml-2 opacity-50 hover:opacity-100" aria-label="Close">
-        <svg class="size-4 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <svg class="size-4 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M18 6L6 18M6 6l12 12"/>
         </svg>
       </button>
diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index 50f2d57..4a2d10b 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -3,7 +3,7 @@
 {{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div class="flex flex-col gap-6">
   <div class="flex items-end justify-between">
-    <h1 class="text-xl font-semibold text-foreground">Browse</h1>
+    <h1 class="text-xl font-normal text-foreground">Browse</h1>
   </div>
 
   {{template "filter_bar" .}}
diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml
index 45fa3ec..ad4dc00 100644
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -67,7 +67,7 @@
       {{end}}
     </a>
   {{if and $withActions (not $hideTitle)}}
-    <h3 class="line-clamp-2 text-sm font-medium text-foreground">
+    <h3 class="line-clamp-2 text-sm font-normal text-foreground">
       {{$displayTitle}}
     </h3>
   {{end}}
diff --git a/templates/components/footer.gohtml b/templates/components/footer.gohtml
index ec360a2..5f8ec17 100644
--- a/templates/components/footer.gohtml
+++ b/templates/components/footer.gohtml
@@ -8,7 +8,7 @@
     <div class="flex items-center gap-6">
       <button
         id="footer-theme-toggle"
-        class="text-neutral-500 transition-colors hover:text-foreground focus:outline-none"
+        class="text-foreground-muted transition-colors hover:text-foreground focus:outline-none"
         aria-label="Toggle theme"
       >
         <svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
@@ -19,7 +19,7 @@
           <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
         </svg>
       </button>
-      <a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener" class="group flex items-center gap-2.5 text-neutral-500 transition-colors hover:text-foreground">
+      <a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener" class="group flex items-center gap-2.5 text-foreground-muted transition-colors hover:text-foreground">
         <svg class="h-5 w-5 transition-transform group-hover:scale-110" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
         <span class="text-sm font-medium">Source</span>
       </a>
diff --git a/templates/components/header.gohtml b/templates/components/header.gohtml
index 663fb95..01bc6fa 100644
--- a/templates/components/header.gohtml
+++ b/templates/components/header.gohtml
@@ -2,10 +2,10 @@
 <header class="bg-background-header flex flex-col border-b border-border relative z-50">
   <div class="flex h-16 items-center justify-between px-4 md:px-6">
     <div class="flex items-center gap-4">
-      <button onclick="toggleMobileMenu()" class="block text-neutral-400 transition-colors hover:text-foreground focus:outline-none md:hidden">
+      <button onclick="toggleMobileMenu()" class="block text-foreground-muted transition-colors hover:text-foreground focus:outline-none md:hidden">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
       </button>
-      <button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-foreground focus:outline-none lg:block">
+      <button onclick="toggleSidebar()" class="hidden text-foreground-muted transition-colors hover:text-foreground focus:outline-none lg:block">
         <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
       </button>
       <a href="/" class="group flex items-center gap-2.5 focus:outline-none">
@@ -17,7 +17,7 @@
     <div class="hidden max-w-2xl flex-1 items-center justify-center px-4 md:flex">
       <form action="/browse" method="GET" class="w-full max-w-lg">
         <div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
-          <div class="pr-2 pl-4 text-neutral-400">
+          <div class="pr-2 pl-4 text-foreground-muted">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
           </div>
           <input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />
@@ -28,7 +28,7 @@
     <div class="flex items-center gap-2 relative justify-end">
       <button
         id="theme-toggle"
-        class="rounded-full p-1.5 text-neutral-400 transition-colors hover:bg-surface-hover hover:text-foreground focus:outline-none"
+        class="rounded-full p-1.5 text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus:outline-none"
       >
         <svg class="theme-icon-dark size-5" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
           <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
@@ -48,11 +48,11 @@
                 class="h-8 w-8 rounded-full object-cover"
               />
             {{else}}
-              <div class="bg-accent flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-white">
+              <div class="bg-accent flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-on-accent">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
               </div>
             {{end}}
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="m6 9 6 6 6-6"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-foreground-muted"><path d="m6 9 6 6 6-6"/></svg>
           </button>
         </div>
 
@@ -80,7 +80,7 @@
   <div class="flex border-t border-border p-3 md:hidden">
     <form action="/browse" method="GET" class="w-full">
         <div class="focus-within:border-accent bg-background-surface flex h-10 w-full items-center overflow-hidden border border-border transition-colors">
-          <div class="pr-2 pl-4 text-neutral-400">
+          <div class="pr-2 pl-4 text-foreground-muted">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
           </div>
           <input type="text" name="q" placeholder="Search..." class="h-full w-full bg-transparent px-1 text-sm text-foreground focus:outline-none" />
diff --git a/templates/components/watch_order.gohtml b/templates/components/watch_order.gohtml
index b190afa..74f30a7 100644
--- a/templates/components/watch_order.gohtml
+++ b/templates/components/watch_order.gohtml
@@ -6,7 +6,7 @@
       <div class="group relative">
         {{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true "IsWatchlist" (index $.WatchlistMap .Anime.MalID)}}
         {{if eq .Anime.MalID $.AnimeID}}
-          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
+          <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-on-accent shadow-md">
             CURRENT
           </div>
         {{end}}
diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index 3c1172f..6a0107d 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -17,7 +17,7 @@
             Add to Watchlist
           {{end}}
         </span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-400"><path d="m6 9 6 6 6-6"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-foreground-muted"><path d="m6 9 6 6 6-6"/></svg>
       </button>
     </div>
 
@@ -37,7 +37,7 @@
         </button>
         
         <div id="remove-watchlist-container-{{$anime.MalID}}" class="{{if not $status}}hidden{{end}}">
-          <div class="my-1 h-px bg-white/10"></div>
+          <div class="my-1 h-px bg-border"></div>
           <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}})">
             <span class="font-medium text-sm text-red-500 text-left whitespace-nowrap">Remove from Watchlist</span>
           </button>
diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index b1d0006..3ba04fe 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -30,7 +30,7 @@
   <section class="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl bg-background-surface px-6 py-24 text-center ring-1 ring-border">
     <div class="from-accent/10 absolute inset-0 bg-linear-to-b to-transparent opacity-50"></div>
     <div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
-      <h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
+      <h1 class="text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
         Don't know what to watch?
       </h1>
       <p class="text-lg text-foreground-muted">
@@ -53,7 +53,7 @@
   {{/* Trending Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-semibold text-foreground">Trending This Season</h2>
+      <h2 class="text-xl font-normal text-foreground">Trending This Season</h2>
       <a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
     <div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
@@ -64,7 +64,7 @@
   {{/* Upcoming Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-semibold text-foreground">Highly Anticipated</h2>
+      <h2 class="text-xl font-normal text-foreground">Highly Anticipated</h2>
       <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
     <div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
@@ -75,7 +75,7 @@
   {{/* Top Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-semibold text-foreground">All-Time Greats</h2>
+      <h2 class="text-xl font-normal text-foreground">All-Time Greats</h2>
       <a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
     <div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
diff --git a/templates/index.gohtml b/templates/index.gohtml
index ea46d85..c647654 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -7,7 +7,7 @@
 
   <section class="w-full">
     <div class="mb-4 flex items-end justify-between">
-      <h2 class="text-lg font-semibold text-foreground">Currently Airing</h2>
+      <h2 class="text-lg font-normal text-foreground">Currently Airing</h2>
       <a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
         See more
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
@@ -20,7 +20,7 @@
 
   <section class="w-full">
     <div class="mb-4 flex items-end justify-between">
-      <h2 class="text-lg font-semibold text-foreground">Most Popular</h2>
+      <h2 class="text-lg font-normal text-foreground">Most Popular</h2>
       <a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
         See more
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
diff --git a/templates/login.gohtml b/templates/login.gohtml
index f0da7a7..62af368 100644
--- a/templates/login.gohtml
+++ b/templates/login.gohtml
@@ -2,38 +2,38 @@
 {{define "content"}}
 <div class="flex min-h-screen items-center justify-center p-4">
   <div class="w-full max-w-md">
-    <h1 class="mb-2 text-3xl font-medium text-white">Sign in</h1>
-    <p class="text-neutral-400 mb-8">Enter your credentials to continue.</p>
+    <h1 class="mb-2 text-3xl font-normal text-foreground">Sign in</h1>
+    <p class="text-foreground-muted mb-8">Enter your credentials to continue.</p>
 
     <form method="POST" action="/login" class="flex flex-col gap-6">
       <label class="flex flex-col gap-2">
-        <span class="text-white text-sm">Username</span>
+        <span class="text-foreground text-sm">Username</span>
         <input
           type="text"
           name="username"
           value="{{.Username}}"
           required
           placeholder="username"
-          class="bg-background-surface text-white placeholder-neutral-500 border-none px-4 py-3 focus:outline-none focus-within:ring-2 focus-within:ring-accent rounded-sm"
+          class="bg-background-surface text-foreground placeholder-foreground-muted border-none px-4 py-3 focus:outline-none focus-within:ring-2 focus-within:ring-accent rounded-sm"
         />
       </label>
 
       <label class="flex flex-col gap-2">
-        <span class="text-white text-sm">Password</span>
+        <span class="text-foreground text-sm">Password</span>
         <div class="relative group focus-within:ring-2 focus-within:ring-accent rounded-sm">
           <input
             type="password"
             name="password"
             required
             placeholder="Password"
-            class="bg-background-surface text-white placeholder-neutral-500 w-full border-none px-4 py-3 focus:outline-none rounded-sm"
+            class="bg-background-surface text-foreground placeholder-foreground-muted w-full border-none px-4 py-3 focus:outline-none rounded-sm"
           />
         </div>
       </label>
 
       <button
         type="submit"
-        class="hover:bg-gray-200 mt-2 bg-white px-4 py-3 font-medium text-black transition-colors rounded-sm"
+        class="mt-2 bg-accent px-4 py-3 font-normal text-on-accent transition-colors rounded-sm hover:opacity-90"
       >
         Sign in
       </button>
diff --git a/templates/not_found.gohtml b/templates/not_found.gohtml
index 370f480..cf80ff3 100644
--- a/templates/not_found.gohtml
+++ b/templates/not_found.gohtml
@@ -1,7 +1,7 @@
 {{define "title"}}Not Found{{end}}
 {{define "content"}}
   <div class="text-center py-20">
-    <h2 class="text-4xl font-bold mb-4">404</h2>
-    <p class="text-xl text-gray-400">Page not found</p>
+    <h2 class="text-4xl font-normal mb-4">404</h2>
+    <p class="text-xl text-foreground-muted">Page not found</p>
   </div>
 {{end}}
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index dd8f1b1..8b5a458 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -10,13 +10,13 @@
 <div id="watch-layout" class="flex flex-col gap-6 pb-12 lg:flex-row lg:gap-6">
   <div class="flex-1 min-w-0">
     <div class="flex items-center justify-between mb-4">
-      <a href="/anime/{{$anime.MalID}}" class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors">
+      <a href="/anime/{{$anime.MalID}}" class="inline-flex items-center gap-2 text-sm text-foreground-muted hover:text-foreground transition-colors">
         <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
         Back
       </a>
       <ui-dropdown class="relative block" data-align="right" data-width="min-w-[160px]">
         <div data-trigger class="cursor-pointer">
-          <button type="button" class="bg-accent/20 hover:bg-accent/30 flex items-center justify-between gap-2 px-4 py-2 text-sm text-accent font-medium transition-colors">
+          <button type="button" class="bg-accent/20 hover:bg-accent/30 flex items-center justify-between gap-2 px-4 py-2 text-sm text-accent font-normal transition-colors">
             <span id="watchlist-status-display-{{$anime.MalID}}">
               {{if .WatchlistStatus}}{{if eq .WatchlistStatus "watching"}}Watching{{else if eq .WatchlistStatus "completed"}}Completed{{else if eq .WatchlistStatus "plan_to_watch"}}Plan to Watch{{else if eq .WatchlistStatus "dropped"}}Dropped{{end}}{{else}}Add to Watchlist{{end}}
             </span>
@@ -26,36 +26,36 @@
         <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
           {{if .WatchlistStatus}}
           <div class="flex flex-col py-1">
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
-              <span class="text-sm text-white">Watching</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
+              <span class="text-sm text-foreground">Watching</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
-              <span class="text-sm text-white">Completed</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
+              <span class="text-sm text-foreground">Completed</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
-              <span class="text-sm text-white">Plan to Watch</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
+              <span class="text-sm text-foreground">Plan to Watch</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
-              <span class="text-sm text-white">Dropped</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
+              <span class="text-sm text-foreground">Dropped</span>
             </button>
-            <div class="border-t border-white/10 my-1"></div>
+            <div class="border-t border-border my-1"></div>
             <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
               <span class="text-sm text-red-400">Remove from Watchlist</span>
             </button>
           </div>
           {{else}}
           <div class="flex flex-col py-1">
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
-              <span class="text-sm text-white">Watching</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
+              <span class="text-sm text-foreground">Watching</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
-              <span class="text-sm text-white">Completed</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
+              <span class="text-sm text-foreground">Completed</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
-              <span class="text-sm text-white">Plan to Watch</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
+              <span class="text-sm text-foreground">Plan to Watch</span>
             </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
-              <span class="text-sm text-white">Dropped</span>
+            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
+              <span class="text-sm text-foreground">Dropped</span>
             </button>
           </div>
           {{end}}
@@ -70,14 +70,14 @@
       <div class="flex gap-2">
         {{$prevEp := sub (int $currentEpID) 1}}
         {{if ge $prevEp 1}}
-          <a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 text-sm text-neutral-300 transition-colors">
+          <a href="/anime/{{$anime.MalID}}/watch?ep={{$prevEp}}" class="flex items-center gap-2 px-4 py-2 bg-background-surface hover:bg-surface-hover text-sm text-foreground-muted transition-colors">
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
             Prev
           </a>
         {{end}}
         {{$nextEp := add (int $currentEpID) 1}}
         {{if le $nextEp $anime.Episodes}}
-          <a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 text-sm text-neutral-300 transition-colors">
+          <a href="/anime/{{$anime.MalID}}/watch?ep={{$nextEp}}" class="flex items-center gap-2 px-4 py-2 bg-background-surface hover:bg-surface-hover text-sm text-foreground-muted transition-colors">
             Next
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
           </a>
@@ -94,19 +94,19 @@
         {{end}}
         <ui-dropdown class="relative block mb-4" data-align="left" data-width="w-full">
           <div data-trigger>
-            <button class="w-full flex items-center justify-between px-3 py-2 bg-white/5 border border-white/10 rounded text-sm text-neutral-300 hover:bg-white/10 transition-colors">
+            <button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface border border-border rounded text-sm text-foreground-muted hover:bg-surface-hover transition-colors">
               <span class="truncate">
-                {{if $currentSeason.Prefix}}<span class="font-bold text-white mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
+                {{if $currentSeason.Prefix}}<span class="font-bold text-foreground mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
                 {{$currentSeason.Title}}
               </span>
-              <svg class="w-4 h-4 text-neutral-500 shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+              <svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
             </button>
           </div>
-          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-white/10 max-h-64 overflow-y-auto scrollbar-hide">
+          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-border max-h-64 overflow-y-auto scrollbar-hide">
             <div class="flex flex-col py-1">
               {{range .Seasons}}
-                <a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-neutral-300 hover:bg-white/10{{end}} transition-colors">
-                  <span class="font-bold text-white mr-1">{{.Prefix}}:</span>
+                <a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-foreground-muted hover:bg-surface-hover{{end}} transition-colors">
+                  <span class="font-bold text-foreground mr-1">{{.Prefix}}:</span>
                   {{.Title}}
                 </a>
               {{end}}
@@ -116,25 +116,25 @@
       {{end}}
 
       {{if eq $totalEpisodes 0}}
-      <div class="flex flex-col items-center justify-center gap-2 py-12 text-neutral-400">
+      <div class="flex flex-col items-center justify-center gap-2 py-12 text-foreground-muted">
         <svg class="h-10 w-10 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
         <p class="text-sm">No episodes found</p>
       </div>
     {{else}}
       <div class="flex flex-col gap-2">
         <div class="flex items-center justify-between">
-          <span class="text-sm font-medium text-neutral-400">Episodes</span>
+          <span class="text-sm font-normal text-foreground-muted">Episodes</span>
           {{if gt $totalEpisodes 100}}
-            <input type="text" placeholder="Find" data-episode-search class="w-24 bg-white/5 text-sm px-3 py-1.5 rounded border border-white/10 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-accent" />
+            <input type="text" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 rounded border border-border text-foreground placeholder-foreground-muted focus:outline-none focus:border-accent" />
           {{end}}
         </div>
 
         {{if gt $totalEpisodes 100}}
           <ui-dropdown class="relative block" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
             <div data-trigger>
-              <button class="w-full flex items-center justify-between px-3 py-2 bg-white/5 border border-white/10 rounded text-sm text-neutral-300 hover:bg-white/10">
+              <button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface border border-border rounded text-sm text-foreground-muted hover:bg-surface-hover">
                 <span data-dropdown-label>01-100</span>
-                <svg class="w-4 h-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                <svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
               </button>
             </div>
             <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-2xl">
@@ -143,7 +143,7 @@
                 {{range $i := seq $ranges}}
                   {{$start := imul $i 100}}
                   {{$end := min (add $start 100) $totalEpisodes}}
-                  <button class="episode-range-btn px-4 py-2 text-left text-sm text-neutral-300 hover:bg-white/10" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
+                  <button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
                     {{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
                   </button>
                 {{end}}
@@ -159,7 +159,7 @@
             {{$isCurrent := eq (printf "%v" .MalID) $currentEpID}}
             {{$isFiller := .Filler}}
             {{$isRecap := .Recap}}
-            <a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center justify-center py-2 text-xs transition-colors {{if $isFiller}}bg-yellow-500/20 text-yellow-400{{else if $isRecap}}bg-blue-500/20 text-blue-400{{else}}text-neutral-400 hover:bg-white/5{{end}} {{if $isCurrent}}bg-accent/20 text-accent ring-1 ring-accent{{end}}" data-episode-id="{{.MalID}}" data-episode-index="{{.MalID}}" data-episode-title="{{.Title}}">
+            <a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center justify-center py-2 text-xs transition-colors {{if $isFiller}}bg-yellow-500/20 text-yellow-400{{else if $isRecap}}bg-blue-500/20 text-blue-400{{else}}text-foreground-muted hover:bg-foreground/5{{end}} {{if $isCurrent}}bg-accent/20 text-accent ring-1 ring-accent{{end}}" data-episode-id="{{.MalID}}" data-episode-index="{{.MalID}}" data-episode-title="{{.Title}}">
               {{.MalID}}
             </a>
           {{end}}
@@ -170,9 +170,9 @@
             {{$isCurrent := eq (printf "%v" .MalID) $currentEpID}}
             {{$isFiller := .Filler}}
             {{$isRecap := .Recap}}
-            <a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center gap-3 px-3 py-2 transition-colors hover:bg-white/5 text-left {{if $isFiller}}border-l-2 border-l-yellow-500{{else if $isRecap}}border-l-2 border-l-blue-500{{end}} {{if $isCurrent}}bg-accent/20{{end}}" data-episode-id="{{.MalID}}" data-episode-title="{{.Title}}">
-              <span class="w-10 shrink-0 text-xs font-medium text-neutral-500 tabular-nums">EP{{.MalID}}</span>
-              <span class="truncate text-sm {{if $isFiller}}text-yellow-400{{else if $isRecap}}text-blue-400{{else}}text-neutral-300{{end}}" data-episode-title>{{.Title}}</span>
+            <a href="/anime/{{$anime.MalID}}/watch?ep={{.MalID}}" class="flex items-center gap-3 px-3 py-2 transition-colors hover:bg-foreground/5 text-left {{if $isFiller}}border-l-2 border-l-yellow-500{{else if $isRecap}}border-l-2 border-l-blue-500{{end}} {{if $isCurrent}}bg-accent/20{{end}}" data-episode-id="{{.MalID}}" data-episode-title="{{.Title}}">
+              <span class="w-10 shrink-0 text-xs font-normal text-foreground-muted tabular-nums">EP{{.MalID}}</span>
+              <span class="truncate text-sm {{if $isFiller}}text-yellow-400{{else if $isRecap}}text-blue-400{{else}}text-foreground-muted{{end}}" data-episode-title>{{.Title}}</span>
             </a>
           {{end}}
         </div>
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index 551a4cb..da5336f 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -2,7 +2,7 @@
 {{define "content"}}
 {{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6 mt-6">
-  <h1 class="text-xl font-semibold text-foreground">Watchlist</h1>
+  <h1 class="text-xl font-normal text-foreground">Watchlist</h1>
 
   <div class="flex flex-wrap items-center justify-between gap-4">
     <div class="flex flex-wrap items-center gap-6">
@@ -52,7 +52,7 @@
           </div>
         </div>
         <a href="/anime/{{.AnimeID}}" class="group/title">
-          <h3 class="line-clamp-2 text-sm font-medium text-foreground group-hover/title:text-foreground-muted transition-colors">
+          <h3 class="line-clamp-2 text-sm font-normal text-foreground group-hover/title:text-foreground-muted transition-colors">
             {{.DisplayTitle}}
           </h3>
         </a>
diff --git a/templates/watchlist_partial.gohtml b/templates/watchlist_partial.gohtml
index ea63497..b3d243c 100644
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -1,34 +1,34 @@
 {{define "title"}}Watchlist{{end}}
 {{define "content"}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
-  <h1 class="text-lg font-normal text-neutral-300">Watchlist</h1>
+  <h1 class="text-lg font-normal text-foreground">Watchlist</h1>
 
   <div class="flex flex-wrap items-center justify-between gap-4">
     <div class="flex flex-wrap items-center gap-6">
-      <button class="text-sm transition-colors text-white" onclick="filterWatchlist('all', this)">All</button>
-      <button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('watching', this)">Watching</button>
-      <button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
-      <button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('completed', this)">Completed</button>
-      <button class="text-sm transition-colors text-neutral-400 hover:text-white" onclick="filterWatchlist('dropped', this)">Dropped</button>
+      <button class="text-sm transition-colors text-foreground" onclick="filterWatchlist('all', this)">All</button>
+      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
+      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
+      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
+      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
     </div>
 
     <div class="flex items-center gap-4">
       <ui-dropdown class="relative block" data-align="right" data-width="min-w-[150px]">
         <div data-trigger>
-          <button type="button" class="flex items-center gap-2 text-sm text-neutral-400 transition-colors hover:text-white">
+            <button type="button" class="flex items-center gap-2 text-sm text-foreground-muted transition-colors hover:text-foreground">
             <span>Sort by: <span id="sort-by-display">Date Added</span></span>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h20"></path><path d="M6 12h12"></path><path d="M9 19h6"></path></svg>
           </button>
         </div>
         <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2">
           <div class="flex flex-col py-1">
-            <button class="flex w-full items-center px-4 py-2 text-sm text-white transition-colors hover:bg-white/10" onclick="setSortBy('date', this)">Date Added</button>
-            <button class="flex w-full items-center px-4 py-2 text-sm text-neutral-400 transition-colors hover:bg-white/10 hover:text-white" onclick="setSortBy('title', this)">Title</button>
+            <button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
+            <button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
           </div>
         </div>
       </ui-dropdown>
 
-      <button type="button" id="sort-order-btn" class="text-neutral-400 transition-colors hover:text-white" onclick="toggleSortOrder(this)">
+      <button type="button" id="sort-order-btn" class="text-foreground-muted transition-colors hover:text-foreground" onclick="toggleSortOrder(this)">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
       </button>
     </div>
@@ -42,7 +42,7 @@
           <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 mt-6">
             {{range $entries}}
               <div class="watchlist-item flex w-full flex-col gap-2" data-status="{{.Status}}" data-updated-at="{{.UpdatedAt.Unix}}" data-episode="{{.CurrentEpisode.Int64}}" data-time="{{.CurrentTimeSeconds}}" data-title="{{.DisplayTitle}}">
-                <div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
+                <div class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-background-surface after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
                   <a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
                   <img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
 
@@ -54,7 +54,7 @@
                     </div>
                   </div>
                 </div>
-                <h3 class="line-clamp-2 text-sm font-medium text-white">
+                <h3 class="line-clamp-2 text-sm font-normal text-foreground">
                   {{.DisplayTitle}}
                 </h3>
               </div>
@@ -65,9 +65,9 @@
     {{end}}
 
     {{if eq (len $.AllEntries) 0}}
-      <div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
-        <svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
-        <p class="text-lg">Your watchlist is empty.</p>
+      <div class="flex flex-col items-center justify-center gap-2 py-24 text-foreground-muted">
+        <svg class="h-12 w-12 opacity-30 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+        <p class="text-lg text-foreground">Your watchlist is empty.</p>
         <a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
       </div>
     {{end}}
@@ -82,11 +82,11 @@
     // Update active tab styling
     const parent = btn.parentElement
     parent.querySelectorAll('button').forEach(function(b) {
-      b.classList.remove('text-white')
-      b.classList.add('text-neutral-400')
+      b.classList.remove('text-foreground')
+      b.classList.add('text-foreground-muted')
     })
-    btn.classList.remove('text-neutral-400')
-    btn.classList.add('text-white')
+    btn.classList.remove('text-foreground-muted')
+    btn.classList.add('text-foreground')
     
     // Show/hide sections
     document.querySelectorAll('.watchlist-section').forEach(function(section) {
@@ -108,11 +108,11 @@
     // Update button colors in dropdown
     const dropdown = btn.closest('[data-content]')
     dropdown.querySelectorAll('button').forEach(function(b) {
-      b.classList.remove('text-white')
-      b.classList.add('text-neutral-400')
+      b.classList.remove('text-foreground')
+      b.classList.add('text-foreground-muted')
     })
-    btn.classList.remove('text-neutral-400')
-    btn.classList.add('text-white')
+    btn.classList.remove('text-foreground-muted')
+    btn.classList.add('text-foreground')
     
     sortItems()