:root {
  --background: hsl(40, 56%, 93%);
  --foreground: hsl(34, 25%, 20%);
  --card: hsl(40, 50%, 96%);
  --card-foreground: hsl(34, 25%, 20%);
  --primary: hsl(140, 29%, 30%);
  --primary-foreground: hsl(40, 56%, 93%);
  --secondary: hsl(34, 30%, 75%);
  --secondary-foreground: hsl(34, 25%, 20%);
  --muted: hsl(40, 40%, 88%);
  --muted-foreground: hsl(34, 25%, 35%);
  --accent: hsl(34, 25%, 52%);
  --accent-foreground: hsl(40, 56%, 93%);
  --border: hsl(34, 25%, 70%);
  --input: hsl(40, 30%, 89%);
  --ring: hsl(34, 25%, 52%);
  --radius: 0.5rem;
  --font-headline: "PT Sans", sans-serif;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-headline);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headline);
}

/* Optional accent icons */
.icon-custom-color {
  color: var(--accent);
}

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.tree-icon-badge {
  width: 48px;
  height: 48px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 8px rgba(0, 128, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(145deg, #28a745, #218838);
}

.tree-icon-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 128, 0, 0.6);
}

.tree-card:focus-within,
.tree-card:hover {
  transform: scale(1.03);
  z-index: 5;
  box-shadow: 0 0 15px rgba(34, 139, 34, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card {
  background-color: #e6f4ea !important;
  border: 1px solid #ddd;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #e0f2e9; /* slightly darker green */
  border-color: #b2dfdb;
}