bugfix: the whole theming structure overhauled. light/dark mode icon added.

frontend/src/app/(public)/select-organization/page.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { Building2, Beaker } from 'lucide-react';
 
 export default function SelectOrganizationPage() {
   const { organizations, selectOrganization, isLoading } = useAuth();
-  const router = useRouter();
 
   // ✅ Auto-redirect if only one organization
   useEffect(() => {
@@ -18,13 +16,13 @@ export default function SelectOrganizationPage() {
 
   const getIcon = (type: string) => {
     return type === 'CLINIC'
-      ? <Building2 className="h-8 w-8" />
-      : <Beaker className="h-8 w-8" />;
+      ? <Building2 className="h-8 w-8 icon-flat" />
+      : <Beaker className="h-8 w-8 icon-flat" />;
   };
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen app-web-bg flex items-center justify-center">
         <p className="text-text-secondary">Loading organizations...</p>
       </div>
     );
@@ -32,17 +30,17 @@ export default function SelectOrganizationPage() {
 
   if (!organizations.length) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen app-web-bg flex items-center justify-center">
         <p className="text-text-secondary">No organizations found.</p>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-background-secondary flex items-center justify-center p-4">
+    <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
       <div className="max-w-2xl w-full">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-text-primary">
+          <h1 className="text-3xl font-semibold text-text-primary">
             Choose Organization
           </h1>
           <p className="text-text-secondary mt-2">
@@ -55,9 +53,9 @@ export default function SelectOrganizationPage() {
             <button
               key={org.id}
               onClick={() => selectOrganization(org.id)}
-              className="bg-white p-6 rounded-xl shadow-sm border border-border hover:border-primary-300 hover:shadow-md transition-all text-left flex items-center gap-4"
+              className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
             >
-              <div className="p-3 bg-primary-50 rounded-lg text-primary-600">
+              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
                 {getIcon(org.type)}
               </div>
 
@@ -70,7 +68,7 @@ export default function SelectOrganizationPage() {
                 </p>
               </div>
 
-              <div className="text-primary-600 text-sm">
+              <div className="text-primary text-sm">
                 Continue →
               </div>
             </button>