fix: use semantic colors across admin pages

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-[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)]" />,
+  7: <Crown className="h-4 w-4 text-[var(--admin-warning)]" />,
+  6: <ShieldCheck className="h-4 w-4 text-[var(--admin-error)]" />,
+  5: <Shield className="h-4 w-4 text-[var(--admin-info)]" />,
+  4: <UserCheck className="h-4 w-4 text-[var(--admin-success)]" />,
 }
 
 const RANK_COLORS: Record<number, string> = {
-  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)]',
+  7: 'border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]',
+  6: 'border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]',
+  5: 'border-[var(--admin-info-border)] bg-[var(--admin-info-subtle)]',
+  4: 'border-[var(--admin-success-border)] bg-[var(--admin-success-subtle)]',
 }
 
 export function PermissionsList({ ranks: initialRanks }: Props) {