:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-alt: #f0f0ed;
  --text: #1a1a1a;
  --text-secondary: #666;
  --border: #e8e8e3;
  --shadow: 0 6px 18px rgba(0,0,0,0.04);
  --btn-bg: #1a1a1a;
  --btn-text: #ffffff;
  --canvas-bg: #fcfaf7;
  --log-bg: #ffffff;
  --log-border: #ddd;
  --diff-active-bg: #1a1a1a;
  --diff-active-text: #ffffff;
  --slider-track: #d4d4d0;
  --slider-thumb: #1a1a1a;
  --toast-bg: #1a1a1a;
  --toast-text: #ffffff;
  --footer-text: #aaa;
  --scrollbar-thumb: #c0c0c0;
  --scrollbar-track: #f0f0ed;
}

body.dark {
  --bg: #1a1a1a;
  --surface: #2a2a2a;
  --surface-alt: #333333;
  --text: #e0e0e0;
  --text-secondary: #aaa;
  --border: #444;
  --shadow: 0 6px 18px rgba(0,0,0,0.3);
  --btn-bg: #e0e0e0;
  --btn-text: #1a1a1a;
  --canvas-bg: #2a2a2a;
  --log-bg: #2a2a2a;
  --log-border: #555;
  --diff-active-bg: #e0e0e0;
  --diff-active-text: #1a1a1a;
  --slider-track: #555;
  --slider-thumb: #e0e0e0;
  --toast-bg: #e0e0e0;
  --toast-text: #1a1a1a;
  --footer-text: #777;
  --scrollbar-thumb: #666;
  --scrollbar-track: #333;
}