/*
/ colors
/ ======
/ default colors and extra colors specified here
/ colors yoinked as is from https://gogh-co.github.io/Gogh/
/ maybe some modifications here and there, but otherwise what is named is what is used
*/

:root {
    --pagefind-ui-font: var(--font-family);
    --pagefind-ui-primary: var(--foreground);
    --pagefind-ui-text: var(--foreground);
    --pagefind-ui-background: var(--background);
    --pagefind-ui-border: var(--accent);
    --pagefind-ui-tag: var(--background);
    --site-border: .1rem solid var(--border);

    color-scheme: light dark; /* by default, automatically use light mode */
}

/* Ayu Light */
@media (prefers-color-scheme: light) {
    :root {
        --background: #fafafa;
        --foreground: #575f66;
        --accent: #f2ae49;
        --link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */

        --black: #8A9199;
        --red: #F51818;
        --green: #86B300;
        --yellow: #F2AE49;
        --blue: #399EE6;
        --purple: #A37ACC;
        --cyan: #4CBF99;
        --white: #FAFAFA;

        --dark-black: #575F66;
        --dark-red: #F51818;
        --dark-green: #86B300;
        --dark-yellow: #F2AE49;
        --dark-blue: #399EE6;
        --dark-purple: #A37ACC;
        --dark-cyan: #4CBF99;
        --dark-white: #FAFAFA;

        --border: hsl(from var(--foreground) h s calc(l + 10));
        --hover: hsl(from var(--background) h s calc(l - 20));;
        --shadow: rgba(from var(--foreground) r g b / .8);
        --focused: var(--dark-purple)
    }
}

/* Astrodark */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #1a1d23;
        --foreground: #caccd3;
        --accent: #efbd58;
        --link: var(--accent);

        --black: #576176;
        --red: #FAA5AB;
        --green: #A5CD84;
        --yellow: #EFBD58;
        --blue: #8DC3F1;
        --purple: #DEAEED;
        --cyan: #27FFDF;
        --white: #CACCD3;

        --dark-black: #111317;
        --dark-red: #F8747E;
        --dark-green: #75AD47;
        --dark-yellow: #D09214;
        --dark-blue: #50A4E9;
        --dark-purple: #CC83E3;
        --dark-cyan: #00B298;
        --dark-white: #ADB0BB;

        --border: hsl(from var(--background) h s calc(l + 40));
        --hover: hsl(from var(--background) h s calc(l + 20));;
        --shadow: rgba(from var(--background) r g b / .8);
        --focused: var(--dark-purple)
    }
}