:root {
  --canopy: #1B2E23;
  --canopy-2: #14221A;
  --cream: #F5F1E6;
  --ochre: #C97A3D;
  --ochre-dark: #A85F2A;
  --sage: #5C7A5E;
  --brick: #B23A2E;
  --amber: #D6A756;
  --ink: #23291F;
  --line: rgba(27, 46, 35, 0.14);
}

* { box-sizing: border-box; }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
}

.contour-hero {
  background-color: var(--canopy);
  background-image:
    radial-gradient(circle at 15% 30%, rgba(201,122,61,0.16) 0%, transparent 45%),
    repeating-radial-gradient(circle at 78% 40%, transparent 0, transparent 26px, rgba(245,241,230,0.05) 27px, rgba(245,241,230,0.05) 28px),
    repeating-radial-gradient(circle at 20% 75%, transparent 0, transparent 34px, rgba(245,241,230,0.045) 35px, rgba(245,241,230,0.045) 36px);
}

.field-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--sage);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.ledger-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.btn-ochre {
  background: var(--ochre);
  color: #fff;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.btn-ochre:hover { background: var(--ochre-dark); }

.btn-outline {
  border: 1px solid var(--canopy);
  color: var(--canopy);
  border-radius: 3px;
}
.btn-outline:hover { background: var(--canopy); color: #fff; }

.severity-critical { border-left: 3px solid var(--brick); }
.severity-warning { border-left: 3px solid var(--amber); }
.severity-info { border-left: 3px solid var(--sage); }

table.ledger { border-collapse: collapse; width: 100%; }
table.ledger th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.01em; color: var(--sage);
  border-bottom: 1px solid var(--line); padding: 0.5rem 0.75rem; font-weight: 600;
}
table.ledger td {
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}
table.ledger tr:hover td { background: rgba(92,122,94,0.05); }

.tag-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.01em;
}
.pill-healthy { background: rgba(92,122,94,0.15); color: var(--sage); }
.pill-injured { background: rgba(178,58,46,0.12); color: var(--brick); }
.pill-treatment { background: rgba(214,167,86,0.18); color: #8a6420; }
.pill-deceased { background: rgba(35,41,31,0.1); color: #55584f; }
.pill-relocated { background: rgba(27,46,35,0.1); color: var(--canopy); }

.sidebar-link { border-left: 2px solid transparent; }
.sidebar-link.active, .sidebar-link:hover {
  border-left-color: var(--ochre); background: rgba(245,241,230,0.06); color: var(--cream);
}

/* Fix: Tailwind CDN doesn't reliably apply /opacity modifiers on CSS var colors */
aside.w-60 { color: rgba(245,241,230,0.8) !important; }
.sidebar-link { color: rgba(245,241,230,0.75) !important; }
.sidebar-link.active, .sidebar-link:hover { color: var(--cream) !important; }