/* Custom Color Palette */
:root {
    --terracotta-50: #fef2f0;
    --terracotta-100: #fee5e0;
    --terracotta-200: #fcd4cc;
    --terracotta-300: #f8b4a5;
    --terracotta-400: #f08470;
    --terracotta-500: #e45a45;
    --terracotta-600: #c05a3a;
    --terracotta-700: #9a482f;
    --terracotta-800: #7a3a27;
    --terracotta-900: #613020;
    
    --sand-50: #faf8f5;
    --sand-100: #f5f0e8;
    --sand-200: #ebe0cc;
    --sand-300: #dfc9a0;
    --sand-400: #d4b072;
    --sand-500: #c49a5c;
    --sand-600: #a67c4b;
    --sand-700: #84613d;
    --sand-800: #6b4f33;
    --sand-900: #59432c;
}

/* Tailwind Custom Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .text-terracotta-600 { color: var(--terracotta-600); }
    .bg-terracotta-600 { background-color: var(--terracotta-600); }
    .hover\:bg-terracotta-700:hover { background-color: var(--terracotta-700); }
    .hover\:text-terracotta-600:hover { color: var(--terracotta-600); }
    .bg-terracotta-100 { background-color: var(--terracotta-100); }
    .bg-terracotta-200 { background-color: var(--terracotta-200); }
    .bg-terracotta-400 { background-color: var(--terracotta-400); }
    .text-terracotta-100 { color: var(--terracotta-100); }
    .text-terracotta-200 { color: var(--terracotta-200); }
    .text-terracotta-700 { color: var(--terracotta-700); }
    .border-terracotta-200 { border-color: var(--terracotta-200); }
    .ring-terracotta-200 { --tw-ring-color: var(--terracotta-200); }
    
    .bg-sand-300 { background-color: var(--sand-300); }
    .bg-sand-400 { background-color: var(--sand-400); }
    .bg-sand-500 { background-color: var(--sand-500); }
    .text-sand-300 { color: var(--sand-300); }
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

/* Playfair Display for accent text */
.font-serif-accent {
    font-family: 'Playfair Display', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f0e8;
}

::-webkit-scrollbar-thumb {
    background: #c05a3a;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9a482f;
}

/* Animation Utilities */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--terracotta-600);
    outline-offset: 2px;
}