@open-mercato/ui 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/src/backend/custom-fields/FieldDefinitionsEditor.tsx

@@ -397,7 +397,7 @@ export function FieldDefinitionsEditor({
         </div>
       )}
       {orderNotice?.dirty && (
-        <div className="sticky top-0 z-10 -mt-1 -mb-1">
+        <div className="sticky top-0 z-sticky -mt-1 -mb-1">
           <div className="inline-flex items-center gap-2 text-xs px-2 py-1 rounded border bg-amber-50 text-amber-800 shadow-sm">
             {orderNotice?.saving ? 'Saving order…' : (orderNotice?.message ?? 'Reordered — saving soon')}
           </div>
@@ -906,7 +906,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                   >
                     <div>
                       <div className="font-medium text-foreground">{option.label}</div>
-                      <div className="text-muted-foreground font-mono text-[11px]">{option.value}</div>
+                      <div className="text-muted-foreground font-mono text-overline">{option.value}</div>
                     </div>
                     <IconButton
                       variant="ghost"
@@ -1328,7 +1328,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
           <div>
             <label className="text-xs font-medium">Group code</label>
             <input
-              className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono disabled:cursor-not-allowed disabled:bg-muted/40 disabled:text-muted-foreground"
+              className="mt-1 w-full rounded border px-2 py-1 text-sm font-mono disabled:cursor-not-allowed disabled:bg-muted/50 disabled:text-muted-foreground"
               value={groupDraft.code}
               onChange={(event) => {
                 setGroupDraft((prev) => ({ ...prev, code: event.target.value }))

package/src/backend/dashboard/DashboardScreen.tsx

@@ -379,7 +379,7 @@ export function DashboardScreen() {
       <InjectionSpot spotId={dashboardBeforeSpotId} context={injectionContext} />
 
       {editing && availableWidgets.length > 0 && (
-        <div className="rounded-lg border border-dashed bg-muted/40 p-4">
+        <div className="rounded-lg border border-dashed bg-muted/50 p-4">
           <div className="mb-2 text-sm font-medium text-muted-foreground">{t('dashboard.addWidget')}</div>
           <div className="flex flex-wrap gap-2">
             {availableWidgets.map((meta) => (

package/src/backend/date-range/DateRangeSelect.tsx

@@ -33,7 +33,7 @@ export function DateRangeSelect({
       )}
       <select
         id={id}
-        className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         value={value}
         onChange={(e) => onChange(e.target.value as DateRangePreset)}
       >

package/src/backend/date-range/InlineDateRangeSelect.tsx

@@ -25,7 +25,7 @@ export function InlineDateRangeSelect({
   return (
     <div className={`relative inline-flex items-center ${className}`}>
       <select
-        className="appearance-none rounded-md border border-border bg-background px-2 py-0.5 pr-6 text-xs text-foreground hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary cursor-pointer"
+        className="appearance-none rounded-md border border-border bg-background px-2 py-0.5 pr-6 text-xs text-foreground hover:border-primary/50 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
         value={value}
         onChange={(e) => onChange(e.target.value as DateRangePreset)}
         title={displayLabel}

package/src/backend/detail/AccessDeniedMessage.tsx

@@ -16,7 +16,7 @@ export function AccessDeniedMessage({ label, description, action, className, ico
   return (
     <div
       className={cn(
-        'flex items-start gap-3 rounded border border-amber-300/50 bg-amber-50/50 px-3 py-2 text-sm text-amber-900 dark:border-amber-700/50 dark:bg-amber-950/30 dark:text-amber-200',
+        'flex items-start gap-3 rounded border border-status-warning-border bg-status-warning-bg px-3 py-2 text-sm text-status-warning-text',
         className
       )}
       role="alert"

package/src/backend/detail/ActivitiesSection.tsx

@@ -177,7 +177,7 @@ function TimelineItemHeader({
   return (
     <div className={['flex items-start gap-3', className].filter(Boolean).join(' ')}>
       {iconNode ? (
-        <span className={['inline-flex items-center justify-center rounded border border-border bg-muted/40', wrapperSize].join(' ')}>
+        <span className={['inline-flex items-center justify-center rounded border border-border bg-muted/50', wrapperSize].join(' ')}>
           {iconNode}
         </span>
       ) : null}
@@ -323,7 +323,7 @@ function ActivityForm({
             typeof value === 'string' && value.length ? value : normalizedEntityOptions[0]?.id ?? ''
           return (
             <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               value={currentValue}
               onChange={(event) => setValue(event.target.value)}
             >
@@ -348,7 +348,7 @@ function ActivityForm({
           const currentValue = typeof value === 'string' ? value : ''
           return (
             <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               value={currentValue}
               onChange={(event) => setValue(event.target.value)}
             >
@@ -410,7 +410,7 @@ function ActivityForm({
       component: ({ value, setValue }) => (
         <input
           type="datetime-local"
-          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           value={typeof value === 'string' ? value : ''}
           onChange={(event) => setValue(event.target.value || '')}
           onFocus={(event) => {
@@ -1120,7 +1120,7 @@ function ActivitiesSectionImpl<C = unknown>({
                   return (
                     <div
                       key={activity.id}
-                      className="group space-y-3 rounded-lg border bg-card p-4 transition hover:border-border/80 cursor-pointer"
+                      className="group space-y-3 rounded-lg border bg-card p-4 transition hover:border-border/70 cursor-pointer"
                       role="button"
                       tabIndex={0}
                       onClick={() => openEditDialog(activity)}

package/src/backend/detail/AddressEditor.tsx

@@ -216,8 +216,8 @@ export function AddressEditor<C = unknown>({
 
   const inputClass = (field: AddressEditorField) =>
     [
-      'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring',
-      errors[field] ? 'border-red-500 focus:ring-red-500' : 'border-input bg-background',
+      'w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      errors[field] ? 'border-red-500 aria-invalid:ring-destructive' : 'border-input bg-background',
     ].join(' ')
 
   return (
@@ -430,7 +430,7 @@ export function AddressEditor<C = unknown>({
                 value={countryQuery}
                 onChange={(evt) => setCountryQuery(evt.target.value)}
               />
-              <div className="max-h-64 overflow-auto rounded-md border border-border/60">
+              <div className="max-h-64 overflow-auto rounded-md border border-border/70">
                 <ul className="divide-y divide-border/50">
                   {filteredCountryOptions.map((option) => (
                     <li key={option.code}>

package/src/backend/detail/AddressTiles.tsx

@@ -397,7 +397,7 @@ export function AddressTiles<C = unknown>({
     (key: string) => (
       <div
         key={key}
-        className="rounded-lg border-2 border-dashed border-muted-foreground/50 bg-muted/20 p-4 text-sm"
+        className="rounded-lg border-2 border-dashed border-muted-foreground/50 bg-muted/30 p-4 text-sm"
         onKeyDown={(event) => {
           if (!(event.metaKey || event.ctrlKey)) return
           if (event.key !== 'Enter') return
@@ -514,7 +514,7 @@ export function AddressTiles<C = unknown>({
             return (
               <div
                 key={address.id}
-                className="group rounded-lg border border-border/60 bg-card p-4 text-sm transition hover:border-border"
+                className="group rounded-lg border border-border/70 bg-card p-4 text-sm transition hover:border-border"
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="space-y-1">
@@ -523,7 +523,7 @@ export function AddressTiles<C = unknown>({
                         {address.name ?? label('labelFallback', 'Address')}
                       </p>
                       {address.isPrimary ? (
-                        <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase">
+                        <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-overline font-semibold uppercase">
                           {label('primaryBadge', 'Primary')}
                         </span>
                       ) : null}

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -634,7 +634,7 @@ export function AttachmentMetadataDialog({ open, onOpenChange, item, availableTa
                 {loadError}
               </div>
             ) : null}
-            <div className="rounded border border-border/60 bg-muted/30 px-3 py-2">
+            <div className="rounded border border-border/70 bg-muted/30 px-3 py-2">
               <div className="text-xs font-semibold text-muted-foreground">
                 {t('attachments.library.metadata.extractedTitle', 'Extracted text')}
               </div>

package/src/backend/detail/CustomDataSection.tsx

@@ -630,7 +630,7 @@ function CustomDataSectionImpl({
         ) : (
           <div
             className={cn(
-              'rounded-lg border bg-muted/20 p-3 sm:p-4 space-y-2 sm:space-y-3 transition hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+              'rounded-lg border bg-muted/30 p-3 sm:p-4 space-y-2 sm:space-y-3 transition hover:border-border/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
               hasFields && !loading ? 'cursor-pointer' : 'cursor-default',
             )}
             role={hasFields && !loading ? 'button' : undefined}

package/src/backend/detail/InlineEditors.tsx

@@ -131,7 +131,7 @@ export function InlineTextEditor({
   const containerClasses = cn(
     'group overflow-hidden',
     variant === 'muted'
-      ? 'relative rounded border bg-muted/20 p-3'
+      ? 'relative rounded border bg-muted/30 p-3'
       : variant === 'plain'
         ? 'relative flex items-center gap-3 rounded-none border-0 p-0'
         : 'rounded-lg border p-4',
@@ -324,7 +324,7 @@ export function InlineTextEditor({
                 />
               ) : (
               <input
-                className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 value={draft}
                 onChange={(event) => {
                   if (error) setError(null)
@@ -554,7 +554,7 @@ export function InlineMultilineEditor({
 
   const containerClasses = cn(
     'group rounded-lg border p-4',
-    variant === 'muted' ? 'bg-muted/20' : null,
+    variant === 'muted' ? 'bg-muted/30' : null,
     activateOnClick && !editing ? 'cursor-pointer' : null,
     containerClassName ?? null,
   )
@@ -638,7 +638,7 @@ export function InlineMultilineEditor({
                 <Textarea
                   ref={textareaRef}
                   rows={3}
-                  className="w-full resize-none overflow-hidden rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="w-full resize-none overflow-hidden rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   placeholder={placeholder}
                   value={draft}
                   onChange={(event) => {
@@ -827,7 +827,7 @@ export function InlineSelectEditor({
                 renderEditor({ value: draft, onChange: setDraft })
               ) : (
                 <select
-                  className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   value={draft}
                   onChange={(event) => setDraft(event.target.value)}
                 >

package/src/backend/detail/NotesSection.tsx

@@ -157,7 +157,7 @@ function TimelineItemHeader({
   return (
     <div className={['flex items-start gap-3', className].filter(Boolean).join(' ')}>
       {icon && renderIcon ? (
-        <span className={['inline-flex items-center justify-center rounded border border-border bg-muted/40', wrapperSize].join(' ')}>
+        <span className={['inline-flex items-center justify-center rounded border border-border bg-muted/50', wrapperSize].join(' ')}>
           {renderIcon(icon, iconSizeClass)}
         </span>
       ) : null}
@@ -948,7 +948,7 @@ function NotesSectionImpl<C = unknown>({
       <div
         className={[
           'overflow-hidden rounded-xl transition-all duration-300 ease-out',
-          composerOpen ? 'max-h-[1200px] bg-muted/10 p-4 opacity-100' : 'pointer-events-none max-h-0 p-0 opacity-0',
+          composerOpen ? 'max-h-[1200px] bg-muted/30 p-4 opacity-100' : 'pointer-events-none max-h-0 p-0 opacity-0',
         ].join(' ')}
         aria-hidden={!composerOpen}
       >
@@ -1015,7 +1015,7 @@ function NotesSectionImpl<C = unknown>({
                     </label>
                     <select
                       id="note-entity-select"
-                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       value={selectedEntityId}
                       onChange={(event) => setSelectedEntityId(event.target.value)}
                       disabled={isSubmitting || isLoading || !normalizedEntityOptions.length}
@@ -1038,7 +1038,7 @@ function NotesSectionImpl<C = unknown>({
                     </label>
                     <select
                       id="note-deal-select"
-                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      className="h-9 rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       value={selectedDealId}
                       onChange={(event) => setSelectedDealId(event.target.value)}
                       disabled={isSubmitting || isLoading}
@@ -1072,7 +1072,7 @@ function NotesSectionImpl<C = unknown>({
               <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-dashed border-muted-foreground/40 px-3 py-2">
                 <div className="flex flex-wrap items-center gap-3 text-sm">
                   {draftIcon && renderIcon ? (
-                    <span className="inline-flex h-7 w-7 items-center justify-center rounded border border-border bg-muted/40">
+                    <span className="inline-flex h-7 w-7 items-center justify-center rounded border border-border bg-muted/50">
                       {renderIcon(draftIcon, 'h-4 w-4')}
                     </span>
                   ) : null}
@@ -1231,7 +1231,7 @@ function NotesSectionImpl<C = unknown>({
                       rows={3}
                       textareaRef={contentTextareaRef}
                       onTextareaInput={(event) => adjustTextareaSize(event.currentTarget)}
-                      textareaClassName="w-full resize-none overflow-hidden rounded-md border border-border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      textareaClassName="w-full resize-none overflow-hidden rounded-md border border-border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       editorWrapperClassName="w-full rounded-md border border-muted-foreground/20 bg-background p-2"
                       remarkPlugins={markdownPlugins}
                     />

package/src/backend/detail/TagsSection.tsx

@@ -412,7 +412,7 @@ function TagsSectionImpl({
         </div>
       ) : (
         <div
-          className="group/tags relative rounded-lg border bg-muted/20 p-4 transition-colors hover:border-primary/40 focus-visible:border-primary focus-visible:outline-none"
+          className="group/tags relative rounded-lg border bg-muted/30 p-4 transition-colors hover:border-primary/40 focus-visible:border-primary focus-visible:outline-none"
           role={disableInteraction ? undefined : 'button'}
           tabIndex={disableInteraction ? -1 : 0}
           onClick={disableInteraction ? undefined : startEditing}

package/src/backend/devtools/UmesDevToolsPanel.tsx

@@ -46,18 +46,18 @@ export function UmesDevToolsPanel() {
   const hasErrors = data.conflicts.some((c) => c.severity === 'error')
 
   return (
-    <div className="fixed inset-y-0 right-0 z-[9999] flex w-[440px] flex-col border-l bg-background text-foreground shadow-lg"
+    <div className="fixed inset-y-0 right-0 z-top flex w-[440px] flex-col border-l bg-background text-foreground shadow-lg"
       style={{ fontSize: '13px' }}
     >
       {/* Header */}
       <div className="flex shrink-0 items-center justify-between border-b bg-muted/50 px-4 py-2.5">
         <div className="flex items-center gap-2">
           <strong className="text-sm">UMES DevTools</strong>
-          <span className="rounded bg-blue-100 px-1.5 py-px text-[10px] font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+          <span className="rounded bg-status-info-bg px-1.5 py-px text-overline font-semibold text-status-info-text">
             {data.extensions.length} ext
           </span>
           {conflictCount > 0 && (
-            <span className={`rounded px-1.5 py-px text-[10px] font-semibold ${hasErrors ? 'bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400' : 'bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-400'}`}>
+            <span className={`rounded px-1.5 py-px text-overline font-semibold ${hasErrors ? 'bg-status-error-bg text-status-error-text' : 'bg-status-warning-bg text-status-warning-text'}`}>
               {conflictCount} conflict{conflictCount !== 1 ? 's' : ''}
             </span>
           )}
@@ -67,7 +67,7 @@ export function UmesDevToolsPanel() {
             type="button"
             variant="outline"
             size="sm"
-            className="h-auto px-2 py-0.5 text-[11px]"
+            className="h-auto px-2 py-0.5 text-overline"
             onClick={() => data.refresh()}
           >
             Refresh
@@ -92,7 +92,7 @@ export function UmesDevToolsPanel() {
             type="button"
             variant="ghost"
             size="sm"
-            className={`h-auto flex-1 rounded-none border-b-2 px-1 py-2 text-[11px] hover:bg-transparent ${
+            className={`h-auto flex-1 rounded-none border-b-2 px-1 py-2 text-overline hover:bg-transparent ${
               activeTab === tab.id
                 ? 'border-primary font-semibold text-primary'
                 : 'border-transparent text-muted-foreground'
@@ -114,7 +114,7 @@ export function UmesDevToolsPanel() {
       </div>
 
       {/* Footer */}
-      <div className="shrink-0 border-t bg-muted/50 px-4 py-1.5 text-center text-[10px] text-muted-foreground">
+      <div className="shrink-0 border-t bg-muted/50 px-4 py-1.5 text-center text-overline text-muted-foreground">
         Ctrl+Shift+U to toggle | Dev mode only
       </div>
     </div>

package/src/backend/devtools/components/ConflictWarnings.tsx

@@ -5,7 +5,7 @@ import type { UmesConflict } from '@open-mercato/shared/lib/umes/devtools-types'
 export function ConflictWarnings({ conflicts }: { conflicts: UmesConflict[] }) {
   if (conflicts.length === 0) {
     return (
-      <p className="text-xs italic text-emerald-600 dark:text-emerald-400">
+      <p className="text-xs italic text-status-success-text">
         No conflicts detected
       </p>
     )
@@ -18,15 +18,15 @@ export function ConflictWarnings({ conflicts }: { conflicts: UmesConflict[] }) {
           key={idx}
           className={`mb-1.5 rounded border-l-[3px] p-2 text-xs ${
             conflict.severity === 'error'
-              ? 'border-l-red-500 bg-red-50 dark:bg-red-950/30'
-              : 'border-l-amber-500 bg-amber-50 dark:bg-amber-950/30'
+              ? 'border-l-status-error-border bg-status-error-bg'
+              : 'border-l-status-warning-border bg-status-warning-bg'
           }`}
         >
           <div className="mb-0.5 font-semibold">
             {conflict.severity === 'error' ? 'Error' : 'Warning'}: {conflict.type}
           </div>
           <div className="text-foreground/80">{conflict.message}</div>
-          <div className="mt-0.5 text-[11px] text-muted-foreground">
+          <div className="mt-0.5 text-overline text-muted-foreground">
             Modules: {conflict.moduleIds.join(', ')} | Target: {conflict.target}
           </div>
         </div>

package/src/backend/devtools/components/EnricherTiming.tsx

@@ -26,7 +26,7 @@ export function EnricherTiming({ entries }: { entries: EnricherTimingEntry[] })
       {recent.map((entry, idx) => {
         const classes = getTimingClasses(entry.durationMs)
         return (
-          <div key={idx} className="border-b border-border/50 py-1 text-xs">
+          <div key={idx} className="border-b border-border/70 py-1 text-xs">
             <div className="mb-0.5 flex justify-between">
               <span className="font-medium">{entry.enricherId}</span>
               <span className={`font-mono font-semibold ${classes.text}`}>
@@ -39,7 +39,7 @@ export function EnricherTiming({ entries }: { entries: EnricherTimingEntry[] })
                 style={{ width: getTimingBarWidth(entry.durationMs, maxMs) }}
               />
             </div>
-            <div className="mt-px text-[11px] text-muted-foreground">
+            <div className="mt-px text-overline text-muted-foreground">
               {entry.targetEntity} | {entry.moduleId}
             </div>
           </div>

package/src/backend/devtools/components/EventFlow.tsx

@@ -3,9 +3,9 @@
 import type { EventFlowEntry } from '@open-mercato/shared/lib/umes/devtools-types'
 
 const RESULT_CLASSES: Record<string, { text: string; bg: string }> = {
-  allowed: { text: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-950/30' },
-  blocked: { text: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950/30' },
-  error: { text: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950/30' },
+  allowed: { text: 'text-status-success-icon', bg: 'bg-status-success-bg' },
+  blocked: { text: 'text-status-error-icon', bg: 'bg-status-error-bg' },
+  error: { text: 'text-status-warning-icon', bg: 'bg-status-warning-bg' },
 }
 
 export function EventFlow({ entries }: { entries: EventFlowEntry[] }) {
@@ -30,11 +30,11 @@ export function EventFlow({ entries }: { entries: EventFlowEntry[] }) {
           >
             <div>
               <span className="font-medium">{entry.eventName}</span>
-              <span className="ml-1.5 text-[11px] text-muted-foreground">
+              <span className="ml-1.5 text-overline text-muted-foreground">
                 {entry.widgetId}
               </span>
             </div>
-            <span className={`text-[11px] font-semibold ${classes.text}`}>
+            <span className={`text-overline font-semibold ${classes.text}`}>
               {entry.result}
             </span>
           </div>

package/src/backend/devtools/components/ExtensionPointList.tsx

@@ -35,16 +35,16 @@ export function ExtensionPointList({ extensions }: { extensions: UmesExtensionIn
             {items.map((ext, idx) => (
               <div
                 key={`${ext.id}-${idx}`}
-                className="flex items-center justify-between border-b border-border/50 py-1 text-xs"
+                className="flex items-center justify-between border-b border-border/70 py-1 text-xs"
               >
                 <div>
                   <span className="font-medium">{ext.id}</span>
                   <span className="ml-1.5 text-muted-foreground">[{ext.moduleId}]</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-[11px] text-muted-foreground">{ext.target}</span>
+                  <span className="text-overline text-muted-foreground">{ext.target}</span>
                   {ext.priority !== 0 && (
-                    <span className="rounded bg-muted px-1.5 py-px text-[10px] font-semibold">
+                    <span className="rounded bg-muted px-1.5 py-px text-overline font-semibold">
                       P{ext.priority}
                     </span>
                   )}

package/src/backend/devtools/components/InterceptorActivity.tsx

@@ -3,9 +3,9 @@
 import type { InterceptorActivityEntry } from '@open-mercato/shared/lib/umes/devtools-types'
 
 const RESULT_CLASSES: Record<string, { text: string; bg: string }> = {
-  allowed: { text: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-950/30' },
-  blocked: { text: 'text-red-600 dark:text-red-400', bg: 'bg-red-50 dark:bg-red-950/30' },
-  modified: { text: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-950/30' },
+  allowed: { text: 'text-status-success-icon', bg: 'bg-status-success-bg' },
+  blocked: { text: 'text-status-error-icon', bg: 'bg-status-error-bg' },
+  modified: { text: 'text-status-warning-icon', bg: 'bg-status-warning-bg' },
 }
 
 export function InterceptorActivity({ entries }: { entries: InterceptorActivityEntry[] }) {
@@ -27,16 +27,16 @@ export function InterceptorActivity({ entries }: { entries: InterceptorActivityE
           <div key={idx} className={`mb-1 rounded p-1.5 px-2 text-xs ${classes.bg}`}>
             <div className="flex items-center justify-between">
               <span className="font-medium">{entry.interceptorId}</span>
-              <span className={`text-[11px] font-semibold uppercase ${classes.text}`}>
+              <span className={`text-overline font-semibold uppercase ${classes.text}`}>
                 {entry.result}
               </span>
             </div>
-            <div className="mt-0.5 text-[11px] text-muted-foreground">
+            <div className="mt-0.5 text-overline text-muted-foreground">
               {entry.method} {entry.route} | {entry.durationMs}ms
               {entry.statusCode ? ` | ${entry.statusCode}` : ''}
             </div>
             {entry.message && (
-              <div className="mt-px text-[11px] text-muted-foreground/70">
+              <div className="mt-px text-overline text-muted-foreground/70">
                 {entry.message}
               </div>
             )}

package/src/backend/forms/ActionsDropdown.tsx

@@ -154,7 +154,7 @@ export function ActionsDropdown({
         <div
           ref={menuRef}
           role="menu"
-          className="fixed w-52 rounded-md border bg-background p-1 shadow-md focus:outline-none z-[1000]"
+          className="fixed w-52 rounded-md border bg-background p-1 shadow-md focus-visible:outline-none z-dropdown"
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}
           style={{

package/src/backend/forms/FormActionButtons.tsx

@@ -65,10 +65,9 @@ export function FormActionButtons({
       {showDelete ? (
         <Button
           type="button"
-          variant="outline"
+          variant="destructive-outline"
           onClick={onDelete}
           disabled={isDeleting}
-          className="text-red-600 border-red-200 hover:bg-red-50 rounded"
         >
           {isDeleting ? (
             <Loader2 className="size-4 mr-2 animate-spin" />
@@ -79,9 +78,9 @@ export function FormActionButtons({
         </Button>
       ) : null}
       {cancelHref ? (
-        <Link href={cancelHref} className="h-9 inline-flex items-center rounded border px-3 text-sm">
-          {resolvedCancelLabel}
-        </Link>
+        <Button asChild variant="outline">
+          <Link href={cancelHref}>{resolvedCancelLabel}</Link>
+        </Button>
       ) : null}
       {submit ? (
         <Button

package/src/backend/indexes/PartialIndexBanner.tsx

@@ -33,27 +33,27 @@ export function PartialIndexBanner() {
   const hasExcessIndexedRows = hasCounts && indexed > base
 
   return (
-    <div className="mb-4 flex flex-col gap-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-3 text-sm text-amber-900 dark:border-amber-600/60 dark:bg-amber-950/40 dark:text-amber-100 md:flex-row md:items-center md:justify-between">
+    <div className="mb-4 flex flex-col gap-3 rounded-md border border-status-warning-border bg-status-warning-bg px-3 py-3 text-sm text-status-warning-text md:flex-row md:items-center md:justify-between">
       <div className="flex flex-col gap-2 text-sm">
-        <div className="flex items-center gap-2 font-medium text-amber-950 dark:text-amber-50">
+        <div className="flex items-center gap-2 font-medium text-status-warning-text">
           <AlertTriangle className="size-4" aria-hidden="true" />
           <span>{t('query_index.banner.partial_title')}</span>
         </div>
-        <p className="text-amber-900 dark:text-amber-100">
+        <p className="text-status-warning-text">
           {t('query_index.banner.partial_description')}
         </p>
-        <p className="text-xs text-amber-900/90 dark:text-amber-100/90">
+        <p className="text-xs text-status-warning-text">
           {t('query_index.banner.partial_entity', { entity: entityLabel })}
         </p>
         {hasCounts && (
-          <p className="text-xs text-amber-900/90 dark:text-amber-100/90">
+          <p className="text-xs text-status-warning-text">
             {hasExcessIndexedRows
               ? t('query_index.banner.partial_counts_excess', { indexed, total: base })
               : t('query_index.banner.partial_counts', { indexed, total: base })}
           </p>
         )}
         {warning.scope === 'global' && (
-          <p className="text-xs text-amber-900/80 dark:text-amber-100/75">
+          <p className="text-xs text-status-warning-text">
             {t('query_index.banner.partial_global_note')}
           </p>
         )}
@@ -63,7 +63,7 @@ export function PartialIndexBanner() {
           asChild
           variant="outline"
           size="sm"
-          className="border-amber-300 text-amber-900 hover:bg-amber-100 dark:border-amber-500/60 dark:text-amber-100 dark:hover:bg-amber-900/60"
+          className="border-status-warning-border text-status-warning-text hover:bg-status-warning-bg"
         >
           <Link href={manageIndexesHref}>
             {t('query_index.banner.manage_indexes')}
@@ -74,7 +74,7 @@ export function PartialIndexBanner() {
           size="sm"
           type="button"
           onClick={() => dismissPartialIndexWarning()}
-          className="text-amber-900 hover:bg-amber-100 dark:text-amber-100 dark:hover:bg-amber-900/60"
+          className="text-status-warning-text hover:bg-status-warning-bg"
           aria-label={t('query_index.banner.dismiss')}
         >
           <X className="mr-1 size-4" aria-hidden="true" />

package/src/backend/inputs/ComboboxInput.tsx

@@ -238,7 +238,7 @@ export function ComboboxInput({
       />
 
       {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
-        <div className="absolute z-50 w-full mt-1 rounded border bg-popover shadow-lg max-h-48 sm:max-h-60 overflow-auto">
+        <div className="absolute z-dropdown w-full mt-1 rounded border bg-popover shadow-lg max-h-48 sm:max-h-60 overflow-auto">
           {loading && touched ? (
             <div className="px-3 py-2 text-xs text-muted-foreground">Loading suggestions…</div>
           ) : (

package/src/backend/inputs/DatePicker.tsx

@@ -111,7 +111,7 @@ export function DatePicker({
           className={cn(
             'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
             'bg-background transition-colors',
-            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
             'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
             readOnly && 'cursor-default opacity-70',
             !formattedValue && 'text-muted-foreground',
@@ -140,7 +140,7 @@ export function DatePicker({
               <button
                 type="button"
                 onClick={handleToday}
-                className="text-sm text-primary hover:underline focus:outline-none"
+                className="text-sm text-primary hover:underline focus-visible:outline-none"
               >
                 {todayText}
               </button>
@@ -149,7 +149,7 @@ export function DatePicker({
               <button
                 type="button"
                 onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus:outline-none ml-auto"
+                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
               >
                 {clearText}
               </button>