@layer base {
    body {
        @apply font-sans antialiased bg-gray-50 text-slate-900;
    }

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

@layer components {
    .btn {
        @apply px-6 py-3 rounded-xl font-bold transition-all active:scale-95 flex items-center justify-center gap-2 shadow-sm;
    }

    .btn-primary {
        @apply bg-primary text-white hover:brightness-110 shadow-primary/20;
    }

    .btn-accent {
        @apply bg-accent text-white hover:brightness-110 shadow-accent/20;
    }

    .glass {
        @apply bg-white/80 backdrop-blur-lg border border-white/20;
    }

    @keyframes slide-in {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-slide-in {
        animation: slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 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;
    }
}