From e419bc21db066e7cceb0b6ba7496bfa94ebecdf9 Mon Sep 17 00:00:00 2001
From: Dave <david.els1@outlook.com>
Date: Wed, 16 Sep 2026 10:36:01 +0200
Subject: [PATCH] fix(login): use theme tokens instead of hardcoded neutral
 colours

The login page was still on Plan 1a's dark-only palette, so in light theme
it rendered a near-black card on a light page with the heading black-on-black
and effectively invisible. This is the first screen a client ever sees.

Plan 1b Task 13 required the hardcoded-colour grep to return nothing; it was
not run.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/login/page.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 1ec05d7..69afbb1 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -34,41 +34,54 @@ export default function LoginPage() {
   }
 
   return (
-    <main className="flex min-h-screen items-center justify-center p-6">
+    <main className="flex min-h-screen items-center justify-center bg-page p-6">
       <form
         onSubmit={onSubmit}
-        className="w-full max-w-sm space-y-4 rounded-xl border border-neutral-800 bg-neutral-900 p-6"
+        className="w-full max-w-sm space-y-4 rounded-[var(--radius-panel)] border border-border-subtle bg-panel p-6 shadow-[var(--shadow-panel)]"
       >
-        <h1 className="text-lg font-semibold">Sign in</h1>
+        <div className="space-y-1">
+          <h1 className="text-lg font-semibold tracking-tight text-text-primary">
+            Sign in
+          </h1>
+          <p className="text-xs text-text-muted">
+            Project tracking for client work
+          </p>
+        </div>
 
         <label className="block space-y-1">
-          <span className="text-sm text-neutral-400">Email</span>
+          <span className="text-sm text-text-secondary">Email</span>
           <input
             type="email"
             required
+            autoComplete="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className="w-full rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-2 outline-none focus:border-neutral-500"
+            className="w-full rounded-lg border border-border-subtle bg-surface px-3 py-2 text-text-primary outline-none focus:border-brand"
           />
         </label>
 
         <label className="block space-y-1">
-          <span className="text-sm text-neutral-400">Password</span>
+          <span className="text-sm text-text-secondary">Password</span>
           <input
             type="password"
             required
+            autoComplete="current-password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            className="w-full rounded-lg border border-neutral-700 bg-neutral-950 px-3 py-2 outline-none focus:border-neutral-500"
+            className="w-full rounded-lg border border-border-subtle bg-surface px-3 py-2 text-text-primary outline-none focus:border-brand"
           />
         </label>
 
-        {error && <p className="text-sm text-red-400">{error}</p>}
+        {error && (
+          <p role="alert" className="text-sm text-accent">
+            {error}
+          </p>
+        )}
 
         <button
           type="submit"
           disabled={pending}
-          className="w-full rounded-lg bg-neutral-100 px-3 py-2 font-medium text-neutral-900 disabled:opacity-50"
+          className="w-full rounded-lg bg-brand px-3 py-2 font-medium text-brand-fg transition-colors hover:bg-brand-hover disabled:opacity-50"
         >
           {pending ? "Signing in…" : "Sign in"}
         </button>