:root {
  /* --- Light Mode (default) --- */
  --primary: #f07828;
  --primary-hover: #d8681e;
  --background: #e8e0d8;
  --surface: #ffffff;
  --surface-alt: #f0ebe6;
  --text: #2d3e44;
  --text-muted: #5a6f76;
  --text-over-primary: #ffffff;
  --accent-cyan: #3a9ab5;
  --accent-red: #d94840;
  --border: #c1c0bc;

  /* --- Plot palette --- */
  /* Ordered for maximum perceptual separation on both backgrounds */
  --plot-1: #f07828;   /* orange — primary */
  --plot-2: #2d8fbf;   /* blue */
  --plot-3: #d94840;   /* red */
  --plot-4: #2ca65a;   /* green */
  --plot-5: #8b5cc4;   /* purple */
  --plot-6: #c47a2a;   /* amber */
  --plot-7: #c44b8a;   /* magenta */
  --plot-8: #3dbcac;   /* teal */

  /* --- Plot surface --- */
  --plot-bg: #ffffff;
  --plot-grid: #d4d0cc;
  --plot-axis-text: #2d3e44;
  --plot-axis-line: #8a8884;

  /* --- 3D plot specifics --- */
  --plot-3d-bg: #f5f0eb;
  --plot-3d-grid: #c8c4bf;
  --plot-3d-wall: rgba(240, 236, 230, 0.6);
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #f07828;
    --primary-hover: #ff923e;
    --background: #1e2c31;
    --surface: #283a40;
    --surface-alt: #2d3e44;
    --text: #d4d0cc;
    --text-muted: #8fa3ab;
    --text-over-primary: #1e2c31;
    --accent-cyan: #58c4dd;
    --accent-red: #fc6255;
    --border: #3d5058;

    --plot-1: #f09050;
    --plot-2: #58c4dd;
    --plot-3: #fc6255;
    --plot-4: #44d47a;
    --plot-5: #a87edb;
    --plot-6: #e0a050;
    --plot-7: #e070a8;
    --plot-8: #50dbc8;

    --plot-bg: #283a40;
    --plot-grid: #3d5058;
    --plot-axis-text: #c1c9da;
    --plot-axis-line: #5a7078;

    --plot-3d-bg: #243338;
    --plot-3d-grid: #3d5058;
    --plot-3d-wall: rgba(40, 58, 64, 0.7);
  }
}

/* --- Manual toggle override --- */
[data-theme="dark"] {
  --primary: #f07828;
  --primary-hover: #ff923e;
  --background: #1e2c31;
  --surface: #283a40;
  --surface-alt: #2d3e44;
  --text: #d4d0cc;
  --text-muted: #8fa3ab;
  --text-over-primary: #1e2c31;
  --accent-cyan: #58c4dd;
  --accent-red: #fc6255;
  --border: #3d5058;

  --plot-1: #f09050;
  --plot-2: #58c4dd;
  --plot-3: #fc6255;
  --plot-4: #44d47a;
  --plot-5: #a87edb;
  --plot-6: #e0a050;
  --plot-7: #e070a8;
  --plot-8: #50dbc8;

  --plot-bg: #283a40;
  --plot-grid: #3d5058;
  --plot-axis-text: #c1c9da;
  --plot-axis-line: #5a7078;

  --plot-3d-bg: #243338;
  --plot-3d-grid: #3d5058;
  --plot-3d-wall: rgba(40, 58, 64, 0.7);
}

/* --- Manual light override (overrides OS dark preference) --- */
[data-theme="light"] {
  --primary: #f07828;
  --primary-hover: #d8681e;
  --background: #e8e0d8;
  --surface: #ffffff;
  --surface-alt: #f0ebe6;
  --text: #2d3e44;
  --text-muted: #5a6f76;
  --text-over-primary: #ffffff;
  --accent-cyan: #3a9ab5;
  --accent-red: #d94840;
  --border: #c1c0bc;

  --plot-1: #f07828;
  --plot-2: #2d8fbf;
  --plot-3: #d94840;
  --plot-4: #2ca65a;
  --plot-5: #8b5cc4;
  --plot-6: #c47a2a;
  --plot-7: #c44b8a;
  --plot-8: #3dbcac;

  --plot-bg: #ffffff;
  --plot-grid: #d4d0cc;
  --plot-axis-text: #2d3e44;
  --plot-axis-line: #8a8884;

  --plot-3d-bg: #f5f0eb;
  --plot-3d-grid: #c8c4bf;
  --plot-3d-wall: rgba(240, 236, 230, 0.6);
}

/* --- Base styles --- */
body {
  background-color: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  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);
}