:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --accent: #8b3ffb;
  --accent-emphasis: #9d5cff;
  --accent-underline: #8b3ffb;
  --icon-directory: #8b3ffb;
  --brand-primary-text: #ffffff;
  --canvas: #0a0713;
  --canvas-subtle: #14101f;
  --canvas-overlay: #14101f;
  --canvas-inset: #060410;
  --neutral-subtle: #14101f;
  --border: #241c38;
  --border-muted: #241c38;
  --fg: #f4f2fa;
  --fg-muted: #a29ab8;
  --fg-subtle: #a29ab8;
  --brand-header-bg: #060410;
  --radius: 8px;
  --accent-subtle: #8b3ffb22;
}

/* GITSELF_BRAND_MODE=dark */

.site-header { background: var(--brand-header-bg); }

:root:not([data-theme="dark"]) .site-header { background: var(--brand-header-bg); }

.btn-primary, .btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand-primary-text);
}

.btn-primary:hover, .btn-accent:hover {
  background: var(--accent-emphasis);
  border-color: var(--accent-emphasis);
}

.site-header .brand span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.site-header .brand .brand-accent { color: var(--accent); }