@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");

:root {
	--text-color: black;
	--bg-color: white;
	--menu-title-color: black;
	--active-text-color: white;
	--active-bg-color: black;
	--hover-color: black;
	--scrollbar-thumb: #d0d0d0;
	--scrollbar-thumb-hover: #a0a0a0;
	--scrollbar: #d0d0d0 !important;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #ffffff;
		--bg-color: #000000;
		--menu-title-color: #ffffff;
		--active-text-color: #000000;
		--active-bg-color: #ffffff;
		--hover-color: #ffffff;
		--scrollbar-thumb: #444444;
		--scrollbar-thumb-hover: #555555;
		--scrollbar: #444444 !important;
	}
}

/* Match the web app's palette. Override mdbook's per-theme tokens so the
   page picks up our colors regardless of which theme class mdbook applies
   to <html>. Sidebar bg is intentionally one step off main bg so the
   sidebar reads as its own region without a hard border. */

/* Light: white main, near-white sidebar, pure-black text, monochrome links. */
html.light,
html.rust {
	--bg: #ffffff;
	--fg: #000000;

	--sidebar-bg: #f5f5f5;
	--sidebar-fg: #000000;
	--sidebar-non-existant: #999999;
	--sidebar-active: #000000;
	--sidebar-spacer: #e0e0e0;

	--scrollbar: #d0d0d0;

	--icons: #666666;
	--icons-hover: #000000;

	--links: #000000;

	--inline-code-color: #000000;

	--theme-popup-bg: #ffffff;
	--theme-popup-border: #e0e0e0;
	--theme-hover: #f0f0f0;

	--quote-bg: #f5f5f5;
	--quote-border: #e0e0e0;

	--table-border-color: #e0e0e0;
	--table-header-bg: #fafafa;
	--table-alternate-bg: #f5f5f5;

	--searchbar-border-color: #d0d0d0;
	--searchbar-bg: #ffffff;
	--searchbar-fg: #000000;
	--searchbar-shadow-color: #d0d0d0;
	--searchresults-header-fg: #666666;
	--searchresults-border-color: #e0e0e0;
	--searchresults-li-bg: #f5f5f5;
	--search-mark-bg: #000000;
}

/* Dark: black main, near-black sidebar, pure-white text. */
html.ayu,
html.coal,
html.navy {
	--bg: #000000;
	--fg: #ffffff;

	--sidebar-bg: #0a0a0a;
	--sidebar-fg: #ffffff;
	--sidebar-non-existant: #666666;
	--sidebar-active: #ffffff;
	--sidebar-spacer: #333333;

	--scrollbar: #444444;

	--icons: #999999;
	--icons-hover: #ffffff;

	--links: #ffffff;

	--inline-code-color: #ffffff;

	--theme-popup-bg: #000000;
	--theme-popup-border: #333333;
	--theme-hover: #1a1a1a;

	--quote-bg: #1a1a1a;
	--quote-border: #333333;

	--table-border-color: #333333;
	--table-header-bg: #1a1a1a;
	--table-alternate-bg: #0a0a0a;

	--searchbar-border-color: #333333;
	--searchbar-bg: #1a1a1a;
	--searchbar-fg: #ffffff;
	--searchbar-shadow-color: #333333;
	--searchresults-header-fg: #999999;
	--searchresults-border-color: #333333;
	--searchresults-li-bg: #1a1a1a;
	--search-mark-bg: #ffffff;
}

/* JS-disabled fallback. mdbook's stylesheet sets light values on
   html:not(.js); we re-apply ours here so the no-JS render matches. */
html:not(.js) {
	--bg: #ffffff;
	--fg: #000000;
	--sidebar-bg: #f5f5f5;
	--sidebar-fg: #000000;
	--sidebar-active: #000000;
	--sidebar-spacer: #e0e0e0;
	--links: #000000;
	--inline-code-color: #000000;
	--quote-bg: #f5f5f5;
	--quote-border: #e0e0e0;
	--table-border-color: #e0e0e0;
	--table-header-bg: #fafafa;
	--table-alternate-bg: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
	html:not(.js) {
		--bg: #000000;
		--fg: #ffffff;
		--sidebar-bg: #0a0a0a;
		--sidebar-fg: #ffffff;
		--sidebar-non-existant: #666666;
		--sidebar-active: #ffffff;
		--sidebar-spacer: #333333;
		--scrollbar: #444444;
		--icons: #999999;
		--icons-hover: #ffffff;
		--links: #ffffff;
		--inline-code-color: #ffffff;
		--theme-popup-bg: #000000;
		--theme-popup-border: #333333;
		--theme-hover: #1a1a1a;
		--quote-bg: #1a1a1a;
		--quote-border: #333333;
		--table-border-color: #333333;
		--table-header-bg: #1a1a1a;
		--table-alternate-bg: #0a0a0a;
	}
}

html {
	scrollbar-color: auto !important;
	scrollbar-width: auto !important;
}

::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background: transparent;
}

::-webkit-scrollbar-button {
	display: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 0;
}

::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

html {
	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
	font-style: normal;
}

code {
	font-family: "Fira Code", monospace;
	font-size: 14px;
	line-height: 1.6;
}

.menu-title {
	font-weight: bold;
	color: var(--menu-title-color);
}

.chapter-item {
	.active {
		color: var(--active-text-color) !important;
		background: var(--active-bg-color);
	}
	.active:hover {
		color: var(--active-text-color) !important;
	}
}

.chapter-link-wrapper > a:hover {
	color: var(--hover-color) !important;
}

#mdbook-theme-toggle,
#mdbook-theme-list {
	display: none !important;
}
