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

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

/* Base Styles for the "Working From" Aesthetic */
body {
  @apply bg-cream text-ink font-sans antialiased;
}

h1, h2, h3, h4, h5, h6 {
  @apply font-serif font-normal; /* Serif headings, not bold */
}

/* Utilities */
.border-ink {
  border-color: #1A1A1A;
}

/* Custom Component: Brutalist Button */
.btn-primary {
  @apply inline-block border border-ink bg-ink text-cream px-8 py-3 text-lg transition-all duration-300;
}
.btn-primary:hover {
  @apply bg-terra border-terra text-white transform -translate-y-1;
}

.btn-outline {
  @apply inline-block border border-ink text-ink px-8 py-3 text-lg transition-all duration-300 bg-transparent;
}
.btn-outline:hover {
  @apply bg-ink text-cream;
}

/* Marquee Container */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

/* Reveal Animation Class (managed by JS) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Card Styling */
.wf-card {
  @apply border border-ink bg-white p-6 transition-all duration-300;
}
.wf-card:hover {
  @apply bg-sage; /* Subtle shift on hover */
}