feat: dashboard theme overhaul — light content area with branded teal sidebar

Complete frontend visual redesign using certctl logo color palette:
- Deep teal sidebar (#0c2e25) with prominent centered logo (64px in white pill)
- Light content area (#f0f4f8) with white cards and visible borders
- Brand colors from logo: teal (#2ea88f), blue (#3b7dd8), orange (#e8873a), green (#4ebe6e)
- Inter + JetBrains Mono typography, colored stat card top borders
- All 17 pages + 7 components updated (25 files, ~700 lines changed)
- 15 new dashboard screenshots replacing old dark theme screenshots
- Prometheus metrics e2e test added, integration test mock fixes
- Docs updated: architecture.md theme description, testing-guide.md DNS-PERSIST-01 coverage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/pages/AgentDetailPage.tsx

@@ -8,9 +8,9 @@ import { formatDateTime, timeAgo } from '../api/utils';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex justify-between py-2 border-b border-slate-700/50">
-      <span className="text-sm text-slate-400">{label}</span>
-      <span className="text-sm text-slate-200">{value}</span>
+    <div className="flex justify-between py-2 border-b border-surface-border/50">
+      <span className="text-sm text-ink-muted">{label}</span>
+      <span className="text-sm text-ink">{value}</span>
     </div>
   );
 }
@@ -47,7 +47,7 @@ export default function AgentDetailPage() {
     return (
       <>
         <PageHeader title="Agent" />
-        <div className="flex items-center justify-center flex-1 text-slate-400">Loading...</div>
+        <div className="flex items-center justify-center flex-1 text-ink-muted">Loading...</div>
       </>
     );
   }
@@ -75,8 +75,8 @@ export default function AgentDetailPage() {
       <div className="flex-1 overflow-y-auto p-6 space-y-6">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Agent Info */}
-          <div className="card p-5">
-            <h3 className="text-sm font-semibold text-slate-300 mb-4">Agent Details</h3>
+          <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
+            <h3 className="text-sm font-semibold text-ink-muted mb-4">Agent Details</h3>
             <InfoRow label="Health" value={<StatusBadge status={health} />} />
             <InfoRow label="Hostname" value={<span className="font-mono text-xs">{agent.hostname || '—'}</span>} />
             <InfoRow label="IP Address" value={<span className="font-mono text-xs">{agent.ip_address || '—'}</span>} />
@@ -85,7 +85,7 @@ export default function AgentDetailPage() {
               agent.last_heartbeat ? (
                 <span>
                   {timeAgo(agent.last_heartbeat)}
-                  <span className="text-slate-500 ml-2 text-xs">{formatDateTime(agent.last_heartbeat)}</span>
+                  <span className="text-ink-faint ml-2 text-xs">{formatDateTime(agent.last_heartbeat)}</span>
                 </span>
               ) : '—'
             } />
@@ -94,15 +94,15 @@ export default function AgentDetailPage() {
           </div>
 
           {/* System Info */}
-          <div className="card p-5">
-            <h3 className="text-sm font-semibold text-slate-300 mb-4">System Information</h3>
+          <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
+            <h3 className="text-sm font-semibold text-ink-muted mb-4">System Information</h3>
             <InfoRow label="Operating System" value={agent.os || '—'} />
             <InfoRow label="Architecture" value={agent.architecture || '—'} />
             <InfoRow label="IP Address" value={<span className="font-mono text-xs">{agent.ip_address || '—'}</span>} />
             <InfoRow label="Agent Version" value={agent.version || '—'} />
             {agent.capabilities?.length ? (
               <div className="mt-4">
-                <p className="text-xs text-slate-400 mb-2">Capabilities</p>
+                <p className="text-xs text-ink-muted mb-2">Capabilities</p>
                 <div className="flex flex-wrap gap-2">
                   {agent.capabilities.map((c) => (
                     <span key={c} className="badge badge-info">{c}</span>
@@ -112,7 +112,7 @@ export default function AgentDetailPage() {
             ) : null}
             {agent.tags && Object.keys(agent.tags).length > 0 ? (
               <div className="mt-4">
-                <p className="text-xs text-slate-400 mb-2">Tags</p>
+                <p className="text-xs text-ink-muted mb-2">Tags</p>
                 <div className="flex flex-wrap gap-2">
                   {Object.entries(agent.tags).map(([k, v]) => (
                     <span key={k} className="badge badge-neutral">{k}: {v}</span>
@@ -124,20 +124,20 @@ export default function AgentDetailPage() {
         </div>
 
         {/* Recent Jobs */}
-        <div className="card p-5">
-          <h3 className="text-sm font-semibold text-slate-300 mb-4">Recent Jobs</h3>
+        <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
+          <h3 className="text-sm font-semibold text-ink-muted mb-4">Recent Jobs</h3>
           {!agentJobs.length ? (
-            <p className="text-sm text-slate-500">No recent jobs</p>
+            <p className="text-sm text-ink-faint">No recent jobs</p>
           ) : (
             <div className="space-y-2">
               {agentJobs.map(j => (
-                <div key={j.id} className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-slate-700/50 transition-colors">
+                <div key={j.id} className="flex items-center justify-between py-2 px-3 rounded hover:bg-surface-muted transition-colors">
                   <div>
-                    <div className="text-sm text-slate-200">{j.type}</div>
-                    <div className="text-xs text-slate-500 font-mono">{j.id}</div>
+                    <div className="text-sm text-ink">{j.type}</div>
+                    <div className="text-xs text-ink-faint font-mono">{j.id}</div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <span className="text-xs text-slate-400 font-mono">{j.certificate_id}</span>
+                    <span className="text-xs text-ink-muted font-mono">{j.certificate_id}</span>
                     <StatusBadge status={j.status} />
                   </div>
                 </div>
@@ -147,16 +147,16 @@ export default function AgentDetailPage() {
         </div>
 
         {/* Heartbeat Timeline */}
-        <div className="card p-5">
-          <h3 className="text-sm font-semibold text-slate-300 mb-4">Heartbeat Status</h3>
+        <div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
+          <h3 className="text-sm font-semibold text-ink-muted mb-4">Heartbeat Status</h3>
           <div className="flex items-center gap-4">
             <div className={`w-3 h-3 rounded-full ${
-              health === 'Online' ? 'bg-emerald-400 animate-pulse' :
-              health === 'Stale' ? 'bg-amber-400' : 'bg-red-400'
+              health === 'Online' ? 'bg-emerald-500 animate-pulse' :
+              health === 'Stale' ? 'bg-amber-500' : 'bg-red-500'
             }`} />
             <div>
-              <p className="text-sm text-slate-200">{health}</p>
-              <p className="text-xs text-slate-400">
+              <p className="text-sm text-ink">{health}</p>
+              <p className="text-xs text-ink-muted">
                 {health === 'Online' && 'Agent is responding to heartbeat checks'}
                 {health === 'Stale' && 'Agent has not sent a heartbeat recently'}
                 {health === 'Offline' && 'Agent is not responding'}