:root {
    --G0: rgb(255, 255, 255);
    --G1: rgb(245, 245, 245);
    --G2: rgb(230, 230, 230);
    --G3: rgb(210, 210, 210);
    --G5: rgb(70, 70, 70);
    --G6: rgb(50, 50, 50);
    --G7: rgb(20, 20, 20);
    --theme-bg-color: var(--G2);
    --card-color: var(--G1);
    --border-color: var(--G3);
    --text-color: var(--G7);
    --link-color: rgb(0, 120, 212);
}

/* Dark mode overrides */
.dark {
    --theme-bg-color: var(--G6);
    --card-color: var(--G5);
    --border-color: var(--G2);
    --text-color: var(--G1);
}

html, body {
    background-color: var(--theme-bg-color);
    color: var(--text-color);
}

/* HEADER */
.fac-header {
    border-bottom: 1px solid var(--border-color);
}

/* PUBLIC LAYOUT */
.fac-public-layout {
    background-color: var(--theme-bg-color);
    color: var(--text-color);
    min-height: 100vh;
}

.fac-public-layout .fac-card {
    background-color: var(--card-color);
}

/* MAIN LAYOUT */
.fac-main-layout .body-content {
    background-color: var(--G0);
    color: var(--text-color);
}

.fac-main-layout .navmenu {
    background-color: var(--neutral-fill-stealth-rest);
}

/* USER TOP NAV */
.usertopnav a {
    color: var(--theme-link-color);
    border-bottom: 5px solid rgba(0,0,0,0);
}

.usertopnav a:hover,
.usertopnav a.current-link {
    border-color: var(--link-color);
}

/* PROGRESS OVERLAY */
.fluent-overlay,
.progress-overlay {
    background-color: rgba(127, 127, 127, 0.5);
}

.progress-overlay .progress-card {
    background-color: var(--card-color);
}

/* LOG FILES PAGE */
.log-files-page .log-list {
    border-top: 1px solid var(--theme-td-border-color);
}

.log-files-page .file-size {
    color: var(--g-green);
}

.log-files-page .list-item {
    border-bottom: 1px solid var(--theme-td-border-color);
    color: var(--theme-text-color);
}

.log-files-page .list-item:hover {
    background-color: var(--theme-bg-color);
}

/* debug */
.line-debug {
    color: cornflowerblue;
}

.darkmode + .main-layout .line-debug {
    color: rgb(96, 175, 255);
}

/* error */
.line-error {
    color: orangered;
}

.darkmode + .main-layout .line-error {
    color: red;
}

/* warn */
.line-warn {
    color: darkorange;
}

.darkmode + .main-layout .line-warn {
    color: yellow;
}

/* info */
.line-info {
    color: slategray;
}

.darkmode + .main-layout .line-info {
    color: white;
}