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

/* Custom Base Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply antialiased text-umami-dark dark:text-gray-100;
        --tw-text-opacity: 1;
    }

    /* Focus visible for accessibility */
    :focus-visible {
        @apply outline-none ring-2 ring-umami-accent ring-offset-2;
    }

    /* Selection color */
    ::selection {
        @apply bg-umami-accent text-white;
    }
}

/* Custom Components */
@layer components {

    /* Primary Button */
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full bg-umami-accent text-white font-semibold hover:bg-umami-dark focus:outline-none focus:ring-2 focus:ring-umami-accent focus:ring-offset-2 transition-colors;
    }

    /* Secondary Button */
    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full bg-white/10 backdrop-blur text-white font-semibold border border-white/30 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 transition-colors;
    }

    /* Form Input */
    .form-input {
        @apply w-full rounded-lg border-umami-border dark:border-gray-600 dark:bg-gray-700 focus:border-umami-accent focus:ring-umami-accent transition-colors;
    }

    /* Card */
    .card {
        @apply bg-white dark:bg-gray-800 rounded-2xl shadow-md hover:shadow-lg transition-shadow;
    }

    /* Section */
    .section {
        @apply py-16 md:py-24;
    }

    /* Container */
    .container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }
}

/* Custom Utilities */
@layer utilities {

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Line clamp utilities */
    .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;
    }

    /* Text gradient */
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-umami-accent to-orange-500;
    }

    /* Glass effect */
    .glass {
        @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-md;
    }
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* Swiper custom styles */
.swiper-pagination-bullet {
    @apply bg-gray-400 opacity-50;
}

.swiper-pagination-bullet-active {
    @apply bg-umami-accent opacity-100;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}