Notification Widget

<div class="ws-notification-widget rounded-2xl border p-6 max-w-sm w-full"
     style="
       --ws-notification-widget-bg: oklch(0.99 0.005 75);
       --ws-notification-widget-text: oklch(0.25 0.02 75);
       --ws-notification-widget-text-soft: oklch(0.40 0.015 75);
       --ws-notification-widget-text-muted: oklch(0.55 0.01 75);
       --ws-notification-widget-border: oklch(0.90 0.01 75);
       --ws-notification-widget-accent: oklch(0.55 0.15 250);
       --ws-notification-widget-accent-soft: oklch(0.92 0.04 250);
       --ws-notification-widget-danger: oklch(0.55 0.2 25);
       --ws-notification-widget-warning: oklch(0.70 0.15 85);
       --ws-notification-widget-success: oklch(0.55 0.15 155);
       background: var(--ws-notification-widget-bg);
       color: var(--ws-notification-widget-text);
       border-color: var(--ws-notification-widget-border);
     ">

  <header class="flex items-center justify-between mb-5">
    <h2 class="text-lg font-semibold tracking-tight">Notifications</h2>
    <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold text-white"
          style="background: var(--ws-notification-widget-danger);">3</span>
  </header>

  <ul class="flex flex-col gap-1" role="list">

    <li class="flex items-start gap-3 rounded-xl px-3 py-3"
        style="background: var(--ws-notification-widget-accent-soft);">
      <span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
            style="background: var(--ws-notification-widget-accent);"></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-semibold leading-snug"
           style="color: var(--ws-notification-widget-text);">New comment on your post</p>
        <p class="mt-0.5 text-xs leading-relaxed"
           style="color: var(--ws-notification-widget-text-soft);">Sarah left a comment on "Getting Started with Design Systems"</p>
      </div>
      <time class="shrink-0 text-xs tabular-nums"
            style="color: var(--ws-notification-widget-text-muted);">2m ago</time>
    </li>

    <li class="flex items-start gap-3 rounded-xl px-3 py-3"
        style="background: var(--ws-notification-widget-accent-soft);">
      <span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
            style="background: var(--ws-notification-widget-success);"></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-semibold leading-snug"
           style="color: var(--ws-notification-widget-text);">Deployment successful</p>
        <p class="mt-0.5 text-xs leading-relaxed"
           style="color: var(--ws-notification-widget-text-soft);">Production build v2.4.1 deployed to all regions</p>
      </div>
      <time class="shrink-0 text-xs tabular-nums"
            style="color: var(--ws-notification-widget-text-muted);">15m ago</time>
    </li>

    <li class="flex items-start gap-3 rounded-xl px-3 py-3"
        style="background: var(--ws-notification-widget-accent-soft);">
      <span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
            style="background: var(--ws-notification-widget-danger);"></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-semibold leading-snug"
           style="color: var(--ws-notification-widget-text);">API rate limit exceeded</p>
        <p class="mt-0.5 text-xs leading-relaxed"
           style="color: var(--ws-notification-widget-text-soft);">Endpoint /api/users hit 429 — throttling active</p>
      </div>
      <time class="shrink-0 text-xs tabular-nums"
            style="color: var(--ws-notification-widget-text-muted);">1h ago</time>
    </li>

    <li class="flex items-start gap-3 rounded-xl px-3 py-3">
      <span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
            style="background: var(--ws-notification-widget-warning);"></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium leading-snug"
           style="color: var(--ws-notification-widget-text-soft);">Storage usage at 85%</p>
        <p class="mt-0.5 text-xs leading-relaxed"
           style="color: var(--ws-notification-widget-text-muted);">Consider upgrading your plan or clearing old files</p>
      </div>
      <time class="shrink-0 text-xs tabular-nums"
            style="color: var(--ws-notification-widget-text-muted);">3h ago</time>
    </li>

    <li class="flex items-start gap-3 rounded-xl px-3 py-3">
      <span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
            style="background: var(--ws-notification-widget-accent);"></span>
      <div class="min-w-0 flex-1">
        <p class="text-sm font-medium leading-snug"
           style="color: var(--ws-notification-widget-text-soft);">Team invitation accepted</p>
        <p class="mt-0.5 text-xs leading-relaxed"
           style="color: var(--ws-notification-widget-text-muted);">Marcus joined the Engineering workspace</p>
      </div>
      <time class="shrink-0 text-xs tabular-nums"
            style="color: var(--ws-notification-widget-text-muted);">1d ago</time>
    </li>

  </ul>

</div>