@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

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

/* === BASE LAYER === */
@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    body {
        @apply bg-background text-content font-sans;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-heading;
    }
    ::selection {
        @apply bg-primary-200 text-primary-900;
    }
}

/* === COMPONENT LAYER === */
@layer components {
    /* Buttons */
    .btn-primary {
        @apply inline-flex items-center justify-center px-7 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-full shadow-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0;
    }
    .btn-accent {
        @apply inline-flex items-center justify-center px-7 py-3 bg-accent hover:bg-accent-600 text-white font-semibold rounded-full shadow-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0;
    }
    .btn-outline {
        @apply inline-flex items-center justify-center px-7 py-3 border-2 border-primary-600 text-primary-600 hover:bg-primary-50 font-semibold rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 hover:-translate-y-0.5;
    }
    .btn-ghost {
        @apply inline-flex items-center justify-center px-7 py-3 text-content hover:bg-gray-100 font-medium rounded-full transition-all duration-200;
    }
    .btn-sm {
        @apply px-4 py-2 text-sm;
    }
    .btn-lg {
        @apply px-10 py-4 text-lg;
    }

    /* Inputs */
    .input-field {
        @apply block w-full rounded-xl border-gray-200 bg-white shadow-sm focus:border-primary-500 focus:ring-primary-500 transition-all duration-200 placeholder:text-content-muted;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-300;
    }
    .glass-card {
        @apply bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-xl;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider;
    }
    .badge-sale {
        @apply badge bg-red-500 text-white;
    }
    .badge-new {
        @apply badge bg-primary-500 text-white;
    }
    .badge-hot {
        @apply badge bg-accent text-white;
    }

    /* Section Headings */
    .section-title {
        @apply text-3xl md:text-4xl font-bold font-heading text-content tracking-tight;
    }
    .section-subtitle {
        @apply text-content-light text-lg mt-3 max-w-2xl;
    }

    /* Skeleton Loading */
    .skeleton {
        @apply bg-gray-200 rounded-lg animate-pulse;
    }
    .shimmer-loader {
        @apply relative overflow-hidden bg-gray-200 rounded-lg;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 2s infinite linear;
    }
}

/* === UTILITY LAYER === */
@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    /* Hide scrollbar but allow scrolling */
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Custom scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded-full;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full hover:bg-gray-400;
    }

    /* Animation delays */
    .delay-100 { animation-delay: 100ms; }
    .delay-200 { animation-delay: 200ms; }
    .delay-300 { animation-delay: 300ms; }
    .delay-400 { animation-delay: 400ms; }
    .delay-500 { animation-delay: 500ms; }
    .delay-700 { animation-delay: 700ms; }
    .delay-1000 { animation-delay: 1000ms; }

    /* Gradient text */
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-accent-500;
    }

    /* Line clamp */
    .line-clamp-1 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Promotional Banner Slide Animation */
    @keyframes slide-left {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }
    .animate-slide-left {
        animation: slide-left 20s linear infinite;
    }
}