feat: enforce no hardcoded colors across entire CMS

Added scripts/check-admin-colors.mjs — scans all src/ files for:
- text-white, text-black (use theme text vars)
- bg-white, bg-black (use theme background/overlay vars)
- bg/text/border/ring with gray/slate/zinc/stone palette
- bg/text/border/ring with red/green/blue/etc palette

Fixed 21 violations across 11 files:
- Overlays: bg-black/* → bg-foreground/*
- Text: text-white → text-primary-foreground
- Backgrounds: bg-white/10 → bg-background/10
- Green accents: bg-green-* → bg-primary
- Red accents: bg-red-* → bg-destructive

Integrated into:
- lint-staged: runs on every *.ts/*.tsx commit
- vitest: src/lib/no-hardcoded-colors.test.ts replaces old audit test
- Allowlist: shadcn/ui primitives (button, badge, dialog) + 4 graphical files

package.json

@@ -27,7 +27,8 @@
 		"test:housekeeping": "vitest run --coverage.enabled=false src/features/housekeeping src/lib/admin-theme-source-audit.test.ts src/lib/admin/authorization-contract.test.ts"
 	},
 	"lint-staged": {
-		"*.{js,ts,jsx,tsx,json}": "biome check --write --no-errors-on-unmatched"
+		"*.{js,ts,jsx,tsx,json}": "biome check --write --no-errors-on-unmatched",
+		"*.{ts,tsx}": "node scripts/check-admin-colors.mjs"
 	},
 	"dependencies": {
 		"@base-ui/react": "1.7.0",

src/app/(site)/developers/page.tsx

@@ -304,9 +304,9 @@ const GROUPS: Group[] = [
 ];
 
 const METHOD_CLASS: Record<Method, string> = {
-	GET: "bg-green-600/20 text-[var(--color-text)]",
+	GET: "bg-primary/20 text-[var(--color-text)]",
 	POST: "bg-[var(--color-primary)]/18 text-[var(--color-text)]",
-	DELETE: "bg-red-500/22 text-[var(--color-text)]",
+	DELETE: "bg-destructive/22 text-[var(--color-text)]",
 };
 
 function AuthTag({ endpoint }: { endpoint: Endpoint }) {
@@ -332,7 +332,7 @@ function AuthTag({ endpoint }: { endpoint: Endpoint }) {
 	}
 	return (
 		<span
-			className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]"
+			className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-primary/20 text-[var(--color-text)]"
 			title="No authentication required"
 		>
 			Public

src/app/(site)/login/page.tsx

@@ -91,8 +91,8 @@ export default async function LoginPage() {
 									}}
 								>
 									<span className="relative flex h-2 w-2">
-										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-										<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+										<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
 									</span>
 									{th("online", { count: online, hotel: "" }).trim()}
 								</div>

src/app/(site)/page.tsx

@@ -232,8 +232,8 @@ export default async function Home() {
 							}}
 						>
 							<span className="relative flex h-2 w-2">
-								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
 							</span>
 							{th("online", { count: online, hotel: hotelName })}
 						</div>
@@ -454,8 +454,10 @@ export default async function Home() {
 												sizes="(max-width: 640px) 100vw, 400px"
 												className="rounded-xl object-cover transition-all duration-300 group-hover:scale-105"
 											/>
-											<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-black/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
-												<span className="text-sm font-bold text-white">→</span>
+											<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-foreground/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+												<span className="text-sm font-bold text-primary-foreground">
+													→
+												</span>
 											</div>
 											<div
 												className="absolute bottom-0 left-0 w-full p-2.5 sm:p-3"
@@ -464,7 +466,7 @@ export default async function Home() {
 														"linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)",
 												}}
 											>
-												<h3 className="truncate text-sm sm:text-base font-bold text-white text-shadow-sm">
+												<h3 className="truncate text-sm sm:text-base font-bold text-primary-foreground text-shadow-sm">
 													{a.title}
 												</h3>
 												<p

src/app/(site)/register/page.tsx

@@ -100,7 +100,7 @@ export default async function RegisterPage() {
 													"var(--color-primary-readable, var(--color-primary))",
 											}}
 										>
-											<span className="w-2 h-2 rounded-full bg-green-500" />
+											<span className="w-2 h-2 rounded-full bg-primary" />
 											{tpr("usersOnline", { count: online })}
 										</div>
 										<h1

src/app/admin/prefixes/prefixes-client.tsx

@@ -164,7 +164,7 @@ function PrefixDialog({
 	const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/50">
 			<div className="bg-background rounded-lg shadow-lg w-full max-w-md p-6 space-y-4">
 				<div className="flex items-center justify-between">
 					<h3 className="text-lg font-semibold">

src/app/client/client-view.tsx

@@ -228,7 +228,7 @@ export function ClientView({
 				// biome-ignore lint/a11y/noStaticElementInteractions: draggable toolbar with explicit mouse/touch handlers
 				<div
 					ref={toolbarRef}
-					className={`fixed z-[9999] backdrop-blur-xl bg-black/30 rounded-xl border border-white/10 shadow-2xl px-1.5 py-1 select-none ${dragging ? "cursor-grabbing" : "cursor-grab"}`}
+					className={`fixed z-[9999] backdrop-blur-xl bg-foreground/30 rounded-xl border border-white/10 shadow-2xl px-1.5 py-1 select-none ${dragging ? "cursor-grabbing" : "cursor-grab"}`}
 					style={{
 						top: pos.top,
 						left: pos.left,

src/components/admin/catalog-manager/catalog-manager-dialog.tsx

@@ -74,7 +74,7 @@ export function CatalogManagerDialog({
 			{mounted && open
 				? createPortal(
 						<div className="fixed inset-0 z-[200]">
-							<div className="absolute inset-0 bg-black/70" />
+							<div className="absolute inset-0 bg-foreground/70" />
 							<div
 								role="dialog"
 								aria-modal="true"

src/components/admin/media-picker.tsx

@@ -94,7 +94,7 @@ export function MediaPicker({
 					role="button"
 					tabIndex={0}
 					aria-label="Close media picker"
-					className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+					className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/50"
 					onClick={(e) => {
 						if (e.target === e.currentTarget) setOpen(false);
 					}}

src/components/auth/register-form.tsx

@@ -180,7 +180,7 @@ export function RegisterForm({
 			>
 				{(error || state.error) && (
 					<div
-						className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-white"
+						className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-primary-foreground"
 						style={{ backgroundColor: "var(--color-danger)" }}
 					>
 						{error || state.error}

src/components/site-header.tsx

@@ -96,7 +96,7 @@ export async function SiteHeader() {
 					) : (
 						<div className="text-center">
 							<h1
-								className="font-black tracking-tight leading-none text-white"
+								className="font-black tracking-tight leading-none text-primary-foreground"
 								style={{
 									fontFamily: "var(--font-nunito)",
 									fontSize: "clamp(2rem, 7vw, 5.5rem)",
@@ -133,8 +133,8 @@ export async function SiteHeader() {
 					}}
 				>
 					<span className="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-						<span className="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-green-500" />
+						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+						<span className="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-primary" />
 					</span>
 					<span
 						className="text-xs sm:text-sm font-bold tracking-wide"

src/components/top-header.tsx

@@ -231,7 +231,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 					</form>
 					<Link
 						href="/messages"
-						className="relative flex items-center gap-1 rounded-lg px-1.5 sm:px-2 py-1.5 transition-colors hover:bg-white/10"
+						className="relative flex items-center gap-1 rounded-lg px-1.5 sm:px-2 py-1.5 transition-colors hover:bg-background/10"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -376,7 +376,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 											<Link
 												key={u.id}
 												href="/messages"
-												className="flex items-center gap-2 rounded-lg px-2 py-1 text-xs transition-colors hover:bg-white/10"
+												className="flex items-center gap-2 rounded-lg px-2 py-1 text-xs transition-colors hover:bg-background/10"
 											>
 												<UserAvatarThumbnail
 													figure={u.look}