diff --git a/src/app/globals.css b/src/app/globals.css
index 5f8f1811..d6c28eb2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -251,6 +251,17 @@ summary,
 		url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
 	background-blend-mode: overlay;
 }
+html.dark .site-bg {
+	background:
+		linear-gradient(
+			to bottom,
+			color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
+			rgba(0, 0, 0, 0.82)
+		),
+		url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
+	background-blend-mode: overlay;
+}
+
 
 .article-body {
 	line-height: 1.7;
@@ -326,8 +337,8 @@ a:hover {
 	margin-bottom: 1.5rem;
 }
 .card {
-	background: var(--color-navbar);
-	color: var(--color-navbar-text-readable, var(--color-navbar-text));
+	background: var(--color-surface);
+	color: var(--color-surface-text-readable, var(--color-text-readable));
 	border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
 	border-radius: var(--card-border-radius);
 	box-shadow: var(--shadow-card);
@@ -363,7 +374,7 @@ a:hover {
 	font-size: 14px;
 	cursor: pointer;
 	transition: all 0.18s ease;
-	background: #eef2f7;
+	background: color-mix(in srgb, var(--color-text-muted) 14%, var(--color-surface));
 	color: var(--color-text-readable, var(--color-text));
 	text-decoration: none;
 }
@@ -446,7 +457,7 @@ tbody tr:hover {
 }
 .avatar {
 	border-radius: var(--avatar-border-radius);
-	background: #f1f5f9;
+	background: var(--color-surface);
 	border: 2px solid var(--avatar-border-color);
 }
 .currency {
@@ -457,7 +468,7 @@ tbody tr:hover {
 	font-size: 0.85rem;
 	padding: 0.2rem 0.6rem 0.2rem 0.2rem;
 	border-radius: 999px;
-	background: #f8fafc;
+	background: var(--color-surface);
 	border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
 	color: var(--color-pill-text-readable, var(--color-text-readable));
 }
@@ -616,9 +627,9 @@ tbody tr:hover {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	background: var(--admin-surface);
-	color: var(--admin-text);
-	border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
+	background: var(--color-surface);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
+	border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
 	border-radius: var(--radius-lg);
 	box-shadow: var(--shadow-card);
 	overflow: hidden;
@@ -634,11 +645,11 @@ tbody tr:hover {
 	padding: 0.9rem 1.1rem;
 	background: linear-gradient(
 		135deg,
-		color-mix(in srgb, var(--admin-accent) 10%, var(--admin-surface)),
-		color-mix(in srgb, var(--admin-accent) 5%, var(--admin-surface))
+		color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
+		color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))
 	);
 	border-bottom: 1px solid
-		color-mix(in srgb, var(--admin-text-muted) 8%, transparent);
+		color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 8%, transparent);
 }
 .content-card-icon {
 	flex: none;
@@ -650,11 +661,11 @@ tbody tr:hover {
 	font-size: 1.25rem;
 	background: linear-gradient(
 		135deg,
-		color-mix(in srgb, var(--admin-accent) 22%, var(--admin-surface)),
-		color-mix(in srgb, var(--admin-accent) 12%, var(--admin-surface))
+		color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)),
+		color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))
 	);
 	box-shadow: inset 0 0 0 1px
-		color-mix(in srgb, var(--admin-accent) 30%, transparent);
+		color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .content-card-head-text {
 	min-width: 0;
@@ -665,12 +676,12 @@ tbody tr:hover {
 	font-weight: 700;
 	font-size: 1rem;
 	line-height: 1.3;
-	color: var(--admin-text);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
 }
 .content-card-subtitle {
 	margin: 0.15rem 0 0;
 	font-size: 0.78rem;
-	color: var(--admin-text-muted);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 }
 .content-card-action {
 	flex: none;
@@ -714,8 +725,8 @@ tbody tr:hover {
 	gap: 0.85rem;
 }
 .stat-block {
-	background: var(--admin-canvas);
-	border: 1px solid color-mix(in srgb, var(--admin-text-muted) 12%, transparent);
+	background: var(--color-background);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 12%, transparent);
 	border-radius: 12px;
 	padding: 0.85rem 1rem;
 	text-align: center;
@@ -724,12 +735,12 @@ tbody tr:hover {
 	font-size: 1.6rem;
 	font-weight: 800;
 	line-height: 1.1;
-	color: var(--admin-accent-text);
+	color: var(--color-primary-readable, var(--color-primary));
 }
 .stat-block-label {
 	margin-top: 0.2rem;
 	font-size: 0.78rem;
-	color: var(--admin-text-muted);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 }
 
 /* Empty states */
@@ -751,12 +762,12 @@ tbody tr:hover {
 	font-weight: 700;
 	padding: 0.1rem 0.55rem 0.1rem 0.45rem;
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
-	color: var(--admin-text-muted);
+	background: color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 }
 .online-badge.online {
-	background: color-mix(in srgb, var(--admin-success) 16%, transparent);
-	color: var(--admin-success);
+	background: color-mix(in srgb, var(--color-success) 16%, transparent);
+	color: var(--color-success);
 }
 .online-dot {
 	width: 8px;
@@ -765,9 +776,9 @@ tbody tr:hover {
 	background: currentColor;
 }
 .online-badge.online .online-dot {
-	background: var(--admin-success);
+	background: var(--color-success);
 	box-shadow: 0 0 0 3px
-		color-mix(in srgb, var(--admin-success) 22%, transparent);
+		color-mix(in srgb, var(--color-success) 22%, transparent);
 }
 
 /* Leaderboard rank chip */
@@ -780,12 +791,12 @@ tbody tr:hover {
 	border-radius: 999px;
 	font-weight: 800;
 	font-size: 0.95rem;
-	background: var(--admin-canvas);
-	border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
+	background: var(--color-background);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
 }
 .rank-badge.rank-1 {
-	background: color-mix(in srgb, var(--admin-warning) 20%, transparent);
-	border-color: var(--admin-warning);
+	background: color-mix(in srgb, var(--color-warning) 20%, transparent);
+	border-color: var(--color-warning);
 }
 .rank-badge.rank-2 {
 	background: color-mix(in srgb, #94a3b8 22%, transparent);
@@ -812,7 +823,7 @@ tbody tr:hover {
 	gap: 0.25rem;
 }
 .radio-sidebar-link:hover {
-	background: color-mix(in srgb, var(--admin-accent) 10%, transparent);
+	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
 	text-decoration: none;
 }
 @media (max-width: 48rem) {
@@ -827,7 +838,7 @@ tbody tr:hover {
 		gap: 0.25rem;
 		padding-bottom: 0.5rem;
 		border-bottom: 1px solid
-			color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
+			color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
 		overflow-x: auto;
 	}
 	.radio-sidebar-head {
@@ -858,7 +869,7 @@ tbody tr:hover {
 	appearance: none;
 	border: 0;
 	background: transparent;
-	color: var(--admin-accent-text);
+	color: var(--color-primary-readable, var(--color-primary));
 	cursor: pointer;
 	font: inherit;
 	font-size: 0.78rem;
@@ -871,11 +882,11 @@ tbody tr:hover {
 }
 .cms-info-trigger:hover,
 .cms-info-trigger:focus-visible {
-	color: var(--admin-accent-text);
+	color: var(--color-primary-readable, var(--color-primary));
 }
 .cms-info-trigger:focus-visible,
 .cms-info-close:focus-visible {
-	outline: 3px solid color-mix(in srgb, var(--admin-accent) 42%, transparent);
+	outline: 3px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
 	outline-offset: 3px;
 }
 .cms-info-backdrop {
@@ -892,17 +903,17 @@ tbody tr:hover {
 	position: relative;
 	width: min(440px, 100%);
 	border: 1px solid
-		color-mix(in srgb, var(--admin-accent) 30%, var(--admin-border));
+		color-mix(in srgb, var(--color-primary) 30%, color-mix(in srgb, var(--color-text-muted) 22%, transparent));
 	border-radius: 8px;
 	background:
 		linear-gradient(
 			135deg,
-			color-mix(in srgb, var(--admin-accent) 12%, transparent),
+			color-mix(in srgb, var(--color-primary) 12%, transparent),
 			transparent 42%
 		),
-		var(--admin-surface);
+		var(--color-surface);
 	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
-	color: var(--admin-text);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
 	padding: 1.25rem;
 }
 .cms-info-close {
@@ -913,20 +924,20 @@ tbody tr:hover {
 	width: 2rem;
 	height: 2rem;
 	place-items: center;
-	border: 1px solid color-mix(in srgb, var(--admin-text-muted) 18%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 18%, transparent);
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--admin-surface) 84%, transparent);
-	color: var(--admin-text-muted);
+	background: color-mix(in srgb, var(--color-surface) 84%, transparent);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 	cursor: pointer;
 	font-weight: 900;
 	line-height: 1;
 }
 .cms-info-close:hover {
-	color: var(--admin-text);
-	border-color: color-mix(in srgb, var(--admin-accent) 40%, transparent);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
+	border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
 }
 .cms-info-kicker {
-	color: var(--admin-accent-text);
+	color: var(--color-primary-readable, var(--color-primary));
 	font-size: 0.74rem;
 	font-weight: 900;
 	letter-spacing: 0;
@@ -942,17 +953,17 @@ tbody tr:hover {
 	display: inline-flex;
 	align-items: center;
 	margin-top: 0.65rem;
-	border: 1px solid color-mix(in srgb, var(--admin-accent) 34%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
 	border-radius: 999px;
-	background: color-mix(in srgb, var(--admin-accent) 14%, transparent);
-	color: var(--admin-text);
+	background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
 	font-size: 0.75rem;
 	font-weight: 900;
 	padding: 0.3rem 0.6rem;
 }
 .cms-info-copy {
 	margin: 0.9rem 0 0;
-	color: var(--admin-text-muted);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 	font-size: 0.92rem;
 	line-height: 1.55;
 }
@@ -963,20 +974,20 @@ tbody tr:hover {
 	margin: 1rem 0 0;
 }
 .cms-info-grid div {
-	border: 1px solid color-mix(in srgb, var(--admin-text-muted) 14%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted-readable, var(--color-text-muted)) 14%, transparent);
 	border-radius: 8px;
-	background: color-mix(in srgb, var(--admin-canvas) 68%, transparent);
+	background: color-mix(in srgb, var(--color-background) 68%, transparent);
 	padding: 0.7rem;
 }
 .cms-info-grid dt {
-	color: var(--admin-text-muted);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 	font-size: 0.68rem;
 	font-weight: 800;
 	text-transform: uppercase;
 }
 .cms-info-grid dd {
 	margin: 0.18rem 0 0;
-	color: var(--admin-text);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
 	font-size: 0.8rem;
 	font-weight: 900;
 	line-height: 1.25;
@@ -991,17 +1002,17 @@ tbody tr:hover {
 	align-items: center;
 	justify-content: space-between;
 	gap: 1rem;
-	border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
 	border-radius: 8px;
-	background: color-mix(in srgb, var(--admin-accent) 8%, transparent);
+	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
 	padding: 0.65rem 0.75rem;
 }
 .cms-info-credit span {
-	color: var(--admin-text);
+	color: var(--color-surface-text-readable, var(--color-text-readable, var(--color-text)));
 	font-weight: 900;
 }
 .cms-info-credit small {
-	color: var(--admin-text-muted);
+	color: var(--color-text-muted-readable, var(--color-text-muted));
 	font-size: 0.74rem;
 	font-weight: 700;
 	text-align: right;
@@ -1100,6 +1111,9 @@ tbody tr:hover {
    unaffected. This also covers Radix portals (Dialog/Select/Dropdown/
    Popover/Tooltip) which mount under <body>. */
 body:has([data-admin]) {
+	/* Full public→admin token remap so shadcn + body + leftover
+	   public utilities all inherit the admin palette with contrast. */
+	--color-background: var(--admin-canvas);
 	--color-foreground: var(--admin-text);
 	--color-card: var(--admin-surface);
 	--color-card-foreground: var(--admin-text);
@@ -1127,6 +1141,17 @@ body:has([data-admin]) {
 	--color-border: var(--admin-border);
 	--color-input: var(--admin-border);
 	--color-ring: var(--admin-accent);
+	/* Public Atom tokens still referenced by body / .muted / inputs */
+	--color-text: var(--admin-text);
+	--color-text-readable: var(--admin-text);
+	--color-text-muted: var(--admin-text-muted);
+	--color-text-muted-readable: var(--admin-text-muted);
+	--color-surface: var(--admin-surface);
+	--color-surface-text-readable: var(--admin-text);
+	--color-dropdown: var(--admin-surface);
+	--color-dropdown-text-readable: var(--admin-text);
+	color: var(--admin-text);
+	background-color: var(--admin-canvas);
 }
 
 /* ── Details/summary open states for nav ──────────────────── */
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8f484d60..c1eeccd7 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
 				destructive:
 					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
 				outline:
-					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+					"border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
 				secondary:
 					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				ghost: