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

:root {
  --primary: #F09378;
  --primary-dark: #D4735A;
  --dark: #2c1d17;
  --mid: #784f3b;
  --light: #faf7f4;
  --border: #e4d5c4;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #faf7f4;
  color: #52382e;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-full font-bold text-sm transition-all hover:bg-primary-dark hover:-translate-y-0.5 inline-block;
  }
  .btn-secondary {
    @apply bg-transparent text-rack-600 px-6 py-3 rounded-full font-normal text-sm border border-rack-200 transition-all hover:border-primary hover:text-primary-dark inline-block;
  }
  .card {
    @apply bg-white border border-rack-100 rounded-2xl;
  }
  .input {
    @apply w-full bg-rack-50 border border-rack-200 rounded-xl px-4 py-3 text-rack-900 text-sm focus:outline-none focus:border-primary transition-colors;
  }
  .label {
    @apply text-sm font-semibold text-rack-700 mb-1 block;
  }
  .section-tag {
    @apply text-xs font-bold tracking-widest uppercase text-primary mb-2;
  }
  .section-title {
    @apply font-serif text-3xl text-rack-950 leading-tight mb-3;
  }
}