# src/app/page.tsx
import Link from "next/link";

export default function Home() {
  return (
    <div className="my-6 px-4 max-w-md mx-auto">
      <div className="text-center space-y-6">
        <h1 className="text-3xl font-bold">Welcome to our App</h1>
        <Link href="/auth/login" className="p-3 border-1 rounded-xl hover:bg-amber-50 dark:hover:bg-amber-600">Sign In / Sign Up</Link>
      </div>
    </div>
  );
}

# src/app/globals.css
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

when hovering over the link, the background color stays at amber-600, regardless of if prefers-color-scheme is set to dark or light. why is this, and how is it done correctly?