diff --git a/src/app/admin/ads/page.tsx b/src/app/admin/ads/page.tsx
index 1e539d53..288c3063 100644
--- a/src/app/admin/ads/page.tsx
+++ b/src/app/admin/ads/page.tsx
@@ -61,10 +61,10 @@ export default async function AdminAds() {
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={ad.image} alt="" style={{ maxHeight: 40, maxWidth: 120 }} />
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     <code>{ad.image}</code>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {ad.createdAt ? ad.createdAt.toISOString().slice(0, 10) : "—"}
                   </td>
                   <td>
diff --git a/src/app/admin/alerts/page.tsx b/src/app/admin/alerts/page.tsx
index fa752948..3efc0bd1 100644
--- a/src/app/admin/alerts/page.tsx
+++ b/src/app/admin/alerts/page.tsx
@@ -96,7 +96,7 @@ export default async function AdminAlerts() {
 
       <form action={sendHotelAlert} className="admin-card mb-6">
         <h3 className="mt-0">{t("form.send")}</h3>
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs theme-text-muted dark:theme-text-muted">
           {t.rich("form.description", {
             code: (chunks) => <code>{chunks}</code>,
           })}
@@ -134,7 +134,7 @@ export default async function AdminAlerts() {
               <tbody>
                 {alerts.map((a) => (
                   <tr key={String(a.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fromDate(a.createdAt)}
                     </td>
                     <td>
diff --git a/src/app/admin/applications/page.tsx b/src/app/admin/applications/page.tsx
index 48e5142d..d071ddd3 100644
--- a/src/app/admin/applications/page.tsx
+++ b/src/app/admin/applications/page.tsx
@@ -89,7 +89,7 @@ export default async function AdminApplications() {
                       {t("rankLabel", { rank: a.rankId })}
                     </span>
                   </div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 m-0 mb-2">
+                  <p className="text-xs theme-text-muted dark:theme-text-muted m-0 mb-2">
                     {formatDate(a.createdAt)}
                   </p>
                   <p className="text-sm text-[var(--color-text)] whitespace-pre-wrap m-0 mb-3">{a.content}</p>
diff --git a/src/app/admin/articles/[id]/page.tsx b/src/app/admin/articles/[id]/page.tsx
index 2c6cca93..fc665a00 100644
--- a/src/app/admin/articles/[id]/page.tsx
+++ b/src/app/admin/articles/[id]/page.tsx
@@ -39,7 +39,7 @@ export default async function EditArticle({
           </p>
         </div>
       </div>
-      {error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
+      {error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
       <ArticleForm
         action={async (fd) => {
           "use server";
diff --git a/src/app/admin/articles/new/page.tsx b/src/app/admin/articles/new/page.tsx
index 5ed0495a..431ed381 100644
--- a/src/app/admin/articles/new/page.tsx
+++ b/src/app/admin/articles/new/page.tsx
@@ -21,7 +21,7 @@ export default async function NewArticle({ searchParams }: { searchParams: Promi
           </p>
         </div>
       </div>
-      {error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
+      {error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
       <ArticleForm action={createArticle} />
     </main>
   );
diff --git a/src/app/admin/articles/page.tsx b/src/app/admin/articles/page.tsx
index ccd541fd..ee680b0c 100644
--- a/src/app/admin/articles/page.tsx
+++ b/src/app/admin/articles/page.tsx
@@ -35,7 +35,7 @@ export default async function AdminArticles({ searchParams }: { searchParams: Pr
         </Link>
       </div>
 
-      {error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
+      {error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label={t("articlesShown")} value={articles.length} icon="📰" />
@@ -62,10 +62,10 @@ export default async function AdminArticles({ searchParams }: { searchParams: Pr
                   <td>
                     <Link href={`/admin/articles/${a.id}`}>{a.title}</Link>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     <code>{a.slug}</code>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {a.createdAt ? a.createdAt.toISOString().slice(0, 10) : "—"}
                   </td>
                   <td>
diff --git a/src/app/admin/badges/page.tsx b/src/app/admin/badges/page.tsx
index 6e1f0e38..c30c60fb 100644
--- a/src/app/admin/badges/page.tsx
+++ b/src/app/admin/badges/page.tsx
@@ -39,12 +39,12 @@ export default async function AdminBadges({
       </div>
 
       {uploaded && (
-        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
+        <div className="mb-4 p-3 rounded-lg bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)] text-xs">
           {t("uploadedMessage", { code: uploaded })}
         </div>
       )}
       {error && (
-        <div className="mb-4 p-3 rounded-lg bg-red-600/10 text-red-600 dark:text-red-400 text-xs">
+        <div className="mb-4 p-3 rounded-lg bg-[var(--color-error-subtle)] text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] text-xs">
           {t("errorMessage", { error })}
         </div>
       )}
@@ -121,7 +121,7 @@ export default async function AdminBadges({
                       <code>{b.badgeKey}</code>
                     </td>
                     <td>{b.badgeName}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400">{b.badgeDescription}</td>
+                    <td className="text-sm theme-text-muted dark:theme-text-muted">{b.badgeDescription}</td>
                     <td>
                       <form action={giveBadge} className="flex gap-2 items-center">
                         <input type="hidden" name="code" value={b.badgeKey} />
diff --git a/src/app/admin/bans/page.tsx b/src/app/admin/bans/page.tsx
index 9258d710..125f7dd4 100644
--- a/src/app/admin/bans/page.tsx
+++ b/src/app/admin/bans/page.tsx
@@ -104,11 +104,11 @@ export default async function AdminBans() {
                     <td>{b.banReason || "—"}</td>
                     <td>
                       {b.banExpire === 0 ? (
-                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-error-subtle)] text-[var(--color-text)]">
                           {t("permanent")}
                         </span>
                       ) : (
-                        <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        <span className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                           {fromUnix(b.banExpire)}
                         </span>
                       )}
diff --git a/src/app/admin/calendar/[id]/page.tsx b/src/app/admin/calendar/[id]/page.tsx
index eb8cfd61..b98aef70 100644
--- a/src/app/admin/calendar/[id]/page.tsx
+++ b/src/app/admin/calendar/[id]/page.tsx
@@ -90,7 +90,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
 
   return (
     <main>
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+      <p className="text-xs theme-text-muted dark:theme-text-muted mb-4">
         <Link href="/admin/calendar">← {t("title")}</Link>
       </p>
 
@@ -101,7 +101,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
         ) : null}
         <div>
           <h1 className="m-0 mb-1">{campaign.name || `#${campaign.id}`}</h1>
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">
             {t("detail.campaignMeta", {
               id: campaign.id,
               days: campaign.totalDays,
@@ -135,36 +135,36 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
               <tr key={r.id} className="border-t border-[var(--border-subtle)]">
                 <td>{r.id}</td>
                 <td>
-                  {r.productName || <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}
+                  {r.productName || <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>}
                 </td>
-                <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                   {r.itemId > 0 ? r.itemId : "—"}
                 </td>
                 <td>
                   {r.credits > 0 ? (
                     r.credits
                   ) : (
-                    <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
+                    <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
                   )}
                 </td>
                 <td>
                   {r.pixels > 0 ? (
                     r.pixels
                   ) : (
-                    <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
+                    <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
                   )}
                 </td>
                 <td>
                   {r.points > 0 ? (
                     `${r.points} (${t("detail.typeLabel", { type: r.pointsType })})`
                   ) : (
-                    <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
+                    <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
                   )}
                 </td>
-                <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                   {r.badge || "—"}
                 </td>
-                <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                   {r.subscriptionType ? `${r.subscriptionType} · ${r.subscriptionDays}d` : "—"}
                 </td>
               </tr>
@@ -173,7 +173,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
         </table>
       )}
 
-      <p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
+      <p className="text-xs theme-text-muted dark:theme-text-muted mt-4">
         {t("detail.rewardCount", { count: rewards.length })}
       </p>
     </main>
diff --git a/src/app/admin/calendar/page.tsx b/src/app/admin/calendar/page.tsx
index 6d680a85..33594a65 100644
--- a/src/app/admin/calendar/page.tsx
+++ b/src/app/admin/calendar/page.tsx
@@ -100,15 +100,15 @@ export default async function AdminCalendar() {
                   <div className="flex items-center justify-between gap-2 mb-1">
                     <h3 className="m-0">{c.name || `#${c.id}`}</h3>
                     <span
-                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                     >
                       {enabled ? t("statusEnabled") : t("statusDisabled")}
                     </span>
                   </div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 m-0">
+                  <p className="text-xs theme-text-muted dark:theme-text-muted m-0">
                     {t("campaignMeta", { id: c.id, days: c.totalDays, rewards: count })}
                   </p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  <p className="text-xs theme-text-muted dark:theme-text-muted mt-1">
                     {t("startsAt", { date: fmtDate(c.startTimestamp) })}
                     {c.lockExpired === "1" ? ` · ${t("locksExpired")}` : ""}
                   </p>
diff --git a/src/app/admin/catalog/[id]/catalog-detail-tabs.tsx b/src/app/admin/catalog/[id]/catalog-detail-tabs.tsx
index 438e95a0..861e16e2 100644
--- a/src/app/admin/catalog/[id]/catalog-detail-tabs.tsx
+++ b/src/app/admin/catalog/[id]/catalog-detail-tabs.tsx
@@ -82,7 +82,7 @@ export function CatalogDetailTabs({
             const furniSet = new Set(furniDataIdList)
             const missing = baseItems.filter((b) => !furniSet.has(b.id)).length
             return missing > 0 ? (
-              <span className="ml-1 rounded-full bg-orange-500 text-white text-[10px] px-1.5 py-0.5 leading-none font-medium">
+            <span className="ml-1 rounded-full bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] text-[10px] px-1.5 py-0.5 leading-none font-medium">
                 {missing}
               </span>
             ) : null
diff --git a/src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx b/src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx
index 1701b767..bcba1acb 100644
--- a/src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx
+++ b/src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx
@@ -943,7 +943,7 @@ export function CatalogItemsTable({
 
         {/* Unsaved changes banner */}
         {hasUnsavedChanges && (
-          <div className="flex items-center gap-2 rounded-md border border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-950/30 px-3 py-2 text-sm text-yellow-800 dark:text-yellow-200">
+          <div className="flex items-center gap-2 rounded-md border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-3 py-2 text-sm text-[var(--color-warning-text-readable)]">
             <span className="flex-1">
               You have unsaved changes (
               {modifiedItems.length > 0 ? `${modifiedItems.length} item(s) modified` : ''}
@@ -1051,7 +1051,7 @@ export function CatalogItemsTable({
                         <SortableRow
                           key={item.id}
                           id={item.id}
-                          className={cn(modified && 'bg-yellow-50 dark:bg-yellow-950/20')}
+                          className={cn(modified && 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]')}
                         >
                           {({ dragHandleProps }) => (
                             <>
@@ -1111,7 +1111,7 @@ export function CatalogItemsTable({
                                       className="h-8 text-xs w-16"
                                       title="Credits"
                                     />
-                                    <span className="text-xs text-yellow-600">c</span>
+                                    <span className="text-xs text-[var(--color-warning-text-readable)]">c</span>
                                     <Input
                                       type="number"
                                       value={edit?.costPoints ?? item.costPoints}
@@ -1132,7 +1132,7 @@ export function CatalogItemsTable({
                                 ) : (
                                   <div className="text-xs">
                                     {item.costCredits > 0 && (
-                                      <span className="text-yellow-600">{item.costCredits}c </span>
+                                      <span className="text-[var(--color-warning-text-readable)]">{item.costCredits}c </span>
                                     )}
                                     {item.costPoints > 0 && (
                                       <span className={pts.color}>
@@ -1191,7 +1191,7 @@ export function CatalogItemsTable({
                                         <Button
                                           variant="ghost"
                                           size="icon"
-                                          className="h-7 w-7 text-green-600"
+                                          className="h-7 w-7 text-[var(--color-success-text-readable)]"
                                           onClick={() => handleSaveOne(item)}
                                           disabled={isSaving || isPending}
                                           title="Save this item"
diff --git a/src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx b/src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx
index 468d0d5b..04a9e4da 100644
--- a/src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx
+++ b/src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx
@@ -213,7 +213,7 @@ export function MovePageCombobox({
                         value === page.id ? 'opacity-100' : 'opacity-0',
                       )}
                     />
-                    <Star className="mr-1.5 h-3 w-3 text-amber-500" />
+                    <Star className="mr-1.5 h-3 w-3 text-[var(--color-warning-text-readable)]" />
                     <span className="text-muted-foreground font-mono text-xs mr-1.5">
                       #{page.id}
                     </span>
diff --git a/src/app/admin/catalog/[id]/catalog-items-table/types.ts b/src/app/admin/catalog/[id]/catalog-items-table/types.ts
index 7ab0a003..34b2f8fc 100644
--- a/src/app/admin/catalog/[id]/catalog-items-table/types.ts
+++ b/src/app/admin/catalog/[id]/catalog-items-table/types.ts
@@ -55,12 +55,12 @@ export interface InlineEdit {
 }
 
 export const POINTS_TYPES: Record<number, { label: string; color: string }> = {
-  0: { label: 'Duckets', color: 'text-blue-500' },
+  0: { label: 'Duckets', color: 'text-[var(--color-info-text-readable)]' },
   5: { label: 'Diamonds', color: 'text-purple-500' },
-  101: { label: 'Snowflakes', color: 'text-cyan-400' },
+  101: { label: 'Snowflakes', color: 'text-[var(--color-info-text-readable)]' },
   103: { label: 'Hearts', color: 'text-pink-500' },
-  104: { label: 'Stars', color: 'text-amber-400' },
-  105: { label: 'Shells', color: 'text-orange-400' },
+  104: { label: 'Stars', color: 'text-[var(--color-warning-text-readable)]' },
+  105: { label: 'Shells', color: 'text-[var(--color-warning-text-readable)]' },
 }
 
 export const DEFAULT_NEW_ITEM = {
@@ -81,5 +81,5 @@ export const DEFAULT_NEW_ITEM = {
 }
 
 export function getPointsLabel(type: number) {
-  return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'text-gray-500' }
+  return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'theme-text-muted' }
 }
diff --git a/src/app/admin/catalog/[id]/catalog-translate-tab.tsx b/src/app/admin/catalog/[id]/catalog-translate-tab.tsx
index f019d3cb..f9267402 100644
--- a/src/app/admin/catalog/[id]/catalog-translate-tab.tsx
+++ b/src/app/admin/catalog/[id]/catalog-translate-tab.tsx
@@ -271,7 +271,7 @@ export function CatalogTranslateTab({
             </span>
           </div>
           {missingItems.length > 0 && (
-            <div className="flex items-center gap-1.5 mt-2 text-xs text-orange-600 dark:text-orange-400">
+            <div className="flex items-center gap-1.5 mt-2 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
               <AlertTriangle className="h-3.5 w-3.5" />
               <span>
                 {missingItems.length} item(s) missing from FurnitureData.json — will be
@@ -399,9 +399,9 @@ export function CatalogTranslateTab({
                         key={item.id}
                         className={
                           isChanged
-                            ? 'bg-yellow-50 dark:bg-yellow-950/20'
+                            ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]'
                             : isMissing
-                              ? 'bg-orange-50/50 dark:bg-orange-950/10'
+                              ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]'
                               : undefined
                         }
                       >
@@ -442,7 +442,7 @@ export function CatalogTranslateTab({
                             value={editedNames[item.id] || ''}
                             onChange={(e) => handleNameChange(item.id, e.target.value)}
                             disabled={!canEdit}
-                            className={`h-8 text-sm ${nameChanged ? 'border-yellow-400 dark:border-yellow-600' : ''}`}
+                            className={`h-8 text-sm ${nameChanged ? 'border-[var(--color-warning-border)] dark:border-[var(--color-warning-border)]' : ''}`}
                           />
                           {currentCatalogName && currentCatalogName !== item.publicName && (
                             <p className="text-[11px] text-muted-foreground mt-0.5 truncate">
@@ -456,7 +456,7 @@ export function CatalogTranslateTab({
                             onChange={(e) => handleDescChange(item.id, e.target.value)}
                             disabled={!canEdit}
                             placeholder="No description"
-                            className={`h-8 text-sm ${descChanged ? 'border-yellow-400 dark:border-yellow-600' : ''}`}
+                            className={`h-8 text-sm ${descChanged ? 'border-[var(--color-warning-border)] dark:border-[var(--color-warning-border)]' : ''}`}
                           />
                         </TableCell>
                         <TableCell>
@@ -464,7 +464,7 @@ export function CatalogTranslateTab({
                             {isChanged ? (
                               <Badge
                                 variant="secondary"
-                                className="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                  className="text-xs bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]"
                               >
                                 Modified
                               </Badge>
@@ -474,7 +474,7 @@ export function CatalogTranslateTab({
                             {isMissing ? (
                               <Tooltip>
                                 <TooltipTrigger asChild>
-                                  <AlertTriangle className="h-3.5 w-3.5 text-orange-500 flex-shrink-0" />
+                                  <AlertTriangle className="h-3.5 w-3.5 text-[var(--color-warning-text-readable)] flex-shrink-0" />
                                 </TooltipTrigger>
                                 <TooltipContent>
                                   <p>Missing from FurnitureData.json</p>
@@ -486,7 +486,7 @@ export function CatalogTranslateTab({
                             ) : (
                               <Tooltip>
                                 <TooltipTrigger asChild>
-                                  <CheckCircle2 className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                  <CheckCircle2 className="h-3.5 w-3.5 text-[var(--color-success-text-readable)] flex-shrink-0" />
                                 </TooltipTrigger>
                                 <TooltipContent>In FurnitureData.json</TooltipContent>
                               </Tooltip>
diff --git a/src/app/admin/catalog/builder-club/bc-manager.tsx b/src/app/admin/catalog/builder-club/bc-manager.tsx
index 928177f1..01ba741c 100644
--- a/src/app/admin/catalog/builder-club/bc-manager.tsx
+++ b/src/app/admin/catalog/builder-club/bc-manager.tsx
@@ -124,7 +124,7 @@ export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
         </Link>
         <span className="text-muted-foreground">/</span>
         <div className="flex items-center gap-2">
-          <HardHat className="h-5 w-5 text-amber-500" />
+          <HardHat className="h-5 w-5 text-[var(--color-warning-text-readable)]" />
           <h1 className="text-2xl font-bold tracking-tight">{page.caption}</h1>
           <Badge variant="outline" className="font-mono text-xs">
             #{page.id}
@@ -306,7 +306,7 @@ export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
                                   type="button"
                                   variant="ghost"
                                   size="sm"
-                                  className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
+                                  className="h-6 w-6 p-0 text-[var(--color-error-text-readable)] hover:text-[var(--color-error-text-readable)]"
                                   onClick={() => {
                                     if (!confirm(`Delete item "${item.catalogName}"?`)) return
                                     run(() => deleteBcItem({ id: item.id }), {
diff --git a/src/app/admin/commandocentrum/page.tsx b/src/app/admin/commandocentrum/page.tsx
index 8588ad2a..c65e4dc4 100644
--- a/src/app/admin/commandocentrum/page.tsx
+++ b/src/app/admin/commandocentrum/page.tsx
@@ -565,7 +565,7 @@ export default async function CommandoCentrum() {
               <tbody>
                 {activity.map((a) => (
                   <tr key={String(a.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fromDate(a.createdAt)}
                     </td>
                     <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
@@ -574,7 +574,7 @@ export default async function CommandoCentrum() {
                         {a.action}
                       </span>
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400">{a.description}</td>
+                    <td className="text-sm theme-text-muted dark:theme-text-muted">{a.description}</td>
                   </tr>
                 ))}
               </tbody>
@@ -608,15 +608,15 @@ export default async function CommandoCentrum() {
                     : t("empty");
                   return (
                     <tr key={e.id}>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {formatTimestamp(e.timestamp)}
                       </td>
                       <td>{e.type}</td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {e.version}
                       </td>
                       <td>
-                        <pre className="text-xs p-2 bg-gray-50 dark:bg-black/20 rounded overflow-auto max-h-[160px]">
+          <pre className="text-xs p-2 bg-[var(--color-background)] text-[var(--color-text-readable)] rounded overflow-auto max-h-[160px]">
                           {snippet}
                         </pre>
                       </td>
diff --git a/src/app/admin/email-templates/page.tsx b/src/app/admin/email-templates/page.tsx
index 3c7cc02b..b147be9f 100644
--- a/src/app/admin/email-templates/page.tsx
+++ b/src/app/admin/email-templates/page.tsx
@@ -50,7 +50,7 @@ export default async function AdminEmailTemplates() {
           <input name="variables" placeholder={t("form.variablesPlaceholder")} className="min-w-[200px]" />
           <label className="flex items-center gap-2">
             <input type="checkbox" name="isActive" defaultChecked className="w-auto" />
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.active")}</span>
           </label>
         </div>
         <textarea
@@ -94,7 +94,7 @@ export default async function AdminEmailTemplates() {
                       defaultChecked={template.isActive}
                       className="w-auto"
                     />
-                    <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
+                    <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.active")}</span>
                   </label>
                 </div>
                 <textarea
@@ -109,7 +109,7 @@ export default async function AdminEmailTemplates() {
                     {t("save")}
                   </button>
                   {template.updatedAt ? (
-                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                    <span className="text-xs theme-text-muted dark:theme-text-muted">
                       {t("updated", {
                         date: new Date(template.updatedAt).toISOString().slice(0, 16).replace("T", " "),
                       })}
diff --git a/src/app/admin/emulator/page.tsx b/src/app/admin/emulator/page.tsx
index ea364bbf..c749ba4b 100644
--- a/src/app/admin/emulator/page.tsx
+++ b/src/app/admin/emulator/page.tsx
@@ -38,7 +38,7 @@ export default async function AdminEmulator() {
   return (
     <main>
       <h1>{t("title")}</h1>
-      <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+      <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
         {t.rich("subtitle", {
           code: (chunks) => <code>{chunks}</code>,
         })}
@@ -51,7 +51,7 @@ export default async function AdminEmulator() {
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("settings")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+        <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
           {t("keysCount", { count: settings.length })}
         </p>
 
@@ -93,13 +93,13 @@ export default async function AdminEmulator() {
           </tbody>
         </table>
         {settings.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noSettings")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSettings")}</p>
         ) : null}
       </section>
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("texts")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+        <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
           {t("keysCount", { count: textsCount })}
           {textsTruncated ? ` (${t("showingFirst", { count: texts.length })})` : ""}.
         </p>
diff --git a/src/app/admin/favicon/favicon-form.tsx b/src/app/admin/favicon/favicon-form.tsx
index d6a89c42..73ae8b24 100644
--- a/src/app/admin/favicon/favicon-form.tsx
+++ b/src/app/admin/favicon/favicon-form.tsx
@@ -91,7 +91,7 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
               name="file"
               accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
               required
-              className="block w-full text-sm text-[var(--color-text)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-white hover:file:bg-[var(--color-primary-hover)] cursor-pointer"
+              className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
             />
             <p className="mt-1 text-xs text-[var(--color-text-muted)]">{t("uploadHint")}</p>
           </div>
@@ -112,8 +112,8 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
           <div
             className={`mt-4 p-3 rounded-lg text-sm ${
               message.type === "success"
-                ? "bg-green-500/10 text-green-600 dark:text-green-400"
-                : "bg-red-500/10 text-red-600 dark:text-red-400"
+                ? "bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
+                : "bg-[var(--color-error-subtle)] text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]"
             }`}
           >
             {message.text}
diff --git a/src/app/admin/help-questions/[id]/page.tsx b/src/app/admin/help-questions/[id]/page.tsx
index 897d49d8..f92fb616 100644
--- a/src/app/admin/help-questions/[id]/page.tsx
+++ b/src/app/admin/help-questions/[id]/page.tsx
@@ -39,7 +39,7 @@ export default async function EditHelpQuestion({
         </div>
       </div>
       {error ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400 mb-4" style={{ color: "#dc2626" }}>
+        <p className="text-xs theme-text-muted dark:theme-text-muted mb-4" style={{ color: "#dc2626" }}>
           Error: {error}
         </p>
       ) : null}
diff --git a/src/app/admin/help-questions/new/page.tsx b/src/app/admin/help-questions/new/page.tsx
index 51c0ac4c..188625dd 100644
--- a/src/app/admin/help-questions/new/page.tsx
+++ b/src/app/admin/help-questions/new/page.tsx
@@ -23,7 +23,7 @@ export default async function NewHelpQuestion({
         </div>
       </div>
       {error ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400 mb-4" style={{ color: "#dc2626" }}>
+        <p className="text-xs theme-text-muted dark:theme-text-muted mb-4" style={{ color: "#dc2626" }}>
           Error: {error}
         </p>
       ) : null}
diff --git a/src/app/admin/help-questions/page.tsx b/src/app/admin/help-questions/page.tsx
index 91edf1c2..5d2320a3 100644
--- a/src/app/admin/help-questions/page.tsx
+++ b/src/app/admin/help-questions/page.tsx
@@ -60,16 +60,16 @@ export default async function AdminHelpQuestions() {
             <tbody>
               {entries.map((e) => (
                 <tr key={String(e.id)}>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{e.position}</td>
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{e.position}</td>
                   <td>
                     <Link href={`/admin/help-questions/${e.id}`}>{e.name}</Link>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {e.buttonText || "—"}
                   </td>
                   <td>
                     <span
-                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                     >
                       {e.smallBox ? "Yes" : "No"}
                     </span>
diff --git a/src/app/admin/import/badges/import-badges-client.tsx b/src/app/admin/import/badges/import-badges-client.tsx
index 24c51eaa..092ede7e 100644
--- a/src/app/admin/import/badges/import-badges-client.tsx
+++ b/src/app/admin/import/badges/import-badges-client.tsx
@@ -202,8 +202,8 @@ export function ImportBadgesClient() {
               <span className="text-muted-foreground">results</span>
             </div>
             <div className="flex items-center gap-1.5 text-sm">
-              <CheckCircle2 className="h-4 w-4 text-emerald-500" />
-              <span className="font-medium text-emerald-600">{importedCount}</span>
+              <CheckCircle2 className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+              <span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
               <span className="text-muted-foreground">imported</span>
             </div>
             {importableBadges.length > 0 && (
@@ -419,7 +419,7 @@ export function ImportBadgesClient() {
                     <div className="pt-1">
                       {badge.alreadyImported ? (
                         <div className="flex items-center gap-1">
-                          <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                          <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
                             <Check className="w-2.5 h-2.5" />
                             Imported
                           </Badge>
diff --git a/src/app/admin/import/clone/import-clone-client.tsx b/src/app/admin/import/clone/import-clone-client.tsx
index 6fbe2c5e..e80a0c65 100644
--- a/src/app/admin/import/clone/import-clone-client.tsx
+++ b/src/app/admin/import/clone/import-clone-client.tsx
@@ -546,8 +546,8 @@ function FurniGrid({ source }: FurniGridProps) {
             <span className="text-muted-foreground">total</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-emerald-500" />
-            <span className="font-medium text-emerald-600">{stats.present}</span>
+            <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+            <span className="font-medium text-[var(--color-success-text-readable)]">{stats.present}</span>
             <span className="text-muted-foreground">present</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
@@ -766,7 +766,7 @@ function FurniGrid({ source }: FurniGridProps) {
                   </div>
                   <div className="pt-1">
                     {it.present ? (
-                      <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
+                      <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
                         <Check className="w-2.5 h-2.5" />
                         Present
                       </Badge>
diff --git a/src/app/admin/import/clothing/import-clothing-client.tsx b/src/app/admin/import/clothing/import-clothing-client.tsx
index e948bb32..6a1f1fb6 100644
--- a/src/app/admin/import/clothing/import-clothing-client.tsx
+++ b/src/app/admin/import/clothing/import-clothing-client.tsx
@@ -257,8 +257,8 @@ function LibsView() {
             <span className="text-muted-foreground">libraries</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-emerald-500" />
-            <span className="font-medium text-emerald-600">{importedCount}</span>
+            <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+            <span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
             <span className="text-muted-foreground">on this page</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
@@ -400,7 +400,7 @@ function LibsView() {
                   <div className="pt-1">
                     {p.nitroExists ? (
                       <div className="flex items-center gap-1">
-                        <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                        <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
                           <Check className="w-2.5 h-2.5" />
                           Imported
                         </Badge>
@@ -591,8 +591,8 @@ function SetsView() {
             <span className="text-muted-foreground">sets</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-emerald-500" />
-            <span className="font-medium text-emerald-600">{presentCount}</span>
+            <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+            <span className="font-medium text-[var(--color-success-text-readable)]">{presentCount}</span>
             <span className="text-muted-foreground">on this page</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
@@ -737,19 +737,19 @@ function SetsView() {
                       {it.gender}
                     </Badge>
                     {it.club > 0 && (
-                      <Badge className="text-[10px] px-1.5 py-0 bg-yellow-500/20 text-yellow-600 border-0">
+                      <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
                         HC
                       </Badge>
                     )}
                     {it.sellable && (
-                      <Badge className="text-[10px] px-1.5 py-0 bg-blue-500/15 text-blue-500 border-0">
+                      <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] border-0">
                         $
                       </Badge>
                     )}
                   </div>
                   <div className="pt-1">
                     {it.present ? (
-                      <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
+                      <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
                         <Check className="w-2.5 h-2.5" />
                         Imported
                       </Badge>
diff --git a/src/app/admin/import/effects/import-effects-client.tsx b/src/app/admin/import/effects/import-effects-client.tsx
index 134e4f1e..baea0539 100644
--- a/src/app/admin/import/effects/import-effects-client.tsx
+++ b/src/app/admin/import/effects/import-effects-client.tsx
@@ -185,8 +185,8 @@ export function ImportEffectsClient() {
             <span className="text-muted-foreground">effects</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-emerald-500" />
-            <span className="font-medium text-emerald-600">{importedCount}</span>
+            <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+            <span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
             <span className="text-muted-foreground">imported</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
@@ -337,7 +337,7 @@ export function ImportEffectsClient() {
                   )}
                 >
                   {e.type === 'dance' ? (
-                    <Music className="w-7 h-7 text-amber-500/80" />
+                    <Music className="w-7 h-7 text-[var(--color-warning-text-readable)]/80" />
                   ) : (
                     <Sparkles className="w-7 h-7 text-violet-500/80" />
                   )}
@@ -351,7 +351,7 @@ export function ImportEffectsClient() {
                   <div className="pt-1">
                     {imported ? (
                       <div className="flex items-center gap-1">
-                        <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                        <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
                           <Check className="w-2.5 h-2.5" />
                           Imported
                         </Badge>
diff --git a/src/app/admin/import/furni/import-furni-client.tsx b/src/app/admin/import/furni/import-furni-client.tsx
index 4904070f..f99e3e30 100644
--- a/src/app/admin/import/furni/import-furni-client.tsx
+++ b/src/app/admin/import/furni/import-furni-client.tsx
@@ -883,11 +883,11 @@ export function ImportFurniClient() {
             <div className="text-[10px] text-muted-foreground">on this page</div>
           </div>
           <div className="rounded-lg border bg-card p-3">
-            <div className="flex items-center gap-2 text-xs text-amber-500">
+            <div className="flex items-center gap-2 text-xs text-[var(--color-warning-text-readable)]">
               <FileWarning className="w-3.5 h-3.5" />
               Missing .nitro
             </div>
-            <div className="text-xl font-bold mt-1 text-amber-500">
+            <div className="text-xl font-bold mt-1 text-[var(--color-warning-text-readable)]">
               {stats.missingNitro.toLocaleString()}
             </div>
           </div>
@@ -913,12 +913,12 @@ export function ImportFurniClient() {
         <div className="rounded-lg border p-4 space-y-3 bg-card">
           <h3 className="text-sm font-semibold">Import Complete</h3>
           <div className="flex gap-4 text-sm">
-            <span className="text-emerald-500">{batchSummary.succeeded} succeeded</span>
+            <span className="text-[var(--color-success-text-readable)]">{batchSummary.succeeded} succeeded</span>
             {batchSummary.failed > 0 && (
               <span className="text-destructive">{batchSummary.failed} failed</span>
             )}
             {batchSummary.warnings > 0 && (
-              <span className="text-amber-500">{batchSummary.warnings} with warnings</span>
+              <span className="text-[var(--color-warning-text-readable)]">{batchSummary.warnings} with warnings</span>
             )}
             <span className="text-muted-foreground">
               {(batchSummary.duration / 1000).toFixed(1)}s
@@ -937,14 +937,14 @@ export function ImportFurniClient() {
                       {item.status === 'failed' ? (
                         <XCircle className="w-3 h-3 text-destructive mt-0.5 shrink-0" />
                       ) : (
-                        <AlertCircle className="w-3 h-3 text-amber-500 mt-0.5 shrink-0" />
+                        <AlertCircle className="w-3 h-3 text-[var(--color-warning-text-readable)] mt-0.5 shrink-0" />
                       )}
                       <div className="min-w-0">
                         <span className="font-mono">{item.classname}</span>
                         {item.message && <p className="text-destructive">{item.message}</p>}
                         {item.warnings?.map((w, i) => (
                           // biome-ignore lint/suspicious/noArrayIndexKey: warnings list is append-only and not reordered
-                          <p key={i} className="text-amber-500">
+                          <p key={i} className="text-[var(--color-warning-text-readable)]">
                             {w}
                           </p>
                         ))}
@@ -987,7 +987,7 @@ export function ImportFurniClient() {
               {progressStats.completed}/{progressStats.total} completed
             </span>
             {progressStats.done > 0 && (
-              <span className="text-emerald-500">{progressStats.done} OK</span>
+              <span className="text-[var(--color-success-text-readable)]">{progressStats.done} OK</span>
             )}
             {progressStats.failed > 0 && (
               <span className="text-destructive">{progressStats.failed} failed</span>
@@ -999,7 +999,7 @@ export function ImportFurniClient() {
                 key={item.classname}
                 className="flex items-center gap-2 text-xs py-1 px-2 rounded hover:bg-muted/50"
               >
-                {item.status === 'done' && <Check className="w-3 h-3 text-emerald-500 shrink-0" />}
+                {item.status === 'done' && <Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />}
                 {item.status === 'failed' && (
                   <XCircle className="w-3 h-3 text-destructive shrink-0" />
                 )}
@@ -1049,7 +1049,7 @@ export function ImportFurniClient() {
                 <span>
                   {completed}/{arr.length}
                 </span>
-                {done > 0 && <span className="text-emerald-500">{done} OK</span>}
+                {done > 0 && <span className="text-[var(--color-success-text-readable)]">{done} OK</span>}
                 {failed > 0 && <span className="text-destructive">{failed} failed</span>}
               </div>
             </div>
@@ -1062,7 +1062,7 @@ export function ImportFurniClient() {
           <h3 className="text-sm font-semibold">Regeneration Complete</h3>
           <div className="flex gap-4 text-sm">
             {regenSummary.succeeded > 0 && (
-              <span className="text-emerald-500">{regenSummary.succeeded} regenerated</span>
+              <span className="text-[var(--color-success-text-readable)]">{regenSummary.succeeded} regenerated</span>
             )}
             {regenSummary.failed > 0 && (
               <span className="text-destructive">{regenSummary.failed} failed</span>
@@ -1305,7 +1305,7 @@ export function ImportFurniClient() {
             size="sm"
             onClick={regenAllMissing}
             disabled={batchRegenerating || regeneratingNitro.size > 0}
-            className="h-8 text-amber-500 border-amber-500/30 hover:bg-amber-500/10"
+            className="h-8 text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] hover:bg-[var(--color-warning-subtle)]"
           >
             {batchRegenerating ? (
               <Loader2 className="w-4 h-4 mr-1 animate-spin" />
@@ -1428,11 +1428,11 @@ export function ImportFurniClient() {
                   <td className="px-2 py-1.5">
                     {item.alreadyImported ? (
                       item.nitroExists ? (
-                        <Badge className="text-[10px] bg-emerald-500/15 text-emerald-500 border-0">
+                        <Badge className="text-[10px] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0">
                           OK
                         </Badge>
                       ) : (
-                        <Badge className="text-[10px] bg-amber-500/15 text-amber-500 border-0">
+                        <Badge className="text-[10px] bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
                           No .nitro
                         </Badge>
                       )
@@ -1471,7 +1471,7 @@ export function ImportFurniClient() {
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="h-6 w-6 p-0 text-amber-500"
+                          className="h-6 w-6 p-0 text-[var(--color-warning-text-readable)]"
                           onClick={() => regenNitro(item)}
                           disabled={regeneratingNitro.has(item.classname)}
                         >
@@ -1576,12 +1576,12 @@ export function ImportFurniClient() {
                     {item.alreadyImported && (
                       <>
                         {item.nitroExists ? (
-                          <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-emerald-500/20 gap-0.5 shrink-0">
+                          <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] gap-0.5 shrink-0">
                             <Check className="w-2.5 h-2.5" />
                             Imported
                           </Badge>
                         ) : (
-                          <Badge className="text-[10px] px-1.5 py-0 bg-amber-500/15 text-amber-500 border-amber-500/20 gap-0.5 shrink-0">
+                          <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] gap-0.5 shrink-0">
                             <AlertCircle className="w-2.5 h-2.5" />
                             No .nitro
                           </Badge>
@@ -1603,7 +1603,7 @@ export function ImportFurniClient() {
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="h-5 w-5 p-0 shrink-0 text-amber-500"
+                            className="h-5 w-5 p-0 shrink-0 text-[var(--color-warning-text-readable)]"
                             title="Regenerate .nitro file"
                             disabled={regeneratingNitro.has(item.classname)}
                             onClick={(e) => {
@@ -1770,7 +1770,7 @@ export function ImportFurniClient() {
                 )}
                 {reorgPreview.repriced > 0 && (
                   <div className="rounded-lg border p-3 text-center">
-                    <p className="text-lg font-bold text-amber-500">{reorgPreview.repriced}</p>
+                    <p className="text-lg font-bold text-[var(--color-warning-text-readable)]">{reorgPreview.repriced}</p>
                     <p className="text-xs text-muted-foreground">Prices to update</p>
                   </div>
                 )}
diff --git a/src/app/admin/import/furni/nitro-editor-dialog.tsx b/src/app/admin/import/furni/nitro-editor-dialog.tsx
index fbc20457..0993c014 100644
--- a/src/app/admin/import/furni/nitro-editor-dialog.tsx
+++ b/src/app/admin/import/furni/nitro-editor-dialog.tsx
@@ -83,7 +83,7 @@ function CopyClassname({ value }: { value: string }) {
     >
       <span className="truncate">{value}</span>
       {copied ? (
-        <Check className="w-3 h-3 text-green-500 shrink-0" />
+        <Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />
       ) : (
         <Copy className="w-3 h-3 shrink-0" />
       )}
diff --git a/src/app/admin/import/pets/import-pets-client.tsx b/src/app/admin/import/pets/import-pets-client.tsx
index d06af032..9ee68aab 100644
--- a/src/app/admin/import/pets/import-pets-client.tsx
+++ b/src/app/admin/import/pets/import-pets-client.tsx
@@ -178,8 +178,8 @@ export function ImportPetsClient() {
             <span className="text-muted-foreground">pets</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
-            <Check className="h-4 w-4 text-emerald-500" />
-            <span className="font-medium text-emerald-600">{importedCount}</span>
+            <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
+            <span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
             <span className="text-muted-foreground">imported</span>
           </div>
           <div className="flex items-center gap-1.5 text-sm">
@@ -313,7 +313,7 @@ export function ImportPetsClient() {
                   <div className="pt-1">
                     {p.nitroExists ? (
                       <div className="flex items-center gap-1">
-                        <Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
+                        <Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
                           <Check className="w-2.5 h-2.5" />
                           Imported
                         </Badge>
diff --git a/src/app/admin/import/repair/repair-client.tsx b/src/app/admin/import/repair/repair-client.tsx
index 0b53c315..921340ff 100644
--- a/src/app/admin/import/repair/repair-client.tsx
+++ b/src/app/admin/import/repair/repair-client.tsx
@@ -435,7 +435,7 @@ export function RepairClient() {
       {/* Table area */}
       {summary && summary.items.length === 0 && (
         <div className="rounded-md border bg-muted/30 p-10 text-center">
-          <CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-emerald-500" />
+          <CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-[var(--color-success-text-readable)]" />
           <p className="font-medium">All imported items have their assets on disk.</p>
           <p className="text-sm text-muted-foreground">
             {summary.total} items scanned, nothing to repair.
@@ -615,7 +615,7 @@ function StatCard({
   const tones = {
     default: 'border-border',
     danger: 'border-destructive/40 bg-destructive/5',
-    warn: 'border-amber-500/40 bg-amber-500/5',
+    warn: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
     info: 'border-sky-500/40 bg-sky-500/5',
   }
   return (
@@ -631,7 +631,7 @@ function FileBadge({ present }: { present: boolean }) {
   return present ? (
     <Badge
       variant="secondary"
-      className="border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
+      className="border-[var(--color-success-border)] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
     >
       <CheckCircle2 className="mr-1 h-3 w-3" /> On disk
     </Badge>
@@ -659,7 +659,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
       progress.iconRepaired ? 'icon ✓' : null,
     ].filter(Boolean)
     return (
-      <span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
+      <span className="flex items-center gap-1 text-xs text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]">
         <CheckCircle2 className="h-3 w-3" />
         {parts.length > 0 ? parts.join(' · ') : 'Repaired'}
       </span>
@@ -668,7 +668,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
   if (progress.status === 'partial') {
     return (
       <span
-        className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400"
+        className="flex items-center gap-1 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]"
         title={progress.message}
       >
         <AlertCircle className="h-3 w-3" />
diff --git a/src/app/admin/ip/page.tsx b/src/app/admin/ip/page.tsx
index 09a3dc35..b9dc3f12 100644
--- a/src/app/admin/ip/page.tsx
+++ b/src/app/admin/ip/page.tsx
@@ -104,10 +104,10 @@ export default async function AdminIp() {
                   {whitelist.map((w) => (
                     <tr key={String(w.id)}>
                       <td>{w.ipAddress}</td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {w.asn ?? "—"}
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {formatDate(w.createdAt)}
                       </td>
                       <td>
@@ -162,10 +162,10 @@ export default async function AdminIp() {
                   {blacklist.map((b) => (
                     <tr key={String(b.id)}>
                       <td>{b.ipAddress}</td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {b.asn ?? "—"}
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {formatDate(b.createdAt)}
                       </td>
                       <td>
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index dd89223b..25e66a83 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -170,17 +170,17 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
   const navGroups = getNavGroups(t);
 
   return (
-    <aside className="sticky top-0 self-start h-screen bg-gradient-to-b from-[#1e1b2e] to-[#151226] text-[#c8cbe0] shadow-xl flex flex-col">
-      <div className="flex items-center gap-3 px-4 py-5 border-b border-white/[0.06]">
+    <aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
+      <div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--border-subtle)]">
         <span
-          className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[#1a1a2e] bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] shadow-lg shadow-[var(--color-primary)]/20"
+          className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/20"
           aria-hidden
         >
           {initial}
         </span>
         <div className="min-w-0 flex-1">
-          <div className="font-semibold text-sm text-white truncate">{staff.username}</div>
-          <span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[rgba(200,203,224,0.5)]">
+          <div className="font-semibold text-sm text-[var(--admin-sidebar-text-readable)] truncate">{staff.username}</div>
+          <span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[var(--admin-sidebar-muted-readable)]">
             {t("rankLabel", { rank: staff.rank })}
           </span>
         </div>
@@ -189,7 +189,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
       <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
         {navGroups.map((group) => (
           <div key={group.label}>
-            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[rgba(200,203,224,0.3)]">
+            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[var(--admin-sidebar-muted-readable)]">
               {group.icon}
               <span>{group.label}</span>
             </div>
@@ -204,10 +204,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
         ))}
       </nav>
 
-      <div className="px-3 py-3 border-t border-white/[0.06]">
+      <div className="px-3 py-3 border-t border-[var(--border-subtle)]">
         <Link
           href="/"
-          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
+          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 transition-all duration-150 no-underline"
         >
           <LogOut size={14} />
           <span>{t("backToSite")}</span>
@@ -233,7 +233,7 @@ async function Topbar({ staff }: { staff: { id: number; username: string; rank:
         <span className="text-xs text-[var(--color-text-muted)]">
           <strong className="text-[var(--color-text)]">{staff.username}</strong>
         </span>
-        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
+        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
           {t("rankLabel", { rank: staff.rank })}
         </span>
       </div>
diff --git a/src/app/admin/logs/page.tsx b/src/app/admin/logs/page.tsx
index 275bc481..7c5e4f99 100644
--- a/src/app/admin/logs/page.tsx
+++ b/src/app/admin/logs/page.tsx
@@ -140,10 +140,10 @@ export default async function AdminStaffActivities({
               <tbody>
                 {activities.map((a) => (
                   <tr key={String(a.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fromDate(a.createdAt)}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {t("staffWithId", {
                         id: Number(a.userId),
                         name: nameById.get(Number(a.userId)) ?? "unknown",
@@ -157,14 +157,14 @@ export default async function AdminStaffActivities({
                     <td>{a.description}</td>
                     <td>
                       {a.targetType && a.targetId ? (
-                        <span className="text-sm text-gray-500 dark:text-gray-400">
+                        <span className="text-sm theme-text-muted dark:theme-text-muted">
                           {a.targetType === "user" ? t("userPrefix") : ""}#{String(a.targetId)}
                         </span>
                       ) : (
-                        <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
+                        <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
                       )}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {a.ipAddress || "—"}
                     </td>
                   </tr>
@@ -175,7 +175,7 @@ export default async function AdminStaffActivities({
         )}
       </section>
 
-      <p className="text-xs text-gray-500 dark:text-gray-400">
+      <p className="text-xs theme-text-muted dark:theme-text-muted">
         {t("pagination", { page, pages, total })}
         {page < pages ? (
           <>
diff --git a/src/app/admin/maintenance/page.tsx b/src/app/admin/maintenance/page.tsx
index e4cbc497..ae774b3c 100644
--- a/src/app/admin/maintenance/page.tsx
+++ b/src/app/admin/maintenance/page.tsx
@@ -65,13 +65,13 @@ export default async function AdminMaintenance() {
         <h2 className="admin-section-title">{t("currentState")}</h2>
         <div className="admin-card flex items-center gap-3">
           <span
-            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
+            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
           >
             {enabled ? t("enabled") : t("disabled")}
           </span>
           <div>
             <strong>{t("maintenanceCurrently", { status: enabled ? t("enabled") : t("disabled") })}</strong>
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 m-0">
+            <p className="text-xs theme-text-muted dark:theme-text-muted mt-1 m-0">
               {enabled ? t("onlyRankCanLogin", { rank: minRankValue }) : t("hotelOpenToEveryone")}
             </p>
           </div>
@@ -94,7 +94,7 @@ export default async function AdminMaintenance() {
           </label>
 
           <div className="mb-4 max-w-[220px]">
-            <label htmlFor="mt-min-rank" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
+            <label htmlFor="mt-min-rank" className="text-sm theme-text-muted dark:theme-text-muted block mb-1">
               {t("minLoginRankLabel")}
             </label>
             <input
@@ -109,7 +109,7 @@ export default async function AdminMaintenance() {
           </div>
 
           <div className="mb-4">
-            <label htmlFor="mt-message" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
+            <label htmlFor="mt-message" className="text-sm theme-text-muted dark:theme-text-muted block mb-1">
               {t("maintenanceMessageLabel")}
             </label>
             <textarea
diff --git a/src/app/admin/media/page.tsx b/src/app/admin/media/page.tsx
index 0953b500..90c2d149 100644
--- a/src/app/admin/media/page.tsx
+++ b/src/app/admin/media/page.tsx
@@ -18,7 +18,7 @@ export default async function AdminMediaPage() {
         </div>
         <Link
           href="/admin/articles"
-          className="text-sm text-gray-500 dark:text-gray-400"
+          className="text-sm theme-text-muted dark:theme-text-muted"
           style={{ fontSize: "0.88rem" }}
         >
           ← {t("articles")}
diff --git a/src/app/admin/navigation/page.tsx b/src/app/admin/navigation/page.tsx
index 3252079f..fdb98b24 100644
--- a/src/app/admin/navigation/page.tsx
+++ b/src/app/admin/navigation/page.tsx
@@ -32,7 +32,7 @@ type PublicRow = {
 function YesNo({ on }: { on: boolean }) {
   return (
     <span
-      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
     >
       {on ? "Yes" : "No"}
     </span>
@@ -134,7 +134,7 @@ export default async function AdminNavigation() {
       {/* ── navigator_flatcats ───────────────────────────────── */}
       <section className="mt-6">
         <h2 className="admin-section-title">{t("flatCategories")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs theme-text-muted dark:theme-text-muted">
           <code>navigator_flatcats</code> · {flatcats.length} {t("rows")}
         </p>
         {flatcats.length === 0 ? (
@@ -158,9 +158,9 @@ export default async function AdminNavigation() {
               <tbody>
                 {flatcats.map((c) => (
                   <tr key={c.id}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{c.id}</td>
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{c.id}</td>
                     <td>{c.caption || "—"}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {c.captionSave || "—"}
                     </td>
                     <td>{c.minRank}</td>
@@ -184,7 +184,7 @@ export default async function AdminNavigation() {
       {/* ── navigator_publics ────────────────────────────────── */}
       <section className="mt-6">
         <h2 className="admin-section-title">{t("publicRooms")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs theme-text-muted dark:theme-text-muted">
           <code>navigator_publics</code> · {publics.length} {t("rows")}
         </p>
         {publics.length === 0 ? (
@@ -204,11 +204,11 @@ export default async function AdminNavigation() {
                   <tr key={`${p.public_cat_id}-${p.room_id}-${i}`}>
                     <td>
                       {catNameById.get(p.public_cat_id) ?? "—"}{" "}
-                      <span className="text-sm text-gray-500 dark:text-gray-400">#{p.public_cat_id}</span>
+                      <span className="text-sm theme-text-muted dark:theme-text-muted">#{p.public_cat_id}</span>
                     </td>
                     <td>
                       {roomNameById.get(p.room_id) || t("unnamed")}{" "}
-                      <span className="text-sm text-gray-500 dark:text-gray-400">#{p.room_id}</span>
+                      <span className="text-sm theme-text-muted dark:theme-text-muted">#{p.room_id}</span>
                     </td>
                     <td>
                       <YesNo on={p.visible === "1"} />
diff --git a/src/app/admin/permissions/[id]/rank-edit-client.tsx b/src/app/admin/permissions/[id]/rank-edit-client.tsx
index 3ac0aeed..4064b570 100644
--- a/src/app/admin/permissions/[id]/rank-edit-client.tsx
+++ b/src/app/admin/permissions/[id]/rank-edit-client.tsx
@@ -110,10 +110,10 @@ function PermToggle({
             'w-7 h-6 text-[11px] font-mono rounded transition-all font-medium',
             v === value
               ? v === '0'
-                ? 'bg-zinc-500 text-white shadow-sm'
+            ? 'bg-[var(--color-text-muted)] text-[var(--color-surface-text-readable)] shadow-sm'
                 : v === '1'
-                  ? 'bg-emerald-500 text-white shadow-sm'
-                  : 'bg-amber-500 text-white shadow-sm'
+              ? 'bg-[var(--color-success)] text-[var(--color-success-foreground-readable)] shadow-sm'
+              : 'bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] shadow-sm'
               : 'bg-muted/60 text-muted-foreground/40 hover:bg-muted hover:text-muted-foreground',
           )}
         >
@@ -291,7 +291,7 @@ export function RankEditClient({
                 key={key}
                 className={cn(
                   'flex items-center justify-between px-3 py-2 bg-card',
-                  (perms[key] ?? '0') !== '0' && 'bg-emerald-500/5',
+                  (perms[key] ?? '0') !== '0' && 'bg-[var(--color-success-subtle)]',
                 )}
               >
                 <span className="font-mono text-xs truncate mr-3">{key}</span>
@@ -326,9 +326,9 @@ export function RankEditClient({
           </Button>
         </Link>
         {initialRank.id >= 7 ? (
-          <Crown className="h-6 w-6 text-yellow-500" />
+          <Crown className="h-6 w-6 text-[var(--color-warning-text-readable)]" />
         ) : initialRank.id >= 5 ? (
-          <ShieldCheck className="h-6 w-6 text-blue-500" />
+          <ShieldCheck className="h-6 w-6 text-[var(--color-info-text-readable)]" />
         ) : (
           <Shield className="h-6 w-6 text-muted-foreground" />
         )}
@@ -548,10 +548,10 @@ export function RankEditClient({
                   <span className="w-3 h-3 rounded bg-zinc-500 inline-block" /> Off
                 </span>
                 <span className="flex items-center gap-1">
-                  <span className="w-3 h-3 rounded bg-emerald-500 inline-block" /> On
+                  <span className="w-3 h-3 rounded bg-[var(--color-success-subtle)] inline-block" /> On
                 </span>
                 <span className="flex items-center gap-1">
-                  <span className="w-3 h-3 rounded bg-amber-500 inline-block" /> Owner
+                  <span className="w-3 h-3 rounded bg-[var(--color-warning-subtle)] inline-block" /> Owner
                 </span>
               </div>
             </div>
@@ -660,7 +660,7 @@ export function RankEditClient({
                       key={perm.id}
                       className={cn(
                         'flex items-center gap-3 rounded-lg border px-4 py-3 transition-all',
-                        on ? 'border-emerald-500/40 bg-emerald-500/5' : 'hover:bg-muted/50',
+                        on ? 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]' : 'hover:bg-muted/50',
                       )}
                     >
                       <Checkbox checked={on} onCheckedChange={() => toggleCms(perm.slug)} />
@@ -671,7 +671,7 @@ export function RankEditClient({
                         )}
                       </div>
                       {on && (
-                        <Badge className="bg-emerald-500/15 text-emerald-600 border-emerald-500/30 text-[10px]">
+                        <Badge className="bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] text-[10px]">
                           Active
                         </Badge>
                       )}
diff --git a/src/app/admin/permissions/permissions-list.tsx b/src/app/admin/permissions/permissions-list.tsx
index 22df062b..d883d11c 100644
--- a/src/app/admin/permissions/permissions-list.tsx
+++ b/src/app/admin/permissions/permissions-list.tsx
@@ -45,17 +45,17 @@ interface Props {
 }
 
 const RANK_ICONS: Record<number, React.ReactNode> = {
-  7: <Crown className="h-4 w-4 text-yellow-500" />,
-  6: <ShieldCheck className="h-4 w-4 text-red-500" />,
-  5: <Shield className="h-4 w-4 text-blue-500" />,
-  4: <UserCheck className="h-4 w-4 text-green-500" />,
+  7: <Crown className="h-4 w-4 text-[var(--color-warning-text-readable)]" />,
+  6: <ShieldCheck className="h-4 w-4 text-[var(--color-error-text-readable)]" />,
+  5: <Shield className="h-4 w-4 text-[var(--color-info-text-readable)]" />,
+  4: <UserCheck className="h-4 w-4 text-[var(--color-success-text-readable)]" />,
 }
 
 const RANK_COLORS: Record<number, string> = {
-  7: 'border-yellow-500/50 bg-yellow-500/5',
-  6: 'border-red-500/30 bg-red-500/5',
-  5: 'border-blue-500/30 bg-blue-500/5',
-  4: 'border-green-500/30 bg-green-500/5',
+  7: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
+  6: 'border-[var(--color-error-border)] bg-[var(--color-error-subtle)]',
+  5: 'border-[var(--color-info-border)] bg-[var(--color-info-subtle)]',
+  4: 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]',
 }
 
 export function PermissionsList({ ranks: initialRanks }: Props) {
diff --git a/src/app/admin/photos/page.tsx b/src/app/admin/photos/page.tsx
index a46ca30c..6d3706b3 100644
--- a/src/app/admin/photos/page.tsx
+++ b/src/app/admin/photos/page.tsx
@@ -69,11 +69,11 @@ export default async function AdminPhotos() {
                     }}
                   >
                     <strong>#{String(p.id)}</strong>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">
+                    <span className="text-sm theme-text-muted dark:theme-text-muted">
                       {t("colRoom")} {p.roomId}
                     </span>
                   </div>
-                  <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.3rem 0 0" }}>
+                  <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.3rem 0 0" }}>
                     {t("colUser")} {p.userId} ·{" "}
                     {new Date(p.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")}
                   </p>
diff --git a/src/app/admin/radio/api-keys/page.tsx b/src/app/admin/radio/api-keys/page.tsx
index c155fba7..3359443b 100644
--- a/src/app/admin/radio/api-keys/page.tsx
+++ b/src/app/admin/radio/api-keys/page.tsx
@@ -67,7 +67,7 @@ export default async function AdminRadioApiKeysPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/api-keys">{t("apiKeys")}</Link> ·{" "}
@@ -90,7 +90,7 @@ export default async function AdminRadioApiKeysPage() {
 
         {dbError ? (
           <div className="admin-card" style={{ marginTop: "1rem" }}>
-            <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("apiKeysForm.dbError")}</p>
+            <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("apiKeysForm.dbError")}</p>
           </div>
         ) : (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -113,7 +113,7 @@ export default async function AdminRadioApiKeysPage() {
 
       <section className="mt-6">
         <h2>{t("apiKeysForm.generateKey")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">{t("apiKeysForm.generateHint")}</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">{t("apiKeysForm.generateHint")}</p>
         <form action={createApiKey} className="admin-card">
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div>
@@ -186,28 +186,28 @@ export default async function AdminRadioApiKeysPage() {
               <tbody>
                 {keys.map((k) => (
                   <tr key={String(k.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {String(k.id)}
                     </td>
                     <td>{k.name}</td>
                     <td>
                       <code title={t("apiKeysForm.maskedHint")}>{maskKey(k.key)}</code>
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {k.allowedIps || t("apiKeysForm.any")}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {k.rateLimit}/min
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {formatDate(k.lastUsedAt)}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {formatDate(k.expiresAt)}
                     </td>
                     <td>
                       <span
-                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                       >
                         {k.isActive ? t("apiKeysForm.activeLabel") : t("apiKeysForm.inactiveLabel")}
                       </span>
diff --git a/src/app/admin/radio/autodj/page.tsx b/src/app/admin/radio/autodj/page.tsx
index ce7c41a4..93064674 100644
--- a/src/app/admin/radio/autodj/page.tsx
+++ b/src/app/admin/radio/autodj/page.tsx
@@ -71,7 +71,7 @@ export default async function AdminRadioAutoDjPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -93,7 +93,7 @@ export default async function AdminRadioAutoDjPage() {
 
         {dbError ? (
           <div className="admin-card mb-6">
-            <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("autoDjForm.dbError")}</p>
+            <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("autoDjForm.dbError")}</p>
           </div>
         ) : (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -215,7 +215,7 @@ export default async function AdminRadioAutoDjPage() {
               <tbody>
                 {tracks.map((track) => (
                   <tr key={String(track.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {track.sortOrder}
                     </td>
                     <td>
@@ -233,24 +233,24 @@ export default async function AdminRadioAutoDjPage() {
                         <strong>{track.title}</strong>
                       </span>
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {track.artist ?? "\u2014"}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {track.album ?? "\u2014"}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {formatDuration(track.duration)}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {track.playCount}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {formatDate(track.lastPlayedAt)}
                     </td>
                     <td>
                       <span
-                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                       >
                         {track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
                       </span>
diff --git a/src/app/admin/radio/banners/page.tsx b/src/app/admin/radio/banners/page.tsx
index 570e4fa4..9763f05e 100644
--- a/src/app/admin/radio/banners/page.tsx
+++ b/src/app/admin/radio/banners/page.tsx
@@ -53,7 +53,7 @@ export default async function AdminRadioBannersPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -73,7 +73,7 @@ export default async function AdminRadioBannersPage() {
 
       {dbError ? (
         <div className="admin-card mb-6">
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("banners.dbError")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("banners.dbError")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -157,10 +157,10 @@ export default async function AdminRadioBannersPage() {
               <div key={String(b.id)} className="admin-card">
                 <div className="flex justify-between items-baseline gap-3">
                   <strong>#{String(b.id)}</strong>
-                  <span className="text-sm text-gray-500 dark:text-gray-400 inline-flex gap-2 items-center">
+                  <span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
                     {t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{" "}
                     <span
-                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                     >
                       {b.isActive ? t("banners.active") : t("banners.hidden")}
                     </span>
diff --git a/src/app/admin/radio/embed/embed-snippet.tsx b/src/app/admin/radio/embed/embed-snippet.tsx
index 8a20a191..a5c57102 100644
--- a/src/app/admin/radio/embed/embed-snippet.tsx
+++ b/src/app/admin/radio/embed/embed-snippet.tsx
@@ -44,7 +44,7 @@ export function EmbedSnippet({
           {copied ? "Copied!" : "Copy"}
         </button>
       </div>
-      {description ? <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">{description}</p> : null}
+      {description ? <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">{description}</p> : null}
       <textarea
         id={id}
         readOnly
diff --git a/src/app/admin/radio/embed/page.tsx b/src/app/admin/radio/embed/page.tsx
index 69da6164..d2d93a20 100644
--- a/src/app/admin/radio/embed/page.tsx
+++ b/src/app/admin/radio/embed/page.tsx
@@ -43,7 +43,7 @@ export default async function AdminRadioEmbedPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
@@ -83,7 +83,7 @@ export default async function AdminRadioEmbedPage() {
       {!hasStream ? (
         <section className="mt-6">
           <h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400">{t("embedPage.noStreamUrlText")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.noStreamUrlText")}</p>
           <p>
             <Link href="/admin/radio/settings" className="btn btn-primary">
               {t("embedPage.goToSettings")}
@@ -94,14 +94,14 @@ export default async function AdminRadioEmbedPage() {
         <>
           <section className="mt-6">
             <h2 className="admin-section-title">{t("embedPage.livePreview")}</h2>
-            <p className="text-xs text-gray-500 dark:text-gray-400">{t("embedPage.livePreviewText")}</p>
+            <p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.livePreviewText")}</p>
             <div className="admin-card">
               {}
               <audio controls preload="none" src={streamUrl} style={{ width: "100%" }}>
                 {t("embedPage.audioUnsupported")}
               </audio>
               <p
-                className="text-xs text-gray-500 dark:text-gray-400"
+                className="text-xs theme-text-muted dark:theme-text-muted"
                 style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
               >
                 {t("embedPage.source")}: <code>{streamUrl}</code>
diff --git a/src/app/admin/radio/history/page.tsx b/src/app/admin/radio/history/page.tsx
index 3a4d644f..2c055b82 100644
--- a/src/app/admin/radio/history/page.tsx
+++ b/src/app/admin/radio/history/page.tsx
@@ -73,7 +73,7 @@ export default async function AdminRadioHistoryPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -93,7 +93,7 @@ export default async function AdminRadioHistoryPage() {
 
       {dbError ? (
         <div className="admin-card mb-6">
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("historyPage.dbError")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("historyPage.dbError")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -133,25 +133,25 @@ export default async function AdminRadioHistoryPage() {
                   <td>{String(h.id)}</td>
                   <td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
                   <td>{h.showName ?? "\u2014"}</td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {formatDate(h.startedAt)}
                   </td>
                   <td>
                     {h.endedAt ? (
-                      <span className="text-sm text-gray-500 dark:text-gray-400">
+                      <span className="text-sm theme-text-muted dark:theme-text-muted">
                         {formatDate(h.endedAt)}
                       </span>
                     ) : (
-                      <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+                      <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
                         {t("historyPage.onAir")}
                       </span>
                     )}
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {formatDuration(h.startedAt, h.endedAt)}
                   </td>
                   <td>{h.listenersCount}</td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {h.notes ?? "\u2014"}
                   </td>
                 </tr>
diff --git a/src/app/admin/radio/moderation/page.tsx b/src/app/admin/radio/moderation/page.tsx
index c36262da..72fddbea 100644
--- a/src/app/admin/radio/moderation/page.tsx
+++ b/src/app/admin/radio/moderation/page.tsx
@@ -41,7 +41,7 @@ export default async function AdminRadioModerationPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
@@ -85,7 +85,7 @@ export default async function AdminRadioModerationPage() {
                   <td>{String(s.id)}</td>
                   <td>{String(s.userId)}</td>
                   <td>{s.message}</td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {formatDate(s.createdAt)}
                   </td>
                   <td>
diff --git a/src/app/admin/radio/monitoring/page.tsx b/src/app/admin/radio/monitoring/page.tsx
index 6a8cfe1d..80a35d63 100644
--- a/src/app/admin/radio/monitoring/page.tsx
+++ b/src/app/admin/radio/monitoring/page.tsx
@@ -194,7 +194,7 @@ export default async function AdminRadioMonitoringPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{" "}
@@ -249,7 +249,7 @@ export default async function AdminRadioMonitoringPage() {
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("monitoring.endpointDiagnostics")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">{t("monitoring.diagnosticsLegend")}</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">{t("monitoring.diagnosticsLegend")}</p>
         <div className="flex flex-col">
           {endpoints.map((ep) => {
             let state: "ok" | "warn" | "danger";
diff --git a/src/app/admin/radio/page.tsx b/src/app/admin/radio/page.tsx
index 0053f039..a8143616 100644
--- a/src/app/admin/radio/page.tsx
+++ b/src/app/admin/radio/page.tsx
@@ -108,7 +108,7 @@ export default async function AdminRadioPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -117,7 +117,7 @@ export default async function AdminRadioPage() {
       </nav>
 
       <h1>{t("title")}</h1>
-      <p className="text-xs text-gray-500 dark:text-gray-400">{t("subtitle")}</p>
+      <p className="text-xs theme-text-muted dark:theme-text-muted">{t("subtitle")}</p>
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
         <StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
@@ -141,7 +141,7 @@ export default async function AdminRadioPage() {
           {t("shouts")} ({shouts.length})
         </h2>
         {shouts.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noShouts")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("noShouts")}</p>
         ) : (
           <table>
             <thead>
@@ -156,12 +156,12 @@ export default async function AdminRadioPage() {
             <tbody>
               {shouts.map((s) => (
                 <tr key={String(s.id)}>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {String(s.id)}
                   </td>
                   <td>{String(s.userId)}</td>
                   <td>{s.message}</td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(s.createdAt)}</td>
+                  <td className="text-sm theme-text-muted dark:theme-text-muted">{formatDate(s.createdAt)}</td>
                   <td>
                     <form action={deleteShout}>
                       <input type="hidden" name="id" value={String(s.id)} />
@@ -182,7 +182,7 @@ export default async function AdminRadioPage() {
           {t("applications")} ({applications.length})
         </h2>
         {applications.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noApplications")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("noApplications")}</p>
         ) : (
           <table>
             <thead>
@@ -208,12 +208,12 @@ export default async function AdminRadioPage() {
                   <td>{a.discordUsername ?? "\u2014"}</td>
                   <td>
                     <span
-                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                     >
                       {a.status}
                     </span>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(a.createdAt)}</td>
+                  <td className="text-sm theme-text-muted dark:theme-text-muted">{formatDate(a.createdAt)}</td>
                 </tr>
               ))}
             </tbody>
@@ -226,7 +226,7 @@ export default async function AdminRadioPage() {
           {t("schedules")} ({schedules.length})
         </h2>
         {schedules.length === 0 ? (
-          <p className="text-xs text-gray-500 dark:text-gray-400">{t("noSchedules")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSchedules")}</p>
         ) : (
           <table>
             <thead>
@@ -251,7 +251,7 @@ export default async function AdminRadioPage() {
                   <td>{sc.showName ?? "\u2014"}</td>
                   <td>
                     <span
-                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                      className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                     >
                       {sc.isActive ? t("active") : t("inactive")}
                     </span>
diff --git a/src/app/admin/radio/points/page.tsx b/src/app/admin/radio/points/page.tsx
index e287e6a4..c006614c 100644
--- a/src/app/admin/radio/points/page.tsx
+++ b/src/app/admin/radio/points/page.tsx
@@ -57,7 +57,7 @@ export default async function AdminRadioPointsPage({
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
@@ -79,7 +79,7 @@ export default async function AdminRadioPointsPage({
 
         {saved === "1" ? (
           <p>
-            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+            <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
               {t("pointsForm.saved")}
             </span>
           </p>
@@ -124,7 +124,7 @@ export default async function AdminRadioPointsPage({
                 <option value="1">{t("pointsForm.enabled")}</option>
                 <option value="0">{t("pointsForm.disabled")}</option>
               </select>
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("pointsForm.pointsEnabledHint")}
               </p>
             </div>
@@ -145,7 +145,7 @@ export default async function AdminRadioPointsPage({
                   </option>
                 ))}
               </select>
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("pointsForm.currencyHint")}
               </p>
             </div>
@@ -163,7 +163,7 @@ export default async function AdminRadioPointsPage({
                 defaultValue={perMinute}
                 style={{ width: "100%" }}
               />
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("pointsForm.pointsPerMinuteHint")}
               </p>
             </div>
@@ -181,7 +181,7 @@ export default async function AdminRadioPointsPage({
                 defaultValue={maxPerDay}
                 style={{ width: "100%" }}
               />
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("pointsForm.maxPerDayHint")}
               </p>
             </div>
@@ -199,7 +199,7 @@ export default async function AdminRadioPointsPage({
                 defaultValue={minListeners}
                 style={{ width: "100%" }}
               />
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("pointsForm.minListenersHint")}
               </p>
             </div>
diff --git a/src/app/admin/radio/ranks/page.tsx b/src/app/admin/radio/ranks/page.tsx
index 1f085314..0bc58e90 100644
--- a/src/app/admin/radio/ranks/page.tsx
+++ b/src/app/admin/radio/ranks/page.tsx
@@ -41,7 +41,7 @@ export default async function AdminRadioRanksPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -61,7 +61,7 @@ export default async function AdminRadioRanksPage() {
 
       {dbError ? (
         <div className="admin-card mb-6">
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("ranksForm.dbError")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("ranksForm.dbError")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -122,7 +122,7 @@ export default async function AdminRadioRanksPage() {
                 <div className="flex justify-between items-baseline gap-3 mb-2">
                   <strong>#{String(r.id)}</strong>
                   <span
-                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                   >
                     {r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
                   </span>
diff --git a/src/app/admin/radio/settings/page.tsx b/src/app/admin/radio/settings/page.tsx
index 468bdec8..4a0400d4 100644
--- a/src/app/admin/radio/settings/page.tsx
+++ b/src/app/admin/radio/settings/page.tsx
@@ -216,7 +216,7 @@ export default async function AdminRadioSettingsPage() {
 
   return (
     <main>
-      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
         <Link href="/admin/radio">{t("title")}</Link> ·{" "}
         <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
         <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -236,7 +236,7 @@ export default async function AdminRadioSettingsPage() {
 
       {dbError ? (
         <div className="admin-card mb-6">
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("settingsForm.dbError")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("settingsForm.dbError")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -289,7 +289,7 @@ export default async function AdminRadioSettingsPage() {
                     style={{ width: "100%" }}
                   />
                   {field.comment ? (
-                    <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+                    <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                       {field.comment}
                     </p>
                   ) : null}
diff --git a/src/app/admin/rare-values/page.tsx b/src/app/admin/rare-values/page.tsx
index dbba651a..c485f1df 100644
--- a/src/app/admin/rare-values/page.tsx
+++ b/src/app/admin/rare-values/page.tsx
@@ -95,7 +95,7 @@ export default async function AdminRareValues() {
                   <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
                     {t("priorityLabel", { priority: cat.priority })}
                   </span>
-                  <span className="text-sm text-gray-500 dark:text-gray-400">
+                  <span className="text-sm theme-text-muted dark:theme-text-muted">
                     {t("itemCount", { count: rows.length })}
                   </span>
                 </div>
@@ -123,7 +123,7 @@ export default async function AdminRareValues() {
                   {rows.map((v) => (
                     <tr key={String(v.id)}>
                       <td>{v.name}</td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {v.itemId ?? "—"}
                       </td>
                       <td>{v.creditValue ?? "—"}</td>
@@ -133,7 +133,7 @@ export default async function AdminRareValues() {
                           {v.currencyType}
                         </span>
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {v.furnitureIcon}
                       </td>
                       <td>
@@ -149,7 +149,7 @@ export default async function AdminRareValues() {
                 </tbody>
               </table>
               {rows.length === 0 ? (
-                <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.5rem 0 0" }}>
+                <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.5rem 0 0" }}>
                   {t("noValuesInCategory")}
                 </p>
               ) : null}
diff --git a/src/app/admin/rooms/rooms-table.tsx b/src/app/admin/rooms/rooms-table.tsx
index d0bec5e5..d505f5d1 100644
--- a/src/app/admin/rooms/rooms-table.tsx
+++ b/src/app/admin/rooms/rooms-table.tsx
@@ -78,7 +78,7 @@ function getColumns(canEdit: boolean): DataTableColumn<RoomRow>[] {
       sortable: true,
       render: (_, row) => (
         <span className="flex items-center gap-1.5 text-sm">
-          {row.users > 0 && <Wifi className="h-3 w-3 text-green-500" />}
+          {row.users > 0 && <Wifi className="h-3 w-3 text-[var(--color-success-text-readable)]" />}
           <span className={row.users > 0 ? 'font-medium' : 'text-muted-foreground'}>
             {row.users}
           </span>
diff --git a/src/app/admin/shop/page.tsx b/src/app/admin/shop/page.tsx
index 9d019898..3f15f075 100644
--- a/src/app/admin/shop/page.tsx
+++ b/src/app/admin/shop/page.tsx
@@ -144,7 +144,7 @@ export default async function AdminShop() {
                       <td>
                         {o.status ? (
                           <span
-                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
+                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : state === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                           >
                             {o.status}
                           </span>
diff --git a/src/app/admin/subscriptions/page.tsx b/src/app/admin/subscriptions/page.tsx
index 93fb4b6d..7fe98472 100644
--- a/src/app/admin/subscriptions/page.tsx
+++ b/src/app/admin/subscriptions/page.tsx
@@ -88,17 +88,17 @@ export default async function AdminSubscriptions() {
                 const soon = s.expiresAt <= soonCutoff;
                 return (
                   <tr key={s.id}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{s.id}</td>
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{s.id}</td>
                     <td>{s.userId ?? "—"}</td>
                     <td>{s.subscriptionType ?? "—"}</td>
                     <td>
                       <span
-                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
+                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
                       >
                         {soon ? t("statusExpiring") : t("statusActive")}
                       </span>
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fmt(s.expiresAt)}
                     </td>
                   </tr>
diff --git a/src/app/admin/tags/page.tsx b/src/app/admin/tags/page.tsx
index f3ad3ab4..edf98e74 100644
--- a/src/app/admin/tags/page.tsx
+++ b/src/app/admin/tags/page.tsx
@@ -58,7 +58,7 @@ export default async function AdminTagsPage() {
 
       {dbError ? (
         <div className="admin-card" style={{ marginBottom: "1.5rem" }}>
-          <p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("databaseError")}</p>
+          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("databaseError")}</p>
         </div>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -130,7 +130,7 @@ export default async function AdminTagsPage() {
             <tbody>
               {tags.map((tag) => (
                 <tr key={String(tag.id)}>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {String(tag.id)}
                   </td>
                   <td>
@@ -146,21 +146,21 @@ export default async function AdminTagsPage() {
                       {tag.name}
                     </span>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     <code>{tag.backgroundColor}</code>
                   </td>
                   <td>
                     <span
                       className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${
                         (usage.get(String(tag.id)) ?? 0) > 0
-                          ? "bg-green-600/20 text-[var(--color-text)]"
+                          ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]"
                           : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"
                       }`}
                     >
                       {usage.get(String(tag.id)) ?? 0}
                     </span>
                   </td>
-                  <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                  <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                     {formatDate(tag.createdAt)}
                   </td>
                   <td>
diff --git a/src/app/admin/teams/page.tsx b/src/app/admin/teams/page.tsx
index 895549d9..15848b0e 100644
--- a/src/app/admin/teams/page.tsx
+++ b/src/app/admin/teams/page.tsx
@@ -64,25 +64,25 @@ export default async function AdminTeams() {
         <form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <label style={{ display: "grid", gap: "0.25rem" }}>
-              <span className="text-sm text-gray-500 dark:text-gray-400">{t("rankName")}</span>
+              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("rankName")}</span>
               <input name="rankName" placeholder={t("rankNamePlaceholder")} required />
             </label>
             <label style={{ display: "grid", gap: "0.25rem" }}>
-              <span className="text-sm text-gray-500 dark:text-gray-400">{t("badgeCode")}</span>
+              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("badgeCode")}</span>
               <input name="badge" placeholder={t("badgeCodePlaceholder")} />
             </label>
             <label style={{ display: "grid", gap: "0.25rem" }}>
-              <span className="text-sm text-gray-500 dark:text-gray-400">{t("jobDescription")}</span>
+              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("jobDescription")}</span>
               <input name="jobDescription" placeholder={t("jobDescriptionPlaceholder")} />
             </label>
             <label style={{ display: "grid", gap: "0.25rem" }}>
-              <span className="text-sm text-gray-500 dark:text-gray-400">{t("staffColor")}</span>
+              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("staffColor")}</span>
               <input name="staffColor" defaultValue="#327fa8" placeholder={t("staffColorPlaceholder")} />
             </label>
           </div>
           <label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
             <input type="checkbox" name="hiddenRank" style={{ width: "auto" }} />
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("hiddenRank")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("hiddenRank")}</span>
           </label>
           <div>
             <button type="submit" className="btn btn-primary">
@@ -113,14 +113,14 @@ export default async function AdminTeams() {
               <tbody>
                 {teams.map((team) => (
                   <tr key={String(team.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {String(team.id)}
                     </td>
                     <td>{team.rankName}</td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {team.badge ?? "—"}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {team.jobDescription ?? "—"}
                     </td>
                     <td>
@@ -146,7 +146,7 @@ export default async function AdminTeams() {
                     </td>
                     <td>
                       <span
-                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${team.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
+                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${team.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
                       >
                         {team.hiddenRank ? t("hidden") : t("visible")}
                       </span>
diff --git a/src/app/admin/theme/page.tsx b/src/app/admin/theme/page.tsx
index f03d8e0d..6b2ee69b 100644
--- a/src/app/admin/theme/page.tsx
+++ b/src/app/admin/theme/page.tsx
@@ -124,12 +124,12 @@ export default async function AdminTheme({
       </div>
 
       {sp.saved ? (
-        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
+        <div className="mb-4 p-3 rounded-lg theme-status-success text-xs">
           {t("saved")}
         </div>
       ) : null}
       {sp.preset ? (
-        <div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
+        <div className="mb-4 p-3 rounded-lg theme-status-success text-xs">
           {t("presetApplied", { preset: sp.preset })}
         </div>
       ) : null}
diff --git a/src/app/admin/tickets/[id]/admin-ticket-detail.tsx b/src/app/admin/tickets/[id]/admin-ticket-detail.tsx
index 3bd51952..4e7324c7 100644
--- a/src/app/admin/tickets/[id]/admin-ticket-detail.tsx
+++ b/src/app/admin/tickets/[id]/admin-ticket-detail.tsx
@@ -57,17 +57,17 @@ interface StaffMember {
 }
 
 const STATUS_COLORS: Record<string, string> = {
-  open: 'bg-blue-500/10 text-blue-500',
-  in_progress: 'bg-yellow-500/10 text-yellow-500',
-  waiting: 'bg-orange-500/10 text-orange-500',
+  open: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)]',
+  in_progress: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]',
+  waiting: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]',
   closed: 'bg-muted text-muted-foreground',
 }
 
 const PRIORITY_COLORS: Record<string, string> = {
   low: 'text-muted-foreground',
-  normal: 'text-blue-500',
-  high: 'text-orange-500',
-  urgent: 'text-red-500',
+  normal: 'text-[var(--color-info-text-readable)]',
+  high: 'text-[var(--color-warning-text-readable)]',
+  urgent: 'text-[var(--color-error-text-readable)]',
 }
 
 export function AdminTicketDetail({
diff --git a/src/app/admin/tickets/page.tsx b/src/app/admin/tickets/page.tsx
index 1a0ee732..f73bfc07 100644
--- a/src/app/admin/tickets/page.tsx
+++ b/src/app/admin/tickets/page.tsx
@@ -7,17 +7,17 @@ import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
 import { prisma } from '@/lib/prisma'
 
 const STATUS_CONFIG = {
-  open: { label: 'Open', icon: AlertCircle, class: 'bg-blue-500/10 text-blue-500' },
-  in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-yellow-500/10 text-yellow-500' },
-  waiting: { label: 'Waiting', icon: Clock, class: 'bg-orange-500/10 text-orange-500' },
+  open: { label: 'Open', icon: AlertCircle, class: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)]' },
+  in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]' },
+  waiting: { label: 'Waiting', icon: Clock, class: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]' },
   closed: { label: 'Closed', icon: CheckCircle2, class: 'bg-muted text-muted-foreground' },
 } as const
 
 const PRIORITY_COLORS = {
   low: '',
-  normal: 'text-blue-500',
-  high: 'text-orange-500',
-  urgent: 'text-red-500 font-bold',
+  normal: 'text-[var(--color-info-text-readable)]',
+  high: 'text-[var(--color-warning-text-readable)]',
+  urgent: 'text-[var(--color-error-text-readable)] font-bold',
 }
 
 interface PageProps {
@@ -77,7 +77,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
       <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium text-blue-500">Open</CardTitle>
+            <CardTitle className="text-sm font-medium text-[var(--color-info-text-readable)]">Open</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{openCount}</div>
@@ -85,7 +85,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
         </Card>
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium text-yellow-500">In Progress</CardTitle>
+            <CardTitle className="text-sm font-medium text-[var(--color-warning-text-readable)]">In Progress</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{inProgressCount}</div>
@@ -93,7 +93,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
         </Card>
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium text-orange-500">Waiting</CardTitle>
+            <CardTitle className="text-sm font-medium text-[var(--color-warning-text-readable)]">Waiting</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{waitingCount}</div>
diff --git a/src/app/admin/transactions/page.tsx b/src/app/admin/transactions/page.tsx
index 25382465..1a5c721b 100644
--- a/src/app/admin/transactions/page.tsx
+++ b/src/app/admin/transactions/page.tsx
@@ -130,7 +130,7 @@ export default async function AdminTransactions({
                   const state = statusState(x.status);
                   return (
                     <tr key={String(x.id)}>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {String(x.id)}
                       </td>
                       <td>
@@ -141,18 +141,18 @@ export default async function AdminTransactions({
                       <td>
                         {x.status ? (
                           <span
-                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
+                            className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : state === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
                           >
                             {x.status}
                           </span>
                         ) : (
-                          <span className="text-sm text-gray-500 dark:text-gray-400">—</span>
+                          <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
                         )}
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {x.transactionId}
                       </td>
-                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                         {fromDate(x.createdAt)}
                       </td>
                     </tr>
@@ -164,7 +164,7 @@ export default async function AdminTransactions({
         )}
       </section>
 
-      <p className="text-xs text-gray-500 dark:text-gray-400">
+      <p className="text-xs theme-text-muted dark:theme-text-muted">
         {t("pagination", { page, pages, total })}
         {page > 1 ? (
           <>
diff --git a/src/app/admin/translations/client/client-translations.tsx b/src/app/admin/translations/client/client-translations.tsx
index 73e99b37..5c53f750 100644
--- a/src/app/admin/translations/client/client-translations.tsx
+++ b/src/app/admin/translations/client/client-translations.tsx
@@ -170,7 +170,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
       )}
 
       {activeFile.readOnly && (
-        <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400 flex items-start gap-2">
+        <div className="rounded-md border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-3 py-2 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)] flex items-start gap-2">
           <Lock className="w-4 h-4 flex-shrink-0 mt-0.5" />
           <div>
             Questo file è di sola lettura.{' '}
@@ -180,7 +180,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
       )}
 
       {activeFile.hasComments && !activeFile.readOnly && (
-        <div className="rounded-md border border-blue-500/30 bg-blue-500/10 px-3 py-2 text-xs text-blue-700 dark:text-blue-400 flex items-start gap-2">
+        <div className="rounded-md border border-[var(--color-info-border)] bg-[var(--color-info-subtle)] px-3 py-2 text-xs text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)] flex items-start gap-2">
           <Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
           <div>
             I commenti vengono preservati: il salvataggio modifica solo le righe dei valori
diff --git a/src/app/admin/users/[id]/edit/page.tsx b/src/app/admin/users/[id]/edit/page.tsx
index 3be8c0e3..228901b8 100644
--- a/src/app/admin/users/[id]/edit/page.tsx
+++ b/src/app/admin/users/[id]/edit/page.tsx
@@ -63,11 +63,11 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
   } catch {
     return (
       <main>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
+        <p className="text-sm theme-text-muted dark:theme-text-muted">
           <Link href="/admin/users">← {t("title")}</Link>
         </p>
         <h1>{t("title")}</h1>
-        <p className="text-xs text-gray-500 dark:text-gray-400">{t("loadError")}</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">{t("loadError")}</p>
       </main>
     );
   }
@@ -76,7 +76,7 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
 
   return (
     <main>
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+      <p className="text-sm theme-text-muted dark:theme-text-muted mb-2">
         <Link href={`/admin/users/${user.id}`}>← {user.username}</Link>
       </p>
       <div className="flex items-center gap-3 mb-6">
@@ -141,7 +141,7 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
           </label>
         </div>
 
-        <p className="text-xs text-gray-500 dark:text-gray-400">{t("hint")}</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">{t("hint")}</p>
 
         <div className="flex gap-2 mt-2">
           <button type="submit" className="btn btn-primary">
diff --git a/src/app/admin/users/[id]/user-quick-actions.tsx b/src/app/admin/users/[id]/user-quick-actions.tsx
index 428f83c2..27cf147d 100644
--- a/src/app/admin/users/[id]/user-quick-actions.tsx
+++ b/src/app/admin/users/[id]/user-quick-actions.tsx
@@ -127,7 +127,7 @@ export function UserQuickActions({ userId, username, isOnline }: UserQuickAction
               <Unplug className="mr-2 h-4 w-4" />
               Disconnect
               {isOnline && (
-                <Badge variant="default" className="ml-auto text-[10px] bg-green-600">
+                <Badge variant="default" className="ml-auto text-[10px] bg-[var(--color-success-subtle)]">
                   Online
                 </Badge>
               )}
@@ -209,7 +209,7 @@ export function UserQuickActions({ userId, username, isOnline }: UserQuickAction
               {newPassword}
             </code>
             <Button variant="ghost" size="icon" onClick={copyPassword}>
-              {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              {copied ? <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" /> : <Copy className="h-4 w-4" />}
             </Button>
           </div>
         </DialogContent>
diff --git a/src/app/admin/users/_components/user-hero.tsx b/src/app/admin/users/_components/user-hero.tsx
index 1a15439c..d59f8e3c 100644
--- a/src/app/admin/users/_components/user-hero.tsx
+++ b/src/app/admin/users/_components/user-hero.tsx
@@ -82,10 +82,10 @@ export function UserHero({
               className={`absolute -top-1 -right-1 flex h-4 w-4 ${isOnline ? '' : 'opacity-50'}`}
             >
               {isOnline && (
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-success)] opacity-75" />
               )}
               <span
-                className={`relative inline-flex rounded-full h-4 w-4 border-2 border-card ${isOnline ? 'bg-green-500' : 'bg-zinc-400'}`}
+                className={`relative inline-flex rounded-full h-4 w-4 border-2 border-card ${isOnline ? 'bg-[var(--color-success-subtle)]' : 'bg-zinc-400'}`}
               />
             </span>
           </div>
@@ -129,7 +129,7 @@ export function UserHero({
               <Badge>{user.permission.rankName || `Rank ${user.rank}`}</Badge>
               <Badge
                 variant={isOnline ? 'default' : 'outline'}
-                className={isOnline ? 'bg-green-600' : ''}
+                className={isOnline ? 'bg-[var(--color-success-subtle)]' : ''}
               >
                 {isOnline ? (
                   <>
@@ -143,7 +143,7 @@ export function UserHero({
               </Badge>
               {activeBan && <Badge variant="destructive">Banned</Badge>}
               {user.twoFactorConfirmed ? (
-                <Badge variant="outline" className="border-green-500/50 text-green-600">
+                <Badge variant="outline" className="border-[var(--color-success-border)] text-[var(--color-success-text-readable)]">
                   <Shield className="mr-1 h-3 w-3" /> 2FA
                 </Badge>
               ) : null}
@@ -152,12 +152,12 @@ export function UserHero({
             {/* Currency row */}
             <div className="flex flex-wrap gap-3 pt-1">
               <div className="flex items-center gap-1.5 text-sm">
-                <Coins className="h-4 w-4 text-yellow-500" />
+                <Coins className="h-4 w-4 text-[var(--color-warning-text-readable)]" />
                 <span className="font-semibold">{user.credits.toLocaleString()}</span>
                 <span className="text-muted-foreground text-xs">credits</span>
               </div>
               <div className="flex items-center gap-1.5 text-sm">
-                <Diamond className="h-4 w-4 text-blue-400" />
+                <Diamond className="h-4 w-4 text-[var(--color-info-text-readable)]" />
                 <span className="font-semibold">{diamonds.toLocaleString()}</span>
                 <span className="text-muted-foreground text-xs">diamonds</span>
               </div>
diff --git a/src/app/admin/users/multi-accounts/page.tsx b/src/app/admin/users/multi-accounts/page.tsx
index 8502dae1..5eb484f4 100644
--- a/src/app/admin/users/multi-accounts/page.tsx
+++ b/src/app/admin/users/multi-accounts/page.tsx
@@ -93,7 +93,7 @@ export default async function MultiAccountsPage({
                       <span className="text-xs text-muted-foreground">#{acc.id}</span>
                       {acc.rank >= 5 && <Badge variant="outline">staff</Badge>}
                       {acc.online === '1' && (
-                        <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                        <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success-subtle)]" />
                       )}
                     </Link>
                   ))}
diff --git a/src/app/admin/users/users-table.tsx b/src/app/admin/users/users-table.tsx
index 3c98663e..c47c2fb3 100644
--- a/src/app/admin/users/users-table.tsx
+++ b/src/app/admin/users/users-table.tsx
@@ -122,7 +122,7 @@ function getColumns(canEdit: boolean): DataTableColumn<UserRow>[] {
       ],
       render: (value) =>
         value === '1' ? (
-          <span className="flex items-center gap-1.5 text-green-600">
+          <span className="flex items-center gap-1.5 text-[var(--color-success-text-readable)]">
             <Wifi className="h-3.5 w-3.5" /> Online
           </span>
         ) : (
diff --git a/src/app/admin/vouchers/page.tsx b/src/app/admin/vouchers/page.tsx
index 47dc3378..d09cc6b2 100644
--- a/src/app/admin/vouchers/page.tsx
+++ b/src/app/admin/vouchers/page.tsx
@@ -85,19 +85,19 @@ export default async function AdminVouchers() {
         <h3 style={{ marginTop: 0 }}>{t("newVoucher")}</h3>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2" style={{ marginBottom: "0.75rem" }}>
           <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.code")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.code")}</span>
             <input name="code" placeholder={t("form.codePlaceholder")} maxLength={255} required />
           </label>
           <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.amount")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.amount")}</span>
             <input name="amount" type="number" min={1} placeholder={t("form.amountPlaceholder")} required />
           </label>
           <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.maxUses")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.maxUses")}</span>
             <input name="maxUses" type="number" min={1} defaultValue={1} required />
           </label>
           <label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.expiresAt")}</span>
+            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.expiresAt")}</span>
             <input name="expiresAt" type="datetime-local" />
           </label>
         </div>
@@ -138,7 +138,7 @@ export default async function AdminVouchers() {
                     </td>
                     <td>
                       {expired ? (
-                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-error-subtle)] text-[var(--color-text)]">
                           {t("statusExpired")}
                         </span>
                       ) : usedUp ? (
@@ -146,15 +146,15 @@ export default async function AdminVouchers() {
                           {t("statusUsedUp")}
                         </span>
                       ) : (
-                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+                        <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
                           {t("statusActive")}
                         </span>
                       )}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fmtDate(v.expiresAt)}
                     </td>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {fmtDate(v.createdAt)}
                     </td>
                     <td>
diff --git a/src/app/admin/vpn/page.tsx b/src/app/admin/vpn/page.tsx
index 6fcc48cf..53601685 100644
--- a/src/app/admin/vpn/page.tsx
+++ b/src/app/admin/vpn/page.tsx
@@ -42,7 +42,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
 
       <section className="mt-6">
         {sp.saved ? (
-          <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
+          <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
             {t("settingsSaved")}
           </p>
         ) : null}
@@ -83,7 +83,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
                   </option>
                 ))}
               </select>
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("providerHint")}
               </p>
             </div>
@@ -100,7 +100,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
                 placeholder={t("apiKeyPlaceholder")}
                 style={{ width: "100%" }}
               />
-              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+              <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
                 {t("apiKeyHint")}
               </p>
             </div>
@@ -120,7 +120,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
               placeholder={t("blockMessagePlaceholder")}
               style={{ width: "100%" }}
             />
-            <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
+            <p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
               {t("blockMessageHint")}
             </p>
           </div>
@@ -135,7 +135,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
 
       <section className="mt-6">
         <h2 className="admin-section-title">{t("rawIpTitle")}</h2>
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs theme-text-muted dark:theme-text-muted">
           {t.rich("rawIpDescription", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
         </p>
         <Link href="/admin/ip" className="btn btn-secondary">
diff --git a/src/app/admin/wordfilter/page.tsx b/src/app/admin/wordfilter/page.tsx
index 58548528..96843521 100644
--- a/src/app/admin/wordfilter/page.tsx
+++ b/src/app/admin/wordfilter/page.tsx
@@ -78,7 +78,7 @@ export default async function AdminWordFilter() {
               <tbody>
                 {words.map((w) => (
                   <tr key={String(w.id)}>
-                    <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                       {String(w.id)}
                     </td>
                     <td>
diff --git a/src/app/admin/writeable-boxes/page.tsx b/src/app/admin/writeable-boxes/page.tsx
index c1d8ea54..a6014ecf 100644
--- a/src/app/admin/writeable-boxes/page.tsx
+++ b/src/app/admin/writeable-boxes/page.tsx
@@ -114,11 +114,11 @@ export default async function AdminWriteableBoxes() {
                     marginBottom: "0.75rem",
                   }}
                 >
-                  <span className="text-sm text-gray-500 dark:text-gray-400">#{String(box.id)}</span>
+                  <span className="text-sm theme-text-muted dark:theme-text-muted">#{String(box.id)}</span>
                   {box.icon ? <span aria-hidden>{box.icon}</span> : null}
                   <strong className="flex-1">{box.title}</strong>
                   <span
-                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
+                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                   >
                     {box.isActive ? t("active") : t("hidden")}
                   </span>
diff --git a/src/app/globals.css b/src/app/globals.css
index 7ba04006..2b2b06ee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -117,6 +117,23 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Semantic colors: safe across every complete light/dark preset. */
+.theme-text-muted { color: var(--color-text-muted-readable); }
+.theme-text-subtle { color: var(--color-text-subtle-readable); }
+.theme-text-disabled { color: var(--color-text-disabled-readable); }
+.theme-status-success,
+.theme-status-warning,
+.theme-status-error,
+.theme-status-info {
+  border: 1px solid var(--status-border);
+  background: var(--status-background);
+  color: var(--status-text);
+}
+.theme-status-success { --status-border: var(--color-success-border); --status-background: var(--color-success-subtle); --status-text: var(--color-success-text-readable); }
+.theme-status-warning { --status-border: var(--color-warning-border); --status-background: var(--color-warning-subtle); --status-text: var(--color-warning-text-readable); }
+.theme-status-error { --status-border: var(--color-error-border); --status-background: var(--color-error-subtle); --status-text: var(--color-error-text-readable); }
+.theme-status-info { --status-border: var(--color-info-border); --status-background: var(--color-info-subtle); --status-text: var(--color-info-text-readable); }
+
 ::-webkit-scrollbar-thumb {
   border-radius: 100px;
   border: 4px solid transparent;
diff --git a/src/components/admin/admin-nav-link.tsx b/src/components/admin/admin-nav-link.tsx
index 749b3a8d..7209f764 100644
--- a/src/components/admin/admin-nav-link.tsx
+++ b/src/components/admin/admin-nav-link.tsx
@@ -27,12 +27,12 @@ export function AdminNavLink({
       href={href}
       className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
         active
-          ? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
-          : "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
+          ? "bg-[var(--color-primary)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--color-primary)]"
+          : "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 hover:no-underline"
       }`}
     >
       {icon ? (
-        <span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
+        <span className={`flex-none ${active ? "text-[var(--color-primary-readable)]" : "text-[var(--admin-sidebar-muted-readable)]"}`}>
           {icon}
         </span>
       ) : null}
diff --git a/src/components/admin/catalog-manager/inline-editor.tsx b/src/components/admin/catalog-manager/inline-editor.tsx
index 1a135691..b26146e7 100644
--- a/src/components/admin/catalog-manager/inline-editor.tsx
+++ b/src/components/admin/catalog-manager/inline-editor.tsx
@@ -287,7 +287,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
               {isDirty && (
                 <Badge
                   variant="outline"
-                  className="h-4 px-1.5 text-[9px] text-orange-600 border-orange-300 bg-orange-50 dark:bg-orange-950/30 dark:border-orange-700"
+              className="h-4 px-1.5 text-[9px] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]"
                 >
                   <AlertCircle className="h-2.5 w-2.5 mr-0.5" />
                   unsaved
@@ -310,7 +310,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
 
       {/* Dirty banner */}
       {isDirty && (
-        <div className="flex items-center gap-2 px-4 py-1.5 bg-yellow-50 dark:bg-yellow-950/30 border-b border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200 shrink-0">
+        <div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--color-warning-subtle)] border-b border-[var(--color-warning-border)] text-xs text-[var(--color-warning-text-readable)] shrink-0">
           <AlertCircle className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">
             Unsaved changes — press{' '}
@@ -340,7 +340,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
           <TabsTrigger value="settings" className="gap-1.5 text-xs">
             <Settings className="h-3.5 w-3.5" />
             Settings
-            {isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-orange-500" />}
+                {isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--color-warning)]" />}
           </TabsTrigger>
           <TabsTrigger value="items" className="gap-1.5 text-xs">
             <Package className="h-3.5 w-3.5" />
@@ -359,7 +359,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
                 const furniSet = new Set(itemsData.furniDataIdList)
                 const missing = itemsData.baseItems.filter((b) => !furniSet.has(b.id)).length
                 return missing > 0 ? (
-                  <span className="ml-0.5 rounded-full bg-orange-500 text-white text-[9px] px-1 py-0.5 leading-none font-medium">
+              <span className="ml-0.5 rounded-full bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] text-[9px] px-1 py-0.5 leading-none font-medium">
                     {missing}
                   </span>
                 ) : null
diff --git a/src/components/admin/catalog-tree.tsx b/src/components/admin/catalog-tree.tsx
index fd1f56ae..1cb9b057 100644
--- a/src/components/admin/catalog-tree.tsx
+++ b/src/components/admin/catalog-tree.tsx
@@ -109,17 +109,17 @@ export function CatalogIcon({ iconImage, size = 20 }: { iconImage: number; size?
 /* ─── Layout label helper ────────────────────────────────── */
 
 export const LAYOUT_COLORS: Record<string, string> = {
-  default_3x3: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
-  frontpage: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
-  spaces_new: 'bg-green-500/15 text-green-600 dark:text-green-400',
+  default_3x3: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
+  frontpage: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
+  spaces_new: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
   pets: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
   pets2: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
   pets3: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
   marketplace: 'bg-purple-500/15 text-purple-600 dark:text-purple-400',
-  recycler: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
-  club_buy: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400',
-  single_bundle: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400',
-  room_bundle: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400',
+  recycler: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
+  club_buy: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
+  single_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
+  room_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
 }
 
 /* ─── Highlight matched text ─────────────────────────────── */
@@ -131,7 +131,7 @@ function HighlightText({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <mark className="bg-yellow-200 dark:bg-yellow-800/60 text-inherit rounded-sm px-0.5">
+          <mark className="bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] rounded-sm px-0.5">
         {text.slice(idx, idx + query.length)}
       </mark>
       {text.slice(idx + query.length)}
@@ -325,7 +325,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
                       className={cn(
                         'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
                         filterMode === 'enabled'
-                          ? 'bg-background shadow-sm text-green-600 dark:text-green-400'
+                          ? 'bg-background shadow-sm text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]'
                           : 'text-muted-foreground hover:text-foreground',
                       )}
                     >
@@ -345,7 +345,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
                       className={cn(
                         'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
                         filterMode === 'disabled'
-                          ? 'bg-background shadow-sm text-red-600 dark:text-red-400'
+                          ? 'bg-background shadow-sm text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]'
                           : 'text-muted-foreground hover:text-foreground',
                       )}
                     >
@@ -643,8 +643,8 @@ function TreeItem({
                       className={cn(
                         'flex items-center justify-center h-5 w-5 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity',
                         isDisabled
-                          ? 'hover:bg-green-500/20 text-muted-foreground hover:text-green-600'
-                          : 'hover:bg-red-500/20 text-muted-foreground hover:text-red-600',
+                          ? 'hover:bg-[var(--color-success-subtle)] text-muted-foreground hover:text-[var(--color-success-text-readable)]'
+                          : 'hover:bg-[var(--color-error-subtle)] text-muted-foreground hover:text-[var(--color-error-text-readable)]',
                       )}
                     >
                       {isDisabled ? (
diff --git a/src/components/admin/catalog/bulk-import-items.tsx b/src/components/admin/catalog/bulk-import-items.tsx
index f6f7df5f..a9ae10ae 100644
--- a/src/components/admin/catalog/bulk-import-items.tsx
+++ b/src/components/admin/catalog/bulk-import-items.tsx
@@ -189,7 +189,7 @@ export function BulkImportItems({ pageId, onImported }: BulkImportItemsProps) {
                         <td className="px-2 py-0.5 font-mono">{row.pointsType ?? '—'}</td>
                         <td className="px-2 py-0.5">
                           {row.ok ? (
-                            <span className="text-green-600">OK</span>
+                            <span className="text-[var(--color-success-text-readable)]">OK</span>
                           ) : (
                             <span className="text-destructive">{row.error}</span>
                           )}
diff --git a/src/components/admin/catalog/items-shop-preview.tsx b/src/components/admin/catalog/items-shop-preview.tsx
index ab0d2499..b34ee907 100644
--- a/src/components/admin/catalog/items-shop-preview.tsx
+++ b/src/components/admin/catalog/items-shop-preview.tsx
@@ -75,7 +75,7 @@ export function ItemsShopPreview({
                 {/* Badges overlay */}
                 <div className="absolute right-1 top-1 flex flex-col gap-0.5">
                   {isClub && (
-                    <Badge className="h-4 gap-0.5 border-0 bg-yellow-500/90 px-1 text-[8px] text-white">
+                    <Badge className="h-4 gap-0.5 border-0 bg-[var(--color-warning-subtle)] px-1 text-[8px] text-white">
                       <Crown className="h-2.5 w-2.5" />
                       HC
                     </Badge>
@@ -110,7 +110,7 @@ export function ItemsShopPreview({
                 </p>
                 <div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono">
                   {item.costCredits > 0 && (
-                    <span className="text-yellow-600 dark:text-yellow-500">
+                    <span className="text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
                       {item.costCredits}c
                     </span>
                   )}
diff --git a/src/components/admin/dashboard.tsx b/src/components/admin/dashboard.tsx
index 5f785392..011992d7 100644
--- a/src/components/admin/dashboard.tsx
+++ b/src/components/admin/dashboard.tsx
@@ -61,15 +61,15 @@ export function DiagnosticRow({
   const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
   const dotColor =
     state === "ok"
-      ? "bg-green-600 shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
+      ? "bg-[var(--color-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
       : state === "warn"
         ? "bg-[var(--color-primary)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
-        : "bg-red-500 shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
+        : "bg-[var(--color-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
   const badgeColor =
     state === "ok"
-      ? "bg-green-600/20"
+      ? "bg-[var(--color-success-subtle)]"
       : state === "danger"
-        ? "bg-red-500/22"
+        ? "bg-[var(--color-error-subtle)]"
         : "bg-[var(--color-primary)]/18";
 
   return (
@@ -144,7 +144,7 @@ export function OnlineUsersWidget({
                 />
                 {user.roomId && user.roomName && (
                   <div className="absolute -bottom-0.5 -right-0.5">
-                    <span className="block w-[10px] h-[10px] bg-green-500 rounded-full border-2 border-[var(--color-surface)]" />
+                    <span className="block w-[10px] h-[10px] bg-[var(--color-success-subtle)] rounded-full border-2 border-[var(--color-surface)]" />
                   </div>
                 )}
               </div>
@@ -160,9 +160,9 @@ export function OnlineUsersWidget({
                 </div>
                 <div className="text-[0.75rem] text-[var(--color-text-muted)]">
                   {user.roomId && user.roomName ? (
-                    <span className="text-green-500 font-medium">🏠 {user.roomName}</span>
+                    <span className="text-[var(--color-success-text-readable)] font-medium">🏠 {user.roomName}</span>
                   ) : (
-                    <span className="text-red-500">⏱️ {formatLastSeen(user.lastActivity)}</span>
+                    <span className="text-[var(--color-error-text-readable)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
                   )}
                 </div>
               </div>
diff --git a/src/components/admin/emulator-settings-form.tsx b/src/components/admin/emulator-settings-form.tsx
index 055282c0..2d560f0f 100644
--- a/src/components/admin/emulator-settings-form.tsx
+++ b/src/components/admin/emulator-settings-form.tsx
@@ -292,7 +292,7 @@ export function EmulatorSettingsForm({
               <div
                 key={setting.key}
                 className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
-                  isChanged ? 'bg-yellow-50/60 dark:bg-yellow-950/20' : ''
+                  isChanged ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]' : ''
                 }`}
               >
                 <code
@@ -305,7 +305,7 @@ export function EmulatorSettingsForm({
                   value={display}
                   onChange={(e) => updateValue(setting.key, e.target.value)}
                   className={`flex-1 h-8 text-xs font-mono ${
-                    isChanged ? 'border-yellow-500/60' : ''
+                    isChanged ? 'border-[var(--color-warning-border)]' : ''
                   }`}
                 />
                 {isChanged && (
diff --git a/src/components/admin/media-grid.tsx b/src/components/admin/media-grid.tsx
index 9a57911f..d4f409b9 100644
--- a/src/components/admin/media-grid.tsx
+++ b/src/components/admin/media-grid.tsx
@@ -103,9 +103,9 @@ export function AdminMediaGrid() {
       )}
 
       {loading ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400">Loading…</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">Loading…</p>
       ) : files.length === 0 ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400">No images yet. Upload one above.</p>
+        <p className="text-xs theme-text-muted dark:theme-text-muted">No images yet. Upload one above.</p>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
           {files.map((f) => (
diff --git a/src/components/theme-vars.test.ts b/src/components/theme-vars.test.ts
index a2f5a400..e92156f6 100644
--- a/src/components/theme-vars.test.ts
+++ b/src/components/theme-vars.test.ts
@@ -13,5 +13,11 @@ describe("themePaletteCss", () => {
     expect(css).toContain(`--color-background:${ocean.light.color_background}`);
     expect(css).toContain(`--color-background:${ocean.dark.color_background}`);
     expect(ocean.dark.color_primary).toBe(ocean.light.color_primary);
+    for (const variable of [
+      "--color-text-subtle-readable", "--color-text-disabled-readable",
+      "--admin-sidebar-text-readable", "--color-success-text-readable",
+      "--color-success-foreground-readable", "--color-warning-text-readable",
+      "--color-error-text-readable", "--color-info-text-readable",
+    ]) expect(css).toContain(variable);
   });
 });
diff --git a/src/lib/admin-theme-source-audit.test.ts b/src/lib/admin-theme-source-audit.test.ts
new file mode 100644
index 00000000..a62cdce7
--- /dev/null
+++ b/src/lib/admin-theme-source-audit.test.ts
@@ -0,0 +1,34 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const ROOTS = ["src/app/admin", "src/components/admin"];
+const GRAPHICAL_ALLOWLIST = [
+  "src/app/admin/favicon/favicon-generator.tsx",
+  "src/app/admin/import/clone/import-clone-client.tsx",
+  "src/app/admin/import/furni/import-furni-client.tsx",
+  "src/components/admin/catalog/items-shop-preview.tsx",
+];
+
+function sourceFiles(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    return entry.isDirectory() ? sourceFiles(path) : /\.(?:ts|tsx)$/.test(entry.name) ? [path] : [];
+  });
+}
+
+describe("admin theme source audit", () => {
+  it("keeps ordinary admin text theme-aware", () => {
+    const violations: string[] = [];
+    for (const root of ROOTS) {
+      for (const file of sourceFiles(root)) {
+        const normalized = relative(process.cwd(), file).replaceAll("\\", "/");
+        if (GRAPHICAL_ALLOWLIST.includes(normalized)) continue;
+        const source = readFileSync(file, "utf8");
+        const risky = source.match(/(?:text-(?:gray|slate)-(?:400|500|600|700|800|900)|text-white(?:\/\d+)?|\)\]0)/g);
+        if (risky) violations.push(`${normalized}: ${[...new Set(risky)].join(", ")}`);
+      }
+    }
+    expect(violations).toEqual([]);
+  });
+});
diff --git a/src/lib/theme-contrast.test.ts b/src/lib/theme-contrast.test.ts
index 9f9281e3..22327180 100644
--- a/src/lib/theme-contrast.test.ts
+++ b/src/lib/theme-contrast.test.ts
@@ -86,6 +86,24 @@ describe("derivePublicForegrounds", () => {
     }
   });
 
+  it("covers admin hierarchy and every semantic status", () => {
+    const required = [
+      "subtle", "disabled", "sidebar", "input",
+      "success-text", "success-solid", "warning-text", "warning-solid",
+      "error-text", "error-solid", "info-text", "info-solid",
+    ];
+    for (const preset of Object.values(PRESETS)) {
+      for (const palette of [preset.light, preset.dark]) {
+        const result = derivePublicForegrounds(palette);
+        for (const name of required) {
+          const pair = result.pairs.find((candidate) => candidate.name === name);
+          expect(pair, `missing ${name}`).toBeDefined();
+          expect(contrastRatio(pair!.foreground, pair!.background), name).toBeGreaterThanOrEqual(4.5);
+        }
+      }
+    }
+  });
+
   it("repairs hostile white-on-white custom colors", () => {
     const result = derivePublicForegrounds({
       color_background: "#ffffff", color_surface: "#ffffff", color_dropdown: "#ffffff",
diff --git a/src/lib/theme-contrast.ts b/src/lib/theme-contrast.ts
index 45197166..e663db77 100644
--- a/src/lib/theme-contrast.ts
+++ b/src/lib/theme-contrast.ts
@@ -18,6 +18,10 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
     make("body", value("color_text", "#0f172a"), background),
     make("surface", value("color_text", "#0f172a"), surface),
     make("muted", value("color_text_muted", "#64748b"), surface),
+    make("subtle", value("color_text_muted", "#64748b"), surface),
+    make("disabled", value("color_text_muted", "#64748b"), surface),
+    make("sidebar", value("color_navbar_text", "#1e293b"), navbar),
+    make("input", value("color_text", "#0f172a"), dropdown),
     make("link", value("link_color", primary), surface),
     make("link-hover", value("link_hover_color", primary), surface),
     make("navbar", value("color_navbar_text", "#1e293b"), navbar),
@@ -31,6 +35,13 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
     make("pill", value("color_text", "#0f172a"), surface),
     make("badge", value("button_text_color", "#1e293b"), primary),
     make("overlay", "#ffffff", "#111827"),
+    ...(["success", "warning", "error", "info"] as const).flatMap((status) => {
+      const statusColor = value(`color_${status}`, "#0f172a");
+      return [
+        make(`${status}-text`, statusColor, surface),
+        make(`${status}-solid`, "#ffffff", statusColor),
+      ];
+    }),
   ];
   return { pairs, byName: Object.fromEntries(pairs.map((pair) => [pair.name, pair.foreground])) };
 }
diff --git a/src/lib/theme-css.ts b/src/lib/theme-css.ts
index 3daf7a42..3e3f02b1 100644
--- a/src/lib/theme-css.ts
+++ b/src/lib/theme-css.ts
@@ -27,6 +27,8 @@ export function themePaletteCss(selector: string, palette: ThemePalette): string
     `--color-text-muted-readable:${readableColor(palette.color_text_muted, [palette.color_background, palette.color_surface])};`,
     `--color-primary-readable:${readableColor(palette.color_primary, [palette.color_background, palette.color_surface])};`,
     `--color-accent-readable:${readableColor(palette.color_accent, [palette.color_background, palette.color_surface])};`,
+    `--color-primary-foreground-readable:${semantic.byName.primary};`,
+    `--color-accent-foreground-readable:${semantic.byName.accent};`,
     `--color-navbar-text-readable:${semantic.byName.navbar};`,
     `--button-text-color-readable:${semantic.byName["button-primary"]};`,
     `--button-secondary-text-color-readable:${semantic.byName["button-secondary"]};`,
@@ -39,6 +41,18 @@ export function themePaletteCss(selector: string, palette: ThemePalette): string
     `--color-pill-text-readable:${semantic.byName.pill};`,
     `--color-badge-text-readable:${semantic.byName.badge};`,
     `--color-overlay-text-readable:${semantic.byName.overlay};`,
+    `--color-text-subtle-readable:${semantic.byName.subtle};`,
+    `--color-text-disabled-readable:${semantic.byName.disabled};`,
+    `--admin-sidebar-background:${palette.color_navbar};`,
+    `--admin-sidebar-text-readable:${semantic.byName.sidebar};`,
+    `--admin-sidebar-muted-readable:${semantic.byName.sidebar};`,
+    `--admin-input-text-readable:${semantic.byName.input};`,
+    ...(["success", "warning", "error", "info"] as const).flatMap((status) => [
+      `--color-${status}-text-readable:${semantic.byName[`${status}-text`]};`,
+      `--color-${status}-foreground-readable:${semantic.byName[`${status}-solid`]};`,
+      `--color-${status}-subtle:color-mix(in srgb, ${palette[`color_${status}`]} 14%, ${palette.color_surface});`,
+      `--color-${status}-border:color-mix(in srgb, ${palette[`color_${status}`]} 38%, transparent);`,
+    ]),
   );
   return `${selector}{${declarations.join("")}}`;
 }