integração de acessibilidade v1

app/cadastro/page.tsx

@@ -5,15 +5,15 @@ import { Calendar, Clock, User, Shield, Stethoscope, Receipt, IdCard  } from "lu
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen bg-[#F2F2F2]">
+    <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-16">
         <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">Central de Operações <br>
+          <h1 className="text-4xl font-bold text-foreground mb-4">Central de Operações <br>
           </br>
           MedConnect
 
           </h1>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
             Gerencie suas consultas médicas de forma simples e eficiente
           </p>
         </div>
@@ -21,21 +21,21 @@ export default function HomePage() {
         <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
           <Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
             <CardHeader className="text-center flex-shrink-0">
-              <User className="w-12 h-12 text-black-600 mx-auto mb-4" />
+              <User className="w-12 h-12 text-blue-600 mx-auto mb-4" />
               <CardTitle>Área do Paciente</CardTitle>
               <CardDescription>Tenha o controle total da sua saúde: agende, consulte o histórico e informações pessoais</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4 flex-grow flex flex-col">
               <div className="space-y-3 flex-grow">
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
                   <span>Agendar consultas</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Clock className="w-4 h-4" />
                   <span>Ver histórico de consultas</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Gerenciar dados pessoais</span>
                 </div>
@@ -54,21 +54,21 @@ export default function HomePage() {
             </CardHeader>
             <CardContent className="space-y-4 flex-grow flex flex-col">
               <div className="space-y-3 flex-grow">
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
                   <span>Gerenciar consultas</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Cadastrar pacientes</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Clock className="w-4 h-4" />
                   <span>Controlar agenda</span>
                 </div>
               </div>
               <Link href="/secretary/login" className="block mt-auto">
-                <Button className="w-full bg-purple-600 hover:bg-purple-700">Entrar como Secretária</Button>
+                <Button className="w-full bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white">Entrar como Secretária</Button>
               </Link>
             </CardContent>
           </Card>
@@ -81,21 +81,21 @@ export default function HomePage() {
             </CardHeader>
             <CardContent className="space-y-4 flex-grow flex flex-col">
               <div className="space-y-3 flex-grow">
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
                   <span>Gerenciar agenda</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Ver pacientes</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Clock className="w-4 h-4" />
                   <span>Histórico de atendimentos</span>
                 </div>
               </div>
               <Link href="/doctor/login" className="block mt-auto">
-                <Button className="w-full bg-green-600 hover:bg-green-700">Entrar como Médico</Button>
+                <Button className="w-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white">Entrar como Médico</Button>
               </Link>
             </CardContent>
           </Card>
@@ -108,21 +108,21 @@ export default function HomePage() {
             </CardHeader>
             <CardContent className="space-y-4 flex-grow flex flex-col">
               <div className="space-y-3 flex-grow">
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
                   <span>Relatórios gerenciais</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Configurações do sistema</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Clock className="w-4 h-4" />
                   <span>Gestão de usuários</span>
                 </div>
               </div>
               <Link href="/manager/login" className="block mt-auto">
-                <Button className="w-full bg-blue-600 hover:bg-blue-700">Entrar como Gestor</Button>
+                <Button className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white">Entrar como Gestor</Button>
               </Link>
             </CardContent>
           </Card>
@@ -135,21 +135,21 @@ export default function HomePage() {
             </CardHeader>
             <CardContent className="space-y-4 flex-grow flex flex-col">
               <div className="space-y-3 flex-grow">
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Calendar className="w-4 h-4" />
                   <span>Relatórios financeiros</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <User className="w-4 h-4" />
                   <span>Faturamento</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-gray-600">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                   <Clock className="w-4 h-4" />
                   <span>Controle de pagamentos</span>
                 </div>
               </div>
               <Link href="finance/login" className="block mt-auto">
-                <Button className="w-full bg-orange-600 hover:bg-orange-700">Entrar como Financeiro</Button>
+                <Button className="w-full bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white">Entrar como Financeiro</Button>
               </Link>
             </CardContent>
           </Card>

app/context/AccessibilityContext.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+type Contrast = 'normal' | 'high';
+
+interface AccessibilityContextProps {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  contrast: Contrast;
+  setContrast: (contrast: Contrast) => void;
+  fontSize: number;
+  increaseFontSize: () => void;
+  decreaseFontSize: () => void;
+  resetFontSize: () => void;
+}
+
+const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
+
+export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'light';
+    return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
+  });
+  const [contrast, setContrastState] = useState<Contrast>(() => {
+    if (typeof window === 'undefined') return 'normal';
+    return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
+  });
+  const [fontSize, setFontSize] = useState<number>(() => {
+    if (typeof window === 'undefined') return 16;
+    const storedSize = localStorage.getItem('accessibility-font-size');
+    return storedSize ? parseFloat(storedSize) : 16;
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    
+    // Theme
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+    localStorage.setItem('accessibility-theme', theme);
+
+    // Contrast
+    root.classList.remove('normal-contrast', 'high-contrast');
+    root.classList.add(contrast === 'high' ? 'high-contrast' : 'normal-contrast');
+    localStorage.setItem('accessibility-contrast', contrast);
+
+    // Font Size
+    root.style.fontSize = `${fontSize}px`;
+    localStorage.setItem('accessibility-font-size', fontSize.toString());
+
+  }, [theme, contrast, fontSize]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  const setContrast = (newContrast: Contrast) => {
+    setContrastState(newContrast);
+  };
+
+  const increaseFontSize = () => {
+    setFontSize(prev => Math.min(prev + 2, 24)); // Cap at 24px
+  };
+
+  const decreaseFontSize = () => {
+    setFontSize(prev => Math.max(prev - 2, 12)); // Cap at 12px
+  };
+
+  const resetFontSize = () => {
+    setFontSize(16);
+  };
+
+  return (
+    <AccessibilityContext.Provider
+      value={{
+        theme,
+        setTheme,
+        contrast,
+        setContrast,
+        fontSize,
+        increaseFontSize,
+        decreaseFontSize,
+        resetFontSize,
+      }}
+    >
+      {children}
+    </AccessibilityContext.Provider>
+  );
+};
+
+export const useAccessibility = () => {
+  const context = useContext(AccessibilityContext);
+  if (context === undefined) {
+    throw new Error('useAccessibility must be used within an AccessibilityProvider');
+  }
+  return context;
+};

app/doctor/login/page.tsx

@@ -65,57 +65,57 @@ export default function DoctorLogin() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
         <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-            <Stethoscope className="w-8 h-8 text-green-600" />
+          <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+            <Stethoscope className="w-8 h-8 text-green-600 dark:text-green-400" />
           </div>
           <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
+            <CardTitle className="text-2xl font-bold text-foreground">Área do Médico</CardTitle>
+            <CardDescription className="text-muted-foreground mt-2">Acesse o sistema médico</CardDescription>
           </div>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="email" className="text-sm font-medium text-foreground">
                 E-mail
               </Label>
               <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="email"
                   type="email"
                   placeholder="dr.medico@clinica.com"
                   value={form.email}
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
+                  className="pl-10 h-11 border-border focus:border-green-500 focus:ring-green-500"
                   required
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="password" className="text-sm font-medium text-foreground">
                 Senha
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="password"
                   type={showPassword ? "text" : "password"}
                   placeholder="Digite sua senha"
                   value={form.password}
                   onChange={(e) => setForm({ ...form, password: e.target.value })}
-                  className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
+                  className="pl-10 pr-10 h-11 border-border focus:border-green-500 focus:ring-green-500"
                   required
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
                   {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                 </button>
@@ -124,7 +124,7 @@ export default function DoctorLogin() {
 
             <Button
               type="submit"
-              className="w-full h-11 bg-green-600 hover:bg-green-700 text-white font-medium"
+              className="w-full h-11 bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white"
               disabled={isLoading}
             >
               {isLoading ? (
@@ -140,13 +140,13 @@ export default function DoctorLogin() {
 
           <div className="relative">
             <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
+            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
               ou
             </span>
           </div>
 
           <div className="text-center">
-            <Link href="/" className="text-sm text-green-600 hover:text-green-700 font-medium hover:underline">
+            <Link href="/" className="text-sm text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-500 font-medium hover:underline">
               Voltar à página inicial
             </Link>
           </div>

app/doctor/medicos/page.tsx

@@ -109,28 +109,28 @@ export default function PacientesPage() {
     <DoctorLayout>
       <div className="space-y-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
-          <p className="text-gray-600">Lista de pacientes vinculados</p>
+          <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
+          <p className="text-muted-foreground">Lista de pacientes vinculados</p>
         </div>
 
-        <div className="bg-white rounded-lg border border-gray-200">
+        <div className="bg-card rounded-lg border border-border">
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-gray-50 border-b border-gray-200">
+              <thead className="bg-muted border-b border-border">
                 <tr>
-                  <th className="text-left p-4 font-medium text-gray-700">Nome</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Telefone</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Cidade</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Estado</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
-                  <th className="text-left p-4 font-medium text-gray-700">Ações</th>
+                  <th className="text-left p-4 font-medium text-foreground">Nome</th>
+                  <th className="text-left p-4 font-medium text-foreground">Telefone</th>
+                  <th className="text-left p-4 font-medium text-foreground">Cidade</th>
+                  <th className="text-left p-4 font-medium text-foreground">Estado</th>
+                  <th className="text-left p-4 font-medium text-foreground">Último atendimento</th>
+                  <th className="text-left p-4 font-medium text-foreground">Próximo atendimento</th>
+                  <th className="text-left p-4 font-medium text-foreground">Ações</th>
                 </tr>
               </thead>
               <tbody>
                 {loading ? (
                   <tr>
-                    <td colSpan={7} className="p-6 text-gray-600">
+                    <td colSpan={7} className="p-6 text-muted-foreground">
                       Carregando pacientes...
                     </td>
                   </tr>
@@ -140,23 +140,23 @@ export default function PacientesPage() {
                   </tr>
                 ) : pacientes.length === 0 ? (
                   <tr>
-                    <td colSpan={7} className="p-8 text-center text-gray-500">
+                    <td colSpan={7} className="p-8 text-center text-muted-foreground">
                       Nenhum paciente encontrado
                     </td>
                   </tr>
                 ) : (
                   currentItems.map((p) => (
-                    <tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
+                    <tr key={p.id} className="border-b border-border hover:bg-accent">
                       <td className="p-4">{p.nome}</td>
-                      <td className="p-4 text-gray-600">{p.telefone}</td>
-                      <td className="p-4 text-gray-600">{p.cidade}</td>
-                      <td className="p-4 text-gray-600">{p.estado}</td>
-                      <td className="p-4 text-gray-600">{p.ultimoAtendimento}</td>
-                      <td className="p-4 text-gray-600">{p.proximoAtendimento}</td>
+                      <td className="p-4 text-muted-foreground">{p.telefone}</td>
+                      <td className="p-4 text-muted-foreground">{p.cidade}</td>
+                      <td className="p-4 text-muted-foreground">{p.estado}</td>
+                      <td className="p-4 text-muted-foreground">{p.ultimoAtendimento}</td>
+                      <td className="p-4 text-muted-foreground">{p.proximoAtendimento}</td>
                       <td className="p-4">
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <button className="text-blue-600 hover:underline">Ações</button>
+                            <button className="text-primary hover:underline">Ações</button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
                             <DropdownMenuItem onClick={() => handleOpenModal(p)}>
@@ -192,12 +192,12 @@ export default function PacientesPage() {
               </tbody>
             </table>
           </div>
-          <div className="flex justify-center space-x-2 mt-4">
+          <div className="flex justify-center space-x-2 mt-4 p-4">
             {Array.from({ length: Math.ceil(pacientes.length / itemsPerPage) }, (_, i) => (
               <button
                 key={i}
                 onClick={() => paginate(i + 1)}
-                className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
+                className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
               >
                 {i + 1}
               </button>

app/finance/login/page.tsx

@@ -63,57 +63,57 @@ export default function DoctorLogin() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
         <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-orange-200 rounded-full flex items-center justify-center">
-            <Receipt className="w-8 h-8 text-orange-600" />
+          <div className="mx-auto w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
+            <Receipt className="w-8 h-8 text-orange-600 dark:text-orange-400" />
           </div>
           <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
+            <CardTitle className="text-2xl font-bold text-foreground">Área Financeira</CardTitle>
+            <CardDescription className="text-muted-foreground mt-2">Acesse o sistema financeiro</CardDescription>
           </div>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="email" className="text-sm font-medium text-foreground">
                 E-mail
               </Label>
               <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="email"
                   type="email"
-                  placeholder="dr.medico@clinica.com"
+                  placeholder="financeiro@clinica.com"
                   value={form.email}
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
+                  className="pl-10 h-11 border-border focus:border-orange-500 focus:ring-orange-500"
                   required
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="password" className="text-sm font-medium text-foreground">
                 Senha
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="password"
                   type={showPassword ? "text" : "password"}
                   placeholder="Digite sua senha"
                   value={form.password}
                   onChange={(e) => setForm({ ...form, password: e.target.value })}
-                  className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
+                  className="pl-10 pr-10 h-11 border-border focus:border-orange-500 focus:ring-orange-500"
                   required
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
                   {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                 </button>
@@ -122,7 +122,7 @@ export default function DoctorLogin() {
 
             <Button
               type="submit"
-              className="w-full h-11 bg-orange-600 hover:bg-orange-700 text-white font-medium"
+              className="w-full h-11 bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white"
               disabled={isLoading}
             >
               {isLoading ? (
@@ -138,13 +138,13 @@ export default function DoctorLogin() {
 
           <div className="relative">
             <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
+            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
               ou
             </span>
           </div>
 
           <div className="text-center">
-            <Link href="/" className="text-sm text-orange-600 hover:text-orange-700 font-medium hover:underline">
+            <Link href="/" className="text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-500 font-medium hover:underline">
               Voltar à página inicial
             </Link>
           </div>

app/globals.css

@@ -74,6 +74,36 @@
   --sidebar-ring: oklch(0.439 0 0);
 }
 
+.high-contrast {
+    --background: oklch(0 0 0);
+    --foreground: oklch(1 0.5 100);
+    --card: oklch(0 0 0);
+    --card-foreground: oklch(1 0.5 100);
+    --popover: oklch(0 0 0);
+    --popover-foreground: oklch(1 0.5 100);
+    --primary: oklch(1 0.5 100);
+    --primary-foreground: oklch(0 0 0);
+    --secondary: oklch(0 0 0);
+    --secondary-foreground: oklch(1 0.5 100);
+    --muted: oklch(0 0 0);
+    --muted-foreground: oklch(1 0.5 100);
+    --accent: oklch(0 0 0);
+    --accent-foreground: oklch(1 0.5 100);
+    --destructive: oklch(0.5 0.3 30);
+    --destructive-foreground: oklch(0 0 0);
+    --border: oklch(1 0.5 100);
+    --input: oklch(0 0 0);
+    --ring: oklch(1 0.5 100);
+    --sidebar: oklch(0 0 0);
+    --sidebar-foreground: oklch(1 0.5 100);
+    --sidebar-primary: oklch(1 0.5 100);
+    --sidebar-primary-foreground: oklch(0 0 0);
+    --sidebar-accent: oklch(0 0 0);
+    --sidebar-accent-foreground: oklch(1 0.5 100);
+    --sidebar-border: oklch(1 0.5 100);
+    --sidebar-ring: oklch(1 0.5 100);
+}
+
 @theme inline {
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
@@ -121,5 +151,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    transition: background-color 0.3s, color 0.3s;
   }
 }

app/layout.tsx

@@ -3,8 +3,10 @@ import { GeistSans } from 'geist/font/sans'
 import { GeistMono } from 'geist/font/mono'
 import { Analytics } from '@vercel/analytics/next'
 import './globals.css'
-// [PASSO 1.2] - Importando o nosso provider
 import { AppointmentsProvider } from './context/AppointmentsContext'
+import { AccessibilityProvider } from './context/AccessibilityContext'
+import { AccessibilityModal } from '@/components/accessibility-modal'
+import { ThemeInitializer } from '@/components/theme-initializer'
 
 export const metadata: Metadata = {
   title: 'Clinic App',
@@ -18,12 +20,15 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
-        {/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
-        <AppointmentsProvider>
-          {children}
-        </AppointmentsProvider>
+        <ThemeInitializer />
+        <AccessibilityProvider>
+          <AppointmentsProvider>
+            {children}
+          </AppointmentsProvider>
+          <AccessibilityModal />
+        </AccessibilityProvider>
         <Analytics />
       </body>
     </html>

app/manager/login/page.tsx

@@ -62,57 +62,57 @@ export default function ManagerLogin() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
         <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-            <IdCard className="w-8 h-8 text-blue-600" />
+          <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
+            <IdCard className="w-8 h-8 text-blue-600 dark:text-blue-400" />
           </div>
           <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área do Gestor</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
+            <CardTitle className="text-2xl font-bold text-foreground">Área do Gestor</CardTitle>
+            <CardDescription className="text-muted-foreground mt-2">Acesse o sistema de gerenciamento</CardDescription>
           </div>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="email" className="text-sm font-medium text-foreground">
                 E-mail
               </Label>
               <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="email"
                   type="email"
                   placeholder="gestor@clinica.com"
                   value={form.email}
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
+                  className="pl-10 h-11 border-border focus:border-blue-500 focus:ring-blue-500"
                   required
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="password" className="text-sm font-medium text-foreground">
                 Senha
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="password"
                   type={showPassword ? "text" : "password"}
                   placeholder="Digite sua senha"
                   value={form.password}
                   onChange={(e) => setForm({ ...form, password: e.target.value })}
-                  className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
+                  className="pl-10 pr-10 h-11 border-border focus:border-blue-500 focus:ring-blue-500"
                   required
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
                   {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                 </button>
@@ -121,7 +121,7 @@ export default function ManagerLogin() {
 
             <Button
               type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
+              className="w-full h-11 bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white"
               disabled={isLoading}
             >
               {isLoading ? (
@@ -137,13 +137,13 @@ export default function ManagerLogin() {
 
           <div className="relative">
             <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
+            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
               ou
             </span>
           </div>
 
           <div className="text-center">
-            <Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
+            <Link href="/" className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium hover:underline">
               Voltar à página inicial
             </Link>
           </div>

app/page.tsx

@@ -6,29 +6,29 @@ import { Button } from "@/components/ui/button"
 
 export default function InicialPage() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col bg-background">
       {}
-      <div className="bg-black text-white text-sm py-2 px-6 flex justify-between">
+      <div className="bg-primary text-primary-foreground text-sm py-2 px-6 flex justify-between">
         <span> Horário: 08h00 - 21h00</span>
         <span> Email: contato@medconnect.com</span>
       </div>
 
       {}
-      <header className="bg-white shadow-md py-4 px-6 flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-blue-700">MedConnect</h1>
-        <nav className="flex space-x-6 text-gray-700 font-medium">
-          <a href="#home" className="hover:text-blue-600">Home</a>
-          <a href="#about" className="hover:text-blue-600">Sobre</a>
-          <a href="#departments" className="hover:text-blue-600">Departamentos</a>
-          <a href="#doctors" className="hover:text-blue-600">Médicos</a>
-          <a href="#contact" className="hover:text-blue-600">Contato</a>
+      <header className="bg-card shadow-md py-4 px-6 flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-primary">MedConnect</h1>
+        <nav className="flex space-x-6 text-muted-foreground font-medium">
+          <a href="#home" className="hover:text-primary">Home</a>
+          <a href="#about" className="hover:text-primary">Sobre</a>
+          <a href="#departments" className="hover:text-primary">Departamentos</a>
+          <a href="#doctors" className="hover:text-primary">Médicos</a>
+          <a href="#contact" className="hover:text-primary">Contato</a>
         </nav>
        <div className="flex space-x-4">
   {}
   <Link href="/cadastro">
     <Button
     variant="outline"
-    className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition cursor-pointer"
+    className="rounded-full px-6 py-2 border-2 transition cursor-pointer"
   >
     Login
   </Button>
@@ -38,22 +38,21 @@ export default function InicialPage() {
       </header>
 
       {}
-      <section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-gray-100">
+      <section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-background">
         <div className="max-w-lg">
-          <h2 className="text-gray-600 uppercase text-sm">Bem-vindo à Saúde Digital</h2>
-          <h1 className="text-4xl font-extrabold text-black leading-tight mt-2">
+          <h2 className="text-muted-foreground uppercase text-sm">Bem-vindo à Saúde Digital</h2>
+          <h1 className="text-4xl font-extrabold text-foreground leading-tight mt-2">
             Soluções Médicas <br /> & Cuidados com a Saúde
           </h1>
-          <p className="text-gray-600 mt-4">
+          <p className="text-muted-foreground mt-4">
             Excelência em saúde há mais de 25 anos. Atendimento médicio com qualidade,segurança e carinho.
           </p>
           <div className="mt-6 flex space-x-4">
-            <Button className="rounded-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-lg transition">
+            <Button>
               Nossos Serviços
             </Button>
             <Button
-              variant="outline"
-              className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition"
+              variant="secondary"
             >
               Saiba Mais
             </Button>
@@ -69,35 +68,35 @@ export default function InicialPage() {
       </section>
 
       {}
-      <section className="py-16 px-10 md:px-20 bg-white">
-        <h2 className="text-center text-3xl font-bold text-black">Cuidados completos para a sua saúde</h2>
-        <p className="text-center text-gray-600 mt-2">Serviços médicos que oferecemos</p>
+      <section className="py-16 px-10 md:px-20 bg-card">
+        <h2 className="text-center text-3xl font-bold text-foreground">Cuidados completos para a sua saúde</h2>
+        <p className="text-center text-muted-foreground mt-2">Serviços médicos que oferecemos</p>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Clínica Geral</h3>
-            <p className="text-gray-600 mt-2">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+            <h3 className="text-xl font-semibold text-primary">Clínica Geral</h3>
+            <p className="text-muted-foreground mt-2">
               Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Pediatria</h3>
-            <p className="text-gray-600 mt-2">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+            <h3 className="text-xl font-semibold text-primary">Pediatria</h3>
+            <p className="text-muted-foreground mt-2">
               Cuidado gentil e especializado para garantir a saúde e o desenvolvimeto de crianças e adolescentes.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
-          <div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
-            <h3 className="text-xl font-semibold text-blue-600">Exames</h3>
-            <p className="text-gray-600 mt-2">
+          <div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
+            <h3 className="text-xl font-semibold text-primary">Exames</h3>
+            <p className="text-muted-foreground mt-2">
               Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.
             </p>
-            <Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
+            <Button className="mt-4">
               Agendar
             </Button>
           </div>
@@ -105,7 +104,7 @@ export default function InicialPage() {
       </section>
 
       {}
-      <footer className="bg-black text-white py-6 text-center">
+      <footer className="bg-primary text-primary-foreground py-6 text-center">
         <p>© 2025 MedConnect</p>
       </footer>
     </div>

app/patient/login/page.tsx

@@ -44,25 +44,25 @@ export default function PatientLogin() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
       <div className="w-full max-w-md">
         <div className="mb-8">
           <Link
             href="/"
-            className="inline-flex items-center text-slate-600 hover:text-blue-600 transition-colors duration-200 font-medium"
+            className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
           >
             <ArrowLeft className="w-4 h-4 mr-2" />
             Voltar ao início
           </Link>
         </div>
 
-        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+        <Card className="shadow-xl border-0 bg-card/80 backdrop-blur-sm">
           <CardHeader className="text-center pb-8">
-            <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
-              <Stethoscope className="w-8 h-8 text-blue-600" />
+            <div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4">
+              <Stethoscope className="w-8 h-8 text-blue-600 dark:text-blue-400" />
             </div>
-            <CardTitle className="text-3xl font-bold text-slate-800 mb-2">Área do Paciente</CardTitle>
-            <CardDescription className="text-slate-600 text-base">
+            <CardTitle className="text-3xl font-bold text-foreground mb-2">Área do Paciente</CardTitle>
+            <CardDescription className="text-muted-foreground text-base">
               Acesse sua conta para gerenciar consultas e laudos
             </CardDescription>
           </CardHeader>
@@ -70,49 +70,49 @@ export default function PatientLogin() {
           <CardContent className="px-8 pb-8">
             <form onSubmit={handleLogin} className="space-y-6">
               <div className="space-y-2">
-                <Label htmlFor="email" className="text-slate-700 font-medium">
+                <Label htmlFor="email" className="text-foreground font-medium">
                   Email
                 </Label>
                 <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
                   <Input
                     id="email"
                     type="email"
                     placeholder="seu@email.com"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="pl-11 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
+                    className="pl-11 h-12 border-border focus:border-blue-500 focus:ring-blue-500"
                     required
                   />
                 </div>
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor="password" className="text-slate-700 font-medium">
+                <Label htmlFor="password" className="text-foreground font-medium">
                   Senha
                 </Label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
                   <Input
                     id="password"
                     type={showPassword ? "text" : "password"}
                     placeholder="Sua senha"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="pl-11 pr-12 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
+                    className="pl-11 pr-12 h-12 border-border focus:border-blue-500 focus:ring-blue-500"
                     required
                   />
                   <Button
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-slate-100"
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-accent"
                     onClick={() => setShowPassword(!showPassword)}
                   >
                     {showPassword ? (
-                      <EyeOff className="h-4 w-4 text-slate-400" />
+                      <EyeOff className="h-4 w-4 text-muted-foreground" />
                     ) : (
-                      <Eye className="h-4 w-4 text-slate-400" />
+                      <Eye className="h-4 w-4 text-muted-foreground" />
                     )}
                   </Button>
                 </div>
@@ -120,7 +120,7 @@ export default function PatientLogin() {
 
               <Button
                 type="submit"
-                className="w-full h-12 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
+                className="w-full h-12 bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
                 disabled={isLoading}
               >
                 {isLoading ? (
@@ -137,16 +137,16 @@ export default function PatientLogin() {
             <div className="mt-8 text-center">
               <div className="relative">
                 <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-slate-200"></div>
+                  <div className="w-full border-t border-border"></div>
                 </div>
                 <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
+                  <span className="px-4 bg-card text-muted-foreground">Novo por aqui?</span>
                 </div>
               </div>
               <div className="mt-4">
                 <Link
                   href="/patient/register"
-                  className="inline-flex items-center justify-center w-full h-12 border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium"
+                  className="inline-flex items-center justify-center w-full h-12 border border-border rounded-lg text-foreground hover:bg-accent transition-colors duration-200 font-medium"
                 >
                   Criar nova conta
                 </Link>
@@ -156,7 +156,7 @@ export default function PatientLogin() {
         </Card>
 
         <div className="mt-8 text-center">
-          <p className="text-sm text-slate-500">Problemas para acessar? Entre em contato conosco</p>
+          <p className="text-sm text-muted-foreground">Problemas para acessar? Entre em contato conosco</p>
         </div>
       </div>
     </div>

app/secretary/login/page.tsx

@@ -65,57 +65,57 @@ export default function SecretaryLogin() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
-      <Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
         <CardHeader className="text-center space-y-4 pb-8">
-          <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
-            <UserCheck className="w-8 h-8 text-blue-600" />
+          <div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
+            <UserCheck className="w-8 h-8 text-purple-600 dark:text-purple-400" />
           </div>
           <div>
-            <CardTitle className="text-2xl font-bold text-gray-900">Área da Secretária</CardTitle>
-            <CardDescription className="text-gray-600 mt-2">Acesse o sistema de gerenciamento</CardDescription>
+            <CardTitle className="text-2xl font-bold text-foreground">Área da Secretária</CardTitle>
+            <CardDescription className="text-muted-foreground mt-2">Acesse o sistema de gerenciamento</CardDescription>
           </div>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <form onSubmit={handleSubmit} className="space-y-5">
             <div className="space-y-2">
-              <Label htmlFor="email" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="email" className="text-sm font-medium text-foreground">
                 E-mail
               </Label>
               <div className="relative">
-                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="email"
                   type="email"
                   placeholder="seu.email@clinica.com"
                   value={form.email}
                   onChange={(e) => setForm({ ...form, email: e.target.value })}
-                  className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
+                  className="pl-10 h-11 border-border focus:border-purple-500 focus:ring-purple-500"
                   required
                 />
               </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="password" className="text-sm font-medium text-gray-700">
+              <Label htmlFor="password" className="text-sm font-medium text-foreground">
                 Senha
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   id="password"
                   type={showPassword ? "text" : "password"}
                   placeholder="Digite sua senha"
                   value={form.password}
                   onChange={(e) => setForm({ ...form, password: e.target.value })}
-                  className="pl-10 pr-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
+                  className="pl-10 pr-10 h-11 border-border focus:border-purple-500 focus:ring-purple-500"
                   required
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
                   {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                 </button>
@@ -124,7 +124,7 @@ export default function SecretaryLogin() {
 
             <Button
               type="submit"
-              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
+              className="w-full h-11 bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white"
               disabled={isLoading}
             >
               {isLoading ? (
@@ -140,13 +140,13 @@ export default function SecretaryLogin() {
 
           <div className="relative">
             <Separator className="my-6" />
-            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
+            <span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
               ou
             </span>
           </div>
 
           <div className="text-center">
-            <Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
+            <Link href="/" className="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 font-medium hover:underline">
               Voltar à página inicial
             </Link>
           </div>

app/secretary/pacientes/page.tsx

@@ -126,12 +126,12 @@ export default function PacientesPage() {
             <div className="space-y-6">
                 <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                     <div>
-                        <h1 className="text-xl md:text-2xl font-bold text-gray-900">Pacientes</h1>
-                        <p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
+                        <h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
+                        <p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
                     </div>
                     <div className="flex gap-2">
                         <Link href="/secretary/pacientes/novo">
-                            <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
+                            <Button className="w-full md:w-auto">
                                 <Plus className="w-4 h-4 mr-2" />
                                 Adicionar
                             </Button>
@@ -139,10 +139,10 @@ export default function PacientesPage() {
                     </div>
                 </div>
 
-                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
+                <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
                     {/* Convênio */}
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">Convênio</span>
+                        <span className="text-sm font-medium text-foreground">Convênio</span>
                         <Select value={convenioFilter} onValueChange={setConvenioFilter}>
                             <SelectTrigger className="w-full md:w-40">
                                 <SelectValue placeholder="Selecione o Convênio" />
@@ -157,7 +157,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">VIP</span>
+                        <span className="text-sm font-medium text-foreground">VIP</span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
                             <SelectTrigger className="w-full md:w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -170,7 +170,7 @@ export default function PacientesPage() {
                         </Select>
                     </div>
                     <div className="flex items-center gap-2 w-full md:w-auto">
-                        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
                         <Select>
                             <SelectTrigger className="w-full md:w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -184,7 +184,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-gray-700">VIP</span>
+                        <span className="text-sm font-medium text-foreground">VIP</span>
                         <Select value={vipFilter} onValueChange={setVipFilter}>
                             <SelectTrigger className="w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -198,7 +198,7 @@ export default function PacientesPage() {
                     </div>
 
                     <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
+                        <span className="text-sm font-medium text-foreground">Aniversariantes</span>
                         <Select>
                             <SelectTrigger className="w-32">
                                 <SelectValue placeholder="Selecione" />
@@ -211,7 +211,7 @@ export default function PacientesPage() {
                         </Select>
                     </div>
 
-                    <Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
+                    <Button variant="outline" className="ml-auto w-full md:w-auto">
                         <Filter className="w-4 h-4 mr-2" />
                         Filtro avançado
                     </Button>

components/accessibility-modal.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useAccessibility } from "@/app/context/AccessibilityContext";
+import { Sun, Moon, Contrast, Accessibility } from "lucide-react";
+
+export function AccessibilityModal() {
+  const {
+    theme,
+    setTheme,
+    contrast,
+    setContrast,
+    increaseFontSize,
+    decreaseFontSize,
+    resetFontSize,
+  } = useAccessibility();
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  const toggleContrast = () => {
+    setContrast(contrast === "normal" ? "high" : "normal");
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon" className="fixed bottom-4 right-4 z-50 rounded-full h-14 w-14">
+          <Accessibility className="h-6 w-6" />
+          <span className="sr-only">Abrir configurações de acessibilidade</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Configurações de Acessibilidade</DialogTitle>
+          <DialogDescription>
+            Ajuste a aparência do site para a sua preferência. Suas
+            configurações serão salvas para a próxima visita.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6 py-4">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="dark-mode" className="flex items-center gap-2">
+              {theme === "light" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+              <span>Modo Escuro</span>
+            </Label>
+            <Switch
+              id="dark-mode"
+              checked={theme === "dark"}
+              onCheckedChange={toggleTheme}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="high-contrast" className="flex items-center gap-2">
+              <Contrast className="h-5 w-5" />
+              <span>Alto Contraste</span>
+            </Label>
+            <Switch
+              id="high-contrast"
+              checked={contrast === "high"}
+              onCheckedChange={toggleContrast}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+                <span className="text-base">Tamanho da Fonte</span>
+            </Label>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" onClick={decreaseFontSize} aria-label="Diminuir tamanho da fonte">
+                A-
+              </Button>
+              <Button variant="outline" size="sm" onClick={resetFontSize} aria-label="Resetar tamanho da fonte">
+                A
+              </Button>
+              <Button variant="outline" size="sm" onClick={increaseFontSize} aria-label="Aumentar tamanho da fonte">
+                A+
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/doctor-layout.tsx

@@ -112,17 +112,17 @@ useEffect(() => {
     }
 
     return (
-        <div className="min-h-screen bg-gray-50 flex">
+        <div className="min-h-screen bg-background flex">
             {/* Sidebar para desktop */}
-            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                <div className="p-4 border-b border-gray-200">
+            <div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
+                <div className="p-4 border-b border-border">
                     <div className="flex items-center justify-between">
                         {!sidebarCollapsed && (
                             <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                                    <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                                 </div>
-                                <span className="font-semibold text-gray-900">MidConnecta</span>
+                                <span className="font-semibold text-foreground">MidConnecta</span>
                             </div>
                         )}
                         <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@@ -138,7 +138,7 @@ useEffect(() => {
 
                         return (
                             <Link key={item.href} href={item.href}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
                                     <Icon className="w-5 h-5 flex-shrink-0" />
                                     {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
                                 </div>
@@ -150,15 +150,15 @@ useEffect(() => {
                 // ... (seu código anterior)
 
             {/* Sidebar para desktop */}
-            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
-                <div className="p-4 border-b border-gray-200">
+            <div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
+                <div className="p-4 border-b border-border">
                     <div className="flex items-center justify-between">
                         {!sidebarCollapsed && (
                             <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                                    <div className="w-4 h-4 bg-white rounded-sm"></div>
+                                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                                    <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                                 </div>
-                                <span className="font-semibold text-gray-900">MedConnect</span>
+                                <span className="font-semibold text-foreground">MedConnect</span>
                             </div>
                         )}
                         <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@@ -174,7 +174,7 @@ useEffect(() => {
 
                         return (
                             <Link key={item.href} href={item.href}>
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
                                     <Icon className="w-5 h-5 flex-shrink-0" />
                                     {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
                                 </div>
@@ -198,8 +198,8 @@ useEffect(() => {
                                     </AvatarFallback>
                                 </Avatar>
                                 <div className="flex-1 min-w-0">
-                                    <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
-                                    <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
+                                    <p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
+                                    <p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
                                 </div>
                             </>
                         )}
@@ -218,7 +218,7 @@ useEffect(() => {
 
                     {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
                     <div
-                        className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
+                        className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
                         onClick={handleLogout}
                     >
                         <LogOut className="w-5 h-5 flex-shrink-0" />
@@ -231,15 +231,15 @@ useEffect(() => {
 
             {/* Sidebar para mobile (apresentado como um menu overlay) */}
             {isMobileMenuOpen && (
-                <div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
+                <div className="fixed inset-0 bg-background/50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
             )}
-            <div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
-                <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+            <div className={`bg-card border-r border-border fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
+                <div className="p-4 border-b border-border flex items-center justify-between">
                     <div className="flex items-center gap-2">
-                        <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                            <div className="w-4 h-4 bg-white rounded-sm"></div>
+                        <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                            <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                         </div>
-                        <span className="font-semibold text-gray-900">Hospital System</span>
+                        <span className="font-semibold text-foreground">Hospital System</span>
                     </div>
                     <Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
                         <X className="w-4 h-4" />
@@ -253,7 +253,7 @@ useEffect(() => {
 
                         return (
                             <Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
-                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
+                                <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
                                     <Icon className="w-5 h-5 flex-shrink-0" />
                                     <span className="font-medium">{item.label}</span>
                                 </div>
@@ -274,8 +274,8 @@ useEffect(() => {
                             </AvatarFallback>
                         </Avatar>
                         <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
-                            <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
+                            <p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
+                            <p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
                         </div>
                     </div>
                     <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */}
@@ -289,19 +289,19 @@ useEffect(() => {
             {/* Main Content */}
       <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
                 {/* Header */}
-                <header className="bg-white border-b border-gray-200 px-6 py-4">
+                <header className="bg-card border-b border-border px-6 py-4">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center gap-4 flex-1">
                             <div className="relative flex-1 max-w-md">
-                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                                <Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
                             </div>
                         </div>
 
                         <div className="flex items-center gap-4">
                             <Button variant="ghost" size="sm" className="relative">
                                 <Bell className="w-5 h-5" />
-                                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
+                                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">1</Badge>
                             </Button>
                         </div>
                     </div>

components/finance-layout.tsx

@@ -122,21 +122,21 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${
+        className={`bg-card border-r border-border transition-all duration-300 ${
           sidebarCollapsed ? "w-16" : "w-64"
         } fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">
+                <span className="font-semibold text-foreground">
                   MidConnecta
                 </span>
               </div>
@@ -168,8 +168,8 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -196,10 +196,10 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {financierData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {financierData.department}
                 </p>
               </div>
@@ -233,14 +233,14 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
         }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -248,7 +248,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/hospital-layout.tsx

@@ -111,19 +111,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/*  Sidebar  */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
+        className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@@ -141,7 +141,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
               <Link key={item.href} href={item.href}>
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
-                    isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
+                    isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -164,8 +164,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
               </AvatarFallback>
             </Avatar>
             <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900 truncate">{patientData.name}</p>
-              <p className="text-xs text-gray-500 truncate">{patientData.email}</p>
+              <p className="text-sm font-medium text-foreground truncate">{patientData.name}</p>
+              <p className="text-xs text-muted-foreground truncate">{patientData.email}</p>
             </div>
           </div>
           <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
@@ -178,19 +178,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
       {/* Main Content */}
       <div className="flex-1 flex flex-col">
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                <Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
               </div>
             </div>
 
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/manager-layout.tsx

@@ -96,20 +96,20 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
+        className={`bg-card border-r border-border transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
           ${sidebarCollapsed ? "w-16" : "w-64"}`}
       >
         {/* Logo + collapse button */}
-        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+        <div className="p-4 border-b border-border flex items-center justify-between">
           {!sidebarCollapsed && (
             <div className="flex items-center gap-2">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                <div className="w-4 h-4 bg-white rounded-sm"></div>
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
               </div>
-              <span className="font-semibold text-gray-900">
+              <span className="font-semibold text-foreground">
                 MidConnecta
               </span>
             </div>
@@ -141,8 +141,8 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -169,10 +169,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {managerData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {managerData.department}
                 </p>
               </div>
@@ -205,14 +205,14 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
           ${sidebarCollapsed ? "ml-16" : "ml-64"}`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
+        <header className="bg-card border-b border-border px-4 md:px-6 py-4 flex items-center justify-between">
           {/* Search */}
           <div className="flex items-center gap-4 flex-1 max-w-md">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
               <Input
                 placeholder="Buscar paciente"
-                className="pl-10 bg-gray-50 border-gray-200"
+                className="pl-10 bg-background border-border"
               />
             </div>
           </div>
@@ -221,7 +221,7 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
           <div className="flex items-center gap-4 ml-auto">
             <Button variant="ghost" size="sm" className="relative">
               <Bell className="w-5 h-5" />
-              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+              <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                 1
               </Badge>
             </Button>

components/patient-layout.tsx

@@ -97,22 +97,22 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 ${
+        className={`bg-card border-r border-border transition-all duration-300 ${
           sidebarCollapsed ? "w-16" : "w-64"
         } fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
         {/* Header da Sidebar */}
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button
@@ -143,8 +143,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -171,10 +171,10 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {patientData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">
+                <p className="text-xs text-muted-foreground truncate">
                   {patientData.email}
                 </p>
               </div>
@@ -208,14 +208,14 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
         }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -223,7 +223,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
             <div className="flex items-center gap-4">
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/secretary-layout.tsx

@@ -91,21 +91,21 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-background flex">
       {/* Sidebar */}
       <div
-        className={`bg-white border-r border-gray-200 transition-all duration-300 
+        className={`bg-card border-r border-border transition-all duration-300 
           ${sidebarCollapsed ? "w-16" : "w-64"} 
           fixed left-0 top-0 h-screen flex flex-col z-10`}
       >
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                  <div className="w-4 h-4 bg-white rounded-sm"></div>
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
                 </div>
-                <span className="font-semibold text-gray-900">MedConnect</span>
+                <span className="font-semibold text-foreground">MedConnect</span>
               </div>
             )}
             <Button
@@ -134,8 +134,8 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
                 <div
                   className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
                     isActive
-                      ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
-                      : "text-gray-600 hover:bg-gray-50"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   }`}
                 >
                   <Icon className="w-5 h-5 flex-shrink-0" />
@@ -159,10 +159,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
             </Avatar>
             {!sidebarCollapsed && (
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">
+                <p className="text-sm font-medium text-foreground truncate">
                   {secretaryData.name}
                 </p>
-                <p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
+                <p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
               </div>
             )}
           </div>
@@ -194,14 +194,14 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
         }`}
       >
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <header className="bg-card border-b border-border px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1 max-w-md">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
                 <Input
                   placeholder="Buscar paciente"
-                  className="pl-10 bg-gray-50 border-gray-200"
+                  className="pl-10 bg-background border-border"
                 />
               </div>
             </div>
@@ -216,7 +216,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
               */}
               <Button variant="ghost" size="sm" className="relative">
                 <Bell className="w-5 h-5" />
-                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
+                <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
                   1
                 </Badge>
               </Button>

components/theme-initializer.tsx

@@ -0,0 +1,32 @@
+import Script from 'next/script';
+
+const themeScript = `
+(function() {
+  try {
+    const theme = localStorage.getItem('accessibility-theme') || 'light';
+    const contrast = localStorage.getItem('accessibility-contrast') || 'normal';
+    const fontSize = localStorage.getItem('accessibility-font-size') || '16';
+
+    const root = document.documentElement;
+    
+    // Clear previous theme classes
+    root.classList.remove('light', 'dark', 'high-contrast');
+    
+    // Add new theme classes
+    root.classList.add(theme);
+    if (contrast === 'high') {
+      root.classList.add('high-contrast');
+    }
+    
+    // Set font size
+    root.style.fontSize = fontSize + 'px';
+
+  } catch (e) {
+    console.error('Failed to apply theme from localStorage', e);
+  }
+})();
+`;
+
+export function ThemeInitializer() {
+  return <Script id="theme-initializer" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}