feat(web): the console joins the shared design system

web/ was the last app on its own palette — a neutral #0f1117 ground with an
indigo accent, unrelated to the logo navy that site/ and adminsite/ are built
on. It now draws from the same tokens, so all three apps are one system.

It stays locked to dark, taking site/'s dark values. That is what keeps
adminsite/'s light default meaningful: an operator with both open tells them
apart by the ground before clicking anything destructive, and now that both
are the same palette, the ground is the only thing left doing that work.

The colour names stay this app's own — text-primary, border, surface rather
than ink, rule, panel — because every screen already reads that way, and
adminsite/ already establishes that each app names the shared tokens after
its own subject.

Tokens are stored as RGB channels with the hex in a trailing comment. The
console leans on Tailwind opacity modifiers far more than the other two
(bg-danger/10, border-accent/50, ring-accent/30), and <alpha-value> only
compiles against channels; the comments keep the three token blocks
diffable by eye.

Beyond colour:
- radii collapse to site/'s 4px in tailwind.config.ts rather than rewriting
  ~140 rounded-lg classes; rounded-full is untouched for dots and pills
- badges become site/'s chip — mono, uppercase, tracked, currentColor rule,
  no fill — keeping their dot so state is never colour alone
- table column heads take the keyed-label idiom, at text-secondary rather
  than tertiary, which lands under 4.5:1 at that size
- sidebar marks the active item with an accent bar, the device site/ uses
  for the chosen plan, instead of a filled pill that reads as pressable
- filled accent and danger buttons take accent-ink; the dark accent is a
  light blue and danger a coral, and white on either was unreadable
- login's packet pulses shift from green to the accent, so the sign-in
  screen is the same two blues as the marketing hero

The last hex literals and stock-palette classes are gone; the only ones left
are NetworkBackground's canvas fills, which cannot read a CSS variable and
are commented with the token each came from.

Only the web image rebuilds from this.

web/app/(app)/keys/[id]/page.tsx

@@ -170,7 +170,7 @@ function PrivateKeyCard({ keyId }: { keyId: string }) {
           </Button>
         </div>
       ) : (
-        <div className="rounded-lg border border-border bg-[#0a0c14] p-3">
+        <div className="rounded-lg border border-border bg-well p-3">
           <pre className="overflow-x-auto whitespace-pre-wrap break-all font-mono text-xs text-text-secondary leading-relaxed">
             {privateKey}
           </pre>
@@ -337,7 +337,7 @@ export default function KeyDetailPage() {
                 {copiedKey ? <span className="text-success">Copied!</span> : "Copy"}
               </button>
             </CardHeader>
-            <div className="rounded-lg border border-border bg-[#0a0c14] p-3">
+            <div className="rounded-lg border border-border bg-well p-3">
               <pre className="overflow-x-auto whitespace-pre-wrap break-all font-mono text-xs text-text-secondary leading-relaxed">
                 {key.public_key}
               </pre>

web/app/(app)/servers/[id]/page.tsx

@@ -492,7 +492,7 @@ export default function ServerDetailPage() {
                         >
                             {updateSuccess ? "Update Sent!" : "Update Agent"}
                         </Button>
-                        <div className="relative flex-1 min-w-64 rounded-lg border border-border bg-[#0a0c14] px-4 py-2.5 font-mono text-sm">
+                        <div className="relative flex-1 min-w-64 rounded-lg border border-border bg-well px-4 py-2.5 font-mono text-sm">
                             <span className="text-accent">{server.os_info?.toLowerCase().includes("windows") ? "PS>" : "$"}</span>{" "}
                             <span className="text-text-primary">{api.getUpdateCommand(server.os_info)}</span>
                             <button

web/app/(app)/servers/new/page.tsx

@@ -92,7 +92,7 @@ export default function NewServerPage() {
                 )}
               </p>
 
-              <div className="relative rounded-lg border border-border bg-[#0a0c14] p-4 font-mono text-sm">
+              <div className="relative rounded-lg border border-border bg-well p-4 font-mono text-sm">
                 <pre className="overflow-x-auto whitespace-pre-wrap break-all text-text-secondary leading-relaxed">
                   <span className="text-accent">{os === "windows" ? "PS>" : "$"}</span>{" "}
                   <span className="text-text-primary">{command}</span>

web/app/(app)/servers/page.tsx

@@ -16,10 +16,13 @@ function resolveStatus(server: Server, latestVersion: string | undefined): DotSt
   return "ok";
 }
 
+// The palette has one amber, so the two update states split by meaning rather
+// than by shade: a stale agent is a warning, available OS packages are just
+// something waiting for you.
 const DOT_CLASSES: Record<DotStatus, string> = {
   offline:             "bg-danger",
-  "needs-update":      "bg-orange-500",
-  "has-package-updates": "bg-yellow-400",
+  "needs-update":      "bg-warning",
+  "has-package-updates": "bg-accent",
   ok:                  "bg-success",
 };
 

web/app/(app)/settings/license/page.tsx

@@ -80,10 +80,10 @@ export default function LicensePage() {
                         if (f) setBlob((await f.text()).trim());
                     }}
                 />
-                {error ? <p className="mt-2 text-sm text-red-400">{error}</p> : null}
+                {error ? <p className="mt-2 text-sm text-danger">{error}</p> : null}
                 <button
                     type="button"
-                    className="mt-3 rounded bg-accent px-3 py-1.5 text-sm"
+                    className="mt-3 rounded bg-accent px-3 py-1.5 text-sm font-semibold text-accent-ink"
                     disabled={!blob.trim() || save.isPending}
                     onClick={() => save.mutate()}
                 >

web/app/(app)/workflows/[id]/page.tsx

@@ -332,7 +332,7 @@ export default function WorkflowBuilder() {
                     <div className="pointer-events-none sticky top-0 z-10 flex justify-center pt-4">
                         <button
                             onClick={() => setPickerOpen(true)}
-                            className="pointer-events-auto inline-flex items-center gap-2 rounded-[9px] bg-signal px-4 py-2.5 text-sm font-semibold text-signal-ink shadow-[0_6px_20px_rgba(245,165,36,0.28)] hover:bg-signal/90"
+                            className="pointer-events-auto inline-flex items-center gap-2 rounded bg-signal px-4 py-2.5 text-sm font-semibold text-signal-ink shadow-panel hover:bg-signal/90"
                         >
                             <span className="text-base leading-none">+</span> Add step
                         </button>
@@ -369,7 +369,7 @@ export default function WorkflowBuilder() {
                                             e.dataTransfer.setData("text/plain", JSON.stringify({ kind: "move", from: i }));
                                         }}
                                         onClick={() => setSelected(i)}
-                                        className={`w-[340px] cursor-pointer rounded-[10px] border bg-surface p-3 ${isSelected ? "border-signal ring-2 ring-signal/40" : "border-border"}`}
+                                        className={`w-[340px] cursor-pointer rounded border bg-surface p-3 ${isSelected ? "border-signal ring-2 ring-signal/40" : "border-border"}`}
                                     >
                                         <div className="mb-2 flex items-center gap-2">
                                             <span className="grid h-5 w-5 place-items-center rounded border border-border font-mono text-[10px] text-text-secondary">{i + 1}</span>
@@ -391,7 +391,7 @@ export default function WorkflowBuilder() {
                                 onDragOver={(e) => e.preventDefault()}
                                 onDrop={(e) => handleDrop(e, 0)}
                                 onClick={() => setPickerOpen(true)}
-                                className="mt-2 w-full rounded-[10px] border border-dashed border-border bg-surface py-6 text-sm text-text-secondary hover:border-signal/50 hover:text-text-primary"
+                                className="mt-2 w-full rounded border border-dashed border-border bg-surface py-6 text-sm text-text-secondary hover:border-signal/50 hover:text-text-primary"
                             >
                                 + Add your first step
                             </button>

web/app/(app)/workflows/[id]/runs/[runId]/page.tsx

@@ -127,7 +127,7 @@ function LogTerminal({ runId, server }: { runId: string; server: ServerRun }) {
     const activeStep = server.steps.find((s) => s.status === "running") ?? [...server.steps].reverse().find((s) => s.started_at);
 
     return (
-        <div className="overflow-hidden rounded-xl border border-border bg-[#0a0b10]">
+        <div className="overflow-hidden rounded-xl border border-border bg-well">
             <div className="flex items-center justify-between gap-2 border-b border-border bg-surface px-4 py-3">
                 <span className="truncate font-mono text-[13px] font-semibold text-text-primary">
                     {activeStep ? activeStep.name : "Output"} <span className="font-normal text-text-secondary">{server.hostname}</span>
@@ -167,7 +167,7 @@ function LogLines({ text }: { text: string }) {
                 const isMarker = body.startsWith("=====");
                 return (
                     <span key={i} className="block">
-                        <span className="select-none text-[#565b74]" title={m[1]}>
+                        <span className="select-none text-text-tertiary" title={m[1]}>
                             {local}{" "}
                         </span>
                         <span className={isMarker ? "font-semibold text-accent" : ""}>{body || " "}</span>