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

    // Button customizations
    button: {
      defaultVariants: {
        size: 'lg'
      }
    },

    // Card customizations with enhanced hover states
    card: {
      slots: {
        root: 'rounded-2xl overflow-hidden transition-all duration-300'
      }
    },

    // 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'
      }
    }
  }
})