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

/* Custom Color Palette */
:root {
    --terracotta-50: #faf5f1;
    --terracotta-100: #f3e8dd;
    --terracotta-200: #e8d0c0;
    --terracotta-300: #d9b09a;
    --terracotta-400: #c98f72;
    --terracotta-500: #c2704e;
    --terracotta-600: #b5573c;
    --terracotta-700: #9c4734;
    --terracotta-800: #813b30;
    --terracotta-900: #6b342c;
    
    --sand-50: #faf8f5;
    --sand-100: #f5f0e8;
    --sand-200: #ebe0d0;
    --sand-300: #dbcaa8;
    --sand-400: #c9b482;
    --sand-500: #bb9f64;
    --sand-600: #a8884f;
    --sand-700: #8c6f43;
    --sand-800: #735b3a;
    --sand-900: #5f4c32;
}

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

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

.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Custom Tailwind Colors */
@layer base {
    .text-terracotta-50 { color: var(--terracotta-50); }
    .text-terracotta-100 { color: var(--terracotta-100); }
    .text-terracotta-200 { color: var(--terracotta-200); }
    .text-terracotta-300 { color: var(--terracotta-300); }
    .text-terracotta-400 { color: var(--terracotta-400); }
    .text-terracotta-500 { color: var(--terracotta-500); }
    .text-terracotta-600 { color: var(--terracotta-600); }
    .text-terracotta-700 { color: var(--terracotta-700); }
    .text-terracotta-800 { color: var(--terracotta-800); }
    .text-terracotta-900 { color: var(--terracotta-900); }
    
    .bg-terracotta-50 { background-color: var(--terracotta-50); }
    .bg-terracotta-100 { background-color: var(--terracotta-100); }
    .bg-terracotta-200 { background-color: var(--terracotta-200); }
    .bg-terracotta-300 { background-color: var(--terracotta-300); }
    .bg-terracotta-400 { background-color: var(--terracotta-400); }
    .bg-terracotta-500 { background-color: var(--terracotta-500); }
    .bg-terracotta-600 { background-color: var(--terracotta-600); }
    .bg-terracotta-700 { background-color: var(--terracotta-700); }
    .bg-terracotta-800 { background-color: var(--terracotta-800); }
    .bg-terracotta-900 { background-color: var(--terracotta-900); }
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center px-6 py-3 bg-terracotta-600 text-white font-medium rounded-xl hover:bg-terracotta-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-primary.btn-large {
    @apply px-8 py-4 text-lg;
}

.btn-secondary {
    @apply inline-flex items-center px-6 py-3 bg-transparent text-white font-medium rounded-xl border-2 border-white hover:bg-white hover:text-stone-900 transition-all duration-300;
}

.btn-secondary.btn-large {
    @apply px-8 py-4 text-lg;
}

/* Navigation Styles */
.nav-link {
    @apply font-medium transition-all duration-300 relative;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-terracotta-600 transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* Mobile Navigation */
.mobile-nav-link {
    @apply block px-4 py-2 text-lg font-medium transition-all duration-300 rounded-lg;
}

.mobile-nav-link:hover {
    @apply bg-stone-100;
}

/* Accommodation Card */
.accommodation-card {
    @apply bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2;
}

/* Amenity Card */
.amenity-card {
    @apply p-6 rounded-2xl bg-white shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2;
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
    }
}

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

::-webkit-scrollbar-track {
    background: var(--sand-100);
}

::-webkit-scrollbar-thumb {
    background: var(--terracotta-400);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--terracotta-600);
}

/* Focus Styles */
a:focus-visible,
button:focus-visible {
    @apply outline-2 outline-terracotta-500 outline-offset-2 rounded-lg;
}

/* Selection Color */
::selection {
    background-color: var(--terracotta-200);
    color: var(--terracotta-900);
}