fix: use semantic colors across admin pages

src/app/admin/vpn/page.tsx

@@ -29,12 +29,12 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
   return (
     <main>
       <div className="flex items-center gap-3 mb-6">
-        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
-          <ShieldBan size={20} className="text-[var(--color-primary)]" />
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
+          <ShieldBan size={20} className="text-[var(--admin-accent)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
+          <h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("title")}</h1>
+          <p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
             {t.rich("subtitle", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
           </p>
         </div>
@@ -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-[var(--color-success-subtle)] text-[var(--color-text)]">
+          <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
             {t("settingsSaved")}
           </p>
         ) : null}