/* Design tokens (light theme) and base reset. */
:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --border: #e5e5e5;
  --text: #171717;
  --muted: #737373;
  --soft: #f5f5f5;
  --hover: #f0f0f0;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-soft: #eef2ff;
  --danger: #dc2626;
  --amber: #f59e0b;

  /* canvas */
  --cv-bg: #fdfcf6; /* graph paper */
  --cv-grid-fine: rgba(226, 116, 52, 0.16);
  --cv-grid-mid: rgba(226, 116, 52, 0.30);
  --cv-grid-bold: rgba(226, 116, 52, 0.55);
  --cv-ink: #262626;
  --cv-fill: rgba(196, 140, 92, 0.16);
  --cv-hole: #262626;
  --cv-guide: rgba(99, 102, 241, 0.45);
  --cv-foot: #8a8a8a;
  --cv-label: rgba(38, 38, 38, 0.45);
  --cv-tile: rgba(99, 102, 241, 0.55);
  --cv-tile-fill: rgba(255, 255, 255, 0.55);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 13px; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }

#app { display: flex; flex-direction: column; height: 100vh; }