@import url("/static/colors.css");

:root {
  --font-ui: "Lora", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* --- Base styles --- */
body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-ui);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Surface cards (for plot containers, panels, etc.) --- */
.card, .plot-container {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.card-alt {
  background-color: var(--surface-alt);
}

/* --- Buttons --- */
.btn-primary {
  background-color: var(--primary);
  color: var(--text-over-primary);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}

/* --- Links --- */
a {
  color: var(--accent-cyan);
}
a:hover {
  color: var(--primary);
}

/* --- Muted / secondary text --- */
.text-muted {
  color: var(--text-muted);
}