const modalTheme = {
    // Note: overlay styling is now handled by the shared Overlay component
    overlay: "",
    container: "relative w-full max-h-[calc(100vh-2rem)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 flex flex-col my-4 min-h-0 overflow-hidden",
    containerVariants: {
        default: "bg-white ring-4 !ring-white/10 dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)]",
        translucent: "bg-gradient-to-b from-[var(--color-background)]/90 to-[var(--color-background)]/70 backdrop-blur-xl ring-4 ring-white/20 border-t border-[var(--color-border)]",
    },
    header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
    headerContent: "flex flex-col items-start gap-2 flex-1",
    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
    subtitle: "text-base text-[var(--color-text-muted)] mt-0.5",
    body: "flex-1 overflow-y-auto p-6 pb-3",
    footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
};
// Size variants for the modal container
const modalSizeVariants = {
    sm: "max-w-sm mx-4 sm:mx-0",
    md: "max-w-md mx-4 sm:mx-0",
    lg: "max-w-lg mx-4 sm:mx-0",
    xl: "max-w-xl mx-4 sm:mx-0",
    full: "max-w-full mx-4",
};

export { modalSizeVariants, modalTheme };
