Update semantic color tokens across components for improved consistency

- Refactor `text-*` and `bg-*` classes to use semantic color tokens such as `foreground`, `muted-foreground`, `card`, and `accent`.
- Adjust `Header`, `Footer`, and settings pages to align with the OKLCH-based design system.
- Ensure visual consistency and accessibility for both light and dark themes.

frontend/src/components/layout/Footer.tsx

@@ -11,16 +11,16 @@ export function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="border-t bg-gray-50 dark:bg-gray-900/50">
+    <footer className="border-t bg-muted/30">
       <div className="container mx-auto px-4 py-6">
         <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
-          <div className="text-center text-sm text-gray-600 dark:text-gray-400 md:text-left">
+          <div className="text-center text-sm text-muted-foreground md:text-left">
             © {currentYear} FastNext Template. All rights reserved.
           </div>
           <div className="flex space-x-6">
             <Link
               href="/settings/profile"
-              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               Settings
             </Link>
@@ -28,7 +28,7 @@ export function Footer() {
               href="https://github.com/yourusername/fastnext-stack"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
               GitHub
             </a>