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

    /* Buttons */
    .btn-primary {
        @apply bg-blue-600 text-white px-6 py-2 rounded font-medium text-sm hover:bg-blue-700 transition;
    }

    .btn-secondary {
        @apply bg-gray-200 text-gray-900 px-6 py-2 rounded font-medium text-sm hover:bg-gray-300 transition;
    }

    .btn-outline {
        @apply border-2 border-blue-600 text-blue-600 px-6 py-2 rounded font-medium text-sm hover:bg-blue-50 transition;
    }

    /* Headings */
    h1 {
        @apply text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900;
    }

    h2 {
        @apply text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900;
    }

    h3 {
        @apply text-lg md:text-xl font-bold text-gray-900;
    }

    h4 {
        @apply text-base font-semibold text-gray-900;
    }

    /* Cards */
    .card {
        @apply bg-white border border-gray-200 rounded-lg p-6 transition hover:border-gray-300;
    }

    /* Section Spacing */
    .section {
        @apply py-12 md:py-16 lg:py-20;
    }

    /* Animations */
    .reveal {
        @apply opacity-0 transform translate-y-8 transition duration-500;
    }

    .reveal.active {
        @apply opacity-100 translate-y-0;
    }

    /* Transitions */
    .transition-fast {
        @apply transition duration-200;
    }

    .transition-smooth {
        @apply transition duration-500 ease-in-out;
    }

    /* Grid layouts */
    .grid-responsive {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
    }

    .grid-responsive-2 {
        @apply grid grid-cols-1 md:grid-cols-2 gap-6;
    }

    .grid-responsive-4 {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
    }
}

/* Minimal animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

/* Scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Accessibility */
.sr-only {
    @apply absolute w-1 h-1 p-0 -m-1 overflow-hidden clip whitespace-nowrap border-0;
}

/* Focus states */
a:focus,
button:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 rounded;
}

/* Responsive text sizing */
@screen md {
    h1 { @apply text-4xl; }
    h2 { @apply text-3xl; }
    h3 { @apply text-xl; }
}

@screen lg {
    h1 { @apply text-5xl; }
    h2 { @apply text-4xl; }
    h3 { @apply text-2xl; }
}