:root {
  --ink: var(--warm-ink,#000000);
  --paper: #ffffff;
  --glass: rgba(255,255,255,0.94);
  --gold: #ffffff;
  --pine: var(--warm-ink,#000000);
  --line: var(--warm-line,#e8e8e8);
}

html, body, #app { background: var(--warm-bg,#e8e8e8); color: var(--ink); }
header { background: rgba(255,255,255,0.96); }
.brand span { background: var(--warm-ink,#000000); color: #ffffff; }
header button { color: var(--warm-ink-2,#313131); }
header button.active { background: var(--warm-ink,#000000); }
#panel { box-shadow: 0 20px 60px rgba(0,0,0,0.22); }
.eyebrow { color: var(--accent); }
.primary { background: var(--accent); }
.primary:hover { background: var(--accent-strong); }
.secondary:hover, .card:hover { border-color: #000000; }
.marker { border-color: #000000; }
.marker.project { background: #ffffff; border-color: var(--accent); }
#scene { background: linear-gradient(#e8e8e8 0 48%, #979797 48%); }
.unit { background: var(--warm-ink,#000000); }
.unit:hover, .unit.selected { background: #ffffff; color: var(--warm-ink,#000000); }
.viewpoint { border-left-color: var(--accent); }