export default defineAppConfig({
  ui: {
    // Primary color for the app - Teal
    colors: {
      primary: 'primary',
      neutral: 'slate',
      success: 'success',
      warning: 'warning',
      error: 'red'
    },

    // Button customizations with custom gradient variants
    button: {
      defaultVariants: {
        size: 'lg'
      },
      variants: {
        variant: {
          gradient:
            'bg-gradient-to-br from-primary-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:from-cyan-500 hover:to-accent-500 hover:shadow-xl hover:shadow-primary-500/30 transition-all',
          gradientOutline:
            'bg-white dark:bg-gray-900 border-2 border-transparent bg-clip-padding font-semibold rounded-xl text-primary-600 dark:text-primary-400 ring-2 ring-primary-500 hover:bg-primary-50 dark:hover:bg-primary-950 transition-all'
        }
      }
    },

    // Card customizations with enhanced hover states and glass variant
    card: {
      slots: {
        root: 'rounded-2xl overflow-hidden transition-all duration-300'
      },
      variants: {
        variant: {
          glass: ''
        }
      },
      compoundVariants: [
        {
          variant: 'glass',
          class: {
            root: 'bg-white/70 dark:bg-black/40 backdrop-blur-xl border border-white/30 dark:border-white/10'
          }
        }
      ]
    },

    // Page Hero customizations for landing page
    pageHero: {
      slots: {
        root: 'relative isolate overflow-hidden',
        title: 'font-heading text-5xl sm:text-6xl lg:text-7xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-lg sm:text-xl text-muted max-w-3xl'
      }
    },

    // Page Section customizations
    pageSection: {
      slots: {
        title: 'font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-base sm:text-lg text-muted'
      }
    },

    // Page Feature customizations
    pageFeature: {
      slots: {
        title: 'text-lg font-semibold text-highlighted',
        description: 'text-base text-muted'
      }
    },

    // Page Card customizations
    pageCard: {
      slots: {
        root: 'rounded-2xl transition-all duration-300',
        title: 'text-lg font-semibold text-highlighted',
        description: 'text-base text-muted'
      }
    },

    // Page CTA customizations
    pageCTA: {
      slots: {
        title: 'font-heading text-3xl sm:text-4xl text-pretty tracking-tight font-bold',
        description: 'text-base sm:text-lg'
      }
    },

    // Header customizations - transparent with blur
    header: {
      slots: {
        root: 'bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-800/50',
        title: 'font-heading text-xl font-bold'
      }
    },

    // Footer customizations
    footer: {
      slots: {
        root: 'border-t border-gray-200 dark:border-gray-800'
      }
    },

    // Input customizations for newsletter form
    input: {
      defaultVariants: {
        size: 'lg'
      }
    },

    // Accordion customizations
    accordion: {
      slots: {
        trigger: 'text-base font-medium',
        content: 'text-base text-muted'
      }
    }
  }
})