/* The guide in Sublime Itch's own colours: the app's dark slate and itch's
   red for the navy theme (the default), and itch's light page for the
   light one, as the app's preview shows them. The other themes are left
   as mdBook has them. */

.navy {
    --bg: #1c1f26;
    --fg: #e8e6e1;

    --sidebar-bg: #232731;
    --sidebar-fg: #c9ccd3;
    --sidebar-non-existant: #5d6270;
    --sidebar-active: #fa5c5c;
    --sidebar-spacer: #333845;
    --sidebar-header-border-color: #333845;

    --scrollbar: #4a5060;

    --icons: #9aa0ab;
    --icons-hover: #e8e6e1;

    --links: #ff7b7b;

    --inline-code-color: #f0c987;

    --theme-popup-bg: #232731;
    --theme-popup-border: #333845;
    --theme-hover: #2c313d;

    --quote-bg: #232731;
    --quote-border: #fa5c5c;

    --table-border-color: #333845;
    --table-header-bg: #2c313d;
    --table-alternate-bg: #20232b;

    --searchbar-border-color: #333845;
    --searchbar-bg: #232731;
    --searchbar-fg: #e8e6e1;
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: #9aa0ab;
    --searchresults-border-color: #333845;
    --searchresults-li-bg: #232731;
    --search-mark-bg: #fa5c5c66;
}

.light {
    --links: #da2c49;
    --sidebar-active: #da2c49;
    --quote-border: #da2c49;
}

/* The app's type: the system's own, as the app uses it. */
html {
    font-family: system-ui, sans-serif;
}

/* The app's icon beside the book's title, kept crisp as pixel art. */
.menu-title::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.45em;
    vertical-align: -0.15em;
    background: url("../images/icon.svg") center / contain no-repeat;
    image-rendering: pixelated;
}

/* Keys, as the app's help shows them. */
kbd {
    padding: 1px 5px;
    border: 1px solid var(--table-border-color);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--quote-bg);
    font: 0.85em ui-monospace, monospace;
}