style: refine AlertDialog spacing and tokens

Tighten header/footer spacing, swap rounded-2xl for rounded-lg,
switch title to font-display/gray-800, and shrink description
to text-sm to match the AlertDialog design.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: fernandorjesus

src/components/ui/Dialog/Dialog.tsx

@@ -88,7 +88,7 @@ function Dialog({
         showCloseButton={showCloseButton}
         title={title}
       >
-        <div className="pb-12">{children}</div>
+        <div>{children}</div>
       </DialogContent>
     </DialogRoot>
   );
@@ -178,7 +178,7 @@ function DialogContent({
       <DialogOverlay />
       <DialogPrimitive.Content
         className={cn(
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-2xl bg-white p-6 shadow-lg duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border-gray-200 bg-white p-6 shadow-lg duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
           className
         )}
         data-slot="dialog-content"
@@ -250,7 +250,7 @@ function DialogContent({
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("mb-6 grid gap-4", className)}
+      className={cn("mb-4 grid gap-1.5", className)}
       data-slot="dialog-header"
       {...props}
     />
@@ -260,7 +260,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex justify-end gap-3", className)}
+      className={cn("mt-4 flex justify-end gap-2", className)}
       data-slot="dialog-footer"
       {...props}
     />
@@ -273,7 +273,10 @@ function DialogTitle({
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
-      className={cn("font-semibold text-black text-lg leading-none", className)}
+      className={cn(
+        "font-display font-semibold text-gray-800 text-lg leading-none",
+        className
+      )}
       data-slot="dialog-title"
       {...props}
     />
@@ -286,7 +289,7 @@ function DialogDescription({
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
-      className={cn("text-gray-600 text-lg leading-[1.3]", className)}
+      className={cn("text-gray-600 text-sm leading-snug", className)}
       data-slot="dialog-description"
       {...props}
     />