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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Lora', serif;
    background: #f8f4ee;
    color: #2c2420;
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply font-accent text-[15px] uppercase tracking-[0.15em] px-10 py-4 bg-espresso text-cream border-none rounded cursor-pointer transition-all duration-200;
  }
  .btn-primary:hover {
    @apply bg-espresso-light -translate-y-px;
  }
  .btn-gold {
    @apply font-accent text-[15px] uppercase tracking-[0.2em] px-11 py-4 bg-gold text-espresso border-none rounded cursor-pointer font-semibold transition-all duration-200;
  }
  .btn-gold:hover {
    @apply bg-gold-light -translate-y-px;
  }
  .btn-outline {
    @apply font-accent text-[14px] uppercase tracking-[0.12em] px-7 py-3 bg-transparent text-espresso border border-espresso rounded cursor-pointer transition-all duration-200;
  }
  .btn-outline:hover {
    @apply bg-espresso text-cream;
  }
  .section-eyebrow {
    @apply font-accent text-xs uppercase tracking-[0.35em] text-gold mb-4 text-center;
  }
  .section-title {
    @apply font-display text-[40px] font-normal text-center text-espresso mb-4 leading-tight;
  }
  .section-subtitle {
    @apply font-accent text-lg text-warm text-center italic max-w-[520px] mx-auto mb-16 leading-relaxed;
  }
  .input-field {
    @apply w-full px-4 py-3 border border-cream-dark rounded-lg font-body text-sm text-espresso bg-cream outline-none transition-colors duration-200;
  }
  .input-field:focus {
    @apply border-gold;
  }
  .input-label {
    @apply block font-accent text-xs uppercase tracking-[0.15em] text-warm mb-1.5;
  }
}