/* theme.css — the trout theme system, ported from Rollcast.
   Pure theme primitives: :root vars + the switcher component.
   Page layout lives in site.css so this stays reusable. */

/* Pre-JS default: brook-dark. Prevents a flash of unstyled content before
   theme.js runs. Once JS loads it overwrites these from the stored cookie. */
:root {
  --bg: #0f1510;
  --surface: #191d16;
  --border: #2c3326;
  --text: #dde6dd;
  --text-dim: #7e8a7e;
  --text-bright: #edf4ee;
  --accent: #e8533a;
  --brand: #7091aa;
  --gone: #ff6b6b;
  --on-accent: #1a0a05;
  --tone2: #db704d;
  --tone3: #a8822d;
  --mono: "Space Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* --- theme switcher component --- */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 11px/1 var(--mono);
  color: var(--text-dim);
}

.species-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.theme-dot:hover { transform: scale(1.2); }
.theme-dot.active {
  transform: scale(1.15);
  border-color: var(--text-bright);
}

/* 3-way segmented mode toggle */
.mode-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  background: none;
  border: 0;
  border-right: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  color: var(--text-dim);
  transition: color 0.15s ease, background 0.15s ease;
}
.mode-btn:last-child { border-right: 0; }
.mode-btn:hover { color: var(--text-bright); }
.mode-btn.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}