@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: 'Inter', sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }
}

@layer components {
  .active-nav {
    border-bottom: 2px solid white;
  }
  .hero-gradient {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #0d0d0d 100%);
  }
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  .line-accent {
    width: 60px;
    height: 2px;
    background: white;
  }
  .blog-image-placeholder {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  }
  .btn-primary {
    @apply bg-white text-black px-8 py-3 font-semibold tracking-wider uppercase text-sm transition-all duration-300;
  }
  .btn-primary:hover {
    @apply bg-neutral-200;
  }
  .btn-outline {
    @apply border border-white text-white px-8 py-3 font-semibold tracking-wider uppercase text-sm transition-all duration-300;
  }
  .btn-outline:hover {
    @apply bg-white text-black;
  }
  .btn-dark {
    @apply bg-black text-white px-8 py-3 font-semibold tracking-wider uppercase text-sm transition-all duration-300 border border-white;
  }
  .btn-dark:hover {
    @apply bg-white text-black;
  }
}