/**
 * Default theme for the Button component
 */
const buttonTheme = {
    // Base styles for the button element
    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
    // Visual style variants - STRUCTURE only (no colors)
    variantStyles: {
        filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
        outline: "bg-transparent border",
        soft: "border-transparent",
        link: "bg-transparent border-transparent",
    },
    // Color styles organized BY VARIANT for reliable dark: prefixes
    variantColors: {
        // Filled variant - solid backgrounds
        filled: {
            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
                "focus-visible:outline-[var(--color-neutral-800)] " +
                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)]",
            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
                "focus-visible:outline-[var(--color-primary-600)] " +
                "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)]",
            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] border-[var(--color-secondary)] " +
                "focus-visible:outline-[var(--color-secondary-600)] " +
                "dark:text-[var(--color-secondary-contrast)] dark:bg-[var(--color-secondary-600)] dark:border-[var(--color-secondary-600)]",
            success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
                "focus-visible:outline-[var(--color-success-600)] " +
                "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)]",
            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
                "focus-visible:outline-[var(--color-warning-600)] " +
                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)]",
            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
                "focus-visible:outline-[var(--color-danger-600)] " +
                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)]",
        },
        // Outline variant - transparent bg with colored border
        outline: {
            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
                "hover:bg-[var(--color-neutral-100)] " +
                "focus-visible:outline-[var(--color-text-secondary)] " +
                "dark:hover:bg-[var(--color-background-secondary)]",
            primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
                "hover:bg-[var(--color-primary-50)] " +
                "focus-visible:outline-[var(--color-primary-600)] " +
                "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
                "dark:hover:bg-[var(--color-primary-900)]/30",
            secondary: "text-[var(--color-secondary-600)] border-[var(--color-secondary-600)] " +
                "hover:bg-[var(--color-secondary-50)] " +
                "focus-visible:outline-[var(--color-secondary-600)] " +
                "dark:text-[var(--color-secondary-300)] dark:border-[var(--color-secondary-400)] " +
                "dark:hover:bg-[var(--color-secondary-900)]/30",
            success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
                "hover:bg-[var(--color-success-50)] " +
                "focus-visible:outline-[var(--color-success-600)] " +
                "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
                "dark:hover:bg-[var(--color-success-900)]/30",
            warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
                "hover:bg-[var(--color-warning-50)] " +
                "focus-visible:outline-[var(--color-warning-600)] " +
                "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
                "dark:hover:bg-[var(--color-warning-900)]/30",
            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
                "hover:bg-[var(--color-danger-50)] " +
                "focus-visible:outline-[var(--color-danger-600)] " +
                "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
                "dark:hover:bg-[var(--color-danger-900)]/30",
        },
        // Soft variant - subtle background tints
        soft: {
            neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
                "hover:bg-[var(--color-neutral-200)] " +
                "focus-visible:outline-[var(--color-text-secondary)] " +
                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
                "dark:hover:bg-[var(--color-neutral-800)]",
            primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
                "hover:bg-[var(--color-primary-50)] " +
                "focus-visible:outline-[var(--color-primary-600)] " +
                "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
                "dark:hover:bg-[var(--color-primary-900)]/50",
            secondary: "text-[var(--color-secondary-600)] bg-[var(--color-secondary)]/10 " +
                "hover:bg-[var(--color-secondary-50)] " +
                "focus-visible:outline-[var(--color-secondary-600)] " +
                "dark:text-[var(--color-secondary-300)] dark:bg-[var(--color-secondary-900)]/30 " +
                "dark:hover:bg-[var(--color-secondary-900)]/50",
            success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
                "hover:bg-[var(--color-success-50)] " +
                "focus-visible:outline-[var(--color-success-600)] " +
                "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
                "dark:hover:bg-[var(--color-success-900)]/50",
            warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
                "hover:bg-[var(--color-warning-50)] " +
                "focus-visible:outline-[var(--color-warning-600)] " +
                "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
                "dark:hover:bg-[var(--color-warning-900)]/50",
            danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
                "hover:bg-[var(--color-danger-50)] " +
                "focus-visible:outline-[var(--color-danger-600)] " +
                "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
                "dark:hover:bg-[var(--color-danger-900)]/50",
        },
        // Link variant - text-only with per-color styles
        link: {
            neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
                "focus-visible:outline-[var(--color-text-secondary)] " +
                "dark:text-[var(--color-text-primary)]",
            primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
                "focus-visible:outline-[var(--color-primary-600)] " +
                "dark:text-[var(--color-primary-300)]",
            secondary: "text-[var(--color-secondary-600)] underline-offset-4 hover:underline " +
                "focus-visible:outline-[var(--color-secondary-600)] " +
                "dark:text-[var(--color-secondary-300)]",
            success: "text-[var(--color-success-600)] underline-offset-4 hover:underline " +
                "focus-visible:outline-[var(--color-success-600)] " +
                "dark:text-[var(--color-success-300)]",
            warning: "text-[var(--color-warning-600)] underline-offset-4 hover:underline " +
                "focus-visible:outline-[var(--color-warning-600)] " +
                "dark:text-[var(--color-warning-300)]",
            danger: "text-[var(--color-danger-600)] underline-offset-4 hover:underline " +
                "focus-visible:outline-[var(--color-danger-600)] " +
                "dark:text-[var(--color-danger-300)]",
        },
    },
    // Size variants
    sizes: {
        sm: {
            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
            iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
            link: "font-semibold p-0 text-base h-fit",
        },
        md: {
            default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
            iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
            link: "font-semibold p-0 text-base h-fit",
        },
        lg: {
            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
            iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
            link: "font-semibold p-0 text-lg h-fit",
        },
    },
    // State styles
    states: {
        disabled: "opacity-50 cursor-not-allowed pointer-events-none saturate-0",
        error: "ring-2 ring-[var(--color-danger-500)]",
        loading: "cursor-not-allowed",
        // default state has no additional classes
    },
    // Block style
    blockStyle: "w-full",
};

export { buttonTheme };
