/**
 * Styles for HRT.
 */

html[data-theme="light"] {
    --primary: #00abb5;
    --secondary: #008991;
    --accent: #fff;

    --header-color: var(--body-fg);
    --header-bg: #fff;

    --breadcrumbs-bg: var(--secondary);

    --link-fg: var(--secondary);
    --link-hover-color: var(--primary);
    --link-selected-fg: var(--primary);

    --button-hover-bg: var(--secondary);
    --default-button-hover-bg: var(--primary);
}

html[data-theme="light"] #header {
    --header-link-color: var(--secondary);
}

html[data-theme="light"] #site-name img.dark {
    display: none;
}

html[data-theme="auto"],
html[data-theme="dark"] {
    --primary: #008991;
    --secondary: #00abb5;
    --accent: #fff;

    --header-color: var(--body-fg);
    --header-bg: transparent;
    --header-link-color: var(--body-fg);

    --breadcrumbs-bg: var(--secondary);
    --breadcrumbs-link-fg: #fff;

    --link-fg: var(--secondary);
    --link-hover-color: var(--primary);
    --link-selected-fg: var(--primary);

    --button-hover-bg: var(--secondary);
    --default-button-hover-bg: var(--primary);

    --selected-row: #444;


    /* forces "auto" to act like "dark" - see admin/dark_mode.css */
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
}


html[data-theme="auto"] #site-name img.light,
html[data-theme="dark"] #site-name img.light {
    display: none;
}


#site-name img {
    height: 3rem;
}

.module h2,
.module caption,
.inline-group h2 {
    background-color: var(--secondary);
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: var(--accent);
    text-decoration: underline;
}

html[data-theme="auto"] section.comments .comment-form h4,
html[data-theme="dark"] section.comments .comment-form h4 {
    color: #fff;
}