:root {
  --background: hsl(35, 30%, 97%);
  --foreground: hsl(25, 20%, 15%);
  --card: hsl(35, 25%, 95%);
  --primary: hsl(30, 65%, 45%);
  --primary-foreground: hsl(35, 30%, 97%);
  --muted: hsl(35, 15%, 92%);
  --muted-foreground: hsl(25, 10%, 45%);
  --border: hsl(30, 15%, 85%);
  --shadow-warm: 0 4px 24px -4px hsla(30, 40%, 30%, 0.15);
  --shadow-warm-lg: 0 12px 40px -8px hsla(30, 40%, 30%, 0.2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
}

body {
  font-family: 'Lato', sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  text-decoration: none;
  color: inherit;
}

/* Custom Overrides & Helpers */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.text-muted-foreground { color: var(--muted-foreground); }

.shadow-warm { box-shadow: var(--shadow-warm); }
.shadow-warm-lg { box-shadow: var(--shadow-warm-lg); }

.nav-scrolled {
  background-color: rgba(247, 245, 243, 0.9); /* var(--background) with opacity */
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217, 207, 196, 0.5); /* var(--border) with opacity */
  box-shadow: var(--shadow-warm);
}

.mobile-menu {
  display: none;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}

.mobile-menu.open {
  display: block;
  max-height: 300px;
}

/* Kitten Grid & Cards */
.kitten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.kitten-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kitten-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm-lg);
}

.status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.status-available { background-color: rgba(34, 197, 94, 0.9); color: white; }
.status-reserved { background-color: rgba(234, 179, 8, 0.9); color: white; }
.status-sold { background-color: rgba(107, 114, 128, 0.9); color: white; }

/* Image classes that mimic object-cover */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}