diff --git a/src/features/workspace/components/WorkspaceLayout.jsx b/src/features/workspace/components/WorkspaceLayout.jsx
index a677782..07e9c60 100644
--- a/src/features/workspace/components/WorkspaceLayout.jsx
+++ b/src/features/workspace/components/WorkspaceLayout.jsx
@@ -52,28 +52,28 @@ export const WorkspaceLayout = () => {
   };
 
   return (
-    <div className="workspace-theme flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato">
+    <div className="workspace-theme flex h-screen w-full bg-white dark:bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato">
       
       {/* Sidebar REPRODUCED (Design Angular de Alta Fidelidade) */}
       <WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />
 
       {/* Main Content Area */}
-      <main className="flex-1 flex flex-col relative overflow-hidden bg-[#0a0a0a]">
+      <main className="flex-1 flex flex-col relative overflow-hidden bg-white dark:bg-[var(--workspace-sec-5-dark)]">
         
         {/* Dynamic Background Effect */}
         <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#22bb6c]/5 blur-[120px] rounded-full -mr-64 -mt-64 pointer-events-none z-0" />
 
         {/* Header Superior Premium */}
-        <header className="h-20 bg-zinc-950/80 backdrop-blur-xl border-b border-white/5 flex items-center justify-between px-10 z-30">
+        <header className="h-20 bg-white/80 dark:bg-[var(--workspace-sec-5-dark)]/80 backdrop-blur-xl border-b border-slate-200 dark:border-white/5 flex items-center justify-between px-10 z-30">
           <div className="flex items-center gap-6">
              {/* breadcrumb conceitual */}
              <div className="flex items-center gap-3">
-               <div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center border border-white/5">
+               <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-zinc-900 flex items-center justify-center border border-slate-200 dark:border-white/5">
                   <Zap size={16} className="text-[#f1c232]" />
                </div>
                <div className="flex flex-col">
-                  <span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
-                  <h2 className="text-sm font-black text-white uppercase tracking-[0.1em] leading-none">
+                  <span className="text-[10px] font-black text-slate-400 dark:text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
+                  <h2 className="text-sm font-black text-slate-600 dark:text-white uppercase tracking-[0.1em] leading-none">
                     Workspace / <span className="text-[#f1c232]">{activeScreen}</span>
                   </h2>
                </div>
@@ -82,29 +82,29 @@ export const WorkspaceLayout = () => {
 
           <div className="flex items-center gap-8">
             {/* Search Global Minimalista */}
-            <div className="hidden lg:flex items-center bg-white/[0.03] px-4 py-2.5 rounded-xl border border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
-               <Search size={16} className="text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
+            <div className="hidden lg:flex items-center bg-slate-50 dark:bg-white/[0.03] px-4 py-2.5 rounded-xl border border-slate-200 dark:border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
+               <Search size={16} className="text-slate-400 dark:text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
                <input 
                  type="text" 
                  placeholder="Comando rápido (ctrl + k)" 
-                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-zinc-300 placeholder:text-zinc-600 ml-2"
+                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-zinc-300 placeholder:text-slate-400 dark:placeholder:text-zinc-600 ml-2"
                />
             </div>
 
             <div className="flex items-center gap-4">
-              <button className="relative p-2.5 hover:bg-white/5 rounded-xl transition-colors text-zinc-500 hover:text-[#f1c232]">
+              <button className="relative p-2.5 bg-slate-50 dark:bg-zinc-900/50 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 dark:text-zinc-500 hover:text-[#f1c232]">
                  <Bell size={20} />
-                 <span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-zinc-950 shadow-[0_0_10px_#f1c232]" />
+                 <span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-white dark:border-zinc-950 shadow-[0_0_10px_#f1c232]" />
               </button>
               
-              <div className="h-8 w-[1px] bg-white/5" />
+              <div className="h-8 w-[1px] bg-slate-200 dark:bg-white/5" />
 
               <div className="flex items-center gap-3 pl-2">
                  <div className="flex flex-col items-end hidden md:flex">
-                    <span className="text-xs font-black text-white tracking-tight">Daivid Alves</span>
+                    <span className="text-xs font-black text-slate-700 dark:text-white tracking-tight">Daivid Alves</span>
                     <span className="text-[9px] font-bold text-[#22bb6c] uppercase tracking-widest">Master Admin</span>
                  </div>
-                 <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-zinc-800 to-zinc-950 border border-white/10 flex items-center justify-center text-sm font-black text-white shadow-xl">
+                 <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-zinc-800 dark:to-zinc-950 border border-slate-200 dark:border-white/10 flex items-center justify-center text-sm font-black text-slate-700 dark:text-white shadow-xl">
                     DA
                  </div>
               </div>
@@ -116,14 +116,14 @@ export const WorkspaceLayout = () => {
         <div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
           <div className="max-w-[1600px] mx-auto p-8 animate-in fade-in slide-in-from-bottom-4 duration-1000">
              {/* Efeito de Vidro no Container de Conteúdo */}
-             <div className="bg-zinc-900/40 rounded-[32px] border border-white/5 backdrop-blur-sm min-h-full">
+             <div className="bg-white/50 dark:bg-zinc-900/40 rounded-[32px] border border-slate-200 dark:border-white/5 backdrop-blur-sm min-h-full">
                 {renderScreen()}
              </div>
           </div>
         </div>
 
         {/* Footer Minimalista */}
-        <footer className="h-10 border-t border-white/5 bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
+        <footer className="h-10 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-500 dark:text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
            <div className="flex items-center gap-4">
               <span>© 2026 iTGUYS Core Systems</span>
               <span className="text-[#22bb6c]/40">•</span>
diff --git a/src/features/workspace/components/WorkspaceSidebar.jsx b/src/features/workspace/components/WorkspaceSidebar.jsx
index 4423a25..479ee60 100644
--- a/src/features/workspace/components/WorkspaceSidebar.jsx
+++ b/src/features/workspace/components/WorkspaceSidebar.jsx
@@ -138,7 +138,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
 
   return (
     <aside 
-      className={cn("sb-container relative h-full top-auto left-auto border-none rounded-none bg-zinc-950", isCollapsed && "collapsed")}
+      className={cn("sb-container relative h-full top-auto left-auto border-none rounded-none bg-white dark:bg-[var(--workspace-sec-5-dark)]", isCollapsed && "collapsed")}
       style={{ boxShadow: '10px 0 30px rgba(0,0,0,0.5)' }}
     >
       {/* Subtle Top Glow (Angular Style) */}
@@ -146,7 +146,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
 
       {/* Header com Toggle */}
       <div className="sb-toggle-container">
-        <button className="sb-toggle-btn" onClick={toggleSidebar}>
+        <button className="sb-toggle-btn bg-slate-100 dark:bg-zinc-800 border-slate-200 dark:border-zinc-700" onClick={toggleSidebar}>
           {isCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
         </button>
       </div>
@@ -171,12 +171,12 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
         <div className="relative">
           <input 
             type="text" 
-            className="sb-search-input" 
+            className="sb-search-input bg-slate-50 dark:bg-white/[0.05] border-slate-200 dark:border-white/10" 
             placeholder="Buscar..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <Search size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-600" />
+          <Search size={14} className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-zinc-600" />
         </div>
       </div>
 
@@ -188,7 +188,7 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
       </nav>
 
       {/* Footer / User Profile */}
-      <footer className="sb-footer border-t border-white/5 bg-zinc-900/50">
+      <footer className="sb-footer border-t border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-zinc-900/50">
         <div className={cn("sb-brand", isCollapsed && "justify-center mb-0")}>
           <div className="sb-brand-logo bg-[#f1c232]">
             <Zap size={20} className="text-[#1a1a1a]" />
@@ -196,22 +196,22 @@ export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
           {!isCollapsed && (
             <div className="sb-brand-info">
               <span className="sb-brand-name" style={{ color: '#f1c232' }}>iTGUYS</span>
-              <span className="sb-app-name text-zinc-500">Master Core v4</span>
+              <span className="sb-app-name text-slate-400 dark:text-zinc-500">Master Core v4</span>
             </div>
           )}
         </div>
 
         {!isCollapsed && (
-          <div className="sb-legal border-zinc-800">
+          <div className="sb-legal border-slate-200 dark:border-zinc-800">
             <div className="sb-legal-item">
                <ShieldCheck size={12} className="text-[#f1c232]" />
-               <span className="text-zinc-600 font-bold uppercase tracking-tighter">Conexão Segura</span>
+               <span className="text-slate-400 dark:text-zinc-600 font-bold uppercase tracking-tighter">Conexão Segura</span>
             </div>
           </div>
         )}
 
-        <div className={cn("sb-version text-zinc-700", isCollapsed && "justify-center")}>
-           <Lock size={12} className="text-zinc-800" />
+        <div className={cn("sb-version text-slate-300 dark:text-zinc-700", isCollapsed && "justify-center")}>
+           <Lock size={12} className="text-slate-300 dark:text-zinc-800" />
            {!isCollapsed && <span>Licença Corporativa</span>}
         </div>
       </footer>
diff --git a/src/features/workspace/views/LoginView.jsx b/src/features/workspace/views/LoginView.jsx
index aac0787..171cd27 100644
--- a/src/features/workspace/views/LoginView.jsx
+++ b/src/features/workspace/views/LoginView.jsx
@@ -52,9 +52,9 @@ export const LoginView = () => {
   };
 
   return (
-    <div className="flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato select-none text-white">
+    <div className="workspace-theme flex h-screen w-full bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato select-none text-white">
       {/* Left Panel - Brand & Identity */}
-      <div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[#050505]">
+      <div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[var(--workspace-sec-5-dark)]">
         {/* Background Effects */}
         <div className="absolute inset-0 z-0">
            <div className="absolute inset-0 bg-gradient-to-br from-[#003153]/40 to-transparent mix-blend-overlay" />