@layer base {
    body {
        @apply bg-chatpos-white text-chatpos-dark overflow-x-hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-sans;
    }
}

@layer components {
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .btn-base {
        @apply inline-flex items-center justify-center rounded-full text-base font-bold transition-all duration-300 transform active:scale-95;
    }

    .btn-primary {
        @apply btn-base bg-chatpos-green text-white shadow-lg hover:shadow-green-500/40 hover:-translate-y-1 h-12 px-8 relative overflow-hidden;
    }

    .btn-secondary {
        @apply btn-base bg-white text-chatpos-dark border-2 border-transparent hover:border-chatpos-green/30 hover:bg-chatpos-greenLight hover:text-chatpos-green h-12 px-8 shadow-sm;
    }

    .glass-card {
        @apply bg-white/70 backdrop-blur-xl border border-white/60 rounded-3xl shadow-glass transition-all duration-500 hover:shadow-xl;
    }

    .text-gradient {
        @apply text-transparent bg-clip-text bg-gradient-to-r from-chatpos-green to-teal-500;
    }
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}