@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

@layer base {
  :root {
    --color-beige: #F5F2ED;
    --color-cream: #FFF8F0;
    --color-oat: #E8DFD3;
    --color-ash: #D6D6D6;
    --color-charcoal: #36454F;
    --color-rose-dust: #E0B5B5;
    --color-mist-blue: #A8B2C1;
    --color-sage: #B2C2B1;
    --color-gold: #B8860B;
    --font-serif: 'Playfair Display', 'Source Han Serif SC', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Alibaba PuHuiTi', sans-serif;
  }

  html {
    scroll-behavior: smooth;
    font-family: var(--font-sans);
  }

  body {
    background-color: var(--color-cream);
    color: var(--color-charcoal);
    line-height: 1.6;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
  }

  ::selection {
    background-color: var(--color-oat);
  }
}

@layer components {
  .nav-link {
    @apply relative transition-colors duration-300 hover:text-amber-700;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-amber-700 transition-all duration-300;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }

  .carousel-container {
    @apply relative w-full h-screen overflow-hidden;
  }

  .carousel-slide {
    @apply absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out;
  }

  .carousel-slide.active {
    @apply opacity-100;
  }

  .gallery-item {
    @apply overflow-hidden rounded-lg shadow-md transition-transform duration-300 hover:scale-105;
  }

  .gallery-item img {
    @apply w-full h-full object-cover;
  }

  .detail-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl;
  }

  .slogan-text {
    @apply text-2xl md:text-3xl lg:text-4xl font-light italic text-center;
    font-family: var(--font-serif);
  }

  .page-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-light text-center mb-12;
    font-family: var(--font-serif);
    color: var(--color-charcoal);
  }

  .section-divider {
    @apply w-24 h-0.5 mx-auto my-8;
    background: linear-gradient(to right, transparent, var(--color-gold), transparent);
  }

  .footer-line {
    @apply border-t border-gray-300;
  }
}

@layer utilities {
  .text-beige { color: var(--color-beige); }
  .bg-beige { background-color: var(--color-beige); }
  .text-cream { color: var(--color-cream); }
  .bg-cream { background-color: var(--color-cream); }
  .text-oat { color: var(--color-oat); }
  .bg-oat { background-color: var(--color-oat); }
  .text-ash { color: var(--color-ash); }
  .bg-ash { background-color: var(--color-ash); }
  .text-charcoal { color: var(--color-charcoal); }
  .bg-charcoal { background-color: var(--color-charcoal); }
  .text-gold { color: var(--color-gold); }
  .bg-gold { background-color: var(--color-gold); }

  .fade-in {
    animation: fadeIn 1s ease-in-out;
  }

  .slide-up {
    animation: slideUp 0.8s ease-out;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .page-title {
    @apply text-3xl;
  }
  
  .slogan-text {
    @apply text-lg;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}