fix: replace hardcoded white/slate text colors with semantic tokens

- User message text: text-slate-100 → text-foreground
- JSON debug view: text-white/80 → text-muted-foreground
- History hidden message: bg-white/[0.03] → bg-muted/30
- Image borders: border-white/10 → border-separator
- Fix Tailwind classnames order warnings

Author: kylecarbs

src/browser/App.tsx

@@ -597,7 +597,7 @@ function AppInner() {
               })()
             ) : (
               <div
-                className="[&_p]:text-muted mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_h2]:text-foreground [&_p]:leading-[1.6]"
+                className="[&_p]:text-muted [&_h2]:text-foreground mx-auto w-full max-w-3xl text-center [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:leading-[1.6]"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",

src/browser/components/Context1MCheckbox.tsx

@@ -17,7 +17,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
 
   return (
     <div className="flex items-center gap-1.5">
-      <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-foreground">
+      <label className="text-foreground hover:text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none">
         <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
         1M
       </label>

src/browser/components/Messages/HistoryHiddenMessage.tsx

@@ -14,8 +14,8 @@ export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
   return (
     <div
       className={cn(
-        "my-5 py-3 px-[15px] bg-white/[0.03] border-l-[3px] border-accent rounded-sm",
-        "text-muted text-xs font-normal text-center font-sans",
+        "my-5 rounded-sm border-l-[3px] border-accent bg-muted/30 px-[15px] py-3",
+        "font-sans text-center text-xs font-normal text-muted",
         className
       )}
     >

src/browser/components/Messages/MessageWindow.tsx

@@ -82,7 +82,7 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
         <div className="relative z-10 flex flex-col gap-2">
           <div data-message-content>
             {showJson ? (
-              <pre className="m-0 overflow-x-auto rounded-xl border border-white/10 bg-black/30 p-3 text-[12px] leading-snug whitespace-pre-wrap text-white/80">
+              <pre className="border-separator bg-muted text-muted-foreground m-0 overflow-x-auto rounded-xl border p-3 text-[12px] leading-snug whitespace-pre-wrap">
                 {JSON.stringify(message, null, 2)}
               </pre>
             ) : (

src/browser/components/Messages/UserMessage.tsx

@@ -99,7 +99,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
       variant="user"
     >
       {content && (
-        <pre className="font-primary m-0 leading-6 break-words whitespace-pre-wrap text-slate-100">
+        <pre className="font-primary text-foreground m-0 leading-6 break-words whitespace-pre-wrap">
           {content}
         </pre>
       )}
@@ -110,7 +110,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
               key={idx}
               src={img.url}
               alt={`Attachment ${idx + 1}`}
-              className="max-h-[300px] max-w-72 rounded-xl border border-white/10 object-cover"
+              className="border-separator max-h-[300px] max-w-72 rounded-xl border object-cover"
             />
           ))}
         </div>

src/browser/components/ProjectCreateModal.tsx

@@ -107,7 +107,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({
         placeholder="/home/user/projects/my-project"
         autoFocus
         disabled={isCreating}
-        className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted mb-5 w-full rounded border px-3 py-2 font-mono text-sm text-foreground focus:outline-none disabled:opacity-50"
+        className="bg-modal-bg border-border-medium focus:border-accent placeholder:text-muted text-foreground mb-5 w-full rounded border px-3 py-2 font-mono text-sm focus:outline-none disabled:opacity-50"
       />
       {error && <div className="text-error -mt-3 mb-3 text-xs">{error}</div>}
       <ModalActions>

src/browser/components/ThemeToggleButton.tsx

@@ -12,7 +12,7 @@ export function ThemeToggleButton() {
       <button
         type="button"
         onClick={toggleTheme}
-        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-1 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150"
+        className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 focus-visible:ring-border-medium flex h-7 w-7 items-center justify-center rounded-md border bg-transparent transition-colors duration-150 focus-visible:ring-1"
         aria-label={label}
         data-testid="theme-toggle"
       >