feat: use panel-border-color for avatar ring and surface color for username panel

src/components/home/user-view.tsx

@@ -92,14 +92,14 @@ export default async function UserView({
 								href={`/u/${username}`}
 								className="transition-transform duration-300 hover:scale-105"
 							>
-								<div
-									className="rounded-full p-[3px]"
-									style={{
-										border: "3px solid var(--color-primary)",
-										boxShadow:
-											"0 0 24px color-mix(in srgb, var(--color-primary) 50%, transparent)",
-									}}
-								>
+							<div
+								className="rounded-full p-[3px]"
+								style={{
+									border: "3px solid var(--panel-border-color)",
+									boxShadow:
+										"0 0 24px color-mix(in srgb, var(--panel-border-color) 50%, transparent)",
+								}}
+							>
 									<Image
 										src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
 										alt={username}
@@ -113,16 +113,20 @@ export default async function UserView({
 							</Link>
 							<div className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
 								style={{
-									background: "linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 100%)",
+									background: "color-mix(in srgb, var(--color-surface) 88%, transparent)",
+									backdropFilter: "blur(8px)",
 								}}
 							>
 								<Link
 									href={`/u/${username}`}
-									className="text-2xl font-bold text-white drop-shadow-lg hover:underline"
+									className="text-2xl font-bold drop-shadow-lg hover:underline"
+									style={{ color: "var(--color-text)" }}
 								>
 									{username}
 								</Link>
-								<p className="text-sm text-white/90 drop-shadow-md max-w-[240px] leading-tight">
+								<p className="text-sm drop-shadow-md max-w-[240px] leading-tight"
+									style={{ color: "color-mix(in srgb, var(--color-text) 80%, transparent)" }}
+								>
 									{motto || "Welcome back!"}
 								</p>
 							</div>