/* The Ley Folios — shared theme.
   Contemporary palette: green = primary interactive (buttons, active state, links),
   gold = labels/dividers/headers, purple = secondary/selected-state + detail-panel & legend chrome.
   Same custom-property + prefers-color-scheme/data-theme override pattern used site-wide;
   toggle JS sets documentElement[data-theme] to "light" or "dark" to override the OS preference. */

:root {
  --bg: #f5f6f3;
  --bg-panel: #ffffff;
  --bg-panel-raised: #eceee9;
  --bg-well: #e2e5de;
  --ink: #1b1f1c;
  --ink-dim: #57605a;
  --border: #d3d7cd;
  --hairline: #c7ccc0;
  --shadow: 0 16px 40px -18px rgba(27, 31, 28, .22);

  --green: #1f6f4a;
  --green-glow: rgba(31, 111, 74, .14);
  --purple: #5b3a8e;
  --purple-glow: rgba(91, 58, 142, .14);
  --gold: #b8842a;
  --gold-glow: rgba(184, 132, 42, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1512;
    --bg-panel: #161d19;
    --bg-panel-raised: #1d2621;
    --bg-well: #232f28;
    --ink: #e7ede8;
    --ink-dim: #9aa89e;
    --border: #2c362f;
    --hairline: #384339;
    --shadow: 0 18px 48px -18px rgba(0, 0, 0, .55);

    --green: #4fbf8a;
    --green-glow: rgba(79, 191, 138, .16);
    --purple: #a487d9;
    --purple-glow: rgba(164, 135, 217, .16);
    --gold: #e0b45c;
    --gold-glow: rgba(224, 180, 92, .16);
  }
}

:root[data-theme="dark"] {
  --bg: #0f1512;
  --bg-panel: #161d19;
  --bg-panel-raised: #1d2621;
  --bg-well: #232f28;
  --ink: #e7ede8;
  --ink-dim: #9aa89e;
  --border: #2c362f;
  --hairline: #384339;
  --shadow: 0 18px 48px -18px rgba(0, 0, 0, .55);

  --green: #4fbf8a;
  --green-glow: rgba(79, 191, 138, .16);
  --purple: #a487d9;
  --purple-glow: rgba(164, 135, 217, .16);
  --gold: #e0b45c;
  --gold-glow: rgba(224, 180, 92, .16);
}

:root[data-theme="light"] {
  --bg: #f5f6f3;
  --bg-panel: #ffffff;
  --bg-panel-raised: #eceee9;
  --bg-well: #e2e5de;
  --ink: #1b1f1c;
  --ink-dim: #57605a;
  --border: #d3d7cd;
  --hairline: #c7ccc0;
  --shadow: 0 16px 40px -18px rgba(27, 31, 28, .22);

  --green: #1f6f4a;
  --green-glow: rgba(31, 111, 74, .14);
  --purple: #5b3a8e;
  --purple-glow: rgba(91, 58, 142, .14);
  --gold: #b8842a;
  --gold-glow: rgba(184, 132, 42, .16);
}

/* Base typography — contemporary sans, replacing the old Cinzel/Cormorant Garamond/
   Metamorphous/Almendra manuscript faces. JetBrains Mono stays for coordinates/stats/labels. */

html, body {
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow, .label, .kicker {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.mono, .coord, .stat, code {
  font-family: 'JetBrains Mono', monospace;
}

a {
  color: var(--green);
}
a:hover {
  color: var(--purple);
}

/* Generic surfaces — flat, contemporary: no gilt corner-flourish SVGs, no gold-glow
   text-shadows, tighter radii than the old parchment-panel look. */

.panel, .card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.panel-raised {
  background: var(--bg-panel-raised);
}

.well {
  background: var(--bg-well);
  border-radius: 8px;
}

hr, .hairline {
  border-color: var(--hairline);
}

/* Buttons — green primary */
.btn, button.primary {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover, button.primary:hover {
  filter: brightness(1.08);
}
.btn.secondary, button.secondary {
  background: transparent;
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}

/* Selection / active states use purple so they never collide with green's
   "primary interactive" role or gold's "label" role. */
.active, .selected, [aria-selected="true"] {
  color: var(--purple);
}
::selection {
  background: var(--purple-glow);
}