/*
 * Recolour mdBook's 'Light' and 'Coal' themes to match BeetstreamNext's WebUI palette
 */

.light, html:not(.js) {
    --bg: #faf6f4;
    --fg: #241512;

    --sidebar-bg: #ffffff;
    --sidebar-fg: #241512;
    --sidebar-non-existant: #6b5c58;
    --sidebar-active: #a23548;
    --sidebar-spacer: rgba(0, 0, 0, 0.1);
    --sidebar-header-border-color: #a23548;

    --scrollbar: #6b5c58;

    --icons: #6b5c58;
    --icons-hover: #241512;

    --links: #a23548;
    --inline-code-color: #a23548;

    --theme-popup-bg: #ffffff;
    --theme-popup-border: rgba(0, 0, 0, 0.1);
    --theme-hover: rgba(0, 0, 0, 0.04);

    --quote-bg: rgba(162, 53, 72, 0.06);
    --quote-border: rgba(162, 53, 72, 0.18);

    --table-border-color: rgba(0, 0, 0, 0.1);
    --table-header-bg: rgba(0, 0, 0, 0.06);
    --table-alternate-bg: rgba(0, 0, 0, 0.02);

    --searchbar-border-color: rgba(0, 0, 0, 0.1);
    --searchbar-bg: #ffffff;
    --searchbar-fg: #241512;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.08);
    --searchresults-header-fg: #6b5c58;
    --searchresults-border-color: rgba(0, 0, 0, 0.1);
    --searchresults-li-bg: rgba(162, 53, 72, 0.08);
    --search-mark-bg: rgba(162, 53, 72, 0.25);
}

.coal {
    --bg: #2f0e0b;
    --fg: #f7f5f5;

    --sidebar-bg: #3b1017;
    --sidebar-fg: #f7f5f5;
    --sidebar-non-existant: #a8a2a3;
    --sidebar-active: #d86161;
    --sidebar-spacer: rgba(255, 255, 255, 0.1);
    --sidebar-header-border-color: #d86161;

    --scrollbar: #a8a2a3;

    --icons: #a8a2a3;
    --icons-hover: #f7f5f5;

    --links: #d86161;
    --inline-code-color: #d86161;

    --theme-popup-bg: #3b1017;
    --theme-popup-border: rgba(255, 255, 255, 0.1);
    --theme-hover: rgba(255, 255, 255, 0.05);

    --quote-bg: rgba(216, 97, 97, 0.12);
    --quote-border: rgba(216, 97, 97, 0.3);

    --table-border-color: rgba(255, 255, 255, 0.1);
    --table-header-bg: rgba(255, 255, 255, 0.1);
    --table-alternate-bg: rgba(255, 255, 255, 0.02);

    --searchbar-border-color: rgba(255, 255, 255, 0.1);
    --searchbar-bg: #3b1017;
    --searchbar-fg: #f7f5f5;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.5);
    --searchresults-header-fg: #a8a2a3;
    --searchresults-border-color: rgba(255, 255, 255, 0.1);
    --searchresults-li-bg: rgba(216, 97, 97, 0.15);
    --search-mark-bg: rgba(216, 97, 97, 0.35);
}

/*
 * Syntax highlighting (highlight.js)
 */

.light code.hljs,
.light .hljs {
    background: rgba(0, 0, 0, 0.045);
    color: #241512;
}

.light .hljs-comment,
.light .hljs-quote {
    color: #6b7280; /* ansi-bright-black */
}

.light .hljs-variable,
.light .hljs-template-variable,
.light .hljs-attribute,
.light .hljs-attr,
.light .hljs-tag,
.light .hljs-name,
.light .hljs-regexp,
.light .hljs-link,
.light .hljs-selector-id,
.light .hljs-selector-class {
    color: #dc2626; /* ansi-red */
}

.light .hljs-number,
.light .hljs-meta,
.light .hljs-built_in,
.light .hljs-builtin-name,
.light .hljs-literal,
.light .hljs-type,
.light .hljs-params,
.light .hljs-preprocessor,
.light .hljs-pragma,
.light .hljs-constant {
    color: #ca8a04; /* ansi-yellow */
}

.light .hljs-string,
.light .hljs-symbol,
.light .hljs-bullet,
.light .hljs-value,
.light .hljs-inheritance,
.light .hljs-header {
    color: #16a34a; /* ansi-green */
}

.light .hljs-title,
.light .hljs-section,
.light .hljs-function {
    color: #2563eb; /* ansi-blue */
}

.light .hljs-keyword,
.light .hljs-selector-tag {
    color: #9333ea; /* ansi-magenta */
}

.light .hljs-addition {
    color: #16a34a;
    background-color: rgba(22, 163, 74, 0.1);
}

.light .hljs-deletion {
    color: #dc2626;
    background-color: rgba(220, 38, 38, 0.1);
}

.coal code.hljs,
.coal .hljs {
    background: rgba(255, 255, 255, 0.06);
    color: #f7f5f5;
}

.coal .hljs-comment,
.coal .hljs-quote {
    color: #9ca3af; /* ansi-bright-black */
}

.coal .hljs-variable,
.coal .hljs-template-variable,
.coal .hljs-attribute,
.coal .hljs-attr,
.coal .hljs-tag,
.coal .hljs-name,
.coal .hljs-regexp,
.coal .hljs-link,
.coal .hljs-selector-id,
.coal .hljs-selector-class {
    color: #f87171; /* ansi-red */
}

.coal .hljs-number,
.coal .hljs-meta,
.coal .hljs-built_in,
.coal .hljs-builtin-name,
.coal .hljs-literal,
.coal .hljs-type,
.coal .hljs-params,
.coal .hljs-preprocessor,
.coal .hljs-pragma,
.coal .hljs-constant {
    color: #facc15; /* ansi-yellow */
}

.coal .hljs-string,
.coal .hljs-symbol,
.coal .hljs-bullet,
.coal .hljs-value,
.coal .hljs-inheritance,
.coal .hljs-header {
    color: #4ade80; /* ansi-green */
}

.coal .hljs-title,
.coal .hljs-section,
.coal .hljs-function {
    color: #60a5fa; /* ansi-blue */
}

.coal .hljs-keyword,
.coal .hljs-selector-tag {
    color: #c084fc; /* ansi-magenta */
}

.coal .hljs-addition {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.12);
}

.coal .hljs-deletion {
    color: #f87171;
    background-color: rgba(248, 113, 113, 0.12);
}

/*
 * Hide the unbranded theme choices from the picker
 */
/*#mdbook-theme-list button#mdbook-theme-rust,*/
/*#mdbook-theme-list button#mdbook-theme-navy,*/
/*#mdbook-theme-list button#mdbook-theme-ayu {*/
/*    display: none;*/
/*}*/

/* Web UI screenshots: soft shadow all around */
img.screenshot {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.coal img.screenshot,
.navy img.screenshot,
.ayu img.screenshot {
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

.screenshot-pair {
    display: grid;
    margin: 1.5rem auto;
    max-width: 100%;
    width: fit-content;
}
.screenshot-pair img.screenshot {
    grid-area: 1 / 1;
    margin: 0;
}
/* light book themes: light below, dark on top */
.screenshot-pair img.light { z-index: 0; }
.screenshot-pair img.dark {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.screenshot-pair:hover img.dark { opacity: 1; }

/* dark book themes: dark below, light on top */
.coal .screenshot-pair img.dark,
.navy .screenshot-pair img.dark,
.ayu .screenshot-pair img.dark {
    z-index: 0;
    opacity: 1;
    transition: none;
}
.coal .screenshot-pair img.light,
.navy .screenshot-pair img.light,
.ayu .screenshot-pair img.light {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.coal .screenshot-pair:hover img.light,
.navy .screenshot-pair:hover img.light,
.ayu .screenshot-pair:hover img.light { opacity: 1; }

/* Admonitions: semi-transparent background in each category's colour */
.blockquote-tag {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

.blockquote-tag-note {
    background-color: color-mix(in srgb, var(--blockquote-note-color) 12%, transparent);
}

.blockquote-tag-tip {
    background-color: color-mix(in srgb, var(--blockquote-tip-color) 12%, transparent);
}

.blockquote-tag-important {
    background-color: color-mix(in srgb, var(--blockquote-important-color) 12%, transparent);
}

.blockquote-tag-warning {
    background-color: color-mix(in srgb, var(--blockquote-warning-color) 12%, transparent);
}

.blockquote-tag-caution {
    background-color: color-mix(in srgb, var(--blockquote-caution-color) 12%, transparent);
}

.light, html:not(.js) { --focus-ring: #0284c7; }
.coal { --focus-ring: #38bdf8; }

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.content a:hover,
.content a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.light body, html:not(.js) body {
    background-image: radial-gradient(200rem 200rem at 50% -15%, rgba(255, 215, 215, 0.25), transparent 50%);
    background-attachment: fixed;
}

.coal body {
    background-image: radial-gradient(200rem 200rem at 50% -15%, rgba(165, 80, 90, 0.1), transparent 50%);
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(2) rotate(45)'%3E%3Cpath d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002' stroke-width='1' stroke='%236c1e2b' stroke-opacity='0.05' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='800%25' height='800%25' transform='translate(0,-22)' fill='url(%23a)'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 5%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 5%);
}

.coal body::before {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(2) rotate(45)'%3E%3Cpath d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002' stroke-width='1' stroke='%23ffffff' stroke-opacity='0.04' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='800%25' height='800%25' transform='translate(0,-22)' fill='url(%23a)'/%3E%3C/svg%3E");
}