/* ==============================
   CSS Variables for Theming
============================== */
:root {
  --feature-color: #32cd32;
  --dark-color: #063706;
  --text-color: #eee;
  --muted: #aaa;
  --bg: #111;
  --card-bg: #1a1a1a;
  --card-border: #333;
  --card-shadow: rgba(0, 0, 0, 0.2);
  --canvas-color: #000000;

  --remap: #ff4e3a;
  --load: #eb770b;
  --update: #4c60e1;
  --download: #ef34b3;
}

body.light {
  --text-color: #111;
  --muted: #111;
  --bg: #fff;
  --card-bg: #fff;
  --card-border: #e1e4e8;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --canvas-color: #ffffff
}

/* ==============================
   Base Styles
============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  color: var(--text-color);
  background: var(--bg);
  line-height: 1.55;
  transition: background .3s ease, color .3s ease;
}

canvas {
  cursor: crosshair;
  background: var(--canvas-color);
}

/* ☀️ Light Mode (optional) */
body.light-mode {
  background: #f5f5f5;
  color: #222;
}

body.light-mode .ui-panel {
  background: rgba(255, 255, 255, 0.8);
  border-color: #ccc;
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.light-mode .control-btn {
  background-color: var(--feature-color);
  color: #fff;
}