/* ===========================================================================
 * FONTS: every candidate is loaded, and each role takes one of them. To swap,
 * turn the active `--font-*` line into a `---font-*` line, which is an
 * unused property, and the other way around. Drop the imports of fonts that
 * lose, as each one is a request.
 * =========================================================================== */

/* Variable-width. */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

/* Fixed-width. */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    /* Times, as the early web's default. */
    --font-text: 'Tinos', 'Times New Roman', serif;
    --font-text: 'Libre Baskerville', 'Times New Roman', serif;
    ---font-text: 'Arimo', Arial, sans-serif;

    --font-header: var(--font-text);
    --font-header: 'Tinos', 'Times New Roman', serif;
    ---font-header: 'Silkscreen', sans-serif;

    /* VT323 runs small, so it takes a larger size. */
    --font-code: 'VT323', monospace;
    ---font-size-code: 1.25em;
    --font-code: 'IBM Plex Mono', monospace;
    ---font-code: 'Courier Prime', 'Courier New', monospace;
    ---font-code: 'Space Mono', monospace;
    ---font-size-code: 0.9em;
}

/* ===========================================================================
 * THEME: the light theme is the default, and the dark theme overrides it
 * when the browser reports a dark color-scheme preference.
 *
 * The palette names colors; the themes give them roles; the rules below use
 * only the roles. To tweak a color, change which palette color a role takes.
 * =========================================================================== */

:root {
    color-scheme: light dark;

    /* CGA palette */
    --cga-black: #000000;
    --cga-blue: #0000aa;
    --cga-green: #00aa00;
    --cga-cyan: #00aaaa;
    --cga-red: #aa0000;
    --cga-magenta: #aa00aa;
    --cga-brown: #aa5500;
    --cga-light-gray: #aaaaaa;
    --cga-dark-gray: #555555;
    --cga-light-blue: #5555ff;
    --cga-light-green: #55ff55;
    --cga-light-cyan: #55ffff;
    --cga-light-red: #ff5555;
    --cga-light-magenta: #ff55ff;
    --cga-yellow: #ffff55;
    --cga-white: #ffffff;
}

/* DARK THEME */
:root {
    --bg: var(--cga-black);
    --fg: var(--cga-light-gray);
    --header: var(--cga-light-cyan);
    --muted: var(--cga-cyan);
    --accent: var(--cga-yellow);
    --accent-2: var(--cga-light-magenta);
    --rule: var(--cga-cyan);
    --link: var(--cga-light-cyan);
    --link-visited: var(--cga-cyan);
    --code-bg: var(--cga-blue);
    --code-fg: var(--cga-white);
    --code-inline-bg: var(--cga-black);
    --code-inline-fg: var(--cga-white);

    --syn-keyword: var(--cga-light-magenta);
    --syn-binding-modifier: var(--cga-light-red);
    --syn-item-keyword: var(--cga-light-magenta);
    --syn-control-flow: var(--cga-yellow);
    --syn-type-name: var(--cga-light-cyan);
    --syn-string: var(--cga-yellow);
    --syn-number: var(--cga-light-green);
    --syn-boolean: var(--cga-light-green);
    --syn-variant: var(--cga-light-red);
    --syn-comment: var(--cga-light-gray);
    --syn-function: var(--cga-light-cyan);
    --syn-brace: var(--cga-yellow);
    --syn-op-cmp: var(--cga-light-red);
    --syn-op-result: var(--cga-yellow);
    --syn-op-option: var(--cga-light-magenta);
    --syn-op-clone: var(--cga-light-cyan);
    --syn-op-arith: var(--cga-white);
    --syn-type-colon: var(--cga-light-red);
    --syn-type-hint-slash: var(--cga-light-cyan);
    --syn-punctuation: var(--cga-light-gray);
}

/* LIGHT THEME */
@media (prefers-color-scheme: light) {
    :root {
        --bg: var(--cga-white);
        --fg: var(--cga-black);
        --header: var(--cga-black);
        --muted: var(--cga-dark-gray);
        --accent: var(--cga-red);
        --accent-2: var(--cga-magenta);
        --rule: var(--cga-dark-gray);
        --link: var(--cga-blue);
        --link-visited: var(--cga-magenta);
        --code-bg: var(--cga-blue);
        --code-fg: var(--cga-white);
        --code-inline-bg: var(--cga-white);
        --code-inline-fg: var(--cga-blue);

        --syn-keyword: var(--cga-light-magenta);
        --syn-binding-modifier: var(--cga-light-red);
        --syn-item-keyword: var(--cga-light-magenta);
        --syn-control-flow: var(--cga-yellow);
        --syn-type-name: var(--cga-light-cyan);
        --syn-string: var(--cga-yellow);
        --syn-number: var(--cga-light-green);
        --syn-boolean: var(--cga-light-green);
        --syn-variant: var(--cga-light-red);
        --syn-comment: var(--cga-light-gray);
        --syn-function: var(--cga-light-cyan);
        --syn-brace: var(--cga-yellow);
        --syn-op-cmp: var(--cga-light-red);
        --syn-op-result: var(--cga-yellow);
        --syn-op-option: var(--cga-light-magenta);
        --syn-op-clone: var(--cga-light-cyan);
        --syn-op-arith: var(--cga-white);
        --syn-type-colon: var(--cga-light-red);
        --syn-type-hint-slash: var(--cga-light-cyan);
        --syn-punctuation: var(--cga-light-gray);
    }
}

.site-datalove {
    --site-color: var(--accent);
}

.site-rustmax {
    --site-color: var(--accent-2);
}

html {
    max-width: 60rem;
    margin: 1rem;
}

body {
    max-width: 44rem;
    margin: 1rem auto 1rem auto;
    font-family: var(--font-text);
    line-height: 1.4;
    background: var(--bg);
    color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
    color: var(--header);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

hr {
    border: none;
    border-top: 2px solid var(--rule);
}

code, pre {
    font-family: var(--font-code);
    font-size: var(--font-size-code);
}

code {
    background: var(--code-inline-bg);
    color: var(--code-inline-fg);
    padding: 0 0.2em;
    /* So a larger code font does not spread the lines of a paragraph. */
    line-height: 1;
}

pre {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 0.5em 1em;
    overflow-x: auto;
}

pre code {
    background: var(--code-bg);
    color: var(--code-fg);
    font-size: 1em;
    padding: 0;
}

/* Syntax highlighting, from Prism, with the token rules taken from Datalove. */
.token.keyword { color: var(--syn-keyword); }
.token.binding-modifier { color: var(--syn-binding-modifier); }
.token.item-keyword { color: var(--syn-item-keyword); }
.token.control-flow { color: var(--syn-control-flow); }
.token.type-name { color: var(--syn-type-name); }
.token.string { color: var(--syn-string); }
.token.number { color: var(--syn-number); }
.token.boolean { color: var(--syn-boolean); }
.token.variant { color: var(--syn-variant); }
.token.comment { color: var(--syn-comment); font-style: italic; }
.token.function { color: var(--syn-function); }
.token.brace-curly,
.token.brace-paren,
.token.brace-angle,
.token.brace-square,
.token.brace-table,
.token.brace-tensor,
.token.brace-map,
.token.brace-set {
    color: var(--syn-brace);
    opacity: 0.8;
}
.token.op-cmp { color: var(--syn-op-cmp); }
.token.op-result { color: var(--syn-op-result); }
.token.op-option { color: var(--syn-op-option); }
.token.op-clone { color: var(--syn-op-clone); }
.token.op-arith { color: var(--syn-op-arith); }
.token.type-colon { color: var(--syn-type-colon); }
.token.type-hint-slash { color: var(--syn-type-hint-slash); }
.token.punctuation { color: var(--syn-punctuation); }
/* Tokens from Prism's own grammars, such as Rust. */
.token.char { color: var(--syn-string); }
.token.class-name { color: var(--syn-type-name); }
.token.macro { color: var(--syn-function); }
.token.attribute { color: var(--syn-variant); }
.token.lifetime-annotation { color: var(--syn-binding-modifier); }
.token.constant { color: var(--syn-number); }
.token.operator { color: var(--syn-op-arith); }

#navbar ul {
    list-style: none;
    padding: 0;
}

.post-meta {
    color: var(--muted);
}

.post-meta > * + * {
    margin-left: 0.5em;
}

.post-site {
    font-weight: bold;
    color: var(--site-color, --accent);
}

a.post-site:visited {
    color: var(--site-color, --accent);
}

.recent-posts ul {
    list-style: none;
    padding: 0;
}

.recent-posts li > * + * {
    margin-left: 0.5em;
}

.recent-posts .post-date {
    font-family: var(--font-code);
    font-size: var(--font-size-code);
}

.recent-posts .post-date,
.recent-posts .post-category {
    color: var(--muted);
}