@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-body text-gray-800 leading-relaxed;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display font-semibold;
  }
}

@layer components {
  .elegant-hero-overlay {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.85) 0%, rgba(192, 64, 0, 0.75) 100%);
  }
  
  .luxury-gradient {
    background: linear-gradient(135deg, #DAA520 0%, #FFC000 100%);
  }
  
  .service-card-hover {
    @apply transform hover:scale-105 hover:shadow-xl transition-all duration-300;
  }
  
  .premium-button {
    @apply bg-luxury-gold hover:bg-accent-amber text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
  }
  
  .elegant-form-field {
    @apply w-full px-4 py-3 border border-warm-gray/30 rounded-lg focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all duration-300;
  }
  
  .cookie-consent-banner {
    @apply fixed bottom-4 left-4 right-4 md:left-4 md:right-auto md:max-w-md bg-white border border-warm-gray/20 rounded-xl shadow-2xl p-6 z-50;
  }
}

.blind-installation-pattern {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(139, 69, 19, 0.1) 2px,
    rgba(139, 69, 19, 0.1) 4px
  );
}

.testimonial-quote::before {
  content: '"';
  @apply text-6xl font-serif text-luxury-gold/30 absolute -top-4 -left-2;
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #DAA520, transparent);
}