/*
Media queries cannot have variables, so here are media queries you can copy-paste as necessary:

$breakpoint-not-small: screen and (min-width: 35em)
$breakpoint-medium: screen and (min-width: 35em) and (max-width: 60em)
$breakpoint-large: screen and (min-width: 60em)
*/

@import "tachyons-vars.css";

:root {
    --background-color: white;
    --color: black;
    --link-color: #cc3b95;

    /* Default theme colors in case the project.css is busted */
    --theme-color: #666;
    --theme-color-dim: #aaa;
    --theme-color-dimmer: #bbb;
    --theme-color-dimmest: #ccc;

    --theme-color-dark: #666;
    --theme-color-light: #666;

    --main-background-color: #f8f8f8;
    --main-background-color-transparent: rgba(#f8f8f8, 0);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #202020;
        --color: #eee;
        --link-color: #cc3b95;

        --theme-color: #666;
        --theme-color-dim: #444;
        --theme-color-dimmer: #383838;
        --theme-color-dimmest: #333;

        --theme-color-dark: #666;
        --theme-color-light: #666;

        --main-background-color: #202020;
        --main-background-color-transparent: rgba(#202020, 0);
    }
}