Soft Tint Alert

<!--
  A softer take on the tinted alert: the icon sits in its own tinted chip so the
  severity reads as a shape-in-a-swatch even before the text. Body copy uses the
  neutral gray ramp (gray-700 / gray-300) for calm long-form contrast, while the
  chip carries the -700/-200 colour that clears AA on the -100/-900 swatch.
-->
<div class="flex items-start gap-3 rounded-xl border border-blue-100 bg-blue-50/70 px-3.5 py-3 dark:border-blue-900/60 dark:bg-blue-950/40" role="status">
  <span class="flex h-8 w-8 flex-none items-center justify-center rounded-lg bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200" aria-hidden="true">
    <svg class="h-[1.125rem] w-[1.125rem]" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2 3a1 1 0 0 1 2 0v5a1 1 0 1 1-2 0V9Z" />
    </svg>
  </span>
  <div class="min-w-0 flex-1">
    <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sync in progress</p>
    <p class="mt-0.5 text-sm leading-normal text-gray-700 dark:text-gray-300">We're importing your contacts. This usually takes under a minute.</p>
  </div>
</div>