diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 48569cc..e8881f1 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index e71a6b6..6efac53 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -90,3 +90,27 @@ button:not([class]):disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* ── Text field appearance ───────────────────────────────────────────────────
+   Inputs keep white background + dark text in all colour modes so that typed
+   content is always easy to read regardless of theme.
+   ────────────────────────────────────────────────────────────────────────── */
+
+input:not([class]),
+textarea:not([class]),
+select:not([class]) {
+  background-color: #ffffff;
+  color: #0f172a; /* slate-900 */
+  border: 1px solid rgb(var(--color-border));
+  border-radius: var(--radius);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+input:not([class]):focus,
+textarea:not([class]):focus,
+select:not([class]):focus {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 2px;
+}