feat(app): color and corner tokens that read in both themes

Light-theme muted, ok, warn and danger get darker so every text color
reads at 4.5:1 on canvas, panel and sunken; the accent stays as a fill
and words in it use the new accent-text. Dialog scrim and the close
button's red become tokens, rounded-md folds into 8 px, and
ui/tokens.test.ts checks the contrast of every text token in both
themes. Spec 15.3 lists the tokens.

Author: httpsphl

app/src/features/bots/ChiefBadge.tsx

@@ -20,7 +20,7 @@ export function ChiefBadge({ crew, compact = false }: { crew: Crew; compact?: bo
   return (
     <span
       title={c.hint(crew.name)}
-      className="inline-flex shrink-0 items-center gap-1 rounded-full bg-accent/10 px-2 py-0.5 font-medium text-accent text-xs"
+      className="inline-flex shrink-0 items-center gap-1 rounded-full bg-accent/10 px-2 py-0.5 font-medium text-accent-text text-xs"
     >
       <Crown aria-hidden size={12} />
       {c.badge}

app/src/features/chat/EffortPicker.tsx

@@ -140,7 +140,7 @@ export function EffortPicker({ bot, onLater }: { bot: Bot; onLater(text: string)
                       left: `${(at(recommended) / LAST) * 100}%`,
                       transform: `translateX(${EDGE[at(recommended)] ?? "-50%"})`,
                     }}
-                    className="absolute top-2.5 whitespace-nowrap text-[0.6875rem] text-accent"
+                    className="absolute top-2.5 whitespace-nowrap text-[0.6875rem] text-accent-text"
                   >
                     {m.recommended}
                   </span>
@@ -170,7 +170,7 @@ export function EffortPicker({ bot, onLater }: { bot: Bot; onLater(text: string)
                   pending.current = null;
                   void set("default", recommended ? m.names[recommended] : m.recommended);
                 }}
-                className="shrink-0 rounded-md px-1.5 py-0.5 font-medium text-ink-soft text-xs hover:bg-sunken hover:text-ink"
+                className="shrink-0 rounded-lg px-1.5 py-0.5 font-medium text-ink-soft text-xs hover:bg-sunken hover:text-ink"
               >
                 {m.useRecommended}
               </button>

app/src/features/chat/InboundRow.tsx

@@ -49,7 +49,7 @@ function TaskTag({ message }: { message: Message }) {
   );
   if (message.kind === "routine") {
     return (
-      <span className="inline-flex items-center gap-1 rounded-md border border-accent/40 px-1.5 text-accent text-xs">
+      <span className="inline-flex items-center gap-1 rounded-lg border border-accent/40 px-1.5 text-accent-text text-xs">
         <AlarmClock aria-hidden size={11} />
         {t.routines.tag(routine?.name ?? t.routines.tab)}
       </span>
@@ -60,7 +60,7 @@ function TaskTag({ message }: { message: Message }) {
   }
   const Icon = message.kind === "task" ? ListTodo : Reply;
   return (
-    <span className="inline-flex items-center gap-1 rounded-md border border-line px-1.5 text-muted text-xs">
+    <span className="inline-flex items-center gap-1 rounded-lg border border-line px-1.5 text-muted text-xs">
       <Icon aria-hidden size={11} />
       {message.kind === "task" ? t.chat.inbound.task : t.chat.inbound.result}
     </span>

app/src/features/chat/ModePicker.tsx

@@ -91,7 +91,7 @@ export function ModePicker({ bot, onLater }: { bot: Bot; onLater(text: string):
               }
             }}
             trailing={
-              <span className="shrink-0 rounded-md border border-danger/50 px-2 py-0.5 font-medium text-danger text-xs">
+              <span className="shrink-0 rounded-lg border border-danger/50 px-2 py-0.5 font-medium text-danger text-xs">
                 {m.turnOn}
               </span>
             }

app/src/features/chat/ToolLines.tsx

@@ -134,7 +134,7 @@ function ToolLine({ tool, createdAt }: { tool: ToolItem; createdAt: number }) {
             title={t.files.showInPanel}
             aria-label={`${t.files.showInPanel}: ${tool.summary}`}
             onClick={() => showFile(tool.file as string)}
-            className="grid size-6 shrink-0 place-items-center rounded-md text-muted transition-colors hover:bg-sunken hover:text-ink"
+            className="grid size-6 shrink-0 place-items-center rounded-lg text-muted transition-colors hover:bg-sunken hover:text-ink"
           >
             <Files aria-hidden size={14} />
           </button>
@@ -145,7 +145,7 @@ function ToolLine({ tool, createdAt }: { tool: ToolItem; createdAt: number }) {
             title={t.screens.showInPanel}
             aria-label={`${t.screens.showInPanel}: ${tool.summary}`}
             onClick={() => showScreen(tool.file as string)}
-            className="grid size-6 shrink-0 place-items-center rounded-md text-muted transition-colors hover:bg-sunken hover:text-ink"
+            className="grid size-6 shrink-0 place-items-center rounded-lg text-muted transition-colors hover:bg-sunken hover:text-ink"
           >
             <LayoutTemplate aria-hidden size={14} />
           </button>
@@ -156,7 +156,7 @@ function ToolLine({ tool, createdAt }: { tool: ToolItem; createdAt: number }) {
             title={t.browser.showInPanel}
             aria-label={`${t.browser.showInPanel}: ${title}`}
             onClick={() => showBrowser()}
-            className="grid size-6 shrink-0 place-items-center rounded-md text-muted transition-colors hover:bg-sunken hover:text-ink"
+            className="grid size-6 shrink-0 place-items-center rounded-lg text-muted transition-colors hover:bg-sunken hover:text-ink"
           >
             <Globe aria-hidden size={14} />
           </button>

app/src/features/crews/CrewView.tsx

@@ -79,7 +79,7 @@ export function CrewView({ crew }: { crew: Crew }) {
               type="button"
               onClick={openFolder}
               title={words.openFolder}
-              className="flex min-w-0 items-center gap-1 rounded-md px-1 hover:bg-sunken hover:text-ink"
+              className="flex min-w-0 items-center gap-1 rounded-lg px-1 hover:bg-sunken hover:text-ink"
             >
               <Folder aria-hidden size={13} className="shrink-0" />
               <span className="truncate">{words.folder(crew.workFolder)}</span>

app/src/features/crews/Sidebar.tsx

@@ -41,7 +41,7 @@ export function Sidebar() {
               aria-current={overview ? "page" : undefined}
               title={words.showAll}
               onClick={() => selectCrew(null)}
-              className={`rounded-md px-2 py-1 font-semibold text-xs uppercase tracking-[0.12em] transition-colors hover:bg-sunken hover:text-ink ${overview ? "bg-sunken text-ink" : "text-muted"}`}
+              className={`rounded-lg px-2 py-1 font-semibold text-xs uppercase tracking-[0.12em] transition-colors hover:bg-sunken hover:text-ink ${overview ? "bg-sunken text-ink" : "text-muted"}`}
             >
               {words.label}
             </button>
@@ -98,7 +98,7 @@ function CrewEntry({ crew }: { crew: Crew }) {
           aria-label={collapsed ? words.expand(crew.name) : words.collapse(crew.name)}
           title={collapsed ? words.expand(crew.name) : words.collapse(crew.name)}
           onClick={() => setCollapsed(crew.id, !collapsed)}
-          className="absolute left-1 z-10 grid size-6 place-items-center rounded-md text-muted hover:bg-line hover:text-ink"
+          className="absolute left-1 z-10 grid size-6 place-items-center rounded-lg text-muted hover:bg-line hover:text-ink"
         >
           <ChevronDown
             aria-hidden
@@ -179,7 +179,7 @@ const Conversation = memo(function Conversation({ bot, crew }: { bot: Bot; crew:
             </span>
             {activity && (
               <time
-                className={`shrink-0 text-xs ${unread ? "font-semibold text-accent" : "text-muted"}`}
+                className={`shrink-0 text-xs ${unread ? "font-semibold text-accent-text" : "text-muted"}`}
                 dateTime={new Date(activity.at).toISOString()}
               >
                 {when(activity.at)}

app/src/features/messages/MessageRow.tsx

@@ -57,7 +57,7 @@ function TaskTag({ message, task }: { message: Message; task: Task | undefined }
         : text.taskStatus[task.status];
   }
   return (
-    <span className="inline-flex items-center gap-1 rounded-md border border-line px-1.5 text-muted text-xs">
+    <span className="inline-flex items-center gap-1 rounded-lg border border-line px-1.5 text-muted text-xs">
       <Icon aria-hidden size={11} />
       {message.kind === "task" ? text.task : text.result}
       {detail && <span>· {detail}</span>}

app/src/features/routines/ScheduleFields.tsx

@@ -60,7 +60,7 @@ export function ScheduleFields({
                 onClick={() => toggleDay(day)}
                 className={`grid h-8 w-10 place-items-center rounded-lg border text-sm transition-colors ${
                   on
-                    ? "border-accent bg-accent/12 font-medium text-accent"
+                    ? "border-accent bg-accent/12 font-medium text-accent-text"
                     : "border-line-strong text-ink-soft hover:bg-sunken"
                 }`}
               >

app/src/features/screens/ScreenFocus.tsx

@@ -60,7 +60,7 @@ export function ScreenFocus({
                 title={t.devices[one]}
                 aria-label={t.devices[one]}
                 onClick={() => onDevice(one)}
-                className={`grid size-7 place-items-center rounded-md transition-colors ${
+                className={`grid size-7 place-items-center rounded-lg transition-colors ${
                   one === device ? "bg-panel text-ink shadow-sm" : "text-muted hover:text-ink"
                 }`}
               >
@@ -85,7 +85,7 @@ export function ScreenFocus({
         />
       </div>
       <div ref={stage} className="design-board min-h-0 flex-1 overflow-auto p-4">
-        <div className="mx-auto w-fit overflow-hidden rounded-md shadow-lift ring-1 ring-line">
+        <div className="mx-auto w-fit overflow-hidden rounded-lg shadow-lift ring-1 ring-line">
           <LiveFrame
             url={screen.url}
             device={device}