@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root {
    --mint-100: #F0FDF4;
    --mint-200: #EAF7F2;
    --coral-500: #FF7E67;
    --coral-600: #E56A58;
    --gold-500: #BFAE84;
    --text-800: #333333;
    --teal-500: #38B2AC;
    --teal-600: #2C7A7B;
}
body {
    font-family: 'Montserrat', sans-serif;
    color: #2d3748;
}

.font-serif {
    font-family: 'Lora', serif;
}

.bg-coral-500 {
    background-color: var(--coral-500);
}

.bg-coral-600 {
    background-color: var(--coral-600);
}

.text-coral-500 {
    color: var(--coral-500);
}

.hover\:bg-coral-600:hover {
    background-color: var(--coral-600);
}

/* Animation for buttons */
.transition-all {
    transition: all 0.3s ease;
}

/* Custom shadow for cards */
.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .text-4xl {
        font-size: 2rem;
    }
    .text-6xl {
        font-size: 3rem;
    }
}

/* Accessibility focus styles */
a:focus, button:focus {
    outline: 2px solid var(--teal-500);
    outline-offset: 2px;
}