/* mq-task book theme: same green palette as the landing page.
   Sidebar, menu bar and content share one background so the page reads as a single surface. */

:root {
  --mq-accent: #3DCB7A;
  --mq-accent-bright: #6EE7A0;
  --content-max-width: 860px;
}

/* Light */
.light,
html:not(.js) {
  --bg: #ffffff;
  --fg: #0f1914;
  --sidebar-bg: #ffffff;
  --sidebar-fg: #2d3d34;
  --sidebar-non-existent: #8fa498;
  --sidebar-active: #17803f;
  --sidebar-spacer: #e8f0ea;
  --scrollbar: #c3d3c8;
  --icons: #6f8576;
  --icons-hover: #17803f;
  --links: #17803f;
  --inline-code-color: #17803f;
  --theme-popup-bg: #ffffff;
  --theme-popup-border: #c3d3c8;
  --theme-hover: #f1f5f0;
  --quote-bg: #f1f5f0;
  --quote-border: #3DCB7A;
  --table-border-color: #e8f0ea;
  --table-header-bg: #f1f5f0;
  --table-alternate-bg: #f7faf7;
  --searchbar-border-color: #c3d3c8;
  --searchbar-bg: #ffffff;
  --searchbar-fg: #0f1914;
  --searchresults-header-fg: #6f8576;
  --searchresults-border-color: #e8f0ea;
  --searchresults-li-bg: #f1f5f0;
  --search-mark-bg: #bbf0d0;
}

/* Dark themes: navy is the default, the rest follow the same rule (sidebar == content) */
.navy,
.coal,
.ayu {
  --bg: #14201a;
  --fg: #e8f0ea;
  --sidebar-bg: #14201a;
  --sidebar-fg: #c3d3c8;
  --sidebar-non-existent: #6f8576;
  --sidebar-active: var(--mq-accent-bright);
  --sidebar-spacer: #24372c;
  --scrollbar: #2f4639;
  --icons: #8fa498;
  --icons-hover: var(--mq-accent-bright);
  --links: var(--mq-accent-bright);
  --inline-code-color: var(--mq-accent-bright);
  --theme-popup-bg: #1b2c23;
  --theme-popup-border: #2f4639;
  --theme-hover: #24372c;
  --quote-bg: #1b2c23;
  --quote-border: var(--mq-accent);
  --table-border-color: #2f4639;
  --table-header-bg: #24372c;
  --table-alternate-bg: #1f3027;
  --searchbar-border-color: #2f4639;
  --searchbar-bg: #1b2c23;
  --searchbar-fg: #e8f0ea;
  --searchresults-header-fg: #8fa498;
  --searchresults-border-color: #2f4639;
  --searchresults-li-bg: #1b2c23;
  --search-mark-bg: #17803f;
}

html,
body {
  background-color: var(--bg);
  color: var(--fg);
}

#menu-bar,
#menu-bar-sticky-container {
  background-color: var(--bg);
  border-bottom-color: var(--sidebar-spacer);
}

.sidebar {
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-spacer);
}

.sidebar .sidebar-resize-handle {
  background-color: transparent;
}

.chapter li.chapter-item a.active {
  color: var(--sidebar-active);
  font-weight: 600;
}

/* Code: one step darker than the page in dark themes, one step lighter in light */
pre,
.content pre > code,
pre > .buttons {
  background-color: #0f1914;
}
.light pre,
.light .content pre > code {
  background-color: #f1f5f0;
}
pre {
  border: 1px solid var(--sidebar-spacer);
  border-radius: 8px;
}
:not(pre) > code {
  background-color: rgba(61, 203, 122, 0.12);
  border-radius: 4px;
}

.content a {
  color: var(--links);
}
.content main {
  max-width: var(--content-max-width);
}
code.hljs,
pre code {
  font-size: 0.9em;
}
table {
  width: 100%;
}