:root {
  --md-primary-fg-color: #6c8fff;
  --md-primary-fg-color--light: #8ba3ff;
  --md-primary-fg-color--dark: #5577ee;
  --md-accent-fg-color: #a78bfa;
}

/* Lift the three pages new users need first.
   White + lime-green accent so they pop against the primary-color tab bar. */
.md-tabs__link[href$="quickstart/"],
.md-tabs__link[href$="browser-connector/"],
.md-tabs__link[href$="mcp-tools/"] {
  font-weight: 800;
  color: #ffffff;
  opacity: 1;
  border-bottom: 2px solid #aaff00;
}
.md-tabs__link[href$="quickstart/"]:hover,
.md-tabs__link[href$="browser-connector/"]:hover,
.md-tabs__link[href$="mcp-tools/"]:hover {
  color: #aaff00;
}

/* Same three pages in the (dark) sidebar nav: keep them light + bold. */
.md-nav__link[href$="quickstart/"],
.md-nav__link[href$="browser-connector/"],
.md-nav__link[href$="mcp-tools/"] {
  font-weight: 700;
  color: var(--md-primary-fg-color--light);
}

.md-nav__link[href$="quickstart/"] .md-ellipsis,
.md-nav__link[href$="browser-connector/"] .md-ellipsis,
.md-nav__link[href$="mcp-tools/"] .md-ellipsis {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* G6.23 — Nav link colors. Default mkdocs-material on slate is a muted
   grey that's hard to scan; bump to a warm off-white. Active link goes
   to pure white with the accent underline; hover gets a distinct
   semi-bright treatment so the click target is obvious. */
.md-tabs__link,
.md-nav__link {
  color: #f4ede0; /* warm off-white */
}
.md-tabs__link:hover,
.md-nav__link:hover {
  color: #ffe7c0; /* warmer, brighter on hover */
}
.md-tabs__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  color: #ffffff;
}
.md-tabs__link--active {
  border-bottom: 2px solid var(--md-accent-fg-color);
}