:root {
  --bg: #14110e;
  --bg-raised: #1c1812;
  --fg: #c4b8a0;
  --fg-bright: #e0d4bc;
  --fg-muted: #9c8e74;
  --fg-dim: #706450;
  --accent: #a78bfa;
  --accent-glow: #a78bfa44;
  --surface: #191510;
  --border: #2e2820;
  --border-mid: #4a4030;
  --font-body: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --font-heading: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

body {
  background: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.garden-nav {
  background: color-mix(in srgb, #14110e 90%, transparent);
  border-bottom-color: var(--border);
}
.garden-nav a.active { border-bottom-color: var(--accent); }

.page-header {
  border-bottom-color: var(--border);
}

h1 { font-style: italic; letter-spacing: -0.5px; }

.domain-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.domain-card:hover {
  border-color: var(--accent);
  box-shadow: 2px 2px 12px rgba(167,139,250,0.15);
}

.role-table th {
  background: var(--surface);
  border-bottom-color: var(--border-mid);
  font-family: var(--font-body);
  text-transform: none;
  font-style: italic;
}

.role-table .role-name { color: var(--accent); }

.layer-item {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

.layer-item + .layer-item { margin-top: -1px; }

.badge {
  background: #2e2820;
  color: var(--accent);
  font-family: var(--font-mono);
}

.stat-num {
  color: var(--accent);
  font-family: var(--font-heading);
}

.trail-card {
  border-color: var(--border);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
.trail-card:hover {
  border-color: var(--accent);
}

.quote-block {
  border-left-color: var(--accent);
  background: var(--surface);
}

.section-title {
  font-family: var(--font-heading);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
  color: var(--fg-bright);
}