/* Brand tokens, from the Vaspian logo and the app theme (frontend/src). Edit colors here only. */
:root {
  --brand: #0a2e5c;
  --brand-ink: #ffffff;
  --brand-soft: #e6eef9;
  --accent: #e57a24;
  --bg: #ffffff;
  --bg-alt: #f4f7fc;
  --ink: #0a2e5c;
  --ink-muted: #4a6283;
  --line: #d6e0ee;
  --code-bg: #eef3fa;
  --ok: #1a7f4b;
  --warn: #9a5b00;
  --header-bg: #ffffff;
  --header-ink: #4a6283;
  --header-accent: #0a2e5c;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #a9d3ef;
    --brand-ink: #06182f;
    --brand-soft: #123058;
    --bg: #071b36;
    --bg-alt: #0c2548;
    --ink: #e6eefb;
    --ink-muted: #9db3d1;
    --line: #1d3a63;
    --code-bg: #0f2a4f;
    --ok: #5fd08e;
    --warn: #f0b45a;
    --header-bg: #0a2e5c;
    --header-ink: #cfe0f4;
    --header-accent: #ffffff;
  }
}
.vsp-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 10px 16px; background: var(--header-bg); color: var(--header-ink);
  border-bottom: 3px solid var(--accent); font-family: var(--font);
}
.vsp-header img { height: 32px; width: auto; display: block; }
.vsp-header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.vsp-header a { color: var(--header-ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.vsp-header a:hover, .vsp-header a[aria-current="page"] { color: var(--header-accent); }