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

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

@layer base {
  body {
    @apply font-serif text-charcoal-800;
    background: linear-gradient(135deg, #faf7ed 0%, #f5f0e1 100%);
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

/*
  Custom component styles that aren't in Tailwind
*/

/* Ornamental dividers */
.ornamental-divider {
  position: relative;
  text-align: center;
  margin: 2rem 0;
}

.ornamental-divider::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #9d7a4d 50%, transparent);
}

.ornamental-divider span {
  background: #faf7ed;
  padding: 0 1rem;
  position: relative;
  color: #9d7a4d;
}

/* Card elevation */
.card-elevated {
  box-shadow: 0 4px 6px -1px rgba(107, 31, 45, 0.1), 
              0 2px 4px -1px rgba(107, 31, 45, 0.06),
              0 0 0 1px rgba(157, 122, 77, 0.1);
}

/* Thicker borders for buttons */
.border-3 {
  border-width: 3px;
}

/* Ensure all buttons and links have pointer cursor */
button, a, [role="button"] {
  cursor: pointer;
}