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

:root {
  --background: 40 33% 97%;
  --foreground: 20 10% 15%;

  --card: 0 0% 100%;
  --card-foreground: 20 10% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 20 10% 15%;

  --primary: 160 22% 60%;
  --primary-foreground: 0 0% 100%;

  --secondary: 4 82% 73%;
  --secondary-foreground: 0 0% 100%;

  --muted: 40 20% 93%;
  --muted-foreground: 20 10% 45%;

  --accent: 4 82% 73%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 30 15% 88%;
  --input: 30 15% 88%;
  --ring: 160 22% 60%;

  --radius: 0.75rem;
}

.dark {
  --background: 20 10% 10%;
  --foreground: 40 33% 97%;

  --card: 20 10% 14%;
  --card-foreground: 40 33% 97%;

  --popover: 20 10% 14%;
  --popover-foreground: 40 33% 97%;

  --primary: 160 22% 60%;
  --primary-foreground: 0 0% 100%;

  --secondary: 4 82% 73%;
  --secondary-foreground: 0 0% 100%;

  --muted: 20 10% 20%;
  --muted-foreground: 30 15% 65%;

  --accent: 4 82% 73%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 20 10% 20%;
  --input: 20 10% 20%;
  --ring: 160 22% 60%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Lato', sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

/* Custom Utilities for Shadcn-like look */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.border-border { border-color: hsl(var(--border)); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}