@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

@layer base {
    body {
        @apply font-sans antialiased text-brand-900 bg-white;
    }
}

@layer components {
    .premium-card {
        @apply bg-white rounded-3xl border border-brand-100 shadow-premium hover:shadow-premium-hover transition-all duration-300;
    }
    
    .glass-panel {
        @apply bg-white/70 backdrop-blur-xl border border-white/20 shadow-premium;
    }

    .btn-premium {
        @apply px-8 py-4 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 active:scale-95;
    }

    .btn-primary {
        @apply btn-premium bg-primary-600 text-white shadow-lg shadow-primary-200 hover:bg-primary-700 hover:shadow-primary-300;
    }

    .btn-white {
        @apply btn-premium bg-white text-brand-900 border border-brand-200 hover:bg-brand-50;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    @apply bg-brand-50;
}
::-webkit-scrollbar-thumb {
    @apply bg-brand-200 rounded-full hover:bg-brand-300 transition-colors;
}