body,
html,
#app {
    margin: 0;
    height: 100%;
}

#app {
    font-family: 'Roboto', sans-serif;
    --color-foreground: black;
    --color-background: white;
    --color-accent: #525252;
    --color-highlight-background: var(--color-foreground);
    --color-highlight-foreground: var(--color-background);
    --color-text-default: var(--color-foreground);
    --color-text-error: hsl(6 73% 41% / 1);

    --color-accent-hue-1: #bad0f0;

    color: var(--color-text-default);
    background: var(--color-background);

    margin: 0;
    padding: 0;
    display: grid;
}




/*
ToDo. try this black white gray scheme
Hex	RGB
#e8e8e8	(232,232,232)
#b7b7b7	(183,183,183)
#8c8c8c	(140,140,140)
#525252	(82,82,82)
#000000	(0,0,0)
*/


@media (prefers-color-scheme: dark) {
    body {
        background: black;
    }

    #app {
        --color-foreground: white;
        --color-background: black;
        --color-accent-hue-1: #47688c;
    }

}