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

package/src/modules/dashboards/widgets/dashboard/top-customers/widget.client.tsx

@@ -135,7 +135,7 @@ const TopCustomersWidget: React.FC<DashboardWidgetComponentProps<TopCustomersSet
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)

package/src/modules/dashboards/widgets/dashboard/top-products/widget.client.tsx

@@ -122,7 +122,7 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)
@@ -139,7 +139,7 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
           </label>
           <select
             id="top-products-layout"
-            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={hydrated.layout}
             onChange={(e) => onSettingsChange({ ...hydrated, layout: e.target.value as 'horizontal' | 'vertical' })}
           >

package/src/modules/data_sync/backend/data-sync/page.tsx

@@ -143,7 +143,7 @@ function getSummaryBadgeStyle(kind: 'enabled' | 'disabled' | 'ready' | 'missing'
 
   return {
     variant: 'outline',
-    className: 'border-muted-foreground/20 bg-muted/40 text-muted-foreground',
+    className: 'border-muted-foreground/20 bg-muted/50 text-muted-foreground',
   }
 }
 
@@ -615,7 +615,7 @@ export default function SyncRunsDashboardPage() {
           <CardHeader className="space-y-4">
             <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
               <div className="space-y-2">
-                <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-widest text-muted-foreground">
                   <Repeat className="size-4" />
                   <span>{t('data_sync.dashboard.start.eyebrow', 'Run once or keep it recurring')}</span>
                 </div>
@@ -734,7 +734,7 @@ export default function SyncRunsDashboardPage() {
             ) : null}
 
             <div className="grid gap-4 xl:grid-cols-2">
-              <div className="rounded-xl border bg-muted/20 p-4">
+              <div className="rounded-xl border bg-muted/30 p-4">
                 <div className="flex items-start justify-between gap-3">
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">
@@ -790,7 +790,7 @@ export default function SyncRunsDashboardPage() {
                 </div>
               </div>
 
-              <div className="rounded-xl border bg-muted/20 p-4">
+              <div className="rounded-xl border bg-muted/30 p-4">
                 <div className="flex items-start justify-between gap-3">
                   <div className="space-y-1">
                     <div className="flex items-center gap-2">

package/src/modules/data_sync/backend/data-sync/runs/[id]/page.tsx

@@ -323,7 +323,7 @@ export default function SyncRunDetailPage({ params }: SyncRunDetailPageProps) {
             ) : (
               <div className="relative h-3 w-full overflow-hidden rounded-full bg-secondary">
                 <div className="absolute inset-y-0 left-0 w-1/2 animate-pulse rounded-full bg-primary/80" />
-                <div className="absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/40" />
+                <div className="absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/10" />
               </div>
             )}
             <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
@@ -420,7 +420,7 @@ export default function SyncRunDetailPage({ params }: SyncRunDetailPageProps) {
                           </td>
                         </tr>
                         {expandedLogId === log.id && log.payload ? (
-                          <tr className="border-b bg-muted/20 last:border-0">
+                          <tr className="border-b bg-muted/30 last:border-0">
                             <td colSpan={3} className="px-4 py-4">
                               <pre className="overflow-x-auto whitespace-pre-wrap rounded-md border bg-card p-3 text-xs">
                                 {JSON.stringify(log.payload, null, 2)}

package/src/modules/dictionaries/components/AppearanceSelector.tsx

@@ -147,7 +147,7 @@ export function AppearanceSelector({
               value={normalizedIcon}
               onChange={(event) => onIconChange(event.target.value)}
               placeholder={labels.iconPlaceholder}
-              className="flex-1 rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="flex-1 rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               disabled={disabled}
             />
             <Button
@@ -164,7 +164,7 @@ export function AppearanceSelector({
             </Button>
           </div>
           {pickerOpen ? (
-            <div className="absolute left-0 right-0 top-full z-50 mt-2 rounded-md border border-border bg-popover p-3 shadow-lg">
+            <div className="absolute left-0 right-0 top-full z-dropdown mt-2 rounded-md border border-border bg-popover p-3 shadow-lg">
               <div className="space-y-3">
                 <input
                   ref={searchInputRef}
@@ -173,7 +173,7 @@ export function AppearanceSelector({
                   onChange={(event) => setIconSearch(event.target.value)}
                   placeholder={labels.iconSearchPlaceholder}
                   aria-label={labels.iconSearchPlaceholder}
-                  className="w-full rounded border border-border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  className="w-full rounded border border-border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   autoComplete="off"
                 />
                 <div className="max-h-64 overflow-y-auto pr-1">

package/src/modules/dictionaries/components/DictionariesManager.tsx

@@ -274,7 +274,7 @@ export function DictionariesManager() {
                       <div className="flex items-center gap-2 font-medium">
                         <span>{dictionary.name}</span>
                         {dictionary.isInherited ? (
-                          <span className="rounded-full border border-border px-2 py-0.5 text-[11px] font-normal uppercase tracking-wide text-muted-foreground">
+                          <span className="rounded-full border border-border px-2 py-0.5 text-overline font-normal uppercase tracking-wide text-muted-foreground">
                             {t('dictionaries.config.list.inherited', 'Inherited')}
                           </span>
                         ) : null}
@@ -351,7 +351,7 @@ export function DictionariesManager() {
                 }}
                 placeholder={t('dictionaries.config.dialog.keyPlaceholder', 'slug_name')}
                 disabled={dialog?.mode === 'edit'}
-                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:bg-muted ${errors.key ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted ${errors.key ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                 aria-invalid={errors.key ? 'true' : 'false'}
                 aria-describedby="dictionary-key-hint"
               />
@@ -372,7 +372,7 @@ export function DictionariesManager() {
                   if (errors.name) setErrors((prev) => ({ ...prev, name: undefined }))
                 }}
                 placeholder={t('dictionaries.config.dialog.namePlaceholder', 'Display name')}
-                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${errors.name ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${errors.name ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                 aria-invalid={errors.name ? 'true' : 'false'}
               />
               {errors.name ? (
@@ -384,7 +384,7 @@ export function DictionariesManager() {
               <textarea
                 value={form.description}
                 onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
-                className="min-h-[120px] w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                className="min-h-[120px] w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 placeholder={t('dictionaries.config.dialog.descriptionPlaceholder', 'Explain how this dictionary is used (optional).')}
               />
             </div>

package/src/modules/dictionaries/components/DictionaryEntriesEditor.tsx

@@ -372,7 +372,7 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
                     setErrors((prev) => ({ ...prev, value: undefined }))
                   }
                 }}
-                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${errors.value ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${errors.value ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                 aria-invalid={errors.value ? 'true' : 'false'}
                 aria-describedby="dictionary-entry-value-error"
               />
@@ -391,7 +391,7 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
                 value={formState.label}
                 onChange={(event) => setFormState((prev) => ({ ...prev, label: event.target.value }))}
                 placeholder={t('dictionaries.config.entries.dialog.labelPlaceholder', 'Display name shown in UI')}
-                className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </div>
             <AppearanceSelector

package/src/modules/dictionaries/components/DictionaryEntrySelect.tsx

@@ -235,7 +235,7 @@ export function DictionaryEntrySelect({
       <div className="flex items-center gap-2">
         <select
           className={[
-            'h-9 w-full rounded border pl-3 pr-8 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-70',
+            'h-9 w-full rounded border pl-3 pr-8 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             selectClassName,
           ]
             .filter(Boolean)
@@ -277,7 +277,7 @@ export function DictionaryEntrySelect({
                     <label className="text-sm font-medium">{labels.valueLabel}</label>
                     <input
                       type="text"
-                      className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       value={newValue}
                       onChange={(event) => {
                         setNewValue(event.target.value)
@@ -293,7 +293,7 @@ export function DictionaryEntrySelect({
                       <label className="text-sm font-medium">{labels.labelLabel}</label>
                       <input
                         type="text"
-                        className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                        className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         value={newLabel}
                         onChange={(event) => setNewLabel(event.target.value)}
                         placeholder={labels.labelPlaceholder}

package/src/modules/dictionaries/fields/dictionary.tsx

@@ -43,7 +43,7 @@ function DictionaryDefaultSelector({
         {t('dictionaries.customFields.defaultValue', 'Default value')}
       </label>
       <select
-        className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         value={defaultValue}
         onChange={(event) => onChange(event.target.value)}
       >
@@ -121,13 +121,13 @@ function DictionaryFieldDefEditor({ def, onChange }: { def: { configJson?: Dicti
   const manageHref = '/backend/config/dictionaries'
 
   return (
-    <div className="mt-3 space-y-3 rounded border border-dashed border-muted-foreground/40 bg-muted/10 p-3">
+    <div className="mt-3 space-y-3 rounded border border-dashed border-muted-foreground/40 bg-muted/30 p-3">
       <div className="space-y-1">
         <label className="text-xs font-medium text-muted-foreground">
           {t('dictionaries.customFields.dictionaryLabel', 'Dictionary source')}
         </label>
         <select
-          className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           value={selectedId}
           onChange={(event) => onChange({ dictionaryId: event.target.value || undefined })}
         >
@@ -152,7 +152,7 @@ function DictionaryFieldDefEditor({ def, onChange }: { def: { configJson?: Dicti
         ) : null}
       </div>
       {selectedId ? (
-        <div className="flex flex-wrap items-center justify-between gap-2 rounded bg-background/60 px-2 py-1 text-xs text-muted-foreground">
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded bg-background/80 px-2 py-1 text-xs text-muted-foreground">
           <span>{t('dictionaries.customFields.selectedHint', 'Entries from this dictionary populate the field.')}</span>
           <a href={manageHref} className="font-medium text-primary hover:underline" target="_blank" rel="noreferrer">
             {t('dictionaries.customFields.manageLink', 'Manage dictionaries')}

package/src/modules/entities/components/EncryptionManager.tsx

@@ -269,7 +269,7 @@ export function EncryptionManager() {
     }
     if (!fields.length) {
       return (
-        <div className="rounded border bg-background/70 p-4 text-sm text-muted-foreground">
+        <div className="rounded border bg-background/80 p-4 text-sm text-muted-foreground">
           {t('entities.encryption.empty', 'No fields are encrypted yet. Add the first one below.')}
         </div>
       )
@@ -329,7 +329,7 @@ export function EncryptionManager() {
                         </option>
                       ))}
                     </select>
-                    <p className="mt-1 text-[11px] text-muted-foreground">
+                    <p className="mt-1 text-overline text-muted-foreground">
                       {t('entities.encryption.fields.hashHint', 'Use when lookups must stay deterministic (e.g., login by email).')}
                     </p>
                   </td>
@@ -401,7 +401,7 @@ export function EncryptionManager() {
             </label>
           </div>
         </div>
-        <div className="rounded-lg border bg-background/70 p-4">
+        <div className="rounded-lg border bg-background/80 p-4">
           <div className="mb-3 flex items-center justify-between">
             <div>
               <h3 className="text-sm font-medium">{t('entities.encryption.fields.title', 'Encrypted fields')}</h3>

package/src/modules/entities/components/UserEntitiesTable.tsx

@@ -31,7 +31,7 @@ function buildColumns(t: (key: string, fallback: string) => string): ColumnDef<E
       meta: { priority: 5 },
       cell: ({ getValue }) => (
         <span className={`px-2 py-1 rounded text-xs ${
-          getValue() ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-muted text-muted-foreground'
+          getValue() ? 'bg-status-success-bg text-status-success-text' : 'bg-muted text-muted-foreground'
         }`}>
           {getValue() ? t('common.yes', 'Yes') : t('common.no', 'No')}
         </span>

package/src/modules/feature_toggles/components/formConfig.tsx

@@ -70,7 +70,7 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
 
         default:
             return (
-                <div className="text-sm text-muted-foreground p-4 text-center bg-muted/20 rounded border border-dashed">
+                <div className="text-sm text-muted-foreground p-4 text-center bg-muted/30 rounded border border-dashed">
                     {t('feature_toggles.form.fields.defaultValue.selectType', 'Please select a type above to configure the default value')}
                 </div>
             );

package/src/modules/feature_toggles/components/overrideFormConfig.tsx

@@ -10,7 +10,7 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
 
     if (!isOverride) {
         return (
-            <div className="text-sm text-muted-foreground p-4 text-center bg-muted/20 rounded border border-dashed">
+            <div className="text-sm text-muted-foreground p-4 text-center bg-muted/30 rounded border border-dashed">
                 {t('feature_toggles.override.disabled', 'Override is disabled. Values will be inherited from the default configuration.')}
             </div>
         );
@@ -78,7 +78,7 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
 
         default:
             return (
-                <div className="text-sm text-muted-foreground p-4 text-center bg-muted/20 rounded border border-dashed">
+                <div className="text-sm text-muted-foreground p-4 text-center bg-muted/30 rounded border border-dashed">
                     {t('feature_toggles.override.unknownType', 'Unknown toggle type. Cannot configure override value.')}
                 </div>
             );

package/src/modules/inbox_ops/backend/inbox-ops/proposals/[id]/page.tsx

@@ -118,7 +118,7 @@ function CategoryEditDropdown({
         </Button>
       </div>
       {isOpen && (
-        <div className="absolute top-full left-0 mt-1 z-50 w-48 rounded-md border bg-popover shadow-md">
+        <div className="absolute top-full left-0 mt-1 z-dropdown w-48 rounded-md border bg-popover shadow-md">
           <div className="p-1">
             {ALL_CATEGORIES.map((cat) => {
               const config = CATEGORY_CONFIG[cat]
@@ -471,13 +471,13 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                 <p className="text-sm text-muted-foreground">{t('inbox_ops.extraction_loading', 'AI is analyzing this thread...')}</p>
               </div>
             ) : emailFailed ? (
-              <div className="border rounded-lg p-4 bg-red-50 dark:bg-red-950/20">
+              <div className="border rounded-lg p-4 bg-status-error-bg border-status-error-border">
                 <div className="flex items-center gap-2 mb-2">
-                  <AlertTriangle className="h-5 w-5 text-red-600" />
-                  <span className="text-sm font-medium text-red-700">{t('inbox_ops.extraction_failed', 'Extraction failed')}</span>
+                  <AlertTriangle className="h-5 w-5 text-status-error-icon" />
+                  <span className="text-sm font-medium text-status-error-text">{t('inbox_ops.extraction_failed', 'Extraction failed')}</span>
                 </div>
                 {email?.processingError && (
-                  <p className="text-xs text-red-600 mb-3">{email.processingError}</p>
+                  <p className="text-xs text-status-error-text mb-3">{email.processingError}</p>
                 )}
                 <Button type="button" size="sm" variant="outline" onClick={handleRetryExtraction} disabled={isProcessing}>
                   <RefreshCw className="h-4 w-4 mr-1" />
@@ -530,7 +530,7 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                   </div>
 
                   {proposal.possiblyIncomplete && (
-                    <div className="flex items-center gap-2 text-xs text-yellow-600 bg-yellow-50 dark:bg-yellow-950/20 rounded px-2 py-1 mb-3">
+                    <div className="flex items-center gap-2 text-xs text-status-warning-text bg-status-warning-bg rounded px-2 py-1 mb-3">
                       <AlertTriangle className="h-3 w-3" />
                       {t('inbox_ops.possibly_incomplete', 'This thread appears to be a partial forward')}
                     </div>
@@ -546,7 +546,7 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                             <Users className="h-3 w-3 text-muted-foreground" />
                             <span>{p.name}</span>
                             <span className="text-xs text-muted-foreground">({p.role})</span>
-                            {p.matchedContactId && <CheckCircle className="h-3 w-3 text-green-500" />}
+                            {p.matchedContactId && <CheckCircle className="h-3 w-3 text-status-success-icon" />}
                           </div>
                         ))}
                       </div>
@@ -560,21 +560,21 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                   const general = discrepancies.filter((d) => !d.resolved && (!d.actionId || !actionIds.has(d.actionId)))
                   if (general.length === 0) return null
                   return (
-                    <div className="border rounded-lg p-3 md:p-4 bg-yellow-50 dark:bg-yellow-950/20">
+                    <div className="border rounded-lg p-3 md:p-4 bg-status-warning-bg border-status-warning-border">
                       <div className="flex items-center gap-2 mb-2">
-                        <AlertTriangle className="h-4 w-4 text-yellow-600" />
-                        <h3 className="font-semibold text-sm text-yellow-800 dark:text-yellow-300">{t('inbox_ops.discrepancies', 'Issues Detected')}</h3>
+                        <AlertTriangle className="h-4 w-4 text-status-warning-icon" />
+                        <h3 className="font-semibold text-sm text-status-warning-text">{t('inbox_ops.discrepancies', 'Issues Detected')}</h3>
                       </div>
                       <div className="space-y-1.5">
                         {general.map((d) => (
                           <div key={d.id} className={`flex items-start gap-2 text-xs rounded px-2 py-1.5 ${
-                            d.severity === 'error' ? 'bg-red-100 text-red-700 dark:bg-red-950/30' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30'
+                            d.severity === 'error' ? 'bg-status-error-bg text-status-error-text' : 'bg-status-warning-bg text-status-warning-text'
                           }`}>
                             <AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
                             <div>
                               <span>{resolveDiscrepancyDescription(d.description, d.foundValue)}</span>
                               {(d.expectedValue || d.foundValue) && (
-                                <div className="mt-0.5 text-[11px] opacity-80">
+                                <div className="mt-0.5 text-overline opacity-80">
                                   {d.expectedValue && <span>{t('inbox_ops.discrepancy.expected', 'Expected')}: {d.expectedValue}</span>}
                                   {d.expectedValue && d.foundValue && <span> · </span>}
                                   {d.foundValue && <span>{t('inbox_ops.discrepancy.found', 'Found')}: {d.foundValue}</span>}

package/src/modules/inbox_ops/components/messages/InboxEmailPreview.tsx

@@ -13,7 +13,7 @@ export function InboxEmailPreview({
   const t = useT()
 
   return (
-    <div className="flex items-start gap-3 rounded-md border bg-muted/20 p-3">
+    <div className="flex items-start gap-3 rounded-md border bg-muted/30 p-3">
       <Mail className="mt-0.5 h-4 w-4 text-muted-foreground" />
       <div className="min-w-0 flex-1 space-y-1">
         <div className="flex items-center gap-2">

package/src/modules/inbox_ops/components/proposals/ActionCard.tsx

@@ -105,8 +105,8 @@ export function useActionTypeLabels(): Record<string, string> {
 export function ConfidenceBadge({ value }: { value: string }) {
   const num = parseFloat(value)
   const pct = Math.round(num * 100)
-  const color = num >= 0.8 ? 'text-green-600' : num >= 0.6 ? 'text-yellow-600' : 'text-red-600'
-  const bgColor = num >= 0.8 ? 'bg-green-200' : num >= 0.6 ? 'bg-yellow-200' : 'bg-red-200'
+  const color = num >= 0.8 ? 'text-status-success-text' : num >= 0.6 ? 'text-status-warning-text' : 'text-status-error-text'
+  const bgColor = num >= 0.8 ? 'bg-status-success-icon' : num >= 0.6 ? 'bg-status-warning-icon' : 'bg-status-error-icon'
   const width = Math.round(num * 100)
   return (
     <div className="flex items-center gap-2">
@@ -247,15 +247,15 @@ export function ActionCard({
 
   if (action.status === 'executed') {
     return (
-      <div className="border rounded-lg p-3 md:p-4 bg-green-50 dark:bg-green-950/20">
+      <div className="border rounded-lg p-3 md:p-4 bg-status-success-bg border-status-success-border">
         <div className="flex items-center gap-2 mb-2">
-          <CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0" />
+          <CheckCircle className="h-5 w-5 text-status-success-icon flex-shrink-0" />
           <span className="text-sm font-medium">{label}</span>
         </div>
         <p className="text-sm text-muted-foreground">{displayDescription}</p>
         {action.createdEntityId && (
           <div className="mt-2">
-            <span className="text-xs text-green-600">
+            <span className="text-xs text-status-success-text">
               {t('inbox_ops.action.created_entity', 'Created {type}').replace('{type}', action.createdEntityType || '')} · {action.executedAt && new Date(action.executedAt).toLocaleString()}
             </span>
           </div>
@@ -279,15 +279,15 @@ export function ActionCard({
 
   if (action.status === 'failed') {
     return (
-      <div className="border rounded-lg p-3 md:p-4 bg-red-50 dark:bg-red-950/20">
+      <div className="border rounded-lg p-3 md:p-4 bg-status-error-bg border-status-error-border">
         <div className="flex items-center gap-2 mb-2">
-          <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
+          <AlertTriangle className="h-5 w-5 text-status-error-icon flex-shrink-0" />
           <span className="text-sm font-medium">{label}</span>
-          <span className="text-xs text-red-600">{t('inbox_ops.extraction_failed', 'Failed')}</span>
+          <span className="text-xs text-status-error-text">{t('inbox_ops.extraction_failed', 'Failed')}</span>
         </div>
         <p className="text-sm text-muted-foreground">{displayDescription}</p>
         {action.executionError && (
-          <p className="text-xs text-red-600 mt-1">{action.executionError}</p>
+          <p className="text-xs text-status-error-text mt-1">{action.executionError}</p>
         )}
         <div className="mt-3 flex items-center gap-2">
           <Button
@@ -347,13 +347,13 @@ export function ActionCard({
         <div className="mb-3 space-y-1">
           {actionDiscrepancies.map((d) => (
             <div key={d.id} className={`flex items-start gap-2 text-xs rounded px-2 py-1.5 ${
-              d.severity === 'error' ? 'bg-red-50 text-red-700 dark:bg-red-950/20' : 'bg-yellow-50 text-yellow-700 dark:bg-yellow-950/20'
+              d.severity === 'error' ? 'bg-status-error-bg text-status-error-text' : 'bg-status-warning-bg text-status-warning-text'
             }`}>
               <AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
               <div>
                 <span>{resolveDiscrepancyDescription ? resolveDiscrepancyDescription(d.description, d.foundValue) : d.description}</span>
                 {(d.expectedValue || d.foundValue) && (
-                  <div className="mt-0.5 text-[11px] opacity-80">
+                  <div className="mt-0.5 text-overline opacity-80">
                     {d.expectedValue && <span>{t('inbox_ops.discrepancy.expected', 'Expected')}: {d.expectedValue}</span>}
                     {d.expectedValue && d.foundValue && <span> · </span>}
                     {d.foundValue && <span>{t('inbox_ops.discrepancy.found', 'Found')}: {d.foundValue}</span>}
@@ -366,7 +366,7 @@ export function ActionCard({
       )}
 
       {hasNameIssue && (
-        <div className="mb-3 flex items-start gap-2 text-xs rounded px-2 py-1.5 bg-amber-50 text-amber-700 dark:bg-amber-950/20 dark:text-amber-300">
+        <div className="mb-3 flex items-start gap-2 text-xs rounded px-2 py-1.5 bg-status-warning-bg text-status-warning-text">
           <AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
           <span>{action.actionType === 'link_contact'
             ? t('inbox_ops.contact.link_name_missing_warning', 'Contact name is missing. Please edit and provide a name before accepting.')

package/src/modules/inbox_ops/widgets/notifications/ProposalCreatedRenderer.tsx

@@ -39,8 +39,8 @@ export function ProposalCreatedRenderer({
   return (
     <div
       className={cn(
-        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors border-l-4 border-l-amber-500',
-        isUnread && 'bg-amber-50/50 dark:bg-amber-950/20',
+        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors border-l-4 border-l-status-warning-border',
+        isUnread && 'bg-status-warning-bg',
       )}
       onClick={handleReview}
       onKeyDown={(e) => {
@@ -58,8 +58,8 @@ export function ProposalCreatedRenderer({
 
       <div className="flex gap-3">
         <div className="flex-shrink-0 mt-0.5">
-          <div className="h-10 w-10 rounded-lg bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
-            <Inbox className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          <div className="h-10 w-10 rounded-lg bg-status-warning-bg flex items-center justify-center">
+            <Inbox className="h-5 w-5 text-status-warning-icon" />
           </div>
         </div>
 

package/src/modules/integrations/backend/integrations/[id]/page.tsx

@@ -888,7 +888,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
         <section className="rounded-lg border bg-card p-4">
           <div className="flex items-center justify-between gap-4">
             <div className="space-y-2">
-              <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              <p className="text-overline uppercase tracking-wide text-muted-foreground">
                 {t('integrations.detail.state.label', 'State')}
               </p>
               <Badge variant="outline" className={cn('gap-1.5 rounded-full px-3 py-1 text-xs font-medium', stateBadgeClass)}>
@@ -1154,7 +1154,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
                     <div className={`grid gap-3 ${healthMessage && healthDetailEntries.length > 0 ? 'xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)]' : ''}`}>
                       {healthMessage ? (
                         <div className="rounded-lg border px-4 py-3">
-                          <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                          <p className="text-overline font-medium uppercase tracking-widest text-muted-foreground">
                             {t('integrations.detail.health.lastResult', 'Last result')}
                           </p>
                           <p className="mt-1.5 text-sm">{healthMessage}</p>
@@ -1162,7 +1162,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
                       ) : null}
                       {healthDetailEntries.length > 0 ? (
                         <div className="rounded-lg border px-4 py-3">
-                          <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                          <p className="text-overline font-medium uppercase tracking-widest text-muted-foreground">
                             {t('integrations.detail.health.details', 'Details')}
                           </p>
                           <dl className="mt-2 grid gap-x-6 gap-y-2 sm:grid-cols-2">
@@ -1251,7 +1251,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
                             </td>
                           </tr>
                           {isExpanded ? (
-                            <tr className="border-b bg-muted/20 last:border-0">
+                            <tr className="border-b bg-muted/30 last:border-0">
                               <td colSpan={3} className="px-4 py-4">
                                 <div className="space-y-4 rounded-lg border bg-card p-4">
                                   <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
@@ -1267,7 +1267,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
                                           <dl className="grid gap-3 sm:grid-cols-2">
                                             {metadataEntries.map(([label, value]) => (
                                               <div key={label} className="rounded-md border bg-muted/30 px-3 py-2">
-                                                <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                                                <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
                                                   {label}
                                                 </dt>
                                                 <dd className="mt-1 break-all text-sm">{value}</dd>
@@ -1285,7 +1285,7 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
                                           <dl className="grid gap-3 sm:grid-cols-2">
                                             {inlineEntries.map(([key, value]) => (
                                               <div key={key} className="rounded-md border bg-muted/30 px-3 py-2">
-                                                <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                                                <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
                                                   {formatLogDetailLabel(key)}
                                                 </dt>
                                                 <dd className="mt-1 break-words text-sm">

package/src/modules/messages/components/MessagesInboxPageClient.tsx

@@ -422,7 +422,7 @@ export function MessagesInboxPageClient() {
               </Button>
               {folderMenuOpen ? (
                 <div
-                  className="absolute right-0 z-20 mt-1 min-w-52 rounded-md border bg-background p-1 shadow"
+                  className="absolute right-0 z-dropdown mt-1 min-w-52 rounded-md border bg-background p-1 shadow"
                   role="menu"
                 >
                   {folderOptions.map((option) => {

package/src/modules/messages/components/defaults/DefaultMessageListItem.tsx

@@ -48,7 +48,7 @@ export function DefaultMessageListItem({ message, onClick }: MessageListItemProp
   return (
     <div
       className={cn(
-        'group min-w-0 w-full cursor-pointer rounded-md px-2 py-2 transition-colors hover:bg-muted/40',
+        'group min-w-0 w-full cursor-pointer rounded-md px-2 py-2 transition-colors hover:bg-muted/50',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       )}
       role="button"

package/src/modules/messages/components/defaults/MessageRecordObjectDetail.tsx

@@ -62,7 +62,7 @@ export function MessageRecordObjectDetail({
 
   return (
     <div className="space-y-3 rounded p-3 text-sm">
-      <div className="flex items-start gap-3 rounded bg-muted/20 p-3">
+      <div className="flex items-start gap-3 rounded bg-muted/30 p-3">
         <Link2 className="mt-0.5 h-4 w-4 text-muted-foreground" />
         <div className="min-w-0 flex-1 space-y-1">
           <p className="font-medium">{title}</p>

package/src/modules/messages/components/defaults/MessageRecordObjectPreview.tsx

@@ -51,7 +51,7 @@ export function MessageRecordObjectPreview({
     || t('messages.objectPreview.fallback.subtitle', '{type} • {id}', { type: typeLabel, id: entityId })
 
   return (
-    <div className="flex items-start gap-3 rounded bg-muted/20 p-3">
+    <div className="flex items-start gap-3 rounded bg-muted/30 p-3">
       <Link2 className="mt-0.5 h-4 w-4 text-muted-foreground" />
       <div className="min-w-0 flex-1 space-y-1">
         <div className="flex items-center gap-2">

package/src/modules/messages/components/message-detail/panels/MessageListComponent.tsx

@@ -29,7 +29,7 @@ export function MessageListComponent({ message, onClick }: MessageListItemProps)
   return (
     <div
       className={cn(
-        'group min-w-0 w-full cursor-pointer rounded-md px-2 py-2 transition-colors hover:bg-muted/40',
+        'group min-w-0 w-full cursor-pointer rounded-md px-2 py-2 transition-colors hover:bg-muted/50',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       )}
       role="button"

package/src/modules/messages/components/message-detail/panels/attachments-panel.tsx

@@ -70,7 +70,7 @@ export function MessageDetailAttachmentsSection(props: AttachmentsPanelProps) {
               }
               className="h-11 w-11 shrink-0 overflow-hidden rounded"
               iconClassName="mb-0 h-4 w-4"
-              labelClassName="text-[10px]"
+              labelClassName="text-overline"
             />
             <div className="min-w-0 flex-1">
               <p className="truncate">{attachment.fileName}</p>