diff --git a/frontend/src/components/Dashboard/ContributionHeatmap.jsx b/frontend/src/components/Dashboard/ContributionHeatmap.jsx
index d6f23ffb..f46bd094 100644
--- a/frontend/src/components/Dashboard/ContributionHeatmap.jsx
+++ b/frontend/src/components/Dashboard/ContributionHeatmap.jsx
@@ -135,24 +135,24 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
                   </div>
 
                   <div className="space-y-1.5">
-                    <div className="flex justify-between text-slate-500 dark:text-slate-400">
+                    <div className="flex justify-between text-slate-500 dark:text-slate-300">
                       <span>Tasks Done:</span>
                       <span className="font-semibold text-slate-800 dark:text-slate-200">
                         {hoveredDay.tasksCompleted} / {hoveredDay.tasksTotal}
                       </span>
                     </div>
-                    <div className="flex justify-between text-slate-500 dark:text-slate-400">
+                    <div className="flex justify-between text-slate-500 dark:text-slate-300">
                       <span>Routines Completed:</span>
                       <span className="font-semibold text-slate-800 dark:text-slate-200">
                         {hoveredDay.routinesCompleted}
                       </span>
                     </div>
-                    <div className="flex justify-between text-slate-500 dark:text-slate-400">
+                    <div className="flex justify-between text-slate-500 dark:text-slate-300">
                       <span>Productivity:</span>
                       <span className={`font-bold ${
                         hoveredDay.score === 3 ? "text-emerald-600 dark:text-emerald-400 text-glow" :
                         hoveredDay.score === 2 ? "text-cyan-600 dark:text-cyan-400" :
-                        hoveredDay.score === 1 ? "text-teal-600 dark:text-teal-500" : "text-slate-500"
+                        hoveredDay.score === 1 ? "text-teal-600 dark:text-teal-505" : "text-slate-500 dark:text-slate-300"
                       }`}>
                         {getProductivityColorDetails(hoveredDay.score).label.split(" (")[0]}
                       </span>
@@ -169,7 +169,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
                         ⚡ Keep it going!
                       </span>
                     ) : (
-                      <span className="text-slate-500 font-bold">No active completions</span>
+                      <span className="text-slate-500 dark:text-slate-300 font-bold">No active completions</span>
                     )}
                   </div>
                 </div>
@@ -198,7 +198,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
               Live Tracker
             </span>
           </div>
-          <p className="text-xs font-semibold text-slate-700 dark:text-slate-400 mt-1">
+          <p className="text-xs font-semibold text-slate-700 dark:text-slate-300 mt-1">
             Tracking real routines & task completions from your live daily workflow.
           </p>
         </div>
@@ -217,7 +217,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
             <h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
               {stats.currentStreak} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
             </h3>
-            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Keep the fire burning!</p>
+            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Keep the fire burning!</p>
           </div>
         </div>
 
@@ -231,7 +231,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
             <h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
               {stats.longestStreak} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
             </h3>
-            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Your peak productivity</p>
+            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Your peak productivity</p>
           </div>
         </div>
 
@@ -245,7 +245,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
             <h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
               {stats.totalProductiveDays} <span className="text-xs font-bold text-slate-700 dark:text-slate-400">days</span>
             </h3>
-            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Days with active completions</p>
+            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Days with active completions</p>
           </div>
         </div>
 
@@ -259,7 +259,7 @@ export default function ContributionHeatmap({ tasks = [], routineTasks = [] }) {
             <h3 className="text-xl font-black text-slate-900 dark:text-slate-100 mt-0.5">
               {stats.yearlyPercentage}%
             </h3>
-            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-400 mt-0.5">Average daily task completion rate</p>
+            <p className="text-[9px] font-bold text-slate-600 dark:text-slate-300 mt-0.5">Average daily task completion rate</p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/Dashboard/DashboardTasks.jsx b/frontend/src/components/Dashboard/DashboardTasks.jsx
index 358cb994..480498f1 100644
--- a/frontend/src/components/Dashboard/DashboardTasks.jsx
+++ b/frontend/src/components/Dashboard/DashboardTasks.jsx
@@ -171,7 +171,7 @@ export default function DashboardTasks({ tasks, updateTask }) {
               min="1"
               value={actualDuration}
               onChange={(e) => setActualDuration(e.target.value)}
-              className="w-full p-2 border border-soft rounded-lg text-black"
+              className="w-full p-2 border border-soft rounded-lg text-black dark:placeholder-slate-500"
               placeholder="Actual duration in minutes"
             />
             <div className="flex justify-end gap-3 mt-5">
diff --git a/frontend/src/components/Dashboard/ReflectionSummary.jsx b/frontend/src/components/Dashboard/ReflectionSummary.jsx
index 1c9e38d7..2377b40c 100644
--- a/frontend/src/components/Dashboard/ReflectionSummary.jsx
+++ b/frontend/src/components/Dashboard/ReflectionSummary.jsx
@@ -22,23 +22,23 @@ export default function ReflectionSummary({
       <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
         {/* Daily Completion */}
         <div className="card p-6">
-          <p className="text-xs text-muted uppercase tracking-wide">Daily Completion</p>
+          <p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Daily Completion</p>
           <p className="text-2xl font-semibold text-main mt-1">{completedToday} / {totalToday}</p>
-          <p className="text-xs text-muted mt-1">Tasks done today{totalToday > 0 ? ` — ${completionRate}%` : ""}</p>
+          <p className="text-xs text-muted dark:text-slate-400 mt-1">Tasks done today{totalToday > 0 ? ` — ${completionRate}%` : ""}</p>
         </div>
 
         {/* Weekly Momentum */}
         <div className="card p-6">
-          <p className="text-xs text-muted uppercase tracking-wide">Weekly Momentum</p>
+          <p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Weekly Momentum</p>
           <p className="text-2xl font-semibold text-main mt-1">{weeklyCompletionPercent}%</p>
-          <p className="text-xs text-muted mt-1">{weeklyText}</p>
+          <p className="text-xs text-muted dark:text-slate-400 mt-1">{weeklyText}</p>
         </div>
 
         {/* Productivity Insight */}
         <div className="card p-6">
-          <p className="text-xs text-muted uppercase tracking-wide">Productivity Insight</p>
+          <p className="text-xs text-muted dark:text-slate-300 uppercase tracking-wide">Productivity Insight</p>
           <p className="text-sm text-main font-medium mt-1">{insightText}</p>
-          <p className="text-xs text-muted mt-2">
+          <p className="text-xs text-muted dark:text-slate-400 mt-2">
             {upcomingCount > 0 ? `Next: ${upcomingCount} upcoming task${upcomingCount > 1 ? "s" : ""}` : "No upcoming tasks"}
             {" · "}
             {tasks?.length ? `${tasks.length} total` : "0 total"}
diff --git a/frontend/src/components/Dashboard/StatCard.jsx b/frontend/src/components/Dashboard/StatCard.jsx
index fa8a6982..74458a82 100644
--- a/frontend/src/components/Dashboard/StatCard.jsx
+++ b/frontend/src/components/Dashboard/StatCard.jsx
@@ -4,9 +4,9 @@ export default function StatCard({ label, value, subtitle, icon }) {
       <div className="text-primary">{icon}</div>
 
       <div>
-        <p className="text-xs text-muted uppercase tracking-wide">{label}</p>
+        <p className="text-xs text-muted dark:text-slate-400 uppercase tracking-wide">{label}</p>
         <p className="text-2xl font-semibold text-main">{value}</p>
-        {subtitle && <p className="text-xs text-muted mt-1">{subtitle}</p>}
+        {subtitle && <p className="text-xs text-muted dark:text-slate-400 mt-1">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/frontend/src/components/Dashboard/TaskPreview.jsx b/frontend/src/components/Dashboard/TaskPreview.jsx
index d6fff092..95801e25 100644
--- a/frontend/src/components/Dashboard/TaskPreview.jsx
+++ b/frontend/src/components/Dashboard/TaskPreview.jsx
@@ -180,7 +180,7 @@ export default function TaskPreview({ tasks , updateTask}) {
               min="1"
               value={actualDuration}
               onChange={(e) => setActualDuration(e.target.value)}
-              className="w-full p-2 border border-soft rounded-lg text-black"
+              className="w-full p-2 border border-soft rounded-lg text-black dark:placeholder-slate-500"
               placeholder="Actual duration in minutes"
             />
             <div className="flex justify-end gap-3 mt-5">
diff --git a/frontend/src/components/ErrorBoundary.jsx b/frontend/src/components/ErrorBoundary.jsx
index f1e09644..cdbeb512 100644
--- a/frontend/src/components/ErrorBoundary.jsx
+++ b/frontend/src/components/ErrorBoundary.jsx
@@ -41,7 +41,7 @@ class ErrorBoundary extends React.Component {
               </div>
             </div>
             <h1 className="text-2xl font-bold mb-3 text-gray-100">Oops! Something went wrong</h1>
-            <p className="text-gray-400 mb-6 text-sm leading-relaxed">
+            <p className="text-gray-400 dark:text-slate-300 mb-6 text-sm leading-relaxed">
               We're sorry, but an unexpected error occurred. The application has recovered from a crash, but you might need to refresh or return to the dashboard.
             </p>
             {this.state.error && (
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index f9b10ecd..6f36daef 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -62,7 +62,7 @@ const LogoutModal = ({ isOpen, onConfirm, onCancel }) => (
           <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-2">
             Log out of DailyForge?
           </h2>
-          <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed mb-7">
+          <p className="text-sm text-slate-500 dark:text-slate-300 leading-relaxed mb-7">
             You'll need to log back in to access your dashboard, tasks, and
             routines.
           </p>
diff --git a/frontend/src/components/Routine/TaskLibrary.jsx b/frontend/src/components/Routine/TaskLibrary.jsx
index 2fd0a669..3705b666 100644
--- a/frontend/src/components/Routine/TaskLibrary.jsx
+++ b/frontend/src/components/Routine/TaskLibrary.jsx
@@ -113,7 +113,7 @@ export default function TaskLibrary({ tasks, onAddTask }) {
         placeholder="Search tasks..."
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        className="mb-4 rounded-xl border border-soft/80 px-3 py-2 text-sm bg-transparent text-main placeholder:text-muted dark:bg-slate-800 dark:text-white dark:border-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4eb7b3]"
+        className="mb-4 rounded-xl border border-soft/80 px-3 py-2 text-sm bg-transparent text-main placeholder:text-muted dark:bg-slate-800 dark:text-white dark:border-gray-700 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#4eb7b3]"
       />
 
       {/* Task List */}
@@ -132,7 +132,7 @@ export default function TaskLibrary({ tasks, onAddTask }) {
         ) : (
           <div className="flex flex-col items-center justify-center h-full min-h-[150px] text-center px-4">
             <p className="text-sm font-medium text-slate-400 mb-1">No tasks found</p>
-            <p className="text-xs text-slate-500">We couldn't find anything matching "{query}"</p>
+            <p className="text-xs text-slate-500 dark:text-slate-300">We couldn't find anything matching "{query}"</p>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/Task/NotesWidget.jsx b/frontend/src/components/Task/NotesWidget.jsx
index c29f35e1..031045cb 100644
--- a/frontend/src/components/Task/NotesWidget.jsx
+++ b/frontend/src/components/Task/NotesWidget.jsx
@@ -106,7 +106,7 @@ export default function NotesWidget() {
               }}
               rows={1}
               placeholder="Write a note..."
-              className="w-full bg-transparent outline-none text-base resize-none overflow-hidden"
+              className="w-full bg-transparent outline-none text-base resize-none overflow-hidden dark:placeholder-slate-500"
               style={{
                 color: note.completed ? "var(--text-muted)" : "var(--text-main)",
                 textDecoration: note.completed ? "line-through" : "none",
diff --git a/frontend/src/components/Task/TaskFormModal.jsx b/frontend/src/components/Task/TaskFormModal.jsx
index e5364ac6..777b6758 100644
--- a/frontend/src/components/Task/TaskFormModal.jsx
+++ b/frontend/src/components/Task/TaskFormModal.jsx
@@ -278,7 +278,7 @@ import FormError from "../common/FormError";
                   disabled={isSubmitting}
                   className="w-full mt-1 p-2 border border-soft rounded-lg
                           focus:ring-(--primary) focus:border-(--primary)
-                          bg-transparent text-main dark:bg-slate-800"
+                          bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
                   placeholder="Task title"
                   maxLength={TITLE_MAX_LENGTH}
                   required
@@ -307,7 +307,7 @@ import FormError from "../common/FormError";
                   disabled={isSubmitting}
                   className="w-full mt-1 p-2 border border-soft rounded-lg
                           focus:ring-(--primary) focus:border-(--primary)
-                          bg-transparent text-main dark:bg-slate-800"
+                          bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
                   placeholder="Optional task description"
                   rows={3}
                   maxLength={DESCRIPTION_MAX_LENGTH}
@@ -357,7 +357,7 @@ import FormError from "../common/FormError";
                       value={customTagInput}
                       onChange={(e) => setCustomTagInput(e.target.value)}
                       disabled={isSubmitting}
-                      className="flex-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800"
+                      className="flex-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 dark:placeholder-slate-500"
                       placeholder="Enter custom tag (e.g., 'Essay')"
                     />
                     <button
diff --git a/frontend/src/components/Task/TaskItem.jsx b/frontend/src/components/Task/TaskItem.jsx
index 979e0b93..40758aa9 100644
--- a/frontend/src/components/Task/TaskItem.jsx
+++ b/frontend/src/components/Task/TaskItem.jsx
@@ -48,7 +48,7 @@ export default function TaskItem({
                   type="checkbox"
                   checked={isSelected}
                   onChange={() => onSelect(task._id)}
-                  className="w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 accent-(--primary)"
+                  className="w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 dark:text-slate-100 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 accent-(--primary)"
                 />
                 <span className="text-[10px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded bg-white/70 dark:bg-slate-800/70 text-main shadow-xs border border-soft">
                   {task.priority}
@@ -148,7 +148,7 @@ export default function TaskItem({
                 {task.status === "Due" && (
                   <button
                     onClick={() => onUpdate(task._id, { status: "In Progress" })}
-                    className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-bold bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 rounded-lg transition-colors cursor-pointer"
+                    className="flex items-center gap-1 px-2.5 py-1.5 text-xs font-bold bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:text-slate-100 dark:hover:bg-blue-900/50 rounded-lg transition-colors cursor-pointer"
                     title="Start Task"
                   >
                     <Play size={11} className="fill-current shrink-0" />
@@ -273,7 +273,7 @@ export default function TaskItem({
               {task.status === "Due" && (
                 <button
                   onClick={() => onUpdate(task._id, { status: "In Progress" })}
-                  className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition cursor-pointer"
+                  className="flex items-center gap-1 px-2 py-1.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-slate-100 rounded hover:bg-blue-200 dark:hover:bg-blue-900/50 transition cursor-pointer"
                   title="Start Task"
                 >
                   <Play size={14} />{" "}
diff --git a/frontend/src/components/TwoFactorSetup.jsx b/frontend/src/components/TwoFactorSetup.jsx
index d3c0f4bc..94e425df 100644
--- a/frontend/src/components/TwoFactorSetup.jsx
+++ b/frontend/src/components/TwoFactorSetup.jsx
@@ -58,7 +58,7 @@ const TwoFactorSetup = () => {
             value={totpCode}
             onChange={(e) => setTotpCode(e.target.value)}
             maxLength={6}
-            className="w-full px-3 py-2.5 text-sm surface-bg border-soft rounded-sm shadow-xs input-focus"
+            className="w-full px-3 py-2.5 text-sm surface-bg border-soft rounded-sm shadow-xs input-focus dark:placeholder-slate-500"
           />
           <button onClick={verifyAndEnable} className="btn btn-primary cursor-pointer hover-lift">
             Verify & Activate
diff --git a/frontend/src/components/common/LoadingSpinner.jsx b/frontend/src/components/common/LoadingSpinner.jsx
index bae1e897..d1a34b1c 100644
--- a/frontend/src/components/common/LoadingSpinner.jsx
+++ b/frontend/src/components/common/LoadingSpinner.jsx
@@ -9,7 +9,7 @@ const LoadingSpinner = () => {
       aria-live="polite"
     >
       <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
-      <p className="text-gray-500 text-lg font-medium animate-pulse">
+      <p className="text-gray-500 dark:text-slate-400 text-lg font-medium animate-pulse">
         Loading data...
       </p>
     </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f7b3c6b4..1f9d8ece 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,533 +1,569 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --color-primary: var(--primary);
-}
-
-* {
-  font-family: 'Outfit', sans-serif;
-}
-
-:root {
-  --bg: #d0f6e3;
-  --surface: #ffffff;
-  --primary: #4eb7b3;
-  --primary-hover: #6dd5c7;
-  --accent: #98e1d7;
-  --text-main: #3b8ea0;
-  --text-muted: #4eb7b3;
-  --border: #98e1d7;
-  --radius: 0.75rem;
-}
-
-:root[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
-  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
-  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
-  --text-muted: var(--primary);
-  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
-}
-
-.dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --primary: #4eb7b3;
-  --primary-hover: #5ec7c3;
-  --accent: #1e2e30;
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border: #334155;
-}
-
-html.dark[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
-  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
-  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
-  --text-muted: color-mix(in srgb, var(--primary) 50%, #94a3b8);
-  --border: color-mix(in srgb, var(--primary) 30%, #334155);
-}
-
-html.dark,
-html.dark body {
-  
-  background-color: var(--bg);
-  color: var(--text-main);
-  color-scheme: dark;
-}
-
-@layer utilities {
-  .app-bg {
-    background-color: var(--bg);
-  }
-
-  .surface-bg {
-    background-color: var(--surface);
-  }
-
-  .text-main {
-    color: var(--text-main);
-  }
-
-  .text-muted {
-    color: var(--text-muted);
-  }
-
-  .border-soft {
-    border: 1px solid var(--border);
-  }
-
-  .btn {
-    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
-  }
-
-  .btn-primary {
-    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
-    background-color: var(--primary);
-  }
-
-  .btn-primary:hover {
-    background-color: var(--primary-hover);
-  }
-
-  .card {
-    background-color: var(--surface);
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    @apply p-6 shadow-sm transition-shadow duration-200;
-  }
-
-  .card:hover {
-    @apply shadow-md;
-  }
-
-  .card-muted {
-    @apply bg-white/80 dark:bg-gray-800/80;
-  }
-
-  .card-primary {
-    @apply shadow-md;
-  }
-
-  .animate-in {
-    animation: fadeUp 0.4s ease-out both;
-  }
-
-  .animate-in-slow {
-    animation: fadeUp 0.6s ease-out both;
-  }
-
-  .delay-100 {
-    animation-delay: 0.1s;
-  }
-
-  .delay-200 {
-    animation-delay: 0.2s;
-  }
-
-  .delay-300 {
-    animation-delay: 0.3s;
-  }
-
-  .hover-lift {
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
-
-  .hover-lift:hover {
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Hide default browser reveal buttons to stop overlapping */
-input::-ms-reveal,
-input::-ms-clear,
-input::-webkit-contacts-auto-fill-button,
-input::-webkit-credentials-type-password-toggle {
-  display: none !important;
-}
-* {
-  transition:
-    background-color 0.25s ease,
-    border-color 0.25s ease,
-    color 0.25s ease;
-  }
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --color-primary: var(--primary);
-}
-
-* {
-  font-family: 'Outfit', sans-serif;
-}
-
-:root {
-  --bg: #d0f6e3;
-  --surface: #ffffff;
-  --primary: #4eb7b3;
-  --primary-hover: #6dd5c7;
-  --accent: #98e1d7;
-  --text-main: #3b8ea0;
-  --text-muted: #4eb7b3;
-  --border: #98e1d7;
-  --radius: 0.75rem;
-}
-
-:root[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
-  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
-  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
-  --text-muted: var(--primary);
-  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
-}
-
-.dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --primary: #4eb7b3;
-  --primary-hover: #5ec7c3;
-  --accent: #1e2e30;
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border: #334155;
-}
-
-html.dark[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
-  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
-  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
-  --text-muted: color-mix(in srgb, var(--primary) 50%, #94a3b8);
-  --border: color-mix(in srgb, var(--primary) 30%, #334155);
-}
-
-html.dark,
-html.dark body {
-
-  background-color: var(--bg);
-  color: var(--text-main);
-  color-scheme: dark;
-}
-
-@layer utilities {
-  .app-bg {
-    background-color: var(--bg);
-  }
-
-  .surface-bg {
-    background-color: var(--surface);
-  }
-
-  .text-main {
-    color: var(--text-main);
-  }
-
-  .text-muted {
-    color: var(--text-muted);
-  }
-
-  .border-soft {
-    border: 1px solid var(--border);
-  }
-
-  .btn {
-    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
-  }
-
-  .btn-primary {
-    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
-    background-color: var(--primary);
-  }
-
-  .btn-primary:hover {
-    background-color: var(--primary-hover);
-  }
-
-  .card {
-    background-color: var(--surface);
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    @apply p-6 shadow-sm transition-shadow duration-200;
-  }
-
-  .card:hover {
-    @apply shadow-md;
-  }
-
-  .card-muted {
-    @apply bg-white/80 dark:bg-gray-800/80;
-  }
-
-  .card-primary {
-    @apply shadow-md;
-  }
-
-  .animate-in {
-    animation: fadeUp 0.4s ease-out both;
-  }
-
-  .animate-in-slow {
-    animation: fadeUp 0.6s ease-out both;
-  }
-
-  .delay-100 {
-    animation-delay: 0.1s;
-  }
-
-  .delay-200 {
-    animation-delay: 0.2s;
-  }
-
-  .delay-300 {
-    animation-delay: 0.3s;
-  }
-
-  .hover-lift {
-    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
-      opacity 0.3s ease-in-out,
-      background-color 0.3s ease-in-out;
-    will-change: transform;
-  }
-
-  .hover-lift:hover {
-    transform: translateY(-6px) scale(1.015);
-    opacity: 0.9;
-    animation-timing-function: ease-in-out;
-  }
-}
-
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Hide default browser reveal buttons to stop overlapping */
-input::-ms-reveal,
-input::-ms-clear,
-input::-webkit-contacts-auto-fill-button,
-input::-webkit-credentials-type-password-toggle {
-  display: none !important;
-}
-* {
-  transition:
-    background-color 0.25s ease,
-    border-color 0.25s ease,
-    color 0.25s ease;
-  }
-
-  footer {
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border: #334155;
-}
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --color-primary: var(--primary);
-}
-
-* {
-  font-family: 'Outfit', sans-serif;
-}
-
-:root {
-  --bg: #d0f6e3;
-  --surface: #ffffff;
-  --primary: #4eb7b3;
-  --primary-hover: #6dd5c7;
-  --accent: #98e1d7;
-  --text-main: #3b8ea0;
-  --text-muted: #4eb7b3;
-  --border: #98e1d7;
-  --radius: 0.75rem;
-}
-
-:root[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
-  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
-  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
-  --text-muted: var(--primary);
-  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
-}
-
-.dark {
-  --bg: #0f172a;
-  --surface: #1e293b;
-  --primary: #4eb7b3;
-  --primary-hover: #5ec7c3;
-  --accent: #1e2e30;
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border: #334155;
-}
-
-html.dark[data-theme-custom="true"] {
-  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
-  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
-  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
-  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
-  --text-muted: color-mix(in srgb, var(--primary) 50%, #94a3b8);
-  --border: color-mix(in srgb, var(--primary) 30%, #334155);
-}
-
-html.dark,
-html.dark body {
-
-  background-color: var(--bg);
-  color: var(--text-main);
-  color-scheme: dark;
-}
-
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: 7rem;
-}
-
-@layer utilities {
-  .app-bg {
-    background-color: var(--bg);
-  }
-
-  .surface-bg {
-    background-color: var(--surface);
-  }
-
-  .text-main {
-    color: var(--text-main);
-  }
-
-  .text-muted {
-    color: var(--text-muted);
-  }
-
-  .border-soft {
-    border: 1px solid var(--border);
-  }
-
-  .btn {
-    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
-  }
-
-  .btn-primary {
-    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
-    background-color: var(--primary);
-  }
-
-  .btn-primary:hover {
-    background-color: var(--primary-hover);
-  }
-
-  .card {
-    background-color: var(--surface);
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    @apply p-6 shadow-sm transition-shadow duration-200;
-  }
-
-  .card:hover {
-    @apply shadow-md;
-  }
-
-  .card-muted {
-    @apply bg-white/80 dark:bg-gray-800/80;
-  }
-
-  .card-primary {
-    @apply shadow-md;
-  }
-
-  .animate-in {
-    animation: fadeUp 0.4s ease-out both;
-  }
-
-  .animate-in-slow {
-    animation: fadeUp 0.6s ease-out both;
-  }
-
-  .delay-100 {
-    animation-delay: 0.1s;
-  }
-
-  .delay-200 {
-    animation-delay: 0.2s;
-  }
-
-  .delay-300 {
-    animation-delay: 0.3s;
-  }
-
-  .hover-lift {
-    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
-      opacity 0.3s ease-in-out,
-      background-color 0.3s ease-in-out;
-    will-change: transform;
-  }
-
-  .hover-lift:hover {
-    transform: translateY(-6px) scale(1.015);
-    opacity: 0.9;
-    animation-timing-function: ease-in-out;
-  }
-}
-
-@keyframes fadeUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Hide default browser reveal buttons to stop overlapping */
-input::-ms-reveal,
-input::-ms-clear,
-input::-webkit-contacts-auto-fill-button,
-input::-webkit-credentials-type-password-toggle {
-  display: none !important;
-}
-* {
-  transition:
-    background-color 0.25s ease,
-    border-color 0.25s ease,
-    color 0.25s ease;
-  }
-
-  footer {
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border: #334155;
-}
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: var(--color-primary);
+  --color-main: var(--text-main);
+  --color-muted: var(--text-muted);
+}
+
+* {
+  font-family: 'Outfit', sans-serif;
+}
+
+:root {
+  --bg: #d0f6e3;
+  --surface: #ffffff;
+  --primary: #4eb7b3;
+  --primary-hover: #6dd5c7;
+  --accent: #98e1d7;
+  --text-main: #3b8ea0;
+  --text-muted: #4eb7b3;
+  --border: #98e1d7;
+  --radius: 0.75rem;
+
+  --color-primary: var(--primary);
+}
+
+:root[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
+  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
+  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
+  --text-muted: var(--primary);
+  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
+}
+
+.dark {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --primary: #4eb7b3;
+  --primary-hover: #5ec7c3;
+  --accent: #1e2e30;
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: #334155;
+
+  --color-primary: #7dd3fc;
+}
+
+html.dark[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
+  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
+  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: color-mix(in srgb, var(--primary) 30%, #334155);
+}
+
+html.dark,
+html.dark body {
+  
+  background-color: var(--bg);
+  color: var(--text-main);
+  color-scheme: dark;
+}
+
+@layer utilities {
+  .app-bg {
+    background-color: var(--bg);
+  }
+
+  .surface-bg {
+    background-color: var(--surface);
+  }
+
+  .text-main {
+    color: var(--text-main);
+  }
+
+  .text-muted {
+    color: var(--text-muted);
+  }
+
+  .border-soft {
+    border: 1px solid var(--border);
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
+  }
+
+  .btn-primary {
+    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
+    background-color: var(--primary);
+  }
+
+  .btn-primary:hover {
+    background-color: var(--primary-hover);
+  }
+
+  .card {
+    background-color: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    @apply p-6 shadow-sm transition-shadow duration-200;
+  }
+
+  .card:hover {
+    @apply shadow-md;
+  }
+
+  .card-muted {
+    @apply bg-white/80 dark:bg-gray-800/80;
+  }
+
+  .card-primary {
+    @apply shadow-md;
+  }
+
+  .animate-in {
+    animation: fadeUp 0.4s ease-out both;
+  }
+
+  .animate-in-slow {
+    animation: fadeUp 0.6s ease-out both;
+  }
+
+  .delay-100 {
+    animation-delay: 0.1s;
+  }
+
+  .delay-200 {
+    animation-delay: 0.2s;
+  }
+
+  .delay-300 {
+    animation-delay: 0.3s;
+  }
+
+  .hover-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Hide default browser reveal buttons to stop overlapping */
+input::-ms-reveal,
+input::-ms-clear,
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-type-password-toggle {
+  display: none !important;
+}
+* {
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease;
+  }
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: var(--color-primary);
+  --color-main: var(--text-main);
+  --color-muted: var(--text-muted);
+}
+
+* {
+  font-family: 'Outfit', sans-serif;
+}
+
+:root {
+  --bg: #d0f6e3;
+  --surface: #ffffff;
+  --primary: #4eb7b3;
+  --primary-hover: #6dd5c7;
+  --accent: #98e1d7;
+  --text-main: #3b8ea0;
+  --text-muted: #4eb7b3;
+  --border: #98e1d7;
+  --radius: 0.75rem;
+
+  --color-primary: var(--primary);
+}
+
+:root[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
+  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
+  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
+  --text-muted: var(--primary);
+  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
+}
+
+.dark {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --primary: #4eb7b3;
+  --primary-hover: #5ec7c3;
+  --accent: #1e2e30;
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: #334155;
+
+  --color-primary: #7dd3fc;
+}
+
+html.dark[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
+  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
+  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: color-mix(in srgb, var(--primary) 30%, #334155);
+}
+
+html.dark,
+html.dark body {
+
+  background-color: var(--bg);
+  color: var(--text-main);
+  color-scheme: dark;
+}
+
+@layer utilities {
+  .app-bg {
+    background-color: var(--bg);
+  }
+
+  .surface-bg {
+    background-color: var(--surface);
+  }
+
+  .text-main {
+    color: var(--text-main);
+  }
+
+  .text-muted {
+    color: var(--text-muted);
+  }
+
+  .border-soft {
+    border: 1px solid var(--border);
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
+  }
+
+  .btn-primary {
+    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
+    background-color: var(--primary);
+  }
+
+  .btn-primary:hover {
+    background-color: var(--primary-hover);
+  }
+
+  .card {
+    background-color: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    @apply p-6 shadow-sm transition-shadow duration-200;
+  }
+
+  .card:hover {
+    @apply shadow-md;
+  }
+
+  .card-muted {
+    @apply bg-white/80 dark:bg-gray-800/80;
+  }
+
+  .card-primary {
+    @apply shadow-md;
+  }
+
+  .animate-in {
+    animation: fadeUp 0.4s ease-out both;
+  }
+
+  .animate-in-slow {
+    animation: fadeUp 0.6s ease-out both;
+  }
+
+  .delay-100 {
+    animation-delay: 0.1s;
+  }
+
+  .delay-200 {
+    animation-delay: 0.2s;
+  }
+
+  .delay-300 {
+    animation-delay: 0.3s;
+  }
+
+  .hover-lift {
+    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+      opacity 0.3s ease-in-out,
+      background-color 0.3s ease-in-out;
+    will-change: transform;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-6px) scale(1.015);
+    opacity: 0.9;
+    animation-timing-function: ease-in-out;
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Hide default browser reveal buttons to stop overlapping */
+input::-ms-reveal,
+input::-ms-clear,
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-type-password-toggle {
+  display: none !important;
+}
+* {
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease;
+  }
+
+  footer {
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --border: #334155;
+}
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: var(--color-primary);
+  --color-main: var(--text-main);
+  --color-muted: var(--text-muted);
+}
+
+* {
+  font-family: 'Outfit', sans-serif;
+}
+
+:root {
+  --bg: #d0f6e3;
+  --surface: #ffffff;
+  --primary: #4eb7b3;
+  --primary-hover: #6dd5c7;
+  --accent: #98e1d7;
+  --text-main: #3b8ea0;
+  --text-muted: #4eb7b3;
+  --border: #98e1d7;
+  --radius: 0.75rem;
+
+  --color-primary: var(--primary);
+}
+
+:root[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 15%, #ffffff);
+  --accent: color-mix(in srgb, var(--primary) 60%, #ffffff);
+  --text-main: color-mix(in srgb, var(--primary) 70%, #000000);
+  --text-muted: var(--primary);
+  --border: color-mix(in srgb, var(--primary) 60%, #ffffff);
+}
+
+.dark {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --primary: #4eb7b3;
+  --primary-hover: #5ec7c3;
+  --accent: #1e2e30;
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: #334155;
+
+  --color-primary: #7dd3fc;
+}
+
+html.dark[data-theme-custom="true"] {
+  --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
+  --bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
+  --surface: color-mix(in srgb, var(--primary) 15%, #1e293b);
+  --accent: color-mix(in srgb, var(--primary) 25%, #1e293b);
+  --text-main: #e2e8f0;
+  --text-muted: #94a3b8;
+  --border: color-mix(in srgb, var(--primary) 30%, #334155);
+}
+
+html.dark,
+html.dark body {
+
+  background-color: var(--bg);
+  color: var(--text-main);
+  color-scheme: dark;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 7rem;
+}
+
+@layer utilities {
+  .app-bg {
+    background-color: var(--bg);
+  }
+
+  .surface-bg {
+    background-color: var(--surface);
+  }
+
+  .text-main {
+    color: var(--text-main);
+  }
+
+  .text-muted {
+    color: var(--text-muted);
+  }
+
+  .border-soft {
+    border: 1px solid var(--border);
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-xl transition-all duration-200 select-none;
+  }
+
+  .btn-primary {
+    @apply text-white shadow-sm hover:shadow-md active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-offset-2;
+    background-color: var(--primary);
+  }
+
+  .btn-primary:hover {
+    background-color: var(--primary-hover);
+  }
+
+  .card {
+    background-color: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    @apply p-6 shadow-sm transition-shadow duration-200;
+  }
+
+  .card:hover {
+    @apply shadow-md;
+  }
+
+  .card-muted {
+    @apply bg-white/80 dark:bg-gray-800/80;
+  }
+
+  .card-primary {
+    @apply shadow-md;
+  }
+
+  .animate-in {
+    animation: fadeUp 0.4s ease-out both;
+  }
+
+  .animate-in-slow {
+    animation: fadeUp 0.6s ease-out both;
+  }
+
+  .delay-100 {
+    animation-delay: 0.1s;
+  }
+
+  .delay-200 {
+    animation-delay: 0.2s;
+  }
+
+  .delay-300 {
+    animation-delay: 0.3s;
+  }
+
+  .hover-lift {
+    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+      opacity 0.3s ease-in-out,
+      background-color 0.3s ease-in-out;
+    will-change: transform;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-6px) scale(1.015);
+    opacity: 0.9;
+    animation-timing-function: ease-in-out;
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Hide default browser reveal buttons to stop overlapping */
+input::-ms-reveal,
+input::-ms-clear,
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-type-password-toggle {
+  display: none !important;
+}
+* {
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease;
+  }
+
+  footer {
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --border: #334155;
+}
+
+html.dark .text-main,
+html.dark [class*="text-main"] {
+  color: #e2e8f0 !important;
+}
+
+html.dark .text-muted,
+html.dark [class*="text-muted"] {
+  color: #94a3b8 !important;
+}
+
+html.dark .text-primary,
+html.dark [class*="text-primary"] {
+  color: #7dd3fc !important;
+}
diff --git a/frontend/src/pages/Analytics.jsx b/frontend/src/pages/Analytics.jsx
index bbe40fbe..f2e3231b 100644
--- a/frontend/src/pages/Analytics.jsx
+++ b/frontend/src/pages/Analytics.jsx
@@ -450,7 +450,7 @@ export default function Analytics() {
                   ? "bg-red-500/10 text-red-500"
                   : stats.adaptiveAnalytics?.averageConsistencyScore >= 80
                   ? "bg-emerald-500/10 text-emerald-500"
-                  : "bg-blue-500/10 text-blue-500"
+                  : "bg-blue-500/10 text-blue-500 dark:text-slate-200"
               }`}
             >
 
diff --git a/frontend/src/pages/DailyJournal.jsx b/frontend/src/pages/DailyJournal.jsx
index 04c01326..756f4283 100644
--- a/frontend/src/pages/DailyJournal.jsx
+++ b/frontend/src/pages/DailyJournal.jsx
@@ -25,9 +25,9 @@ import LoadingSpinner from "../components/common/LoadingSpinner";
 const MOODS = [
   { value: "happy", label: "Happy", emoji: "😃", color: "bg-green-500/10 text-green-500 border-green-500/20", glow: "shadow-[0_0_15px_rgba(34,197,94,0.4)] border-green-500 scale-105" },
   { value: "calm", label: "Calm", emoji: "😌", color: "bg-teal-500/10 text-teal-500 border-teal-500/20", glow: "shadow-[0_0_15px_rgba(20,184,166,0.4)] border-teal-500 scale-105" },
-  { value: "neutral", label: "Neutral", emoji: "😐", color: "bg-slate-500/10 text-slate-500 border-slate-500/20", glow: "shadow-[0_0_15px_rgba(100,116,139,0.4)] border-slate-500 scale-105" },
+  { value: "neutral", label: "Neutral", emoji: "😐", color: "bg-slate-500/10 text-slate-500 dark:text-slate-300 border-slate-500/20", glow: "shadow-[0_0_15px_rgba(100,116,139,0.4)] border-slate-500 scale-105" },
   { value: "stressed", label: "Stressed", emoji: "🤯", color: "bg-orange-500/10 text-orange-500 border-orange-500/20", glow: "shadow-[0_0_15px_rgba(249,115,22,0.4)] border-orange-500 scale-105" },
-  { value: "sad", label: "Sad", emoji: "😢", color: "bg-blue-500/10 text-blue-500 border-blue-500/20", glow: "shadow-[0_0_15px_rgba(59,130,246,0.4)] border-blue-500 scale-105" },
+  { value: "sad", label: "Sad", emoji: "😢", color: "bg-blue-500/10 text-blue-500 dark:text-slate-200 border-blue-500/20", glow: "shadow-[0_0_15px_rgba(59,130,246,0.4)] border-blue-500 scale-105" },
   { value: "energetic", label: "Energetic", emoji: "⚡", color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20", glow: "shadow-[0_0_15px_rgba(234,179,8,0.4)] border-yellow-500 scale-105" },
   { value: "tired", label: "Tired", emoji: "😴", color: "bg-indigo-500/10 text-indigo-500 border-indigo-500/20", glow: "shadow-[0_0_15px_rgba(99,102,241,0.4)] border-indigo-500 scale-105" },
 ];
@@ -525,7 +525,7 @@ export default function DailyJournal() {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 style={{ paddingLeft: "2.5rem" }}
-                className="w-full pr-4 py-2.5 bg-white/50 dark:bg-slate-800/50 border border-(--border) rounded-xl text-sm focus:outline-none focus:border-primary text-main transition"
+                className="w-full pr-4 py-2.5 bg-white/50 dark:bg-slate-800/50 border border-(--border) rounded-xl text-sm focus:outline-none focus:border-primary text-main transition dark:placeholder-slate-500"
               />
               {searchQuery && (
                 <button
@@ -779,7 +779,7 @@ export default function DailyJournal() {
                     placeholder="What best summarizes today?"
                     value={title}
                     onChange={(e) => setTitle(e.target.value)}
-                    className="w-full px-4 py-3 bg-white/40 dark:bg-slate-800/40 border border-(--border) rounded-xl text-base focus:outline-none focus:border-primary text-main transition font-medium placeholder:text-muted/60"
+                    className="w-full px-4 py-3 bg-white/40 dark:bg-slate-800/40 border border-(--border) rounded-xl text-base focus:outline-none focus:border-primary text-main transition font-medium placeholder:text-muted/60 dark:placeholder-slate-500"
                   />
                 </div>
 
@@ -793,7 +793,7 @@ export default function DailyJournal() {
                     placeholder="Write down your journal entry..."
                     value={content}
                     onChange={(e) => setContent(e.target.value)}
-                    className="w-full flex-1 px-4 py-3 bg-white/40 dark:bg-slate-800/40 border border-(--border) rounded-xl text-sm focus:outline-none focus:border-primary text-main transition resize-none placeholder:text-muted/60 leading-relaxed"
+                    className="w-full flex-1 px-4 py-3 bg-white/40 dark:bg-slate-800/40 border border-(--border) rounded-xl text-sm focus:outline-none focus:border-primary text-main transition resize-none placeholder:text-muted/60 leading-relaxed dark:placeholder-slate-500"
                   />
                 </div>
 
@@ -830,7 +830,7 @@ export default function DailyJournal() {
                             handleAddTag();
                           }
                         }}
-                        className="bg-transparent text-xs text-main border-none focus:outline-none w-full"
+                        className="bg-transparent text-xs text-main border-none focus:outline-none w-full dark:placeholder-slate-500"
                       />
                       {currentTagInput.trim() && (
                         <button
@@ -1001,7 +1001,7 @@ export default function DailyJournal() {
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
                 
                 <div className="card flex items-center gap-4 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md hover:shadow-md border-l-4 border-l-blue-500 hover:scale-[1.01] transition-all duration-300">
-                  <div className="p-3 bg-blue-500/10 text-blue-500 rounded-xl">
+                  <div className="p-3 bg-blue-500/10 text-blue-500 dark:text-slate-200 rounded-xl">
                     <BookOpen size={24} />
                   </div>
                   <div>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index ab79b417..ba083e7c 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -224,7 +224,7 @@ export default function Dashboard() {
             >
               {/* Header with Title and Cancel Button */}
               <div className="flex justify-between items-center mb-2 pb-1 border-b border-slate-100 dark:border-slate-800">
-                <span className="font-semibold text-slate-500 dark:text-slate-400">
+                <span className="font-semibold text-slate-500 dark:text-slate-300">
                   All Tags
                 </span>
                 <button
@@ -283,7 +283,7 @@ export default function Dashboard() {
 
               <p className="text-sm italic text-primary mt-1">"{quote}"</p>
 
-              <p className="text-sm text-muted mt-2">
+              <p className="text-sm text-muted dark:text-slate-300 mt-2">
                 {new Date()
                   .toLocaleDateString("en-US", {
                     weekday: "long",
@@ -654,7 +654,7 @@ export default function Dashboard() {
                 value={customTag}
                 onChange={(e) => setCustomTag(e.target.value)}
                 placeholder="Create custom tag"
-                className="flex-1 px-3 py-2 rounded-lg border"
+                className="flex-1 px-3 py-2 rounded-lg border dark:placeholder-slate-500"
               />
 
               <button
diff --git a/frontend/src/pages/ForgeMode.jsx b/frontend/src/pages/ForgeMode.jsx
index 39a95b00..bece1ee8 100644
--- a/frontend/src/pages/ForgeMode.jsx
+++ b/frontend/src/pages/ForgeMode.jsx
@@ -396,7 +396,7 @@ export default function ForgeMode() {
                 selectedTask.priority === "High" 
                   ? "bg-red-500/10 text-red-400 border-red-500/20" 
                   : selectedTask.priority === "Medium"
-                  ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
+                  ? "bg-blue-500/10 text-blue-400 dark:text-slate-300 border-blue-500/20"
                   : "bg-slate-500/10 text-slate-400 border-slate-500/20"
               }`}>
                 {selectedTask.priority || "Medium"} Priority
@@ -513,7 +513,7 @@ export default function ForgeMode() {
 
           {soundscapeMenuOpen && (
             <div className="absolute left-0 bottom-full mb-2 w-48 bg-[#0d152c] border border-white/10 rounded-2xl shadow-2xl p-2 z-50 animate-in fade-in duration-200">
-              <div className="text-[10px] text-slate-500 font-bold uppercase tracking-wider px-3 py-1.5">Ambient Audio</div>
+              <div className="text-[10px] text-slate-500 dark:text-slate-300 font-bold uppercase tracking-wider px-3 py-1.5">Ambient Audio</div>
               {SOUNDSCAPES.map(sound => (
                 <button
                   key={sound.id}
@@ -562,7 +562,7 @@ export default function ForgeMode() {
         )}
 
         {/* Exit Hint */}
-        <p className="text-[10px] text-slate-500 tracking-wider font-medium">
+        <p className="text-[10px] text-slate-500 dark:text-slate-300 tracking-wider font-medium">
           PRO-TIP: Turn off notifications to promote deep flow states.
         </p>
       </footer>
@@ -603,7 +603,7 @@ export default function ForgeMode() {
               </div>
             ) : (
               <div className="mb-6 p-4 rounded-2xl border border-white/5 bg-white/2">
-                <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Routine Status</div>
+                <div className="text-[10px] font-bold text-slate-500 dark:text-slate-300 uppercase tracking-widest mb-1">Routine Status</div>
                 <p className="text-xs text-slate-400">No active routine task scheduled for this hour. Select one below or input custom focus.</p>
               </div>
             )}
@@ -618,7 +618,7 @@ export default function ForgeMode() {
                   placeholder="What are you working on?"
                   value={customTaskTitle}
                   onChange={(e) => setCustomTaskTitle(e.target.value)}
-                  className="flex-1 p-3 rounded-xl border border-white/10 bg-slate-950 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-[#4eb7b3]/60 transition-colors"
+                  className="flex-1 p-3 rounded-xl border border-white/10 bg-slate-950 text-xs text-white placeholder-slate-500 dark:placeholder-slate-500 focus:outline-none focus:border-[#4eb7b3]/60 transition-colors"
                 />
                 <button
                   onClick={handleCustomTaskAdd}
@@ -634,9 +634,9 @@ export default function ForgeMode() {
               <label className="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Or Select From Library</label>
               <div className="max-h-48 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
                 {isLoading ? (
-                  <p className="text-xs text-slate-500 italic py-2">Loading library...</p>
+                  <p className="text-xs text-slate-500 dark:text-slate-300 italic py-2">Loading library...</p>
                 ) : tasks.filter(t => t.status !== "Completed").length === 0 ? (
-                  <p className="text-xs text-slate-500 italic py-2">No due tasks in your library.</p>
+                  <p className="text-xs text-slate-500 dark:text-slate-300 italic py-2">No due tasks in your library.</p>
                 ) : (
                   tasks.filter(t => t.status !== "Completed").map(task => (
                     <button
@@ -649,7 +649,7 @@ export default function ForgeMode() {
                       className="w-full text-left p-3 rounded-xl border border-white/5 bg-slate-900/40 hover:bg-slate-900 text-xs text-slate-300 hover:text-white transition-colors flex items-center justify-between cursor-pointer group"
                     >
                       <span className="font-medium truncate group-hover:translate-x-0.5 transition-transform">{task.title}</span>
-                      <span className="shrink-0 text-[9px] font-semibold uppercase tracking-wider text-slate-500 px-2 py-0.5 bg-slate-950 rounded-md border border-white/5">
+                      <span className="shrink-0 text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-300 px-2 py-0.5 bg-slate-950 rounded-md border border-white/5">
                         {task.priority}
                       </span>
                     </button>
diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index 48663456..4fe26731 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -45,7 +45,7 @@ const LandingPage = () => {
           Why DailyForge?
         </h2>
 
-        <p className="text-center text-slate-500 dark:text-slate-400 mb-14 max-w-2xl mx-auto">
+        <p className="text-center text-slate-500 dark:text-slate-300 mb-14 max-w-2xl mx-auto">
           Everything you need to organize your tasks, build routines and stay
           productive every single week.
         </p>
@@ -74,7 +74,7 @@ const LandingPage = () => {
               Smart Task Management
             </h3>
 
-            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
               Create tasks with categories, priorities and durations. Keep your
               workflow organized without clutter.
             </p>
@@ -103,7 +103,7 @@ const LandingPage = () => {
               Visual Routine Builder
             </h3>
 
-            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
               Drag and drop tasks into a weekly planner and build routines that
               fit your lifestyle and goals.
             </p>
@@ -132,7 +132,7 @@ const LandingPage = () => {
               Productivity Insights
             </h3>
 
-            <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+            <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
               Track streaks, completion rates and consistency with beautiful
               analytics and contribution heatmaps.
             </p>
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 838804ce..3752b2dc 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -97,7 +97,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
   return (
     <div className="surface-bg rounded-2xl border border-soft p-7 flex flex-col gap-1">
       <h2 className="text-main text-lg font-bold mb-1">Change Password</h2>
-      <p className="text-muted text-sm mb-5">Update your password to keep your account secure</p>
+      <p className="text-muted text-sm mb-5 dark:text-slate-300">Update your password to keep your account secure</p>
 
       <label className="text-main text-sm font-medium mb-1 block">Current Password</label>
       <div className="relative mb-1">
@@ -107,7 +107,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
           onChange={(e) => handleCurrentPasswordChange(e.target.value)}
           onBlur={() => handleBlur(setShowCurrent, timerCurrent)}
           placeholder="Enter current password"
-          className={`w-full pr-10 input-focus border rounded-lg px-3 py-2.5 text-sm text-main bg-transparent
+          className={`w-full pr-10 input-focus border rounded-lg px-3 py-2.5 text-sm text-main bg-transparent dark:placeholder-slate-400
             ${apiError ? "border-red-500" : "border-soft"}`}
         />
         <EyeButton show={showCurrent} setShow={setShowCurrent} timerRef={timerCurrent} />
@@ -125,7 +125,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
           onChange={(e) => setNewPassword(e.target.value)}
           onBlur={() => handleBlur(setShowNew, timerNew)}
           placeholder="Enter new password"
-          className="w-full pr-10 input-focus border border-soft rounded-lg px-3 py-2.5 text-sm text-main bg-transparent"
+          className="w-full pr-10 input-focus border border-soft rounded-lg px-3 py-2.5 text-sm text-main bg-transparent dark:placeholder-slate-400"
         />
         <EyeButton show={showNew} setShow={setShowNew} timerRef={timerNew} />
       </div>
@@ -141,7 +141,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
             handleBlur(setShowConfirm, timerConfirm);
           }}
           placeholder="Re-enter new password"
-          className={`w-full pr-10 input-focus border rounded-lg px-3 py-2.5 text-sm text-main bg-transparent
+          className={`w-full pr-10 input-focus border rounded-lg px-3 py-2.5 text-sm text-main bg-transparent dark:placeholder-slate-400
             ${showMatchError ? "border-red-500" : "border-soft"}`}
         />
         <EyeButton show={showConfirm} setShow={setShowConfirm} timerRef={timerConfirm} />
@@ -307,13 +307,13 @@ export default function Profile() {
 
         {/* name card */}
         <div className="surface-bg rounded-2xl border border-soft p-7">
-          <p className="text-muted text-sm mb-4">Change how your name appears across DailyForge</p>
+          <p className="text-muted text-sm mb-4 dark:text-slate-300">Change how your name appears across DailyForge</p>
           <label className="text-main text-sm font-medium mb-1 block">Display Name</label>
           <input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
-            className="w-full input-focus border border-soft rounded-lg px-3 py-2.5 text-sm text-main bg-transparent mb-4"
+            className="w-full input-focus border border-soft rounded-lg px-3 py-2.5 text-sm text-main bg-transparent mb-4 dark:placeholder-slate-400"
           />
           <button
             onClick={handleNameUpdate}
@@ -332,8 +332,8 @@ export default function Profile() {
 
         {/* theme card */}
         <div className="surface-bg rounded-2xl border border-soft p-7">
-          <h2 className="text-main text-lg font-bold mb-1">Theme Settings</h2>
-          <p className="text-muted text-sm mb-5">Personalize your interface with a custom primary color</p>
+          <h2 className="text-main text-lg font-bold mb-1 dark:text-slate-200">Theme Settings</h2>
+          <p className="text-muted text-sm mb-5 dark:text-slate-400">Personalize your interface with a custom primary color</p>
           <label className="text-main text-sm font-medium mb-2 block">Primary Color</label>
           <div className="flex items-center gap-3 mb-5">
             <input
diff --git a/frontend/src/pages/RoutineBuilder.jsx b/frontend/src/pages/RoutineBuilder.jsx
index 5e092a9b..51a604a8 100644
--- a/frontend/src/pages/RoutineBuilder.jsx
+++ b/frontend/src/pages/RoutineBuilder.jsx
@@ -355,7 +355,7 @@ export default function RoutineBuilder() {
                 onChange={(e) => setRoutineName(e.target.value)}
                 placeholder="Routine name"
                 className="w-full mb-4 rounded-xl border-soft px-3 py-2 text-sm
-                           focus:outline-none bg-transparent text-main"
+                           focus:outline-none bg-transparent text-main dark:placeholder-slate-500"
               />
 
               <textarea
@@ -364,7 +364,7 @@ export default function RoutineBuilder() {
                 placeholder="Add a description (optional)"
                 rows="3"
                 className="w-full mb-4 rounded-lg border-soft px-3 py-2 text-sm
-                           focus:ring-primary dark:focus:ring-primary bg-transparent text-main dark:text-white resize-none"
+                           focus:ring-primary dark:focus:ring-primary bg-transparent text-main dark:text-white dark:placeholder-slate-500 resize-none"
               />
 
               <div className="flex justify-end gap-3">
@@ -414,7 +414,7 @@ export default function RoutineBuilder() {
                     className="text-left p-4 border rounded-xl hover:border-blue-500 transition-colors"
                   >
                     <h4 className="font-bold text-gray-900">{template.title}</h4>
-                    <p className="text-sm text-gray-500 mt-1">{template.description}</p>
+                    <p className="text-sm text-gray-500 dark:text-slate-400 mt-1">{template.description}</p>
                   </button>
                 ))}
               </div>
diff --git a/frontend/src/pages/Signup.jsx b/frontend/src/pages/Signup.jsx
index 832a5baf..d8cb1d4b 100644
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -383,7 +383,7 @@ cursor-pointer
             </div>
             <FormError error={errors.password} />
 
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-slate-400">
               Use at least 8 characters, including 1 uppercase letter,
               1 lowercase letter, 1 number, and 1 special character.
             </p>
diff --git a/frontend/src/pages/Tasks.jsx b/frontend/src/pages/Tasks.jsx
index 047d95fb..f3f65d90 100644
--- a/frontend/src/pages/Tasks.jsx
+++ b/frontend/src/pages/Tasks.jsx
@@ -364,7 +364,7 @@ export default function Tasks() {
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   placeholder="Search tasks"
-                  className="w-full rounded-lg border border-soft bg-transparent px-3 py-2 text-main placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-(--primary)/30"
+                  className="w-full rounded-lg border border-soft bg-transparent px-3 py-2 text-main placeholder:text-muted dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-(--primary)/30"
                 />
               </label>
               {/* View Toggle */}
@@ -655,7 +655,7 @@ export default function Tasks() {
               min="1"
               value={actualDuration}
               onChange={(e) => setActualDuration(e.target.value)}
-              className="w-full p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-900 dark:text-slate-100 placeholder:text-muted"
+              className="w-full p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-900 dark:text-slate-100 placeholder:text-muted dark:placeholder-slate-500"
               placeholder="Actual duration in minutes"
             />
 
diff --git a/src/components/TaskPriority.tsx b/src/components/TaskPriority.tsx
index 0c6b7899..47e1b521 100644
--- a/src/components/TaskPriority.tsx
+++ b/src/components/TaskPriority.tsx
@@ -10,7 +10,7 @@ interface TaskPriorityProps {
 
 const priorityColors: Record<Priority, string> = {
   low: 'bg-gray-100 text-gray-700',
-  medium: 'bg-blue-100 text-blue-700',
+  medium: 'bg-blue-100 text-blue-700 dark:text-slate-100',
   high: 'bg-orange-100 text-orange-700',
   urgent: 'bg-red-100 text-red-700',
 };