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/app/(authenticated)/settings/layout.tsx

@@ -54,10 +54,10 @@ export default function SettingsLayout({
     <div className="container mx-auto px-4 py-8">
       {/* Page Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+        <h1 className="text-3xl font-bold text-foreground">
           Settings
         </h1>
-        <p className="mt-2 text-gray-600 dark:text-gray-400">
+        <p className="mt-2 text-muted-foreground">
           Manage your account settings and preferences
         </p>
       </div>
@@ -79,7 +79,7 @@ export default function SettingsLayout({
         </TabsList>
 
         {/* Tab Content */}
-        <div className="rounded-lg border bg-white dark:bg-gray-900 p-6">
+        <div className="rounded-lg border bg-card text-card-foreground p-6">
           {children}
         </div>
       </Tabs>

frontend/src/app/(authenticated)/settings/password/page.tsx

@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function PasswordSettingsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Password Settings
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Change your password (Coming in Task 3.3)
       </p>
     </div>

frontend/src/app/(authenticated)/settings/preferences/page.tsx

@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function PreferencesPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Preferences
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Configure your preferences (Coming in Task 3.5)
       </p>
     </div>

frontend/src/app/(authenticated)/settings/profile/page.tsx

@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function ProfileSettingsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Profile Settings
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Manage your profile information (Coming in Task 3.2)
       </p>
     </div>

frontend/src/app/(authenticated)/settings/sessions/page.tsx

@@ -12,10 +12,10 @@ export const metadata: Metadata = {
 export default function SessionsPage() {
   return (
     <div>
-      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
+      <h2 className="text-2xl font-semibold text-foreground mb-4">
         Active Sessions
       </h2>
-      <p className="text-gray-600 dark:text-gray-400">
+      <p className="text-muted-foreground">
         Manage your active sessions (Coming in Task 3.4)
       </p>
     </div>