refactor(design): no amber boxes, attention is one ochre sentence (#1562)

The founder wants the yellow boxes gone everywhere. The design system
already agreed: status colors are data, not chrome (convention 12) and
attention is a single ochre sentence, never a banner (convention 6).
This enforces it:

- ConfirmationDialog: the amber warning panel is now an AttnLine, and
  the hardcoded Swedish default warningText is gone: it injected an
  immutability warning into dialogs whose authors never asked for one
  (every current caller passes the prop explicitly, so no behavior
  change at any call site).
- Badge warning variant: amber fill replaced with a hairline chip and
  ochre text.
- DestructiveConfirmDialog warning variant: neutral icon disc, default
  primary confirm button (only --destructive survives as chrome).
- BankSyncStatusChip stale state: same neutral shape as the healthy
  chip, ochre text carries the signal.
- SandboxBanner: solid amber bar becomes secondary-on-border chrome.
- BankIdAuth, BankIdCompanyPicker, SessionTimeoutModal: the last three
  raw-amber (bg-amber-*) holdouts moved onto tokens, the company-picker
  banner becoming a plain AttnLine.
- Mechanical sweep of the ~58 hand-rolled bg-warning/border-warning
  boxes across 45 files: fills to bg-muted/30 (icon discs bg-muted),
  borders to border-border, text-warning-foreground to text-attn. The
  account-class dots in account-number.tsx keep bg-warning: they are
  data indicators, not chrome.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/transactions/BankSyncStatusChip.tsx

@@ -123,10 +123,12 @@ export default function BankSyncStatusChip() {
   }
 
   if (state.kind === 'stale') {
+    // Same neutral shape as the healthy chip: the ochre text is the signal,
+    // never an amber box (convention 12: status colors are data, not chrome).
     return (
       <Link
         href="/settings/banking"
-        className="inline-flex items-center gap-1.5 rounded-md border border-warning/40 bg-warning/5 px-2.5 py-1 text-xs text-warning transition-colors hover:bg-warning/10"
+        className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-1 text-xs text-attn transition-colors hover:bg-muted/50"
       >
         <AlertTriangle className="h-3.5 w-3.5" />
         <span>

components/transactions/BatchCategorySelector.tsx

@@ -73,9 +73,9 @@ export default function BatchCategorySelector({
         ) : (
           <div className="space-y-4 py-2">
             {/* Underlag reminder */}
-            <div className="flex items-start gap-2 rounded-lg bg-warning/10 border border-warning/30 p-3">
-              <Paperclip className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
-              <p className="text-xs text-warning-foreground">
+            <div className="flex items-start gap-2 rounded-lg bg-muted/30 border border-border p-3">
+              <Paperclip className="h-4 w-4 text-attn mt-0.5 shrink-0" />
+              <p className="text-xs text-attn">
                 {t('underlag_reminder')}
               </p>
             </div>

components/transactions/DuplicateBookingDialog.tsx

@@ -199,8 +199,8 @@ export default function DuplicateBookingDialog({
                   null amount already shows dialog_duplicate_amount_unknown. */}
               {candidate.amount == null && candidate.currency && (
                 <div className="flex items-start gap-2 pt-1">
-                  <AlertTriangle className="h-3.5 w-3.5 text-warning-foreground flex-shrink-0 mt-0.5" />
-                  <p className="text-xs text-warning-foreground leading-snug">
+                  <AlertTriangle className="h-3.5 w-3.5 text-attn flex-shrink-0 mt-0.5" />
+                  <p className="text-xs text-attn leading-snug">
                     {t('dialog_duplicate_sek_unavailable', { currency: candidate.currency })}
                   </p>
                 </div>
@@ -211,8 +211,8 @@ export default function DuplicateBookingDialog({
                   match rests on date + account + direction alone. */}
               {candidate.amount != null && !candidate.amount_verified && (
                 <div className="flex items-start gap-2 pt-1">
-                  <AlertTriangle className="h-3.5 w-3.5 text-warning-foreground flex-shrink-0 mt-0.5" />
-                  <p className="text-xs text-warning-foreground leading-snug">
+                  <AlertTriangle className="h-3.5 w-3.5 text-attn flex-shrink-0 mt-0.5" />
+                  <p className="text-xs text-attn leading-snug">
                     {t('dialog_duplicate_amount_unverified')}
                   </p>
                 </div>

components/transactions/InvoiceMatchDialog.tsx

@@ -404,11 +404,11 @@ export default function InvoiceMatchDialog({
           <div className="space-y-4">
             {/* Duplicate-payment warning: customer-side only, only when a candidate exists */}
             {!targetBlocked && candidate && isCustomerInvoice && (
-              <div className="rounded-lg border border-warning/40 bg-warning/10 p-4 space-y-3">
+              <div className="rounded-lg border border-border bg-muted/30 p-4 space-y-3">
                 <div className="flex items-start gap-2">
-                  <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5 text-warning-foreground" />
+                  <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5 text-attn" />
                   <div className="text-sm space-y-1">
-                    <p className="font-medium text-warning-foreground">{t('duplicate_title')}</p>
+                    <p className="font-medium text-attn">{t('duplicate_title')}</p>
                     {/* candidate.amount is the voucher leg's SEK debit
                         (duplicate-payment-detection.ts), so it is formatted as
                         SEK regardless of the transaction's currency: an
@@ -553,7 +553,7 @@ export default function InvoiceMatchDialog({
               if (targetBlocked) {
                 const isSettled = targetMatchState === 'settled'
                 return (
-                  <div className="flex items-start gap-2 p-3 rounded-lg bg-warning/10 text-warning-foreground">
+                  <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/30 text-attn">
                     <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5" />
                     <div className="text-sm">
                       <p className="font-medium">
@@ -617,7 +617,7 @@ export default function InvoiceMatchDialog({
               }
 
               return (
-                <div className="flex items-start gap-2 p-3 rounded-lg bg-warning/10 text-warning-foreground">
+                <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/30 text-attn">
                   <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5" />
                   <div className="text-sm">
                     <p className="font-medium">{t('amounts_differ')}</p>
@@ -652,9 +652,9 @@ export default function InvoiceMatchDialog({
                 rather than inside the Valutaomräkning card below, because in
                 this state the preview 400s and that card never renders. */}
             {!targetBlocked && invoiceRateMissing && (
-              <div className="rounded-lg border border-warning/40 bg-warning/5 p-4">
+              <div className="rounded-lg border border-border bg-muted/30 p-4">
                 <div className="flex items-start gap-2">
-                  <AlertTriangle className="h-4 w-4 mt-0.5 text-warning-foreground flex-shrink-0" />
+                  <AlertTriangle className="h-4 w-4 mt-0.5 text-attn flex-shrink-0" />
                   <div className="flex-1 text-sm">
                     {/* Untinted title, matching the sibling
                         fx_rate_unavailable panel below: the ochre lives in the
@@ -691,9 +691,9 @@ export default function InvoiceMatchDialog({
               if ('error' in fx) {
                 // Riksbanken unavailable: show manual rate input.
                 return (
-                  <div className="rounded-lg border border-warning/40 bg-warning/5 p-4 space-y-3">
+                  <div className="rounded-lg border border-border bg-muted/30 p-4 space-y-3">
                     <div className="flex items-start gap-2">
-                      <AlertTriangle className="h-4 w-4 mt-0.5 text-warning-foreground flex-shrink-0" />
+                      <AlertTriangle className="h-4 w-4 mt-0.5 text-attn flex-shrink-0" />
                       <div className="flex-1 text-sm">
                         <p className="font-medium">{t('fx_rate_unavailable_title')}</p>
                         <p className="text-muted-foreground mt-1">

components/transactions/InvoicePicker.tsx

@@ -182,7 +182,7 @@ export default function InvoicePicker({ transaction, onSelect, isProcessing }: I
                       </span>
                     )}
                     {invoice.status === 'partially_paid' && (
-                      <span className="text-[10px] uppercase tracking-wide text-warning-foreground">
+                      <span className="text-[10px] uppercase tracking-wide text-attn">
                         {t('status_partially_paid')}
                       </span>
                     )}

components/transactions/MatchAllocationDialog.tsx

@@ -458,7 +458,7 @@ export default function MatchAllocationDialog({
                                 ≈ {formatCurrency(parseAmount(draft.amount) / c.exchangeRate, c.currency)}
                               </p>
                             ) : (
-                              <p className="text-[11px] tabular-nums text-warning-foreground">
+                              <p className="text-[11px] tabular-nums text-attn">
                                 {t('fx_rate_missing_warning', { currency: c.currency })}
                               </p>
                             )
@@ -516,7 +516,7 @@ export default function MatchAllocationDialog({
               // must equal the bank's actual receipt or reconciliation
               // breaks. The user must allocate the full amount or remove
               // selections. PR #607 round-1 review fix.
-              <div className="flex items-start gap-2 rounded-lg bg-warning/10 p-3 text-sm text-warning-foreground">
+              <div className="flex items-start gap-2 rounded-lg bg-muted/30 p-3 text-sm text-attn">
                 <AlertTriangle className="h-4 w-4 flex-shrink-0 mt-0.5" />
                 <p>
                   {t('undershoot_warning', {

components/transactions/QuickReviewDialog.tsx

@@ -443,8 +443,8 @@ export default function QuickReviewDialog({
 
         {/* Template special rules */}
         {template?.special_rules_sv && (
-          <div className="rounded-lg border border-warning/30 bg-warning/[0.03] px-3 py-2">
-            <p className="text-xs text-warning-foreground leading-snug">
+          <div className="rounded-lg border border-border bg-muted/30 px-3 py-2">
+            <p className="text-xs text-attn leading-snug">
               {template.special_rules_sv}
             </p>
           </div>
@@ -461,10 +461,10 @@ export default function QuickReviewDialog({
 
         {/* Reverse charge warning */}
         {template?.requires_vat_registration_data && (
-          <div className="rounded-lg border border-warning/30 bg-warning/[0.03] px-3 py-2">
+          <div className="rounded-lg border border-border bg-muted/30 px-3 py-2">
             <div className="flex items-start gap-2">
-              <AlertTriangle className="h-3.5 w-3.5 text-warning-foreground flex-shrink-0 mt-0.5" />
-              <p className="text-xs text-warning-foreground leading-snug">
+              <AlertTriangle className="h-3.5 w-3.5 text-attn flex-shrink-0 mt-0.5" />
+              <p className="text-xs text-attn leading-snug">
                 {t('reverse_charge_warning')}
               </p>
             </div>

components/transactions/SupplierInvoicePicker.tsx

@@ -177,7 +177,7 @@ export default function SupplierInvoicePicker({
                       </span>
                     )}
                     {invoice.status === 'partially_paid' && (
-                      <span className="text-[10px] uppercase tracking-wide text-warning-foreground">
+                      <span className="text-[10px] uppercase tracking-wide text-attn">
                         Delbetald
                       </span>
                     )}