/* default is 'light' */

html {
    color-scheme: light;
    --main-bg-color: #ffffff;
    --messages-bg-color: #fff;
    --events-bg-color: #333;
    --link: blue;
    --link-hover: #000;
    --link-active: #000;
    --text-primary: #000;
    --text-secondary: rgba(0, 0, 0, 0.87);
    --text-disabled: rgba(0, 0, 0, 0.38);
    --text-light: rgba(0, 0, 0, 0.33);
    --header-bg: rgba(0, 0, 0, 0.1);
    --border-light: #ddd;
    --border-colored: #afafb7;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --main-bg-color: #272729;
    --messages-bg-color: #000;
    --events-bg-color: #222222;
    --link: #bdb0ff;
    --link-hover: #ffffff;
    --link-active: #ffffff;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-disabled: rgba(255, 255, 255, 0.66);
    --text-light: rgba(255, 255, 255, 0.33);
    --header-bg: #000000;
}

body {
    color: var(--text-primary);
}

/*
html {
    background-color: var(--main-bg-color); !* because #root element may become larger than body element *!
}
*/

.text-secondary {
    color: var(--text-secondary);
}

.text-light {
    color: var(--text-light);
}

.border-top-colored {
    border-top: 1px solid var(--border-colored);
}

a {
    text-decoration: none;
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

a.active {
    color: var(--link-active);
}

header {
    /*background-color: var(--header-bg);*/
    /*border-bottom: 1px solid var(--border-colored);*/
}

/*
main {
    background-color: var(--main-bg-color);
}
*/

/*
.messages {
    background-color: var(--messages-bg-color);
}
*/

.entry-msg-out {
    /*background-color: #eaebf3;*/
    color: blue;
}

.entry-error {
    color: red;
}
.events {
    background-color: var(--events-bg-color);
}

h3 {
    color: var(--text-secondary);
    border-bottom: 1px solid #aaa;
}