@import "/fonts/Archivo.css";
@import "/fonts/ChivoMono.css";
@import "/fonts/Manuale.css";

html {
    --aside-bg: #eef;
    --aside-fg: hsl(200, 70%, 30%);
    --example-bg: #fcfaee;
    --example-fg: #574b0f;
    --highlight-fg: black;
    --highlight-bg: yellow;
    --link-fg: blue;
    --listing-bg: #eee;
    --listing-fg: #333;
    --masthead-color: #eee;
    --masthead-contrast: #789;
    --muted-fg: #333;
    --note-bg: #e9fbe9;
    --note-fg: hsl(120, 70%, 30%);
    --page-color: white;
    --page-contrast: black;
    --visited-fg: purple;
    --warning-color: red;
    --warning-contrast: white;
    --yamanote-color: #9acd32;
    --yamanote-contrast: black;

    --code-font-stack: "Chivo Mono", ui-monospace, "Cascadia Code", monospace;
    /* --code-font-weight: 175; */
    --code-font-weight: inherit;

    --heading-font-stack: Archivo, ui-rounded, system-ui, Arial, sans-serif;
    --heading-font-stretch: 87.5%;
    --heading-font-weight: 625;

    --page-font-stack: Archivo, system-ui, Arial, sans-serif;
    --page-font-weight: 275;

    --serif-font-stack: Manuale, ui-serif, serif;
    --serif-font-weight: 375;

    --brand-color: linear-gradient(90deg, mediumblue 10%, navy 40%, indigo);
    --brand-font-stack: var(--heading-font-stack);
    --brand-font-stretch: var(--heading-font-stretch);
    --brand-font-style: normal;
    --brand-font-weight: var(--heading-font-weight);
}

#masthead.theme-color-bleedthrough {
    --brand-color: var(--masthead-color);
}

@media (prefers-color-scheme: dark) {
    html {
        --aside-bg: #224;
        --aside-fg: #eef;
        --example-bg: #222;
        --example-fg: #fcfaee;
        --link-fg: yellow;
        --listing-bg: #333;
        --listing-fg: #eee;
        --brand-color: linear-gradient(90deg, yellow 10%, gold 40%, goldenrod);
        --masthead-color: #222;
        --masthead-contrast: #789;
        --muted-fg: #ccc;
        --note-bg: #131;
        --note-fg: #afb;
        --page-color: black;
        --page-contrast: white;
        --visited-fg: gold;
    }
}

@media print {
    html {
        --aside-bg: white;
        --aside-fg: black;
        --example-bg: white;
        --example-fg: black;
        --link-fg: black;
        --listing-bg: white;
        --listing-fg: black;
        --masthead-color: white;
        --masthead-contrast: #789;
        --muted-fg: #333;
        --note-bg: white;
        --note-fg: black;
        --page-color: white;
        --page-contrast: black;
        --visited-fg: black;
        --warning-color: white;
        --warning-contrast: black;
    }
}

/* Masthead view transition stuff */

/*
@view-transition { navigation: auto; }
#masthead h1 { view-transition-name: my-name; }
::view-transition-old(my-name),
::view-transition-new(my-name) { animation-delay: 0.005s; }
::view-transition-old(my-name) { animation-name: fade-out, scale-down; }
::view-transition-new(my-name) { animation-name: fade-in, scale-up; }
*/