Modal Base

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-modal-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-modal-action-text)] shadow transition hover:opacity-90">Open Dialog</button>
  <div class="ws-modal fixed inset-0 z-50 flex items-center justify-center bg-[var(--ws-modal-overlay)] backdrop-blur-sm" hidden>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-title" class="mx-4 w-full max-w-md rounded-2xl bg-[var(--ws-modal-bg)] p-6 shadow-xl">
      <h2 id="modal-title" class="text-lg font-semibold text-[var(--ws-modal-text)]">Dialog Title</h2>
      <p class="mt-2 text-sm text-[var(--ws-modal-text-soft)]">This is the dialog body text. It provides context or information about the action the user is about to take.</p>
      <div class="mt-6 flex justify-end gap-3">
        <button type="button" onclick="this.closest('.ws-modal').hidden=true" class="rounded-lg border border-[var(--ws-modal-border)] px-4 py-2 text-sm font-medium text-[var(--ws-modal-text-soft)] transition hover:bg-white/5">Cancel</button>
        <button type="button" onclick="this.closest('.ws-modal').hidden=true" class="rounded-lg bg-[var(--ws-modal-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-modal-action-text)] transition hover:opacity-90">Confirm</button>
      </div>
    </div>
  </div>
</div>