/* theme.css — CSS variables, fonts, color palette */

:root {
  /* Page palette — light scientific style */
  --bg-page: #f8f9fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f0;
  --bg-overlay: rgba(255,255,255,0.92);
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --text-muted: #8888a0;
  --border: #d0d0d8;
  --border-light: #e8e8ee;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* Node role colors */
  --color-starting: #34495e;
  --color-starting-stroke: #2c3e50;
  --color-starting-text: #ffffff;
  --color-intermediate: #3498db;
  --color-intermediate-stroke: #2980b9;
  --color-intermediate-text: #ffffff;
  --color-target: #e74c3c;
  --color-target-stroke: #c0392b;
  --color-target-text: #ffffff;

  /* Reaction node colors by environment */
  --env-hydro-fill: #c692dd;
  --env-hydro-stroke: #a86bc2;
  --env-hydro-text: #000000;
  --env-surface-fill: #ce9576;
  --env-surface-stroke: #b07a5e;
  --env-surface-text: #000000;
  --env-bio-fill: #1abc9c;
  --env-bio-stroke: #16a085;
  --env-bio-text: #000000;

  /* Band background colors */
  --band-hydro-bg: rgba(196, 149, 106, 0.12);
  --band-hydro-border: rgba(196, 149, 106, 0.35);
  --band-hydro-label: #8b6914;
  --band-surface-bg: rgba(90, 158, 111, 0.10);
  --band-surface-border: rgba(90, 158, 111, 0.30);
  --band-surface-label: #2d6a3e;
  --band-bio-bg: rgba(139, 92, 246, 0.08);
  --band-bio-border: rgba(139, 92, 246, 0.25);
  --band-bio-label: #5b21b6;

  /* Arrow colors */
  --arrow-solid: #555566;
  --arrow-dashed: #999aaa;
  --arrow-width: 1.5;

  /* Typography */
  --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Courier New', monospace;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background: var(--bg-page);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}