From d794524adfde7f2fb00759f474975d73ac542054 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 01:03:53 +0200
Subject: [PATCH] =?UTF-8?q?feat(theme):=20R10=20S1=20=E2=80=94=20semantic?=
 =?UTF-8?q?=20status=20colors=20(danger/warn/success)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add theme-scoped --danger/--warn/--success (+ -fg) tokens wired into the v4
@theme inline, replacing ~110 raw red/amber/emerald/green palette refs across
34 files. Fixes light-theme contrast failures (fixed Tailwind shades fell to
~1.7-3:1 on white). Status colors are scheme-independent — recognised by hue,
shifting only by theme to hold contrast (bright on dark bg, darkened on light).
Solid fills use the paired -fg text; @source inline guarantees the full -fg set
exists. IMDb rating gold kept as a deliberate decorative non-status exception.
---
 frontend/src/components/AdminUsers.tsx        | 14 ++++----
 frontend/src/components/AuditLog.tsx          |  2 +-
 frontend/src/components/Banner.tsx            |  6 ++--
 frontend/src/components/ChannelPage.tsx       |  2 +-
 frontend/src/components/Channels.tsx          |  2 +-
 frontend/src/components/ConfigPanel.tsx       |  4 +--
 frontend/src/components/ConfirmProvider.tsx   |  2 +-
 frontend/src/components/DownloadCenter.tsx    | 12 +++----
 frontend/src/components/KeyGate.tsx           |  8 ++---
 frontend/src/components/OnboardingWizard.tsx  |  4 +--
 frontend/src/components/PlayerModal.tsx       |  2 +-
 frontend/src/components/Playlists.tsx         |  4 +--
 frontend/src/components/PlaylistsRail.tsx     |  2 +-
 frontend/src/components/PlexBrowse.tsx        | 15 ++++----
 .../src/components/PlexCollectionEditor.tsx   |  2 +-
 frontend/src/components/PlexInfo.tsx          |  1 +
 frontend/src/components/PlexPlayer.tsx        |  4 +--
 frontend/src/components/PlexPlaylistView.tsx  | 10 +++---
 frontend/src/components/ProfileEditor.tsx     |  2 +-
 frontend/src/components/QueryState.tsx        |  2 +-
 frontend/src/components/SavedViewsWidget.tsx  |  2 +-
 frontend/src/components/Scheduler.tsx         | 18 +++++-----
 frontend/src/components/SettingsPanel.tsx     |  8 ++---
 frontend/src/components/SetupWizard.tsx       |  6 ++--
 frontend/src/components/ShareDialog.tsx       |  6 ++--
 frontend/src/components/SyncStatus.tsx        |  2 +-
 frontend/src/components/TagManager.tsx        |  2 +-
 frontend/src/components/Toaster.tsx           |  8 ++---
 frontend/src/components/VideoCard.tsx         |  4 +--
 frontend/src/components/VideoEditor.tsx       |  2 +-
 frontend/src/components/WatchPage.tsx         |  2 +-
 frontend/src/components/Welcome.tsx           |  6 ++--
 frontend/src/components/playlistColumns.tsx   |  2 +-
 frontend/src/components/ui/DraftSaveBar.tsx   |  4 +--
 frontend/src/index.css                        | 36 +++++++++++++++++++
 35 files changed, 123 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/AdminUsers.tsx b/frontend/src/components/AdminUsers.tsx
index 35df421c..d96df65c 100644
--- a/frontend/src/components/AdminUsers.tsx
+++ b/frontend/src/components/AdminUsers.tsx
@@ -58,7 +58,7 @@ function Badge({
     tone === "accent"
       ? "border-accent/40 text-accent"
       : tone === "warning"
-        ? "border-amber-500/40 text-amber-500"
+        ? "border-warn/40 text-warn"
         : "border-border text-muted";
   return (
     <span className={`shrink-0 text-[11px] px-2 py-0.5 rounded-full border ${cls}`}>
@@ -230,8 +230,8 @@ function UsersRoles({ me }: { me: Me }) {
                     }
                     className={`shrink-0 p-1.5 rounded-lg border disabled:opacity-40 transition ${
                       u.is_suspended
-                        ? "border-amber-500/40 text-amber-500 hover:bg-amber-500/10"
-                        : "border-border text-muted hover:text-amber-500"
+                        ? "border-warn/40 text-warn hover:bg-warn/10"
+                        : "border-border text-muted hover:text-warn"
                     }`}
                   >
                     {u.is_suspended ? (
@@ -248,7 +248,7 @@ function UsersRoles({ me }: { me: Me }) {
                     onClick={() => onDelete(u)}
                     disabled={u.is_demo || self || pendingIds.has(u.id)}
                     aria-label={t("users.delete.action")}
-                    className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-40 transition"
+                    className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-40 transition"
                   >
                     <Trash2 className="w-4 h-4" />
                   </button>
@@ -368,7 +368,7 @@ function AdminInvites() {
             {decided.map((i) => (
               <div key={i.id} className="flex items-center justify-between gap-2">
                 <span className="truncate">{i.email}</span>
-                <span className={i.status === "approved" ? "text-accent" : "text-red-400"}>
+                <span className={i.status === "approved" ? "text-accent" : "text-danger"}>
                   {i.status}
                 </span>
               </div>
@@ -445,7 +445,7 @@ function AdminDemo() {
                 <button
                   onClick={() => onRemove(r)}
                   disabled={remove.isPending}
-                  className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
+                  className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
                   aria-label={t("settings.demo.remove")}
                 >
                   <Trash2 className="w-4 h-4" />
@@ -542,7 +542,7 @@ function InviteRow({
         <button
           onClick={onDeny}
           disabled={busy}
-          className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
+          className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
           aria-label={t("settings.invites.deny")}
         >
           <X className="w-4 h-4" />
diff --git a/frontend/src/components/AuditLog.tsx b/frontend/src/components/AuditLog.tsx
index 241c4b3c..6f061e0c 100644
--- a/frontend/src/components/AuditLog.tsx
+++ b/frontend/src/components/AuditLog.tsx
@@ -75,7 +75,7 @@ export default function AuditLog() {
                 <button
                   onClick={onClear}
                   disabled={clear.isPending}
-                  className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
+                  className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                   {t("audit.clear")}
diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
index 3656d4c5..f619538f 100644
--- a/frontend/src/components/Banner.tsx
+++ b/frontend/src/components/Banner.tsx
@@ -11,9 +11,9 @@ const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> =
     action: "bg-accent text-accent-fg",
   },
   warning: {
-    bar: "bg-amber-500/15 border-amber-500/30",
-    icon: "text-amber-500",
-    action: "bg-amber-500 text-black",
+    bar: "bg-warn/15 border-warn/30",
+    icon: "text-warn",
+    action: "bg-warn text-warn-fg",
   },
 };
 
diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index f15ffc3e..e10ccde6 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -325,7 +325,7 @@ export default function ChannelPage({
                 ) : (
                   ch?.explored &&
                   !ch?.subscribed && (
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-amber-500/15 text-amber-600 dark:text-amber-400">
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-warn/15 text-warn dark:text-warn">
                       {t("channel.exploringBadge")}
                     </span>
                   )
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index db2ccd5f..1c533ce9 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -1095,7 +1095,7 @@ function ActionsCell({
         <Tooltip hint={t("channels.row.unsubscribeHint")}>
           <button
             onClick={onUnsubscribe}
-            className="text-muted hover:text-red-400 shrink-0"
+            className="text-muted hover:text-danger shrink-0"
             aria-label={t("channels.row.unsubscribeOnYoutube")}
           >
             <UserMinus className="w-4 h-4" />
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index 3b61681f..a8661746 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -243,11 +243,11 @@ export default function ConfigPanel() {
                     </p>
                     {plexResult.media_check?.checked &&
                       (plexResult.media_check.ok ? (
-                        <p className="text-[11px] text-emerald-500 mb-2">
+                        <p className="text-[11px] text-success mb-2">
                           {t("config.plexMediaOk")}
                         </p>
                       ) : (
-                        <p className="text-[11px] text-red-400 mb-2">
+                        <p className="text-[11px] text-danger mb-2">
                           {t("config.plexMediaMissing", {
                             path: plexResult.media_check.local_path ?? "",
                           })}
diff --git a/frontend/src/components/ConfirmProvider.tsx b/frontend/src/components/ConfirmProvider.tsx
index dc652199..28d0ac39 100644
--- a/frontend/src/components/ConfirmProvider.tsx
+++ b/frontend/src/components/ConfirmProvider.tsx
@@ -118,7 +118,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
                   multi ? "w-full" : ""
                 } ${
                   c.danger
-                    ? "bg-red-500 text-white hover:bg-red-600"
+                    ? "bg-danger text-danger-fg hover:bg-danger"
                     : "bg-accent text-accent-fg hover:opacity-90"
                 }`}
               >
diff --git a/frontend/src/components/DownloadCenter.tsx b/frontend/src/components/DownloadCenter.tsx
index 533525f1..41a868cb 100644
--- a/frontend/src/components/DownloadCenter.tsx
+++ b/frontend/src/components/DownloadCenter.tsx
@@ -45,9 +45,9 @@ const GiB = 1024 ** 3;
 const STATUS_CLS: Record<string, string> = {
   queued: "text-muted",
   running: "text-accent",
-  paused: "text-amber-400",
-  done: "text-emerald-400",
-  error: "text-red-400",
+  paused: "text-warn",
+  done: "text-success",
+  error: "text-danger",
   canceled: "text-muted",
 };
 
@@ -137,7 +137,7 @@ function IconBtn({
       title={title}
       className={clsx(
         "p-1.5 rounded-md hover:bg-surface text-muted transition",
-        danger ? "hover:text-red-400" : "hover:text-fg",
+        danger ? "hover:text-danger" : "hover:text-fg",
       )}
     >
       {children}
@@ -253,7 +253,7 @@ function DownloadRow({
           {job.status === "error" ? (
             <button
               onClick={() => onShowError?.(job)}
-              className="text-red-400 hover:text-red-300 inline-flex items-center gap-1 truncate"
+              className="text-danger hover:text-danger inline-flex items-center gap-1 truncate"
               title={t("downloads.errors.fail.title")}
             >
               · {t(`downloads.errors.fail.cat.${job.error_code || "unknown"}.short`)}
@@ -492,7 +492,7 @@ function UsageBar() {
       {!u.unlimited && (
         <div className="h-2 rounded-full bg-surface overflow-hidden">
           <div
-            className={clsx("h-full transition-all", pct > 90 ? "bg-red-400" : "bg-accent")}
+            className={clsx("h-full transition-all", pct > 90 ? "bg-danger" : "bg-accent")}
             style={{ width: `${pct}%` }}
           />
         </div>
diff --git a/frontend/src/components/KeyGate.tsx b/frontend/src/components/KeyGate.tsx
index 73168420..fff42753 100644
--- a/frontend/src/components/KeyGate.tsx
+++ b/frontend/src/components/KeyGate.tsx
@@ -93,7 +93,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
     return (
       <div className={`glass rounded-2xl space-y-3 ${compact ? "p-3" : "p-4"}`}>
         <div className="flex items-center gap-2">
-          <AlertTriangle className="w-5 h-5 text-red-400 shrink-0" />
+          <AlertTriangle className="w-5 h-5 text-danger shrink-0" />
           <div className="font-semibold text-sm">{t("messages.resetTitle")}</div>
         </div>
         <p className="text-sm text-muted">{t("messages.resetWarn")}</p>
@@ -107,7 +107,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
             className={inputCls}
           />
         )}
-        {err && <div className="text-sm text-red-400">{err}</div>}
+        {err && <div className="text-sm text-danger">{err}</div>}
         <div className="flex gap-2">
           <button
             onClick={cancelReset}
@@ -119,7 +119,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
           <button
             onClick={doReset}
             disabled={busy}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl font-semibold bg-red-500/90 text-white hover:bg-red-500 transition disabled:opacity-40"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-xl font-semibold bg-danger/90 text-danger-fg hover:bg-danger transition disabled:opacity-40"
           >
             <AlertTriangle className="w-4 h-4" />
             {t("messages.resetButton")}
@@ -158,7 +158,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
           className={inputCls}
         />
       )}
-      {err && <div className="text-sm text-red-400">{err}</div>}
+      {err && <div className="text-sm text-danger">{err}</div>}
       <button
         onClick={submit}
         disabled={busy || !pass}
diff --git a/frontend/src/components/OnboardingWizard.tsx b/frontend/src/components/OnboardingWizard.tsx
index 65522912..8466098d 100644
--- a/frontend/src/components/OnboardingWizard.tsx
+++ b/frontend/src/components/OnboardingWizard.tsx
@@ -20,8 +20,8 @@ import Overlay from "./Overlay";
 // A small reusable heads-up so the Google consent warning never feels like a surprise.
 function ConsentHeadsUp() {
   return (
-    <div className="flex gap-2.5 rounded-xl border border-amber-400/30 bg-amber-400/5 p-3 text-left">
-      <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-amber-400" />
+    <div className="flex gap-2.5 rounded-xl border border-warn/30 bg-warn/5 p-3 text-left">
+      <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-warn" />
       <p className="text-xs leading-relaxed text-fg/80">
         <Trans
           i18nKey="onboarding.consent"
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index f429e7d3..d75b9080 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -1077,7 +1077,7 @@ export default function PlayerModal({
             {playerError != null && (
               <div className="absolute inset-0 grid place-items-center bg-bg p-6 text-center">
                 <div className="max-w-sm">
-                  <AlertTriangle className="w-8 h-8 text-amber-500 mx-auto mb-3" />
+                  <AlertTriangle className="w-8 h-8 text-warn mx-auto mb-3" />
                   <h3 className="text-base font-semibold">{t("player.unavailableTitle")}</h3>
                   <p className="text-sm text-muted mt-1.5 mb-4">
                     {playerError === 101 || playerError === 150
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index c1b50999..8d465f50 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -550,7 +550,7 @@ export default function Playlists() {
     return (
       <div className="text-sm p-4 flex flex-col items-start gap-3">
         <span className="inline-flex items-center gap-2 text-muted">
-          <AlertTriangle className="w-4 h-4 text-red-400" />
+          <AlertTriangle className="w-4 h-4 text-danger" />
           {t("playlists.loadFailed")}
         </span>
         <button
@@ -673,7 +673,7 @@ export default function Playlists() {
                     onClick={deletePlaylist}
                     title={t("playlists.delete")}
                     aria-label={t("playlists.delete")}
-                    className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-red-400 hover:border-red-400/50 transition"
+                    className="inline-flex items-center justify-center p-2 rounded-lg border border-border text-muted hover:text-danger hover:border-danger/50 transition"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
diff --git a/frontend/src/components/PlaylistsRail.tsx b/frontend/src/components/PlaylistsRail.tsx
index ef119df0..b0405e14 100644
--- a/frontend/src/components/PlaylistsRail.tsx
+++ b/frontend/src/components/PlaylistsRail.tsx
@@ -216,7 +216,7 @@ export default function PlaylistsRail({
               <button
                 type="button"
                 onClick={() => listQuery.refetch()}
-                className="text-xs text-red-400 px-1 py-1 text-left hover:underline"
+                className="text-xs text-danger px-1 py-1 text-left hover:underline"
               >
                 {t("common.loadError")} — {t("common.retry")}
               </button>
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index 5ae2b44f..67d7925b 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -431,9 +431,9 @@ export default function PlexBrowse() {
 }
 
 const PLAYABLE_TINT: Record<string, string> = {
-  direct: "bg-emerald-500",
-  remux: "bg-amber-500",
-  transcode: "bg-orange-600",
+  direct: "bg-success",
+  remux: "bg-warn",
+  transcode: "bg-warn",
 };
 
 function PlexPosterCard({
@@ -503,7 +503,7 @@ function PlexPosterCard({
             className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
           >
             <CheckCircle2
-              className={`w-4 h-4 ${card.status === "watched" ? "text-emerald-400" : "text-white"}`}
+              className={`w-4 h-4 ${card.status === "watched" ? "text-success" : "text-white"}`}
             />
           </button>
         )}
@@ -733,7 +733,7 @@ function SeasonCard({
             }
             className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
           >
-            <CheckCircle2 className={`w-4 h-4 ${watched ? "text-emerald-400" : "text-white"}`} />
+            <CheckCircle2 className={`w-4 h-4 ${watched ? "text-success" : "text-white"}`} />
           </button>
         )}
         {/* Add whole season to a playlist, on hover. */}
@@ -920,7 +920,7 @@ function EpisodeCard({
             className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80 transition"
           >
             <CheckCircle2
-              className={`w-4 h-4 ${ep.status === "watched" ? "text-emerald-400" : "text-white"}`}
+              className={`w-4 h-4 ${ep.status === "watched" ? "text-success" : "text-white"}`}
             />
           </button>
         )}
@@ -930,7 +930,7 @@ function EpisodeCard({
               onToggleWatched ? "group-hover:opacity-0" : ""
             }`}
           >
-            <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+            <CheckCircle2 className="w-4 h-4 text-success" />
           </span>
         )}
         {pct > 0 && (
@@ -1099,6 +1099,7 @@ function PlexShowView({
                     }
                     className={`inline-flex items-center gap-1 ${onFilter ? "cursor-pointer hover:text-accent" : "cursor-default"}`}
                   >
+                    {/* decorative rating gold — intentionally NOT a status token */}
                     · <Star className="w-3.5 h-3.5 text-amber-400" fill="currentColor" />
                     {show.imdb_rating}
                   </button>
diff --git a/frontend/src/components/PlexCollectionEditor.tsx b/frontend/src/components/PlexCollectionEditor.tsx
index 89e1abd3..48c58080 100644
--- a/frontend/src/components/PlexCollectionEditor.tsx
+++ b/frontend/src/components/PlexCollectionEditor.tsx
@@ -193,7 +193,7 @@ export default function PlexCollectionEditor({
                 <button
                   onClick={() => removeCollection(c.id, c.title)}
                   disabled={!!busy}
-                  className="shrink-0 rounded-sm px-1.5 py-0.5 text-xs text-muted hover:text-red-400 disabled:opacity-50"
+                  className="shrink-0 rounded-sm px-1.5 py-0.5 text-xs text-muted hover:text-danger disabled:opacity-50"
                 >
                   {t("plex.collEditor.delete")}
                 </button>
diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/components/PlexInfo.tsx
index 436eb799..3817fb67 100644
--- a/frontend/src/components/PlexInfo.tsx
+++ b/frontend/src/components/PlexInfo.tsx
@@ -188,6 +188,7 @@ export default function PlexInfo({
                   </Filterable>
                 )}
                 {detail.imdb_rating != null && (
+                  // decorative rating gold — intentionally NOT a status token
                   <span className="inline-flex items-center gap-1 rounded-md bg-amber-400/15 px-1.5 py-0.5 font-semibold text-amber-500">
                     <button
                       onClick={
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx
index 45a08e60..e3d06301 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/components/PlexPlayer.tsx
@@ -1095,7 +1095,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
       {!ready && (
         <div className="absolute inset-0 grid place-items-center px-6 text-center text-sm pointer-events-none">
           {loadError ? (
-            <span className="max-w-md text-red-300">{loadError}</span>
+            <span className="max-w-md text-danger">{loadError}</span>
           ) : (
             <span className="text-white/70">{t("plex.player.loading")}</span>
           )}
@@ -1235,7 +1235,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
           {detail?.markers.map((m, i) => (
             <div
               key={i}
-              className="absolute inset-y-0 bg-amber-400/50"
+              className="absolute inset-y-0 bg-warn/50"
               style={{
                 left: `${(m.start_s / duration) * 100}%`,
                 width: `${((m.end_s - m.start_s) / duration) * 100}%`,
diff --git a/frontend/src/components/PlexPlaylistView.tsx b/frontend/src/components/PlexPlaylistView.tsx
index bc12e23b..fc6cfb5c 100644
--- a/frontend/src/components/PlexPlaylistView.tsx
+++ b/frontend/src/components/PlexPlaylistView.tsx
@@ -179,7 +179,7 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
       <button
         onClick={() => ctx.onRemove([ep.id])}
         disabled={ctx.busy}
-        className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
+        className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
@@ -222,7 +222,7 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
       <button
         onClick={() => ctx.onRemove([item.id])}
         disabled={ctx.busy}
-        className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
+        className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
@@ -285,7 +285,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
           onClick={() => ctx.onRemove(block.items.map((i) => i.id))}
           disabled={ctx.busy}
           title={t("plex.playlist.removeShow")}
-          className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
+          className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         >
           <X className="h-4 w-4" />
         </button>
@@ -323,7 +323,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
                       onClick={() => ctx.onRemove(s.items.map((i) => i.id))}
                       disabled={ctx.busy}
                       title={t("plex.playlist.removeSeason")}
-                      className="ml-1 rounded-sm p-0.5 text-muted hover:text-red-400 disabled:opacity-30"
+                      className="ml-1 rounded-sm p-0.5 text-muted hover:text-danger disabled:opacity-30"
                     >
                       <X className="h-3.5 w-3.5" />
                     </button>
@@ -572,7 +572,7 @@ export default function PlexPlaylistView({
           <button
             onClick={del}
             title={t("plex.playlist.delete")}
-            className="glass-card glass-hover rounded-lg p-2 text-sm hover:text-red-400"
+            className="glass-card glass-hover rounded-lg p-2 text-sm hover:text-danger"
           >
             <Trash2 className="h-4 w-4" />
           </button>
diff --git a/frontend/src/components/ProfileEditor.tsx b/frontend/src/components/ProfileEditor.tsx
index 88399970..685436eb 100644
--- a/frontend/src/components/ProfileEditor.tsx
+++ b/frontend/src/components/ProfileEditor.tsx
@@ -136,7 +136,7 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
             <button
               onClick={() => onDelete(p)}
               title={t("downloads.profiles.delete")}
-              className="p-1 rounded-sm hover:bg-surface text-muted hover:text-red-400"
+              className="p-1 rounded-sm hover:bg-surface text-muted hover:text-danger"
             >
               <Trash2 className="w-3.5 h-3.5" />
             </button>
diff --git a/frontend/src/components/QueryState.tsx b/frontend/src/components/QueryState.tsx
index 374413e1..fa397957 100644
--- a/frontend/src/components/QueryState.tsx
+++ b/frontend/src/components/QueryState.tsx
@@ -44,7 +44,7 @@ export function StateMessage({
       aria-live={tone === "error" ? "assertive" : "polite"}
     >
       <span className="inline-flex items-center gap-2 text-center">
-        {tone === "error" && <AlertTriangle className="w-4 h-4 shrink-0 text-red-400" />}
+        {tone === "error" && <AlertTriangle className="w-4 h-4 shrink-0 text-danger" />}
         {children}
       </span>
       {onRetry && (
diff --git a/frontend/src/components/SavedViewsWidget.tsx b/frontend/src/components/SavedViewsWidget.tsx
index ec86b165..537bbb97 100644
--- a/frontend/src/components/SavedViewsWidget.tsx
+++ b/frontend/src/components/SavedViewsWidget.tsx
@@ -331,7 +331,7 @@ function ViewRow({
         <button
           onClick={onDelete}
           title={t("views.delete")}
-          className="p-1 rounded-sm text-muted opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-red-400 transition"
+          className="p-1 rounded-sm text-muted opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 hover:text-danger transition"
         >
           <Trash2 className="w-3.5 h-3.5" />
         </button>
diff --git a/frontend/src/components/Scheduler.tsx b/frontend/src/components/Scheduler.tsx
index cc9b387c..74acbecf 100644
--- a/frontend/src/components/Scheduler.tsx
+++ b/frontend/src/components/Scheduler.tsx
@@ -46,9 +46,9 @@ function fmtCountdown(s: number): string {
 
 const DOT_CLASS: Record<string, string> = {
   running: "bg-accent animate-pulse",
-  ok: "bg-emerald-500",
-  error: "bg-red-500",
-  skipped: "bg-amber-500",
+  ok: "bg-success",
+  error: "bg-danger",
+  skipped: "bg-warn",
   idle: "bg-border",
 };
 
@@ -178,7 +178,7 @@ function JobRow({
               <button
                 onClick={save}
                 disabled={saving}
-                className="text-emerald-400 hover:opacity-80 disabled:opacity-50"
+                className="text-success hover:opacity-80 disabled:opacity-50"
                 aria-label={t("common.save")}
               >
                 <Check className="w-3.5 h-3.5" />
@@ -210,7 +210,7 @@ function JobRow({
               ? t("scheduler.lastRun", { time: relativeTime(job.last_finished) })
               : t("scheduler.neverRun")}
           {job.last_error ? (
-            <span className="text-red-400"> · {job.last_error}</span>
+            <span className="text-danger"> · {job.last_error}</span>
           ) : job.last_result ? (
             <span> · {job.last_result}</span>
           ) : null}
@@ -448,7 +448,7 @@ export default function Scheduler() {
             <span className="inline-flex items-center gap-1">
               <span
                 className={`w-2 h-2 rounded-full ${
-                  data.paused ? "bg-amber-500" : data.running_here ? "bg-emerald-500" : "bg-border"
+                  data.paused ? "bg-warn" : data.running_here ? "bg-success" : "bg-border"
                 }`}
               />
               {data.paused
@@ -502,8 +502,8 @@ export default function Scheduler() {
       </div>
 
       {!data.running_here && (
-        <div className="flex items-center gap-2 text-sm bg-amber-500/15 border border-amber-500/30 rounded-xl px-3 py-2">
-          <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
+        <div className="flex items-center gap-2 text-sm bg-warn/15 border border-warn/30 rounded-xl px-3 py-2">
+          <AlertTriangle className="w-4 h-4 text-warn shrink-0" />
           <span className="text-muted">{t("scheduler.notHereNote")}</span>
         </div>
       )}
@@ -591,7 +591,7 @@ export default function Scheduler() {
           </div>
           <div className="mt-2 h-2 rounded-full bg-border overflow-hidden">
             <div
-              className={`h-full rounded-full ${quotaPct > 90 ? "bg-red-500" : "bg-accent"}`}
+              className={`h-full rounded-full ${quotaPct > 90 ? "bg-danger" : "bg-accent"}`}
               style={{ width: `${quotaPct}%` }}
             />
           </div>
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 94a97b40..694ff330 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -117,12 +117,12 @@ function SaveIndicator({ state }: { state: PrefsSaveState }) {
           {t("settings.save.saving")}
         </span>
       ) : state === "saved" ? (
-        <span className="inline-flex items-center gap-1.5 text-emerald-500">
+        <span className="inline-flex items-center gap-1.5 text-success">
           <Check className="w-4 h-4" />
           {t("settings.save.saved")}
         </span>
       ) : (
-        <span className="text-red-500">{t("settings.save.failed")}</span>
+        <span className="text-danger">{t("settings.save.failed")}</span>
       )}
     </div>
   );
@@ -480,7 +480,7 @@ function SignInMethods({ me }: { me: Me }) {
               autoComplete="new-password"
               className={inputCls}
             />
-            {err && <p className="text-xs text-red-400">{err}</p>}
+            {err && <p className="text-xs text-danger">{err}</p>}
             <button
               type="submit"
               disabled={busy || !next}
@@ -680,7 +680,7 @@ function Account({ me, onOpenWizard }: { me: Me; onOpenWizard: () => void }) {
           </p>
           <button
             onClick={onDeleteAccount}
-            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border border-red-500/40 text-red-400 hover:bg-red-500/10 transition"
+            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border border-danger/40 text-danger hover:bg-danger/10 transition"
           >
             <Trash2 className="w-4 h-4" />
             {t("settings.account.deleteAccount")}
diff --git a/frontend/src/components/SetupWizard.tsx b/frontend/src/components/SetupWizard.tsx
index cab9bd00..96ad5f73 100644
--- a/frontend/src/components/SetupWizard.tsx
+++ b/frontend/src/components/SetupWizard.tsx
@@ -253,10 +253,10 @@ export default function SetupWizard() {
                 </div>
               )}
               {testState === "ok" && (
-                <p className="text-xs text-emerald-500">{t("setup.smtp.testOk")}</p>
+                <p className="text-xs text-success">{t("setup.smtp.testOk")}</p>
               )}
               {testState === "fail" && (
-                <p className="text-xs text-red-400">{t("setup.smtp.testFail")}</p>
+                <p className="text-xs text-danger">{t("setup.smtp.testFail")}</p>
               )}
               <p className="text-xs text-muted">{t("setup.smtp.skipHint")}</p>
             </Section>
@@ -266,7 +266,7 @@ export default function SetupWizard() {
             <Section title={t("setup.finish.title")} desc={t("setup.finish.body")} />
           )}
 
-          {error && <p className="text-sm text-red-400 mt-3">{error}</p>}
+          {error && <p className="text-sm text-danger mt-3">{error}</p>}
 
           <div className="flex items-center justify-between mt-6">
             <button
diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx
index d4dd2f93..804ebc9d 100644
--- a/frontend/src/components/ShareDialog.tsx
+++ b/frontend/src/components/ShareDialog.tsx
@@ -142,7 +142,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
           title={t("downloads.share.copy")}
           className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg transition"
         >
-          {copied ? <Check className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
+          {copied ? <Check className="w-4 h-4 text-success" /> : <Copy className="w-4 h-4" />}
         </button>
         <button
           onClick={() => {
@@ -174,7 +174,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
               revoke.mutate();
           }}
           title={t("downloads.share.revoke")}
-          className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-red-400 transition"
+          className="p-1.5 rounded-md hover:bg-surface text-muted hover:text-danger transition"
         >
           <Trash2 className="w-4 h-4" />
         </button>
@@ -234,7 +234,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
                   savePass.mutate("");
               }}
               disabled={savePass.isPending}
-              className="px-2 py-1 rounded-md text-xs text-muted hover:text-red-400 transition"
+              className="px-2 py-1 rounded-md text-xs text-muted hover:text-danger transition"
             >
               {t("downloads.share.removePassword")}
             </button>
diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/components/SyncStatus.tsx
index 5e5095d5..c0f8cff1 100644
--- a/frontend/src/components/SyncStatus.tsx
+++ b/frontend/src/components/SyncStatus.tsx
@@ -83,7 +83,7 @@ export default function SyncStatus({
     </span>
   ) : (
     // A small check anchors the "all synced" state so it doesn't read as orphaned text.
-    <span className="flex items-center gap-1 text-emerald-500">
+    <span className="flex items-center gap-1 text-success">
       <CheckCircle2 className="w-3.5 h-3.5" />
       <span className="text-muted">{t("header.sync.allSynced")}</span>
     </span>
diff --git a/frontend/src/components/TagManager.tsx b/frontend/src/components/TagManager.tsx
index fbcafbf2..7ecb279f 100644
--- a/frontend/src/components/TagManager.tsx
+++ b/frontend/src/components/TagManager.tsx
@@ -68,7 +68,7 @@ function TagRow({
         onClick={onDelete}
         title={t("tagManager.delete")}
         aria-label={t("tagManager.delete")}
-        className="shrink-0 p-1.5 rounded-md text-muted hover:text-red-400 transition"
+        className="shrink-0 p-1.5 rounded-md text-muted hover:text-danger transition"
       >
         <Trash2 className="w-4 h-4" />
       </button>
diff --git a/frontend/src/components/Toaster.tsx b/frontend/src/components/Toaster.tsx
index b6bfc075..d87af574 100644
--- a/frontend/src/components/Toaster.tsx
+++ b/frontend/src/components/Toaster.tsx
@@ -5,10 +5,10 @@ import { dismiss, getActiveToasts, subscribe, type NotifLevel } from "../lib/not
 
 export const LEVEL_STYLE: Record<NotifLevel, { icon: typeof Info; color: string; bar: string }> = {
   info: { icon: Info, color: "text-accent", bar: "bg-accent" },
-  success: { icon: CheckCircle2, color: "text-emerald-400", bar: "bg-emerald-400" },
-  warning: { icon: AlertTriangle, color: "text-amber-400", bar: "bg-amber-400" },
-  error: { icon: AlertCircle, color: "text-red-400", bar: "bg-red-400" },
-  fatal: { icon: XCircle, color: "text-red-500", bar: "bg-red-500" },
+  success: { icon: CheckCircle2, color: "text-success", bar: "bg-success" },
+  warning: { icon: AlertTriangle, color: "text-warn", bar: "bg-warn" },
+  error: { icon: AlertCircle, color: "text-danger", bar: "bg-danger" },
+  fatal: { icon: XCircle, color: "text-danger", bar: "bg-danger" },
 };
 
 export default function Toaster() {
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index 2b4c7f3d..cf42caaf 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -156,7 +156,7 @@ function RowMetaCells({ video }: { video: Video }) {
   // "live" dot and a "stream" dot would be the same dot.
   const status =
     video.live_status === "live"
-      ? { Icon: Radio, cls: "text-red-500", label: t("card.live") }
+      ? { Icon: Radio, cls: "text-danger", label: t("card.live") }
       : video.live_status === "upcoming"
         ? { Icon: Clock, cls: "", label: t("card.upcoming") }
         : video.live_status === "was_live"
@@ -250,7 +250,7 @@ function Thumb({
       ) : video.live_status === "live" || video.live_status === "upcoming" ? (
         <span
           className={`absolute bottom-1.5 right-1.5 text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
-            video.live_status === "live" ? "bg-red-500/90 text-white" : "bg-black/80 text-white"
+            video.live_status === "live" ? "bg-danger/90 text-danger-fg" : "bg-black/80 text-white"
           }`}
         >
           {t(`card.${video.live_status}`)}
diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/components/VideoEditor.tsx
index d2a0ed57..52312de2 100644
--- a/frontend/src/components/VideoEditor.tsx
+++ b/frontend/src/components/VideoEditor.tsx
@@ -460,7 +460,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                     e.stopPropagation();
                     deleteBoundary(bi);
                   }}
-                  className="absolute top-0 -right-2 p-0.5 rounded-full bg-black/70 text-muted hover:text-red-400"
+                  className="absolute top-0 -right-2 p-0.5 rounded-full bg-black/70 text-muted hover:text-danger"
                   title={t("editor.removeCut")}
                 >
                   <X className="w-3 h-3" />
diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/components/WatchPage.tsx
index 48e6596b..13e51f58 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/components/WatchPage.tsx
@@ -192,7 +192,7 @@ export default function WatchPage() {
                 placeholder={T.passwordPlaceholder}
                 className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm outline-hidden focus:ring-2 focus:ring-accent/40"
               />
-              {error && <div className="text-sm text-red-400 mt-2">{error}</div>}
+              {error && <div className="text-sm text-danger mt-2">{error}</div>}
               <button
                 onClick={unlock}
                 disabled={!password || unlocking}
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 1ae4e230..166e3415 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -498,7 +498,7 @@ function AuthCard() {
                 className={inputCls}
               />
             )}
-            {error && <p className="text-xs text-red-400">{error}</p>}
+            {error && <p className="text-xs text-danger">{error}</p>}
             <button
               type="submit"
               disabled={busy}
@@ -593,7 +593,7 @@ function AuthCard() {
                       {demoBusy ? t("welcome.auth.working") : t("welcome.auth.demoEnter")}
                     </button>
                   </div>
-                  {demoError && <p className="text-xs text-red-400">{demoError}</p>}
+                  {demoError && <p className="text-xs text-danger">{demoError}</p>}
                 </form>
               )}
             </>
@@ -605,7 +605,7 @@ function AuthCard() {
 }
 
 function Banner({ tone, children }: { tone: "ok" | "warn"; children: React.ReactNode }) {
-  const cls = tone === "ok" ? "bg-accent/15 text-fg" : "bg-amber-500/15 text-fg";
+  const cls = tone === "ok" ? "bg-accent/15 text-fg" : "bg-warn/15 text-fg";
   return (
     <div className={`rounded-xl px-3 py-2 text-xs leading-relaxed mt-3 ${cls}`}>{children}</div>
   );
diff --git a/frontend/src/components/playlistColumns.tsx b/frontend/src/components/playlistColumns.tsx
index 1303f06b..b5b7d604 100644
--- a/frontend/src/components/playlistColumns.tsx
+++ b/frontend/src/components/playlistColumns.tsx
@@ -106,7 +106,7 @@ export function playlistColumns({
           <span
             className={`text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded ${
               v.live_status === "live"
-                ? "bg-red-500/90 text-white"
+                ? "bg-danger/90 text-danger-fg"
                 : "bg-card border border-border text-muted"
             }`}
           >
diff --git a/frontend/src/components/ui/DraftSaveBar.tsx b/frontend/src/components/ui/DraftSaveBar.tsx
index 47cfb8a5..9c15fd20 100644
--- a/frontend/src/components/ui/DraftSaveBar.tsx
+++ b/frontend/src/components/ui/DraftSaveBar.tsx
@@ -47,12 +47,12 @@ export function DraftSaveBar({
     <div data-testid="draft-save-bar" className={wrap}>
       <span data-testid="draft-save-status" data-state={state} className="text-sm text-muted">
         {state === "saved" ? (
-          <span className="text-emerald-500 inline-flex items-center gap-1.5">
+          <span className="text-success inline-flex items-center gap-1.5">
             <Check className="w-4 h-4" />
             {labels.saved}
           </span>
         ) : state === "error" ? (
-          <span className="text-red-500">{labels.failed}</span>
+          <span className="text-danger">{labels.failed}</span>
         ) : (
           labels.unsaved
         )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 35122b31..b836f451 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+/* Guarantee the full status fill-text set exists even before first use, so any
+   bg-{status} fill always has a readable text-{status}-fg partner available
+   (Tailwind v4 only emits a utility when it sees it used; success-fg has no fill
+   consumer today). Keeps the semantic token set complete + future-proof. */
+@source inline("text-danger-fg text-warn-fg text-success-fg");
+
 /* `inline` is load-bearing: the color vars (--bg/--accent/… below) are redefined at
    runtime per html[data-scheme]/[data-theme], so utilities must inline the value and
    resolve it at the USE site, not reference a once-computed --color-* token. This also
@@ -14,6 +20,12 @@
   --color-muted: var(--muted);
   --color-accent: var(--accent);
   --color-accent-fg: var(--accent-fg);
+  --color-danger: var(--danger);
+  --color-danger-fg: var(--danger-fg);
+  --color-warn: var(--warn);
+  --color-warn-fg: var(--warn-fg);
+  --color-success: var(--success);
+  --color-success-fg: var(--success-fg);
 
   --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 
@@ -657,6 +669,30 @@ html[data-scheme="matrix"][data-theme="light"] {
   --accent-fg: #ffffff;
 }
 
+/* ===== Semantic status colors (danger / warn / success) =====
+   Scheme-INDEPENDENT, theme-scoped: a status color is recognised by its conventional
+   hue (red=danger), so it stays constant across schemes and only shifts by theme to
+   hold contrast — bright on the near-black dark bg, darkened for ≥4.5:1 on the white
+   light bg. The scheme blocks above deliberately do NOT set these (lower specificity
+   here is fine — no scheme overrides them). Per-scheme override only if a real clash
+   surfaces. `-fg` is readable text ON a solid status fill. */
+html[data-theme="dark"] {
+  --danger: #f87171;
+  --danger-fg: #2a0a0a;
+  --warn: #fbbf24;
+  --warn-fg: #1f1400;
+  --success: #34d399;
+  --success-fg: #052016;
+}
+html[data-theme="light"] {
+  --danger: #dc2626;
+  --danger-fg: #ffffff;
+  --warn: #b45309;
+  --warn-fg: #ffffff;
+  --success: #047857;
+  --success-fg: #ffffff;
+}
+
 /* Toast auto-dismiss countdown bar (shrinks left-to-right to zero) */
 @keyframes toastbar {
   from {