@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
    body {
        @apply bg-black text-white font-sans;
    }

    h1 {
        @apply text-5xl font-bold;
    }

    h2 {
        @apply text-3xl font-semibold;
    }

    h3 {
        @apply text-xl font-medium;
    }
}

/* Custom components */
@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-brand-green text-black rounded-full font-semibold 
               hover:bg-opacity-90 transition-colors duration-300;
    }

    .btn-secondary {
        @apply px-6 py-3 border border-brand-green text-brand-green rounded-full 
               font-semibold hover:bg-brand-green-ghost transition-colors duration-300;
    }

    .btn-ai {
        @apply px-6 py-3 border border-brand-purple text-brand-purple rounded-full 
               font-semibold hover:bg-brand-purple-ghost transition-colors duration-300;
    }

    .card {
        @apply p-6 bg-surface rounded-lg border border-gray-border 
               hover:border-brand-green transition-all duration-300;
    }

    .card-ai {
        @apply p-6 bg-surface rounded-lg border border-gray-border 
               hover:border-brand-purple transition-all duration-300;
    }
}

/* Custom utilities */
@layer utilities {
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-green to-brand-purple;
    }
}