/* Uptown brand + dual themes: vantablack (default) and light */
:root,
[data-theme="vantablack"] {
  --bg: #000000;
  --bg-elevated: #050505;
  --panel: #0a0a0a;
  --panel-2: #111111;
  --line: #1a1a1a;
  --line-soft: #141414;
  --text: #f2f2f2;
  --muted: #8a8a8a;
  --dim: #5c5c5c;
  --accent: #e3b04b;
  --cyan: #5eead4;
  --ok: #3ecf8e;
  --bad: #f07178;
  --warn: #e8d4a0;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  --logo-ring: rgba(227, 176, 75, 0.25);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f1ea;
  --bg-elevated: #fffdf8;
  --panel: #ffffff;
  --panel-2: #f7f3eb;
  --line: #e2d8c8;
  --line-soft: #ece4d6;
  --text: #14120f;
  --muted: #6b645a;
  --dim: #9a9185;
  --accent: #b8860b;
  --cyan: #0f766e;
  --ok: #15803d;
  --bad: #b91c1c;
  --warn: #92400e;
  --shadow: 0 12px 32px rgba(40, 30, 10, 0.08);
  --logo-ring: rgba(184, 134, 11, 0.2);
  color-scheme: light;
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 3px var(--logo-ring);
  background: #000;
  flex-shrink: 0;
}
.logo-mark.lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.logo-mark.sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/* shared toolbar buttons used by nav */
.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.nav-tool {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.nav-tool:hover {
  color: var(--text);
  border-color: var(--accent);
}