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

:root {
  --beige: #f5ede0;
  --terracotta: #d9714f;
  --terracotta-dark: #a85635;
  --dark-green: #2d4a42;
  --cream: #fffbf5;
  --text-dark: #3a3a3a;
  --text-muted: #6d6d6d;
  --border: #e8d9cc;
}

@layer base {
  html, body {
    @apply h-full;
  }

  body {
    @apply bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50;
    color: var(--text-dark);
  }
}

@layer components {
  .card-modern {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl border border-white/60 shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 hover:-translate-y-2;
  }

  .btn-modern {
    @apply px-6 py-3 rounded-full font-bold text-sm uppercase tracking-wide transition-all duration-300 hover:shadow-lg hover:scale-105 active:scale-95;
  }

  .btn-primary {
    @apply btn-modern bg-gradient-to-r from-amber-500 to-orange-600 text-white hover:from-amber-600 hover:to-orange-700 shadow-amber-500/30;
  }

  .btn-secondary {
    @apply btn-modern border-2 border-amber-500 text-amber-600 hover:bg-amber-50;
  }

  .section-title {
    @apply text-center mb-16;
  }

  .section-title h2 {
    @apply text-4xl md:text-5xl font-black bg-gradient-to-r from-amber-700 via-orange-600 to-rose-500 bg-clip-text text-transparent mb-3;
  }

  .section-title p {
    @apply text-gray-500 text-lg italic;
  }
}