/* RealGems E-Commerce Styles - Sprint 0 */

/* TODO: In Sprint 5, compile Tailwind locally instead of using CDN */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* Custom Components */
@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-gradient-to-r from-realgems-gold to-yellow-400 text-realgems-fg font-semibold rounded-full hover:opacity-90 transition cursor-pointer;
    }

    .btn-outline {
        @apply px-6 py-3 border-2 border-realgems-gold text-realgems-gold font-semibold rounded-full hover:bg-realgems-gold hover:text-realgems-fg transition cursor-pointer;
    }

    .card {
        @apply bg-white rounded-lg shadow-md hover:shadow-lg transition;
    }

    .section-title {
        @apply font-tenor text-3xl text-realgems-fg mb-8;
    }
}

/* Utility Classes */
.gradient-gold {
    background: linear-gradient(135deg, #c9a96e 0%, #e8dfd0 100%);
}

.text-gradient {
    background: linear-gradient(135deg, #c9a96e 0%, #e8dfd0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}