/* Custom color palette */
:root {
    --terracotta-50: #fff7ed;
    --terracotta-100: #ffedd5;
    --terracotta-200: #fed7aa;
    --terracotta-300: #fdba74;
    --terracotta-400: #fb923c;
    --terracotta-500: #f97316;
    --terracotta-600: #ea580c;
    --terracotta-700: #c2410c;
    --terracotta-800: #9a3412;
    --terracotta-900: #7c2d12;
}

/* Custom utilities */
.bg-terracotta-50 { background-color: var(--terracotta-50); }
.bg-terracotta-100 { background-color: var(--terracotta-100); }
.bg-terracotta-600 { background-color: var(--terracotta-600); }
.bg-terracotta-700 { background-color: var(--terracotta-700); }
.text-terracotta-600 { color: var(--terracotta-600); }
.text-terracotta-700 { color: var(--terracotta-700); }
.text-terracotta-400 { color: var(--terracotta-400); }
.hover\:bg-terracotta-700:hover { background-color: var(--terracotta-700); }
.hover\:text-terracotta-700:hover { color: var(--terracotta-700); }
.hover\:text-terracotta-300:hover { color: var(--terracotta-300); }

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom font styles */
.font-serif {
    font-family: 'Playfair Display', serif;
}

.font-sans {
    font-family: 'Inter', sans-serif;
}

/* Animation for mobile menu */
#mobile-menu {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu.active {
    max-height: 300px;
}

/* Subtle hover effects */
a {
    transition: all 0.2s ease;
}