docs/styles/overrides.css
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');
/* If hosted without local font files, rely on system fallback monospace. */
:root {
  --font-text: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --color-text: #a1a1aa; /* normal text */
  --color-link: #065f46; /* links */
  --md-default-bg-color: #000000; /* make the whole site background black */
  --md-primary-fg-color: #000000; /* keep headers neutral, no blue */
  --md-accent-fg-color: #000000; /* neutral accent */
}

html, body {
  font-family: var(--font-text) !important;
  background-color: #000000 !important;
}

/* Global text color */
.md-typeset,
.md-nav__title,
.md-nav__link,
.md-nav__item,
.md-footer,
.md-header,
body {
  color: var(--color-text) !important;
}

/* Header and nav: remove colored backgrounds; keep neutral */
.md-header,
.md-tabs,
.md-footer {
  background-color: #000000 !important; /* near-black neutral */
}

/* Add a subtle separator line between header and body */
.md-header {
  border-bottom: 1px solid #111827 !important; /* subtle separator */
  box-shadow: none !important; /* remove default elevation shadow */
  /* Ensure header stays above sidebars/drawers on small screens */
  z-index: 1100;
}

/* Links color */
.md-typeset a,
.md-nav__link[href],
.md-footer a {
  color: var(--color-link) !important;
}

/* Link hover/focus: slightly darker */
.md-typeset a:hover,
.md-typeset a:focus,
.md-nav__link[href]:hover,
.md-nav__link[href]:focus,
.md-footer a:hover,
.md-footer a:focus {
  color: #064e3b !important;
}

/* Code blocks and inline code use same mono font */
.md-typeset code,
.md-typeset pre,
.md-typeset kbd,
.md-typeset samp {
  font-family: var(--font-code) !important;
}

/* Soften code block background to match neutral theme */
:root {
  --md-code-bg-color: #0f0f10; /* subtle dark */
  --md-default-fg-color--light: var(--color-text);
}

/* Remove the "Made with Material for MkDocs" footer generator line only */
/* We also have generator: false in mkdocs.yml, but this ensures it's hidden */
.md-footer-meta__inner a[rel="generator"] {
  display: none !important;
}

/* Keep only our copyright area visible if present */
.md-footer__inner {
  border-top: 1px solid #111827; /* subtle separator */
}

/* Optional: tone down primary colored UI elements from Material */
.md-button,
.md-tag,
.md-typeset .md-button--primary {
  background-color: #111827 !important; /* neutral */
  color: var(--color-text) !important;
}

/* Search bar neutral styling */
.md-search__input {
  background-color: #0f0f10 !important;
  color: var(--color-text) !important;
}

/* Tables */
.md-typeset table th,
.md-typeset table td {
  border-color: #141d28 !important; /* slate-700-ish */
}

/* ACTIVE TAB STYLING - Green active states without fade effects */

/* Style the active tab in the top navigation */
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: #10b981 !important; /* bright green text */
  background-color: transparent !important; /* no background */
  border-radius: 6px !important;
  font-weight: 600 !important;
  position: relative;
}

/* Add emerald-800 underline to active tab */
.md-tabs__item--active .md-tabs__link::after,
.md-tabs__link--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #065f46 !important; /* emerald-800 */
  border-radius: 2px;
}

/* Style active items in left sidebar navigation */
.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  color: #10b981 !important; /* bright green */
  background-color: rgba(16, 185, 129, 0.1) !important; /* subtle green background */
  border-radius: 4px !important;
  font-weight: 600 !important;
  border-left: 3px solid #10b981 !important; /* green left border indicator */
  padding-left: 1rem !important;
}

/* Style active items in right sidebar TOC */
.md-nav--secondary .md-nav__link--active {
  color: #10b981 !important; /* bright green */
  background-color: rgba(16, 185, 129, 0.08) !important; /* very subtle green background */
  border-radius: 4px !important;
  font-weight: 500 !important;
  border-left: 2px solid #10b981 !important; /* thin green left border */
  padding-left: 0.75rem !important;
}

/* Hover effects for tabs and navigation */
.md-tabs__link:hover,
.md-nav__link:hover {
  color: #34d399 !important; /* lighter green on hover */
  background-color: rgba(16, 185, 129, 0.05) !important; /* subtle hover background */
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

/* Focus states for accessibility */
.md-tabs__link:focus,
.md-nav__link:focus {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}