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

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Cormorant Garamond', serif;
    }
}

@layer utilities {
    .bg-cream-50 {
        background-color: #faf8f5;
    }
    .bg-cream-100 {
        background-color: #f5f1e8;
    }
    .text-sage-700 {
        color: #4a6b5a;
    }
    .text-sage-800 {
        color: #3a5545;
    }
    .bg-sage-100 {
        background-color: #e8f0eb;
    }
    .bg-sage-300 {
        background-color: #b8cdc0;
    }
    .bg-sage-600 {
        background-color: #6b8e7d;
    }
    .bg-sage-700 {
        background-color: #4a6b5a;
    }
    .bg-sage-800 {
        background-color: #3a5545;
    }
    .border-sage-300 {
        border-color: #b8cdc0;
    }
    .border-sage-700 {
        border-color: #4a6b5a;
    }
    .focus\:ring-sage-500:focus {
        --tw-ring-color: #5a7d6b;
    }
    .text-sage-600 {
        color: #6b8e7d;
    }
    .hover\:bg-sage-700:hover {
        background-color: #4a6b5a;
    }
    .hover\:text-sage-300:hover {
        color: #b8cdc0;
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-20px) translateX(-50%);
    }
    60% {
        transform: translateY(-10px) translateX(-50%);
    }
}