:root {
    --font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --accent-colour: #ed7d31;
    --accent-colour-highlight: #da671b;

    --accent-colour-fade: rgba(237, 125, 49,.25);
    --accent-colour-fade: color-mix(in srgb, var(var(--accent-colour)) 25%, transparent);

    --secondary-colour: #435569;
    --secondary-colour-highlight: #283646;

    --bg-colour-light: #fff;    
    --fg-colour-light: #000;
    --mid-colour-light: #bbb;    
    --good-shading-light: rgba(0,255,0,0.2);
    --bad-shading-light: rgba(255,0,0,0.2);

    --bg-colour-dark: #222;
    --fg-colour-dark: #bbb;
    --mid-colour-dark: #555;
    --good-shading-dark: rgba(0,120,0,0.4);
    --bad-shading-dark: rgba(120,0,0,0.4);

    --bg-colour: var(--bg-colour-light);
    --fg-colour: var(--fg-colour-light);
    --mid-colour: var(--mid-colour-light);

    --mid-colour-25: var(--mid-colour);
    --mid-colour-25: color-mix(in srgb, var(--mid-colour) 50%, var(--bg-colour));

    --button-fg-colour: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-colour: var(--bg-colour-dark);
        --fg-colour: var(--fg-colour-dark);
        --mid-colour: var(--mid-colour-dark);
        --good-shading: var(--good-shading-dark);
        --bad-shading: var(--bad-shading-dark);
    }
}

html.dark {
    --bg-colour: var(--bg-colour-dark);
    --fg-colour: var(--fg-colour-dark);
    --mid-colour: var(--mid-colour-dark);
    --good-shading: var(--good-shading-dark);
    --bad-shading: var(--bad-shading-dark);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-colour: var(--bg-colour-light);
        --fg-colour: var(--fg-colour-light);
        --mid-colour: var(--mid-colour-light);
        --good-shading: var(--good-shading-light);
        --bad-shading: var(--bad-shading-light);
    }
}

html.light {
    --bg-colour: var(--bg-colour-light);
    --fg-colour: var(--fg-colour-light);
    --mid-colour: var(--mid-colour-light);
    --good-shading: var(--good-shading-light);
    --bad-shading: var(--bad-shading-light);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    background-color: var(--bg-colour);
    color: var(--fg-colour);
}