/* Cuewire's look for the user guide: the app's accent, calm type, figures with captions, and
   callout boxes. Loaded after mdBook's own theme (book.toml additional-css). */

.light, html:not(.js) {
    --links: #5a48c0;
    --sidebar-active: #5a48c0;
    --quote-bg: #f6f5fd;
    --quote-border: #e2defa;
    --inline-code-color: #3d3a52;
    --blockquote-note-color: #5a48c0;
    --blockquote-tip-color: #1f9d55;
    --blockquote-warning-color: #c27c0e;
    --cw-figure-border: #e4e4ea;
    --cw-caption: #5d5d66;
    --cw-kbd-bg: #f4f4f7;
}

.coal, .navy, .ayu {
    --links: #a99cf5;
    --sidebar-active: #a99cf5;
    --quote-bg: #1d1b29;
    --quote-border: #2c2940;
    --blockquote-note-color: #a99cf5;
    --blockquote-tip-color: #4cc38a;
    --blockquote-warning-color: #e2a33a;
    --cw-figure-border: #2a2a31;
    --cw-caption: #a3a3ad;
    --cw-kbd-bg: #23232a;
}

:root {
    --content-max-width: 820px;
}

.content {
    font-size: 1.6rem;
    line-height: 1.7;
}

.content h1 {
    font-size: 2.6em;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4em;
}

.content h2 {
    margin-top: 2em;
    padding-top: 0.6em;
    border-top: 1px solid var(--cw-figure-border);
    font-weight: 650;
}

.content h3 {
    font-weight: 600;
}

/* The first paragraph under a page title reads as its summary. */
.content h1 + p {
    font-size: 1.15em;
    color: var(--cw-caption);
}

/* Figures: an image alone in its paragraph, with an italic caption on the next line. */
.content p > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.6em auto 0.6em;
    border: 1px solid var(--cw-figure-border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(23, 23, 27, 0.08);
}

/* Diagrams have no frame: they are drawn on the page. */
.content p > img[src*="/diagrams/"] {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.content p:has(> img) > em {
    display: block;
    text-align: center;
    font-size: 0.88em;
    color: var(--cw-caption);
    margin-bottom: 1.6em;
}

/* Numbered steps breathe a little. */
.content ol > li {
    margin: 0.35em 0;
}

/* Keys and short code. */
.content code {
    background: var(--cw-kbd-bg);
    border-radius: 5px;
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}

.content pre > code {
    padding: 1em 1.2em;
    border-radius: 8px;
}

/* Tables: room to read. */
.content table {
    border-collapse: collapse;
    margin: 1.4em 0;
}

.content table th,
.content table td {
    padding: 0.55em 0.9em;
}

/* Callout boxes (> [!NOTE], > [!TIP], > [!WARNING]). */
.content .blockquote-tag {
    border-radius: 8px;
    padding: 0.8em 1.1em;
}

.content blockquote:not(.blockquote-tag) {
    border-radius: 8px;
    border-left: 4px solid var(--links);
}

/* The menu bar title in the accent. */
.menu-title {
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* Part titles in the sidebar. */
.sidebar .part-title {
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    opacity: 0.75;
    margin-top: 1.4em;
}