:root {
    /**
     * Solarized color scheme
     *
     * (c) 2011 Ethan Schoonover
     *
     * MIT licensed
     */
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;

    /* Standardize names for easy dark mode */
    /* --sol-bg: var(--base3); */
    /* --sol-bg-hl: var(--base2); */
    /* --sol-comment: var(--base1); */
    /* --sol-body: var(--base00); */
    /* --sol-emphasis: var(--base01); */
    /* --sol-fg-hl: var(--base01); */
    /*
    Do this later once the site as a whole has dark mode
    @media(prefers-color-scheme: dark) {
    */
        --sol-bg: var(--base03);
        --sol-bg-hl: var(--base02);
        --sol-comment: var(--base01);
        --sol-body: var(--base0);
        --sol-emphasis: var(--base1);
        --sol-fg-hl: var(--base1);
        /*
    }
     */
}

/**
 * hl.js code blocks
 */
code.hljs[data-highlighted] {
    background: var(--sol-bg);
    border-radius: 0.5em;
    border: 1px solid var(--sol-comment);
    color: var(--sol-body);
    line-height: 1.3;
    display: block;
    padding: 1em;
    margin-bottom: 1em;

    &::selection, ::selection {
        background: var(--sol-bg-hl);
        color: var(--sol-fg-hl);
    }

    .hljs-comment { color: var(--sol-comment); }
    .hljs-subst, .hljs-punctuation, .hljs-operator {  color: var(--sol-emphasis); }
    .hljs-operator {
        opacity: 0.7
    }
    .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-tag, .hljs-name, .hljs-deletion {  color: var(--red); }
    .hljs-symbol, .hljs-number, .hljs-link, .hljs-attr, .hljs-variable.constant_, .hljs-literal {  color: var(--orange); }
    .hljs-title, .hljs-class .hljs-title, .hljs-title.class_ {  color: var(--yellow); }
    .hljs-strong {
        font-weight: bold;
        color: var(--yellow);
        /* color: var(--sol-emphasis); */
    }
    .hljs-code, .hljs-addition, .hljs-title.class_.inherited__, .hljs-string {  color: var(--green); }
    .hljs-built_in, .hljs-doctag, .hljs-quote, .hljs-keyword.hljs-atrule, .hljs-regexp {  color: var(--cyan); }
    .hljs-function .hljs-title, .hljs-attribute, .ruby .hljs-property, .hljs-title.function_, .hljs-section {  color: var(--blue); }
    /* .hljs-selector-id, */
    /* .hljs-selector-class, */
    /* .hljs-selector-attr, */
    /* .hljs-selector-pseudo, */
    .hljs-type, .hljs-template-tag, .diff .hljs-meta, .hljs-keyword {  color: var(--violet); }
    .hljs-emphasis {
        color: var(--violet);
        font-style: italic
    }
    /*
    prevent top level .keyword and .string scopes
    from leaking into meta by accident
     */
    .hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string {  color: var(--magenta); }
    /* for v10 compatible themes */
    .hljs-meta .hljs-keyword, .hljs-meta-keyword {
        font-weight: bold
    }
}