:root,
[data-md-color-scheme="default"] {
  --brand-header-bg: #08080c;
  --brand-footer-bg: #08080c;
  --brand-footer-nav-bg: #14110f;
  --brand-on-dark: #f7f6f8;
  --brand-accent: #ff6a00;
  --brand-accent-hover: #ffb300;
  --brand-accent-transparent: rgba(255, 106, 0, 0.15);
  --brand-primary-transparent: rgba(20, 17, 15, 0.12);
  --brand-header-border: rgba(255, 106, 0, 0.34);
  --brand-search-focus: rgba(255, 106, 0, 0.62);
  --brand-tab-muted: rgba(247, 246, 248, 0.68);
  --brand-tab-hover: #f7f6f8;
  --brand-tab-active: #f7f6f8;

  --md-primary-fg-color: var(--brand-header-bg);
  --md-primary-fg-color--light: var(--brand-footer-nav-bg);
  --md-primary-fg-color--dark: var(--brand-header-bg);
  --md-accent-fg-color: var(--brand-accent);
  --md-accent-fg-color--transparent: var(--brand-accent-transparent);
  --md-typeset-a-color: var(--brand-accent);
}

/* The horizontal Vulcapay lockup needs more room than a compact brand mark. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: 7.8rem;
  height: 1.55rem;
  object-fit: contain;
  object-position: left center;
}

/* Keep the selected navigation item readable on the light page surface. */
.md-sidebar--primary .md-nav__link--active {
  position: relative;
  margin-left: -0.45rem;
  padding: 0.35rem 0.5rem 0.35rem 0.65rem;
  border-radius: 0.25rem;
  background: rgba(255, 106, 0, 0.1);
  color: #14110f !important;
  font-weight: 700;
}

.md-sidebar--primary .md-nav__link--active::before {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-accent);
  content: "";
}

.md-sidebar--secondary .md-nav__link--active {
  padding-left: 0.55rem;
  border-left: 2px solid #ff2d00;
  color: #14110f !important;
  font-weight: 700;
}