@open-mercato/core 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/src/modules/payment_gateways/backend/payment-gateways/page.tsx

@@ -172,8 +172,8 @@ function splitLogPayload(payload: Record<string, unknown> | null | undefined) {
 
 function DetailStat({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="rounded-lg border bg-muted/20 px-4 py-3">
-      <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{label}</div>
+    <div className="rounded-lg border bg-muted/30 px-4 py-3">
+      <div className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{label}</div>
       <div className="mt-1 text-sm font-medium">{value}</div>
     </div>
   )
@@ -563,8 +563,8 @@ export default function PaymentTransactionsPage() {
                             [t('payment_gateways.transactions.columns.lastWebhookAt', 'Last webhook'), formatDateTime(detail.transaction.lastWebhookAt)],
                             [t('payment_gateways.transactions.columns.lastPolledAt', 'Last poll'), formatDateTime(detail.transaction.lastPolledAt)],
                           ].map(([label, value]) => (
-                            <div key={label} className="rounded-lg border bg-muted/20 px-4 py-3">
-                              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
+                            <div key={label} className="rounded-lg border bg-muted/30 px-4 py-3">
+                              <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
                               <dd className="mt-1 break-all text-sm">{value}</dd>
                             </div>
                           ))}
@@ -580,7 +580,7 @@ export default function PaymentTransactionsPage() {
                           <div className="overflow-hidden rounded-lg border">
                             <table className="w-full text-sm">
                               <thead>
-                                <tr className="border-b bg-muted/40">
+                                <tr className="border-b bg-muted/50">
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.eventType', 'Event')}</th>
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.status', 'Status')}</th>
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.processed', 'Processed')}</th>
@@ -616,7 +616,7 @@ export default function PaymentTransactionsPage() {
                           <div className="overflow-hidden rounded-lg border">
                             <table className="w-full text-sm">
                               <thead>
-                                <tr className="border-b bg-muted/40">
+                                <tr className="border-b bg-muted/50">
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.time', 'Time')}</th>
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.level', 'Level')}</th>
                                   <th className="px-4 py-2 text-left font-medium">{t('payment_gateways.transactions.columns.message', 'Message')}</th>
@@ -658,14 +658,14 @@ export default function PaymentTransactionsPage() {
                                         </td>
                                       </tr>
                                       {isExpanded ? (
-                                        <tr className="border-b bg-muted/15 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">
                                               {metadataEntries.length > 0 ? (
                                                 <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                                                   {metadataEntries.map(([label, value]) => (
-                                                    <div key={label} className="rounded-md border bg-muted/20 px-3 py-2">
-                                                      <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
+                                                    <div key={label} className="rounded-md border bg-muted/30 px-3 py-2">
+                                                      <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{label}</dt>
                                                       <dd className="mt-1 break-all text-sm">{value}</dd>
                                                     </div>
                                                   ))}
@@ -674,8 +674,8 @@ export default function PaymentTransactionsPage() {
                                               {inlineEntries.length > 0 ? (
                                                 <dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                                                   {inlineEntries.map(([key, value]) => (
-                                                    <div key={key} className="rounded-md border bg-muted/20 px-3 py-2">
-                                                      <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">{formatLogDetailLabel(key)}</dt>
+                                                    <div key={key} className="rounded-md border bg-muted/30 px-3 py-2">
+                                                      <dt className="text-overline font-medium uppercase tracking-wide text-muted-foreground">{formatLogDetailLabel(key)}</dt>
                                                       <dd className="mt-1 break-words text-sm">{formatLogPrimitiveValue(value)}</dd>
                                                     </div>
                                                   ))}

package/src/modules/planner/components/AvailabilityRulesEditor.tsx

@@ -1412,7 +1412,7 @@ export function AvailabilityRulesEditor({
                           ) : (
                             windows.map((window, windowIndex) => {
                               const windowError = weeklyWindowErrors[index]?.[windowIndex] ?? null
-                              const errorClass = windowError ? 'border-red-500 focus-visible:ring-red-400' : ''
+                              const errorClass = windowError ? 'border-red-500 aria-invalid:ring-destructive' : ''
                               return (
                                 <div key={`${day.code}-${windowIndex}`} className="space-y-1">
                                   <div className="flex flex-wrap items-center gap-2">
@@ -1736,7 +1736,7 @@ export function AvailabilityRulesEditor({
                           <label className="text-xs font-medium text-muted-foreground">{listLabels.windowsLabel}</label>
                           {editorWindows.map((window, index) => {
                             const windowError = editorWindowErrors[index] ?? null
-                            const errorClass = windowError ? 'border-red-500 focus-visible:ring-red-400' : ''
+                            const errorClass = windowError ? 'border-red-500 aria-invalid:ring-destructive' : ''
                             return (
                               <div key={`${index}-${window.start}`} className="space-y-1">
                                 <div className="flex flex-wrap items-center gap-2">

package/src/modules/portal/frontend/[orgSlug]/portal/dashboard/page.tsx

@@ -99,7 +99,7 @@ export default function PortalDashboardPage({ params }: Props) {
               type="button"
               variant={editing ? 'default' : 'outline'}
               size="sm"
-              className="rounded-lg text-[13px]"
+              className="rounded-lg text-sm"
               onClick={() => setEditing((prev) => !prev)}
             >
               {editing ? t('portal.dashboard.done', 'Done') : t('portal.dashboard.customize', 'Customize')}
@@ -120,7 +120,7 @@ export default function PortalDashboardPage({ params }: Props) {
             {dashboardWidgets.map((widget) => {
               const isHidden = hiddenWidgets.has(widget.metadata.id)
               return (
-                <Button key={widget.metadata.id} type="button" variant={isHidden ? 'outline' : 'default'} size="sm" className="rounded-lg text-[13px]" onClick={() => toggleWidget(widget.metadata.id)}>
+                <Button key={widget.metadata.id} type="button" variant={isHidden ? 'outline' : 'default'} size="sm" className="rounded-lg text-sm" onClick={() => toggleWidget(widget.metadata.id)}>
                   {widget.metadata.title || widget.metadata.id}
                 </Button>
               )

package/src/modules/portal/frontend/[orgSlug]/portal/login/page.tsx

@@ -99,12 +99,12 @@ export default function PortalLoginPage({ params }: Props) {
         ) : null}
 
         <div className="flex flex-col gap-1.5">
-          <Label htmlFor="login-email" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.email', 'Email')}</Label>
+          <Label htmlFor="login-email" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.email', 'Email')}</Label>
           <Input id="login-email" type="email" autoComplete="email" required placeholder={t('portal.login.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <Label htmlFor="login-password" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.password', 'Password')}</Label>
+          <Label htmlFor="login-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.password', 'Password')}</Label>
           <Input id="login-password" type="password" autoComplete="current-password" required placeholder={t('portal.login.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
@@ -112,7 +112,7 @@ export default function PortalLoginPage({ params }: Props) {
           {submitting ? t('portal.login.submitting', 'Signing in...') : t('portal.login.submit', 'Sign In')}
         </Button>
 
-        <p className="text-center text-[13px] text-muted-foreground">
+        <p className="text-center text-sm text-muted-foreground">
           {t('portal.login.noAccount', "Don't have an account?")}{' '}
           <Link href={`/${orgSlug}/portal/signup`} className="font-medium text-foreground underline underline-offset-4 hover:opacity-80">
             {t('portal.login.signupLink', 'Sign up')}

package/src/modules/portal/frontend/[orgSlug]/portal/page.tsx

@@ -77,7 +77,7 @@ export default function PortalLandingPage({ params }: Props) {
       <InjectionSpot spotId={PortalInjectionSpots.pageBefore('home')} context={injectionContext} />
 
       <section className="flex flex-col items-center gap-5 py-8 text-center sm:py-16">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground/60">
+        <p className="text-overline font-semibold uppercase tracking-widest text-muted-foreground/60">
           {t('portal.nav.home', 'Customer Portal')}
         </p>
         <h1 className="max-w-2xl text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
@@ -87,10 +87,10 @@ export default function PortalLandingPage({ params }: Props) {
           {t('portal.landing.hero.description', 'Access your account, manage orders, and stay up to date.')}
         </p>
         <div className="mt-2 flex items-center gap-3">
-          <Button asChild size="lg" className="rounded-lg px-6 text-[14px]">
+          <Button asChild size="lg" className="rounded-lg px-6 text-sm">
             <Link href={`/${orgSlug}/portal/login`}>{t('portal.landing.cta.login', 'Sign In')}</Link>
           </Button>
-          <Button asChild variant="outline" size="lg" className="rounded-lg px-6 text-[14px]">
+          <Button asChild variant="outline" size="lg" className="rounded-lg px-6 text-sm">
             <Link href={`/${orgSlug}/portal/signup`}>{t('portal.landing.cta.signup', 'Create Account')}</Link>
           </Button>
         </div>

package/src/modules/portal/frontend/[orgSlug]/portal/profile/page.tsx

@@ -60,7 +60,7 @@ export default function PortalProfilePage({ params }: Props) {
               value={
                 <span className="flex items-center gap-2">
                   <span className="truncate">{user.email}</span>
-                  <Badge variant={user.emailVerified ? 'default' : 'outline'} className="shrink-0 text-[10px]">
+                  <Badge variant={user.emailVerified ? 'default' : 'outline'} className="shrink-0 text-overline">
                     {user.emailVerified ? t('portal.dashboard.emailVerified', 'Verified') : t('portal.dashboard.emailNotVerified', 'Unverified')}
                   </Badge>
                 </span>
@@ -73,7 +73,7 @@ export default function PortalProfilePage({ params }: Props) {
             {isPortalAdmin ? (
               <>
                 <PortalCardDivider />
-                <PortalStatRow label={t('portal.dashboard.roles', 'Role')} value={<Badge className="text-[10px]">{t('portal.dashboard.portalAdmin', 'Portal Admin')}</Badge>} />
+                <PortalStatRow label={t('portal.dashboard.roles', 'Role')} value={<Badge className="text-overline">{t('portal.dashboard.portalAdmin', 'Portal Admin')}</Badge>} />
               </>
             ) : null}
           </div>
@@ -84,7 +84,7 @@ export default function PortalProfilePage({ params }: Props) {
           {roles.length > 0 ? (
             <div className="flex flex-wrap gap-2">
               {roles.map((role) => (
-                <span key={role.id} className="inline-flex items-center rounded-lg border px-3 py-1.5 text-[12px] font-medium">{role.name}</span>
+                <span key={role.id} className="inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium">{role.name}</span>
               ))}
             </div>
           ) : (
@@ -97,7 +97,7 @@ export default function PortalProfilePage({ params }: Props) {
           {resolvedFeatures.length > 0 ? (
             <div className="flex flex-wrap gap-2">
               {resolvedFeatures.map((feature) => (
-                <span key={feature} className="inline-flex items-center rounded-md border bg-muted/50 px-2 py-1 font-mono text-[11px] text-muted-foreground">{feature}</span>
+                <span key={feature} className="inline-flex items-center rounded-md border bg-muted/50 px-2 py-1 font-mono text-overline text-muted-foreground">{feature}</span>
               ))}
             </div>
           ) : (

package/src/modules/portal/frontend/[orgSlug]/portal/signup/page.tsx

@@ -112,17 +112,17 @@ export default function PortalSignupPage({ params }: Props) {
         ) : null}
 
         <div className="flex flex-col gap-1.5">
-          <Label htmlFor="signup-name" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.displayName', 'Full Name')}</Label>
+          <Label htmlFor="signup-name" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.displayName', 'Full Name')}</Label>
           <Input id="signup-name" type="text" autoComplete="name" required placeholder={t('portal.signup.displayName.placeholder', 'Jane Smith')} value={displayName} onChange={(e) => setDisplayName(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <Label htmlFor="signup-email" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.email', 'Email')}</Label>
+          <Label htmlFor="signup-email" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.email', 'Email')}</Label>
           <Input id="signup-email" type="email" autoComplete="email" required placeholder={t('portal.signup.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
-          <Label htmlFor="signup-password" className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.password', 'Password')}</Label>
+          <Label htmlFor="signup-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.password', 'Password')}</Label>
           <Input id="signup-password" type="password" autoComplete="new-password" required placeholder={t('portal.signup.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
@@ -130,7 +130,7 @@ export default function PortalSignupPage({ params }: Props) {
           {submitting ? t('portal.signup.submitting', 'Creating account...') : t('portal.signup.submit', 'Create Account')}
         </Button>
 
-        <p className="text-center text-[13px] text-muted-foreground">
+        <p className="text-center text-sm text-muted-foreground">
           {t('portal.signup.hasAccount', 'Already have an account?')}{' '}
           <Link href={`/${orgSlug}/portal/login`} className="font-medium text-foreground underline underline-offset-4 hover:opacity-80">
             {t('portal.signup.loginLink', 'Sign in')}

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

@@ -190,7 +190,7 @@ export default function ResourcesResourceDetailPage({ params }: { params?: { id?
           return (
             <div
               key={`activity-${activity.id ?? 'row'}-custom-${index}`}
-              className="rounded-md border border-border/60 bg-muted/10 px-3 py-2"
+              className="rounded-md border border-border/70 bg-muted/30 px-3 py-2"
             >
               <div className="text-xs font-medium text-muted-foreground">{label}</div>
               <div className="mt-1 text-sm text-foreground">{content}</div>

package/src/modules/sales/backend/sales/documents/[id]/page.tsx

@@ -211,7 +211,7 @@ function CurrencyInlineEditor({
                 className="text-sm text-foreground"
                 iconWrapperClassName="inline-flex h-5 w-5 items-center justify-center rounded border border-border bg-background"
                 iconClassName="h-3.5 w-3.5"
-                colorClassName="h-2.5 w-2.5 rounded-full border border-border/60"
+                colorClassName="h-2.5 w-2.5 rounded-full border border-border/70"
               />
               {error ? <p className="text-xs text-destructive">{error}</p> : null}
               <div className="flex items-center gap-2">
@@ -242,7 +242,7 @@ function CurrencyInlineEditor({
               className="mt-1 inline-flex items-center gap-2 text-sm text-foreground"
               iconWrapperClassName="inline-flex h-5 w-5 items-center justify-center rounded border border-border bg-background"
               iconClassName="h-3.5 w-3.5"
-              colorClassName="h-2.5 w-2.5 rounded-full border border-border/60"
+              colorClassName="h-2.5 w-2.5 rounded-full border border-border/70"
             />
           )}
         </div>
@@ -1142,7 +1142,7 @@ function ContactEmailInlineEditor({
               <div className="relative">
                 <Mail className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                 <input
-                  className="w-full rounded-md border pl-8 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="w-full rounded-md border pl-8 pr-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)
@@ -4562,7 +4562,7 @@ export default function SalesDocumentDetailPage({
               {statusDisplay?.icon ? renderDictionaryIcon(statusDisplay.icon, 'h-4 w-4') : null}
               <span className="inline-flex items-center gap-1">
                 {statusDisplay?.color
-                  ? renderDictionaryColor(statusDisplay.color, 'h-2.5 w-2.5 rounded-full border border-border/60')
+                  ? renderDictionaryColor(statusDisplay.color, 'h-2.5 w-2.5 rounded-full border border-border/70')
                   : <span className="h-2.5 w-2.5 rounded-full bg-primary" />}
               </span>
               <span>{statusDisplay?.label ?? record.status}</span>

package/src/modules/sales/components/DocumentNumberSettings.tsx

@@ -230,7 +230,7 @@ export function DocumentNumberSettings() {
             </p>
           </label>
         </div>
-        <div className="space-y-2 rounded-lg border bg-muted/40 p-3">
+        <div className="space-y-2 rounded-lg border bg-muted/50 p-3">
           <div className="flex items-center gap-2 text-sm font-medium">
             {translations.tokensTitle}
             <span className="text-xs font-normal text-muted-foreground">{translations.tokensHint}</span>

package/src/modules/sales/components/channels/ChannelOfferForm.tsx

@@ -1782,7 +1782,7 @@ function PriceOverridesEditor({
 
   return (
     <div className="space-y-4">
-      <div className="rounded border bg-muted/60 px-3 py-2">
+      <div className="rounded border bg-muted/50 px-3 py-2">
         <div className="text-xs uppercase text-muted-foreground">
           {t('sales.channels.offers.pricing.basePriceLabel', 'Original product price')}
         </div>

package/src/modules/sales/components/documents/AdjustmentDialog.tsx

@@ -389,7 +389,7 @@ export function AdjustmentDialog({
         component: ({ value, setValue }) => {
           const currentMode = value === 'rate' || value === 'amount' ? value : mode
           return (
-            <div className="inline-flex rounded-md border bg-muted/40 p-1 text-sm font-medium">
+            <div className="inline-flex rounded-md border bg-muted/50 p-1 text-sm font-medium">
               {(['rate', 'amount'] as const).map((option) => (
                 <button
                   key={option}

package/src/modules/sales/components/documents/DocumentTotals.tsx

@@ -55,10 +55,10 @@ export function DocumentTotals({ title, currency, items, className }: DocumentTo
   return (
     <div className={cn('space-y-3', className)}>
       <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
-        <div className="flex items-center justify-between border-b bg-muted/40 px-4 py-3">
+        <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-3">
           <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{heading}</span>
           {currency ? (
-            <span className="rounded-full border border-border/60 bg-background/60 px-3 py-1 text-xs font-semibold tracking-wide text-foreground">
+            <span className="rounded-full border border-border/70 bg-background/80 px-3 py-1 text-xs font-semibold tracking-wide text-foreground">
               {currency}
             </span>
           ) : null}
@@ -68,7 +68,7 @@ export function DocumentTotals({ title, currency, items, className }: DocumentTo
             {visibleItems
               .filter((item) => !item.emphasize)
               .map((item) => (
-                <tr key={item.key} className="bg-background/60 transition-colors hover:bg-muted/30">
+                <tr key={item.key} className="bg-background/80 transition-colors hover:bg-muted/30">
                   <td className="px-4 py-3 font-medium text-foreground/90">{item.label}</td>
                   <td className="px-4 py-3 text-right">
                     <PriceWithCurrency amount={item.amount} currency={currency} className="font-mono text-base" />

package/src/modules/sales/components/documents/PaymentDialog.tsx

@@ -350,7 +350,7 @@ export function PaymentDialog({
                 onChange={(event) => setValue(event.target.value)}
                 placeholder="0.00"
               />
-              <span className="rounded-full border border-border/60 bg-muted/40 px-3 py-1 text-xs font-semibold uppercase text-foreground">
+              <span className="rounded-full border border-border/70 bg-muted/50 px-3 py-1 text-xs font-semibold uppercase text-foreground">
                 {currencyLabel}
               </span>
             </div>

package/src/modules/sales/components/documents/SalesDocumentForm.tsx

@@ -239,7 +239,7 @@ function CustomerQuickCreate({ t, onCreated }: CustomerQuickCreateProps) {
   )
 
   const renderMenu = () => (
-    <div className="absolute right-0 z-30 mt-2 w-48 rounded border bg-popover p-1 shadow-lg">
+    <div className="absolute right-0 z-dropdown mt-2 w-48 rounded border bg-popover p-1 shadow-lg">
       <button
         type="button"
         className="flex w-full items-center gap-2 rounded px-2 py-2 text-sm hover:bg-muted"
@@ -1086,7 +1086,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
       label: '',
       type: 'custom',
       component: () => (
-        <div className="rounded-lg border bg-muted/40 p-3 text-sm text-muted-foreground">
+        <div className="rounded-lg border bg-muted/50 p-3 text-sm text-muted-foreground">
           {t('sales.documents.form.nextStep', 'After creation you will add items, prices, and fulfillment details.')}
         </div>
       ),

package/src/modules/sales/widgets/dashboard/new-orders/widget.client.tsx

@@ -131,7 +131,7 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border border-input 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.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -152,7 +152,7 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
             onChange={(event) => {
               onSettingsChange?.({ ...hydrated, datePeriod: event.target.value as DatePeriodOption })
             }}
-            className="w-full rounded-md border border-input 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 border-input 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"
           >
             <option value="last24h">{translate('sales.widgets.newOrders.settings.last24h', 'Last 24 hours')}</option>
             <option value="last7d">{translate('sales.widgets.newOrders.settings.last7d', 'Last 7 days')}</option>
@@ -176,7 +176,7 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
                 }}
                 onFocus={openNativeDatePicker}
                 onClick={openNativeDatePicker}
-                className="w-full rounded-md border border-input 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 border-input 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"
               />
             </div>
             <div className="space-y-1.5">
@@ -192,7 +192,7 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
                 }}
                 onFocus={openNativeDatePicker}
                 onClick={openNativeDatePicker}
-                className="w-full rounded-md border border-input 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 border-input 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"
               />
             </div>
           </div>

package/src/modules/sales/widgets/dashboard/new-quotes/widget.client.tsx

@@ -137,7 +137,7 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border border-input 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.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -158,7 +158,7 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
             onChange={(event) => {
               onSettingsChange?.({ ...hydrated, datePeriod: event.target.value as DatePeriodOption })
             }}
-            className="w-full rounded-md border border-input 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 border-input 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"
           >
             <option value="last24h">{translate('sales.widgets.newQuotes.settings.last24h', 'Last 24 hours')}</option>
             <option value="last7d">{translate('sales.widgets.newQuotes.settings.last7d', 'Last 7 days')}</option>
@@ -182,7 +182,7 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
                 }}
                 onFocus={openNativeDatePicker}
                 onClick={openNativeDatePicker}
-                className="w-full rounded-md border border-input 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 border-input 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"
               />
             </div>
             <div className="space-y-1.5">
@@ -198,7 +198,7 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
                 }}
                 onFocus={openNativeDatePicker}
                 onClick={openNativeDatePicker}
-                className="w-full rounded-md border border-input 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 border-input 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"
               />
             </div>
           </div>

package/src/modules/sales/widgets/injection/document-history/widget.client.tsx

@@ -69,7 +69,7 @@ function StatusDot({ color, className }: { color: string | null | undefined; cla
   if (!color) return <span className={cn('h-2.5 w-2.5 rounded-full bg-muted-foreground/40 border border-border inline-flex', className)} />
   return (
     <span
-      className={cn('h-2.5 w-2.5 rounded-full border border-border/60 inline-flex', className)}
+      className={cn('h-2.5 w-2.5 rounded-full border border-border/70 inline-flex', className)}
       style={{ backgroundColor: color }}
       aria-hidden
     />
@@ -228,7 +228,7 @@ function FilterDropdown({ filter, onChange }: { filter: FilterKind; onChange: (k
         <div
           role="listbox"
           aria-label={t('sales.documents.history.filter.label', 'Filters')}
-          className="absolute left-0 top-full mt-1 z-50 w-48 rounded-md border bg-background p-1 shadow-md"
+          className="absolute left-0 top-full mt-1 z-dropdown w-48 rounded-md border bg-background p-1 shadow-md"
         >
           {options.map(opt => (
             <button

package/src/modules/sales/widgets/messages/SalesDocumentMessageDetail.tsx

@@ -36,7 +36,7 @@ export function SalesDocumentMessageDetail(props: ObjectDetailProps) {
       {viewAction?.href ? (
         <Link
           href={resolveActionHref(viewAction.href, props.entityId)}
-          className="block rounded-md transition-opacity hover:opacity-75"
+          className="block rounded-md transition-opacity hover:opacity-80"
         >
           {preview}
         </Link>

package/src/modules/sales/widgets/messages/SalesDocumentMessagePreview.tsx

@@ -22,7 +22,7 @@ export function SalesDocumentMessagePreview({
   const subtitle = previewData?.subtitle || ""
 
   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">
       <Icon 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/shipping_carriers/lib/shipment-wizard/components/PackageEditor.tsx

@@ -37,7 +37,7 @@ export const PackageEditor = (props: PackageEditorProps) => {
   return (
     <div className="space-y-3">
       {packages.map((pkg, index) => (
-        <div key={index} className="rounded-lg border bg-muted/20 p-3">
+        <div key={index} className="rounded-lg border bg-muted/30 p-3">
           <div className="mb-2 flex items-center justify-between">
             <span className="text-xs font-medium text-muted-foreground">
               {t('shipping_carriers.create.package.label', 'Package')} {index + 1}

package/src/modules/staff/backend/staff/team-members/[id]/page.tsx

@@ -178,7 +178,7 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
           return (
             <div
               key={`activity-${activity.id ?? 'row'}-custom-${index}`}
-              className="rounded-md border border-border/60 bg-muted/10 px-3 py-2"
+              className="rounded-md border border-border/70 bg-muted/30 px-3 py-2"
             >
               <div className="text-xs font-medium text-muted-foreground">{label}</div>
               <div className="mt-1 text-sm text-foreground">{content}</div>

package/src/modules/translations/components/TranslationDrawerAction.tsx

@@ -61,12 +61,12 @@ export function TranslationDrawerAction({ config }: TranslationDrawerActionProps
       {open ? (
         <>
           <div
-            className="fixed inset-0 z-40 bg-black/20"
+            className="fixed inset-0 z-overlay bg-black/20"
             onClick={() => setOpen(false)}
             aria-hidden="true"
           />
           <div
-            className="fixed right-0 top-0 z-50 h-full w-full max-w-4xl border-l bg-background shadow-lg"
+            className="fixed right-0 top-0 z-modal h-full w-full max-w-4xl border-l bg-background shadow-lg"
             role="dialog"
             aria-modal="true"
             aria-label={t('translations.widgets.translationManager.groupLabel', 'Translations')}

package/src/modules/translations/components/TranslationManager.tsx

@@ -318,7 +318,7 @@ export function TranslationManager({
   const renderFieldTable = () => {
     if (!entityType || !recordId) {
       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('translations.manager.selectFirst', 'Select an entity and record to manage translations.')}
         </div>
       )
@@ -345,7 +345,7 @@ export function TranslationManager({
     }
     if (!fieldList.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('translations.manager.noFields', 'No translatable fields found for this entity type.')}
         </div>
       )
@@ -492,7 +492,7 @@ export function TranslationManager({
           </div>
         )}
 
-        <div className="rounded-lg border bg-background/70 p-4">
+        <div className="rounded-lg border bg-background/80 p-4">
           {renderLocaleTabs()}
           <div className="mt-3">
             {renderFieldTable()}

package/src/modules/translations/widgets/injection/translation-manager/widget.client.tsx

@@ -81,12 +81,12 @@ export default function TranslationWidget({ context, data }: InjectionWidgetComp
       {open ? (
         <>
           <div
-            className="fixed inset-0 z-40 bg-black/20"
+            className="fixed inset-0 z-overlay bg-black/20"
             onClick={() => setOpen(false)}
             aria-hidden="true"
           />
           <div
-            className="fixed right-0 top-0 z-50 h-full w-full max-w-4xl border-l bg-background shadow-lg"
+            className="fixed right-0 top-0 z-modal h-full w-full max-w-4xl border-l bg-background shadow-lg"
             role="dialog"
             aria-modal="true"
             aria-label={t('translations.widgets.translationManager.groupLabel', 'Translations')}

package/src/modules/workflows/backend/definitions/[id]/page.tsx

@@ -128,21 +128,21 @@ export default function EditWorkflowDefinitionPage() {
   return (
     <Page>
       <PageBody>
-        <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="mb-4 p-4 bg-status-info-bg border border-status-info-border rounded-lg flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-start gap-3">
-            <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-5 h-5 text-status-info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
             </svg>
             <div>
-              <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              <p className="text-sm font-medium text-status-info-text">
                 {t('workflows.edit.visualEditorAvailable')}
               </p>
-              <p className="text-xs text-blue-700 dark:text-blue-300 mt-0.5">
+              <p className="text-xs text-status-info-text mt-0.5">
                 {t('workflows.edit.visualEditorDescription')}
               </p>
             </div>
           </div>
-          <Button asChild variant="outline" size="sm" className="w-full sm:w-auto border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50">
+          <Button asChild variant="outline" size="sm" className="w-full sm:w-auto border-status-info-border text-status-info-text hover:bg-status-info-bg">
             <a href={`/backend/definitions/visual-editor?id=${definitionId}`}>
               {t('workflows.actions.openVisualEditor')}
             </a>

package/src/modules/workflows/backend/definitions/visual-editor/page.tsx

@@ -704,7 +704,7 @@ export default function VisualEditorPage() {
                   disabled={!!definitionId}
                   className="h-8 text-sm"
                 />
-                {definitionId && <p className="text-[10px] text-muted-foreground">Read-only</p>}
+                {definitionId && <p className="text-overline text-muted-foreground">Read-only</p>}
               </div>
 
               {/* Workflow Name */}
@@ -873,7 +873,7 @@ export default function VisualEditorPage() {
                   <button
                     key={nodeType}
                     onClick={() => handleAddNode(nodeType)}
-                    className="flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1 text-xs hover:bg-muted active:bg-muted/80"
+                    className="flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1 text-xs hover:bg-muted active:bg-muted/50"
                   >
                     <Icon className="h-3.5 w-3.5" />
                     <span>{NODE_TYPE_LABELS[nodeType].title}</span>