@import "tailwindcss";

* {
  font-family: inherit;
}

:root {
  --background: #f8f5e6;
  --foreground: black;
  
  /* Font family variables - these will be injected by Next.js fonts */
  --font-playfair: var(--font-playfair), 'Playfair Display', serif;
  --font-roboto: var(--font-roboto), 'Roboto', sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;
}

body {
  background: #f3f0e1;
  color: var(--foreground);
  font-family: var(--font-playfair);
}

/* Utility classes for different fonts */
.font-playfair {
  font-family: var(--font-playfair);
}

.font-roboto {
  font-family: var(--font-roboto);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Example component styles using different fonts */
.heading-primary {
  font-family: var(--font-playfair);
  font-weight: 700;
  font-size: 2rem;
}

.heading-secondary {
  font-family: var(--font-roboto);
  font-weight: 500;
  font-size: 1.5rem;
}

.body-text {
  font-family: var(--font-roboto);
  font-weight: 400;
  line-height: 1.6;
}

.caption-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.875rem;
}