/* Inkt: the brand's ink-blue sidebar with paper panes for light and near-black panes for dark; vermilion marks the active page and links. Every built-in theme maps to one of the two. */

@font-face {
    font-family: "Bricolage Grotesque";
    font-weight: 600;
    src: url("../fonts/BricolageGrotesque-SemiBold.ttf") format("truetype");
}

.ayu, .coal, .navy {
    --bg: #16181f;
    --fg: #e9e5dc;
    --sidebar-bg: #0f121c;
    --sidebar-fg: #f3eee4;
    --sidebar-non-existant: #8d93a6;
    --sidebar-active: #f08a68;
    --sidebar-spacer: #2b3650;
    --sidebar-header-border-color: #f08a68;
    --scrollbar: #2b3042;
    --icons: #9b9aa4;
    --icons-hover: #f3b39d;
    --links: #f3b39d;
    --inline-code-color: #f3b39d;
    --theme-popup-bg: #0f1117;
    --theme-popup-border: #2b3042;
    --theme-hover: #20242f;
    --quote-bg: #0f1117;
    --quote-border: #2b3042;
    --warning-border: #e6b85c;
    --table-border-color: #2b3042;
    --table-header-bg: #20242f;
    --table-alternate-bg: #0f1117;
    --searchbar-border-color: #2b3042;
    --searchbar-bg: #0f1117;
    --searchbar-fg: #e9e5dc;
    --searchbar-shadow-color: #0a0c12;
    --searchresults-header-fg: #9b9aa4;
    --searchresults-border-color: #2b3042;
    --searchresults-li-bg: #20242f;
    --search-mark-bg: #c94420;
    --footnote-highlight: #c94420;
    --overlay-bg: rgba(10, 12, 18, 0.6);
    --blockquote-note-color: #f3b39d;
    --blockquote-tip-color: #9ccb8f;
    --blockquote-important-color: #e6b85c;
    --blockquote-warning-color: #e6b85c;
    --blockquote-caution-color: #f08a8a;
}

.light, .rust, html:not(.js) {
    --bg: #faf7f1;
    --fg: #1c2436;
    --sidebar-bg: #1c2436;
    --sidebar-fg: #f3eee4;
    --sidebar-non-existant: #8d93a6;
    --sidebar-active: #f08a68;
    --sidebar-spacer: #2b3650;
    --sidebar-header-border-color: #f08a68;
    --scrollbar: #dcd6c9;
    --icons: #6b6a75;
    --icons-hover: #b83d1c;
    --links: #b83d1c;
    --inline-code-color: #b83d1c;
    --theme-popup-bg: #f3eee4;
    --theme-popup-border: #dcd6c9;
    --theme-hover: #ebe5d9;
    --quote-bg: #f3eee4;
    --quote-border: #dcd6c9;
    --warning-border: #8a5a00;
    --table-border-color: #dcd6c9;
    --table-header-bg: #ebe5d9;
    --table-alternate-bg: #f3eee4;
    --searchbar-border-color: #dcd6c9;
    --searchbar-bg: #fffdf9;
    --searchbar-fg: #1c2436;
    --searchbar-shadow-color: #dcd6c9;
    --searchresults-header-fg: #6b6a75;
    --searchresults-border-color: #dcd6c9;
    --searchresults-li-bg: #ebe5d9;
    --search-mark-bg: #f5c16c;
    --footnote-highlight: #f5c16c;
    --overlay-bg: rgba(28, 36, 54, 0.3);
    --blockquote-note-color: #b83d1c;
    --blockquote-tip-color: #2e6b3a;
    --blockquote-important-color: #8c6720;
    --blockquote-warning-color: #8a5a00;
    --blockquote-caution-color: #a8202e;
}

.ayu .hljs, .coal .hljs, .navy .hljs { background: #0f1117; }
.light .hljs, .rust .hljs, html:not(.js) .hljs { background: #f3eee4; }

h1, h2, h3, h4 {
    font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Screenshots come in a light and a dark variant, marked the way GitHub switches them; here the theme picks one. */
img[src$="#gh-dark-mode-only"],
.ayu img[src$="#gh-light-mode-only"], .coal img[src$="#gh-light-mode-only"], .navy img[src$="#gh-light-mode-only"] {
    display: none;
}
.ayu img[src$="#gh-dark-mode-only"], .coal img[src$="#gh-dark-mode-only"], .navy img[src$="#gh-dark-mode-only"] {
    display: inline;
}

/* The logo replaces the title text; font-size 0 keeps "Postvak" for screen readers. */
.menu-title {
    background: url("../logo.svg") center / contain no-repeat;
    font-size: 0;
    height: 32px;
}

/* The comparison table on compare.md: the Postvak column stands out, the rows stay scannable. */
.compare table { width: 100%; font-size: 0.9em; }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 600; width: 26%; }
.compare th, .compare td { text-align: center; }
.compare th:nth-child(2), .compare td:nth-child(2) { background: color-mix(in srgb, var(--links) 12%, transparent); }
.compare th:nth-child(2) { color: var(--links); }
.compare .yes, .compare .no { font-weight: 700; }
.compare .yes { color: var(--blockquote-tip-color); }
.compare .no { color: var(--blockquote-caution-color); opacity: 0.8; }