diff --git a/containers/clearview/site/styles.css b/containers/clearview/site/styles.css
index 17b7a9f..a21b16f 100644
--- a/containers/clearview/site/styles.css
+++ b/containers/clearview/site/styles.css
@@ -754,26 +754,71 @@ strong {
 }
 
 /* === Auth (login / setup) pages and header badge ============================== */
-.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f1115; margin: 0; }
-.auth-card { width: 360px; max-width: 92vw; padding: 28px; background: #1a1d24; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); color: #e6e8ee; font-family: system-ui, sans-serif; }
-.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
-.auth-sub { margin: 0 0 18px; opacity: .75; }
-.auth-card form { display: flex; flex-direction: column; gap: 12px; }
-.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
-.auth-card input[type=text], .auth-card input[type=password], .auth-card input:not([type]) { padding: 8px 10px; background: #0e1116; border: 1px solid #2a2f3a; border-radius: 6px; color: inherit; }
-.auth-card .auth-remember { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
-.auth-card button { padding: 10px; background: #3b82f6; border: 0; border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; }
-.auth-card button:hover { background: #2563eb; }
-.auth-error { background: #3a1f25; color: #fda4af; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
-.user-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #2a2f3a; border-radius: 999px; font-size: 12px; }
-.user-badge button { background: transparent; border: 0; color: #93c5fd; cursor: pointer; padding: 0; }
+.auth-page {
+  display: flex; align-items: center; justify-content: center;
+  min-height: 100vh; margin: 0;
+  color: var(--cv-text-primary);
+  background: linear-gradient(165deg, var(--cv-page), #eef7fb 55%, #f6f4ee 100%);
+  font-family: inherit;
+}
+.auth-card {
+  width: 380px; max-width: 92vw; padding: 32px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
+  border: 1px solid var(--cv-border);
+  border-radius: 16px;
+  box-shadow: var(--cv-shadow);
+}
+.auth-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--cv-text-primary); }
+.auth-sub { margin: 0 0 20px; color: var(--cv-text-secondary); }
+.auth-card form { display: flex; flex-direction: column; gap: 14px; }
+.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cv-text-secondary); }
+.auth-card input[type=text],
+.auth-card input[type=password],
+.auth-card input:not([type]) {
+  padding: 10px 12px;
+  background: var(--cv-white);
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  color: var(--cv-text-primary);
+  font: inherit;
+}
+.auth-card input:focus { outline: 2px solid var(--cv-accent); outline-offset: 1px; }
+.auth-card .auth-remember { flex-direction: row; align-items: center; gap: 8px; color: var(--cv-text-secondary); }
+.auth-card button[type=submit],
+.auth-card button:not([id$=Cancel]) {
+  padding: 11px;
+  background: linear-gradient(135deg, var(--cv-accent), var(--cv-accent-dark));
+  border: 0; border-radius: 8px;
+  color: var(--cv-white); font-weight: 600; cursor: pointer;
+}
+.auth-card button:hover { filter: brightness(1.05); }
+.auth-error {
+  background: rgba(220, 38, 38, 0.10); color: #b91c1c;
+  padding: 8px 10px; border-radius: 6px; font-size: 13px;
+  border: 1px solid rgba(220, 38, 38, 0.25);
+}
+.user-badge {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 10px; border: 1px solid var(--cv-border);
+  border-radius: 999px; font-size: 12px;
+  background: var(--cv-white); color: var(--cv-text-primary);
+}
+.user-badge button { background: transparent; border: 0; color: var(--cv-accent-dark); cursor: pointer; padding: 0; }
 .user-badge button:hover { text-decoration: underline; }
 
 /* Users / audit admin view */
-.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
-.modal { background: #1a1d24; color: #e6e8ee; padding: 20px; border-radius: 10px; min-width: 320px; display: flex; flex-direction: column; gap: 10px; }
-.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
+.modal-back { position: fixed; inset: 0; background: rgba(20,20,19,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+.modal {
+  background: var(--cv-white); color: var(--cv-text-primary);
+  padding: 22px; border-radius: 12px; min-width: 340px;
+  border: 1px solid var(--cv-border);
+  box-shadow: var(--cv-shadow);
+  display: flex; flex-direction: column; gap: 12px;
+}
+.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cv-text-secondary); }
+.modal input { padding: 8px 10px; background: var(--cv-white); border: 1px solid var(--cv-border); border-radius: 6px; color: var(--cv-text-primary); font: inherit; }
+.modal select { padding: 8px 10px; border: 1px solid var(--cv-border); border-radius: 6px; background: var(--cv-white); color: var(--cv-text-primary); font: inherit; }
 .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .users-view table { width: 100%; border-collapse: collapse; }
-.users-view th, .users-view td { padding: 6px 8px; border-bottom: 1px solid #2a2f3a; text-align: left; }
+.users-view th, .users-view td { padding: 8px 10px; border-bottom: 1px solid var(--cv-border); text-align: left; color: var(--cv-text-primary); }
 .users-toolbar { margin: 12px 0; }
diff --git a/docs/changelog-develop.md b/docs/changelog-develop.md
index 127442a..20195d8 100644
--- a/docs/changelog-develop.md
+++ b/docs/changelog-develop.md
@@ -2,6 +2,13 @@
 
 This file documents changes on the develop branch of this project.
 
+## 2026-05-28 — Authentication: align login/setup/modal styling with site light theme
+
+### Changed
+- Login + setup pages and admin modals now use the site's light theme tokens (`--cv-page`, `--cv-surface`, `--cv-text-primary`, `--cv-accent`) instead of the dark placeholder palette.
+- Input text uses `--cv-text-primary` so it is actually readable; buttons use the accent gradient.
+- User badge / Users + Audit tables use the same border, surface, and text tokens as the rest of the app.
+
 ## 2026-05-28 — Authentication: feature complete
 
 ### Added