diff --git a/src/pages/AdminRoles.tsx b/src/pages/AdminRoles.tsx
index 0b32f52..dad4c9c 100644
--- a/src/pages/AdminRoles.tsx
+++ b/src/pages/AdminRoles.tsx
@@ -56,8 +56,9 @@ export function AdminRoles({ user }: { user: User }) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
           {roles.map(role => (
             <div key={role.id} style={{
-              background: 'var(--surface)', borderRadius: '10px',
-              padding: '1rem 1.25rem', border: `1px solid ${role.is_default ? 'var(--gold)' : 'var(--surface-2)'}`,
+              background: 'var(--card-bg)', borderRadius: '10px',
+              padding: '1rem 1.25rem', border: `1px solid ${role.is_default ? 'var(--gold)' : 'var(--card-border)'}`,
+              boxShadow: 'var(--shadow-sm)',
             }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.75rem', flexWrap: 'wrap' }}>
                 <div style={{ flex: 1, minWidth: '140px' }}>
@@ -71,7 +72,7 @@ export function AdminRoles({ user }: { user: User }) {
                     )}
                   </div>
                   {role.description && (
-                    <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{role.description}</div>
+                    <div style={{ fontSize: '0.78rem', color: 'var(--text-mid)' }}>{role.description}</div>
                   )}
                 </div>
                 <div style={{ display: 'flex', gap: '0.4rem' }}>
@@ -90,10 +91,10 @@ export function AdminRoles({ user }: { user: User }) {
                   const has = role.app_slugs.includes(app.slug)
                   return (
                     <button key={app.slug} onClick={() => toggleApp(role.id, app.slug, has)} style={{
-                      background: has ? 'var(--navy)' : 'var(--surface-2)',
-                      border: `1px solid ${has ? 'var(--gold)' : 'var(--surface-2)'}`,
-                      color: has ? 'var(--gold)' : 'var(--text-muted)',
-                      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
+                      background: has ? 'var(--navy)' : 'var(--body-bg)',
+                      border: `1px solid ${has ? 'var(--navy)' : 'var(--card-border)'}`,
+                      color: has ? '#fff' : 'var(--text-mid)',
+                      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
                     }}>
                       {app.name}
                     </button>
@@ -133,11 +134,12 @@ function CreateRoleForm({ onCreated }: { onCreated: () => void }) {
 
   return (
     <form onSubmit={submit} style={{
-      background: 'var(--surface)', borderRadius: '10px', padding: '1.25rem',
-      border: '1px solid var(--gold)', marginBottom: '1rem',
+      background: 'var(--card-bg)', borderRadius: '10px', padding: '1.25rem',
+      border: '1px solid var(--card-border)', marginBottom: '1rem',
       display: 'flex', flexDirection: 'column', gap: '0.75rem',
+      boxShadow: 'var(--shadow-sm)',
     }}>
-      <h2 style={{ fontSize: '0.9rem', color: 'var(--gold)' }}>New Role</h2>
+      <h2 style={{ fontSize: '0.9rem', color: 'var(--navy)', fontWeight: 700 }}>New Role</h2>
       <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
         <input placeholder="Role name" value={form.name} onChange={e => setName(e.target.value)}
           required style={{ ...inp, flex: 1 }} />
@@ -158,18 +160,18 @@ function CreateRoleForm({ onCreated }: { onCreated: () => void }) {
 }
 
 const inp: React.CSSProperties = {
-  background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
-  borderRadius: '6px', color: 'var(--text)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
+  background: 'var(--body-bg)', border: '1px solid var(--card-border)',
+  borderRadius: '6px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
 }
 const goldBtn: React.CSSProperties = {
-  background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
-  borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600,
+  background: 'var(--navy)', color: '#fff', border: 'none',
+  borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer',
 }
 const mutedBtn: React.CSSProperties = {
-  background: 'var(--surface-2)', color: 'var(--text-muted)', border: '1px solid var(--surface-2)',
-  borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem',
+  background: 'var(--body-bg)', color: 'var(--text-mid)', border: '1px solid var(--card-border)',
+  borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
 }
 const dangerBtn: React.CSSProperties = {
-  background: 'none', color: 'var(--danger)', border: '1px solid var(--danger)',
-  borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem',
+  background: 'none', color: '#dc2626', border: '1px solid #dc2626',
+  borderRadius: '4px', padding: '0.25rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
 }
diff --git a/src/pages/AdminUsers.tsx b/src/pages/AdminUsers.tsx
index 5bca5ac..ab75a1f 100644
--- a/src/pages/AdminUsers.tsx
+++ b/src/pages/AdminUsers.tsx
@@ -86,14 +86,14 @@ export function AdminUsers({ user }: { user: User }) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
           {users.map(u => (
             <div key={u.id} style={{
-              background: 'var(--surface)', borderRadius: '10px',
-              padding: '1rem 1.25rem', border: '1px solid var(--surface-2)',
-              opacity: u.active ? 1 : 0.5,
+              background: 'var(--card-bg)', borderRadius: '10px',
+              padding: '1rem 1.25rem', border: '1px solid var(--card-border)',
+              boxShadow: 'var(--shadow-sm)', opacity: u.active ? 1 : 0.5,
             }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
                 <div style={{ flex: 1, minWidth: '140px' }}>
                   <div style={{ fontWeight: 600, fontSize: '0.9rem' }}>{u.name}</div>
-                  <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{u.email}</div>
+                  <div style={{ fontSize: '0.78rem', color: 'var(--text-mid)' }}>{u.email}</div>
                 </div>
                 <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
                   <Toggle label="Active"   on={u.active}          onClick={() => toggle(u.id, 'active', u.active)} />
@@ -107,10 +107,10 @@ export function AdminUsers({ user }: { user: User }) {
                   const has = u.app_slugs.includes(app.slug)
                   return (
                     <button key={app.slug} onClick={() => grantRevoke(u.id, app.slug, has)} style={{
-                      background: has ? 'var(--navy)' : 'var(--surface-2)',
-                      border: `1px solid ${has ? 'var(--gold)' : 'var(--surface-2)'}`,
-                      color: has ? 'var(--gold)' : 'var(--text-muted)',
-                      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
+                      background: has ? 'var(--navy)' : 'var(--body-bg)',
+                      border: `1px solid ${has ? 'var(--navy)' : 'var(--card-border)'}`,
+                      color: has ? '#fff' : 'var(--text-mid)',
+                      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
                     }}>
                       {app.name}
                     </button>
@@ -120,11 +120,11 @@ export function AdminUsers({ user }: { user: User }) {
 
               {/* Roles */}
               <div style={{ marginTop: '0.5rem', display: 'flex', gap: '0.4rem', flexWrap: 'wrap', alignItems: 'center' }}>
-                <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginRight: '0.15rem' }}>Roles:</span>
+                <span style={{ fontSize: '0.72rem', color: 'var(--text-mid)', marginRight: '0.15rem' }}>Roles:</span>
                 {u.roles.map(r => (
                   <button key={r.id} onClick={() => removeRole(u.id, r.id)} title="Click to remove" style={{
-                    background: 'var(--navy)', border: '1px solid var(--surface-2)',
-                    color: 'var(--text-muted)', borderRadius: '4px',
+                    background: 'var(--navy)', border: '1px solid var(--navy)',
+                    color: '#fff', borderRadius: '4px',
                     padding: '0.15rem 0.5rem', fontSize: '0.72rem', cursor: 'pointer',
                   }}>
                     {r.name} ×
@@ -134,8 +134,8 @@ export function AdminUsers({ user }: { user: User }) {
                   value=""
                   onChange={e => { if (e.target.value) addRole(u.id, Number(e.target.value)) }}
                   style={{
-                    background: 'var(--surface-2)', border: '1px solid var(--surface-2)',
-                    borderRadius: '4px', color: 'var(--text-muted)',
+                    background: 'var(--body-bg)', border: '1px solid var(--card-border)',
+                    borderRadius: '4px', color: 'var(--text-mid)',
                     padding: '0.15rem 0.4rem', fontSize: '0.72rem',
                   }}
                 >
@@ -146,8 +146,8 @@ export function AdminUsers({ user }: { user: User }) {
                 </select>
                 {u.workforce_user_id && (
                   <button onClick={() => syncWfRoles(u.id)} style={{
-                    background: 'none', border: '1px solid var(--surface-2)',
-                    color: 'var(--text-muted)', borderRadius: '4px',
+                    background: 'var(--body-bg)', border: '1px solid var(--card-border)',
+                    color: 'var(--text-mid)', borderRadius: '4px',
                     padding: '0.15rem 0.5rem', fontSize: '0.72rem', cursor: 'pointer',
                   }}>
                     Sync WF roles
@@ -165,10 +165,10 @@ export function AdminUsers({ user }: { user: User }) {
 function Toggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
   return (
     <button onClick={onClick} style={{
-      background: on ? 'var(--navy)' : 'var(--surface-2)',
-      border: `1px solid ${on ? 'var(--gold)' : 'var(--surface-2)'}`,
-      color: on ? 'var(--gold)' : 'var(--text-muted)',
-      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
+      background: on ? 'var(--navy)' : 'var(--body-bg)',
+      border: `1px solid ${on ? 'var(--navy)' : 'var(--card-border)'}`,
+      color: on ? '#fff' : 'var(--text-mid)',
+      borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem', cursor: 'pointer',
     }}>
       {label}
     </button>
@@ -195,11 +195,12 @@ function CreateUserForm({ onCreated }: { onCreated: () => void }) {
 
   return (
     <form onSubmit={submit} style={{
-      background: 'var(--surface)', borderRadius: '10px', padding: '1.25rem',
-      border: '1px solid var(--gold)', marginBottom: '1rem',
+      background: 'var(--card-bg)', borderRadius: '10px', padding: '1.25rem',
+      border: '1px solid var(--card-border)', marginBottom: '1rem',
       display: 'flex', flexDirection: 'column', gap: '0.75rem',
+      boxShadow: 'var(--shadow-sm)',
     }}>
-      <h2 style={{ fontSize: '0.9rem', color: 'var(--gold)' }}>New User</h2>
+      <h2 style={{ fontSize: '0.9rem', color: 'var(--navy)', fontWeight: 700 }}>New User</h2>
       <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
         <input placeholder="Full name" value={form.name} onChange={f('name')} required style={{ ...inp, flex: 1 }} />
         <input type="email" placeholder="Email" value={form.email} onChange={f('email')} required style={{ ...inp, flex: 1 }} />
@@ -216,11 +217,11 @@ function CreateUserForm({ onCreated }: { onCreated: () => void }) {
 }
 
 const inp: React.CSSProperties = {
-  background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
-  borderRadius: '6px', color: 'var(--text)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
+  background: 'var(--body-bg)', border: '1px solid var(--card-border)',
+  borderRadius: '6px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
 }
 const chk: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.875rem', cursor: 'pointer' }
 const goldBtn: React.CSSProperties = {
-  background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
-  borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600,
+  background: 'var(--navy)', color: '#fff', border: 'none',
+  borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600, cursor: 'pointer',
 }