/* VCS-DOCs design tokens */
:root {
  --bg-0: #0e1013;
  --bg-1: #14171c;
  --bg-2: #1a1e25;
  --bg-3: #21262e;
  --line: #262b34;
  --line-strong: #323845;
  --fg-0: #e9eaec;
  --fg-1: #b6bac2;
  --fg-2: #7d828c;
  --fg-3: #565a63;
  --accent: #e8a447;          /* amber CAD marker */
  --accent-soft: rgba(232,164,71,0.14);
  --accent-line: rgba(232,164,71,0.45);
  --ok: #6fb89a;
  --warn: #d9a85b;
  --err: #d96f6f;
  --info: #6f9bd9;
  --radius-0: 2px;
  --radius-1: 4px;
  --radius-2: 6px;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --grid: 8px;
  --row: 36px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="light"] {
  --bg-0: #f4f3ef;
  --bg-1: #ffffff;
  --bg-2: #f7f6f2;
  --bg-3: #eeece7;
  --line: #e2e0da;
  --line-strong: #cdc9bf;
  --fg-0: #1b1d20;
  --fg-1: #4a4d54;
  --fg-2: #757982;
  --fg-3: #9ea1a8;
  --accent: #b86b1c;
  --accent-soft: rgba(184,107,28,0.12);
  --accent-line: rgba(184,107,28,0.5);
}

[data-density="compact"] { --row: 30px; --grid: 6px; }
[data-density="cozy"]    { --row: 36px; --grid: 8px; }
[data-density="airy"]    { --row: 44px; --grid: 10px; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11","tnum";
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

.mono { font-family: var(--mono); font-feature-settings: "calt" 0; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: 0.08em; }

/* technical grid background */
.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

.dot-bg {
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* selection */
::selection { background: var(--accent-soft); color: var(--fg-0); }