:root {
  --paper:    #f4f1e8;
  --paper-2:  #ebe7d9;
  --ink:      #1a1a1a;
  --ink-2:    #4a4a4a;
  --ink-3:    #8a8a8a;
  --line:     rgba(26,26,26,0.14);
  --line-2:   rgba(26,26,26,0.28);
  --accent:   oklch(0.58 0.20 340);
  --accent-2: oklch(0.92 0.04 340);
  --error:    oklch(0.55 0.22 25);
  --good:     oklch(0.58 0.16 145);
  --mono:     "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --row-h:    32px;
  --pad:      16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* compact density override */
[data-density="compact"]     { --row-h: 26px; --pad: 12px; font-size: 12px; }
[data-density="comfortable"] { --row-h: 32px; --pad: 16px; font-size: 13px; }

/* dot grid background for the canvas */
.grid-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26,26,26,0.10) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* selection */
::selection { background: var(--accent); color: var(--paper); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }