feat: update global styles and layout with new font and theme support; enhance dashboard header with theme toggle

src/components/dashboard/header.tsx

@@ -1,13 +1,17 @@
 "use client";
 
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import type { DashboardData } from "@/lib/dashboard/types";
 
 export function DashboardHeader() {
   const [degraded, setDegraded] = useState(0);
   const [total, setTotal] = useState(0);
   const [time, setTime] = useState("");
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     const fetchStatus = async () => {
@@ -74,6 +78,15 @@ export function DashboardHeader() {
               ? `${degraded} degraded`
               : "All Systems Operational"}
         </Badge>
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          <Sun className="hidden dark:block!" />
+          <Moon className="block dark:hidden!" />
+        </Button>
         <span className="text-[10px] text-muted-foreground">{time}</span>
       </div>
     </header>

src/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className,
       )}
       {...props}