green that means "healthy" becomes the success token

Fifteen sites across thirteen files where a raw green stood in for a
semantic state: connection dots, health lights, completed-job ticks, the
copied-to-clipboard check, the installed badge, the checksum-matched line.
All of them meant "on / connected / succeeded", and matched each other only
because several people happened to pick the same palette number.

The values do move: --success is #16a34a where green-500 was #22c55e and
emerald-500 #10b981. That is the point — one token, so a theme can change
its mind once, and under plain.css (the leak-detection theme, which greys
--success to #404040) these now go colourless instead of staying green.

Left alone, deliberately: the confetti palette and the Start button in
start-confetti-button, the duck-avatar debug HUD, MetricCard's up/down
delta ramp, CommandBlock's check on its hardcoded dark block, the
react-email template, and the plain.css comment that names the anti-pattern.
Reds are untouched — that is a separate pass, so some ternaries now read
bg-success : bg-red-500 until it happens.

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

src/workspaces/components/CheckMark.tsx

@@ -6,7 +6,7 @@ type CheckMarkProps = {
 
 export const CheckMark = ({ className }: CheckMarkProps) => {
   return (
-    <div className={cn('inline-block h-8 w-8 rounded-full bg-[#10b981]', className)}>
+    <div className={cn('inline-block h-8 w-8 rounded-full bg-success', className)}>
       <svg className="m-auto mt-2 h-4 w-4 text-white" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
         <svg
           xmlns="http://www.w3.org/2000/svg"

src/workspaces/officerdev/src/apps/AppStore/AppStoreList.tsx

@@ -26,7 +26,7 @@ function StatusBadge({ item }: { item: StoreItem }) {
   if (item.processStatus && item.processStatus !== 'online') {
     return <AlertTriangle className="h-3.5 w-3.5 text-amber-500" aria-label={item.processStatus} />;
   }
-  return <Check className="h-3.5 w-3.5 text-emerald-500" aria-label="installed" />;
+  return <Check className="h-3.5 w-3.5 text-success" aria-label="installed" />;
 }
 
 export const AppStoreList = () => {

src/workspaces/officerdev/src/apps/QrTransfer/Receiver.tsx

@@ -155,7 +155,7 @@ export const QrReceiver = () => {
 
       {done && (
         <div className="flex flex-col items-center gap-2 text-sm">
-          <p className={done.ok ? 'text-emerald-600' : 'text-red-500'}>
+          <p className={done.ok ? 'text-success' : 'text-red-500'}>
             {done.ok ? 'Complete — checksum matches' : 'Complete, but the checksum does NOT match'}
           </p>
           <a

src/workspaces/officerdev/src/apps/Terminal/Headers.tsx

@@ -7,7 +7,7 @@ const ConnectionIndicator = ({ panelId }: { panelId: string }) => {
   const [state] = useGlobal<TerminalConnectionState>(`terminal-conn-${panelId}`, 'disconnected');
 
   if (state === 'connected') {
-    return <Circle className="h-2 w-2 shrink-0 fill-emerald-500 text-emerald-500" />;
+    return <Circle className="h-2 w-2 shrink-0 fill-success text-success" />;
   }
 
   if (state === 'reconnecting') {