fix(web): drive auth modal dark via Clerk appearance variables

@clerk/ui ignores the legacy baseTheme preset for colors, so the card stayed
white. Set the dark palette through appearance.variables (colorBackground etc.)
plus element overrides so Clerk's native chrome renders fully dark, matching V1.

Author: iamjr15

apps/web/src/components/auth/clerk-auth-appearance.ts

@@ -1,16 +1,34 @@
 import { dark } from "@clerk/themes";
 
-// Exact parity with cheatcode V1's auth modal: Clerk's native dark theme with the card's own
-// border/shadow removed (the modal shell provides the surface). Keeping Clerk's default chrome
-// — header, social buttons, divider, fields, footer — so it looks and feels 100% native.
+// Dark auth modal matching cheatcode V1. V2 runs Clerk's new @clerk/ui theming, which ignores
+// the legacy `baseTheme` preset for colors — the palette is driven by `variables` (the original
+// light modal set colorBackground:#fff here). We keep `baseTheme: dark` as the base and set the
+// dark palette + a few element overrides so Clerk's native chrome renders fully dark and native.
 export const clerkAuthAppearance = {
   baseTheme: dark,
   elements: {
-    card: "shadow-none border-0",
-    developmentMode: "hidden",
-    rootBox: "mx-auto",
+    card: "!border-0 !bg-[#161616] !shadow-none",
+    cardBox: "!bg-[#161616] !shadow-none",
+    developmentMode: "!hidden",
+    footer: "!border-[#262626] !border-t !bg-[#121212]",
+    footerActionLink: "!text-[#f2f2f2] hover:!text-white",
+    footerActionText: "!text-[#9a9a9a]",
+    formButtonPrimary: "!bg-white !text-[#111111] hover:!bg-[#e6e6e6]",
+    formFieldInput: "!border-[#2f2f2f] !bg-[#1f1f1f] !text-[#ededed] placeholder:!text-[#6f6f6f]",
+    headerSubtitle: "!text-[#a1a1a1]",
+    headerTitle: "!text-[#f2f2f2]",
+    rootBox: "!mx-auto !w-full",
+    socialButtonsBlockButton: "!border-[#2f2f2f] !bg-[#1f1f1f] !text-[#ededed] hover:!bg-[#262626]",
   },
   variables: {
+    borderRadius: "10px",
+    colorBackground: "#161616",
+    colorInputBackground: "#1f1f1f",
+    colorInputText: "#ededed",
+    colorNeutral: "#ffffff",
+    colorPrimary: "#ffffff",
+    colorText: "#ededed",
+    colorTextSecondary: "#a1a1a1",
     fontFamily: "var(--font-geist-sans), Arial, sans-serif",
   },
 };