:root,
:root[data-theme="light"] {
  --primary: #007F6A;
  --secondary: #0C1219;
  --accent: #00D7B4;
  --primary-fg: #FFFFFF;
  --body-fg: #0C1219;
  --body-bg: #FFFFFF;
  --body-quiet-color: #5C6878;
  --body-medium-color: #3A4656;
  --body-loud-color: #0C1219;
  --header-color: #EAEFF6;
  --header-branding-color: #EAEFF6;
  --header-bg: #0C1219;
  --header-link-color: #EAEFF6;
  --breadcrumbs-fg: #DCE2EA;
  --breadcrumbs-link-fg: #FFFFFF;
  --breadcrumbs-bg: #3A4656;
  --link-fg: #0C1219;
  --link-hover-color: #007F6A;
  --link-selected-fg: #007F6A;
  --hairline-color: #DCE2EA;
  --border-color: #DCE2EA;
  --darkened-bg: #F4F6F9;
  --selected-bg: #DCE2EA;
  --selected-row: #F0FAF8;
  --button-fg: #FFFFFF;
  --button-bg: #007F6A;
  --button-hover-bg: #005C4D;
  --default-button-bg: #0C1219;
  --default-button-hover-bg: #3A4656;
  --close-button-bg: #5C6878;
  --close-button-hover-bg: #3A4656;
  --object-tools-fg: #FFFFFF;
  --object-tools-bg: #3A4656;
  --object-tools-hover-bg: #0C1219;
  --message-success-bg: #F0FAF8;
  --message-warning-bg: #FFF6DF;
  --message-error-bg: #FDECEC;
}

:root[data-theme="dark"] {
  --primary: #00D7B4;
  --secondary: #0C1219;
  --accent: #00D7B4;
  --primary-fg: #04120F;
  --body-fg: #F2F4F5;
  --body-bg: #05080D;
  --body-quiet-color: #B7C2D0;
  --body-medium-color: #B7C2D0;
  --body-loud-color: #FFFFFF;
  --header-color: #EAEFF6;
  --header-branding-color: #EAEFF6;
  --header-bg: #080D14;
  --header-link-color: #EAEFF6;
  --breadcrumbs-fg: #B7C2D0;
  --breadcrumbs-link-fg: #F2F4F5;
  --breadcrumbs-bg: #18212D;
  --link-fg: #F2F4F5;
  --link-hover-color: #00D7B4;
  --link-selected-fg: #00D7B4;
  --hairline-color: #243040;
  --border-color: #243040;
  --darkened-bg: #0C1219;
  --selected-bg: #243040;
  --selected-row: #0F2A26;
  --button-fg: #04120F;
  --button-bg: #00D7B4;
  --button-hover-bg: #00A98D;
  --default-button-bg: #00D7B4;
  --default-button-hover-bg: #00A98D;
  --close-button-bg: #7C8A9B;
  --close-button-hover-bg: #B7C2D0;
  --object-tools-fg: #04120F;
  --object-tools-bg: #B7C2D0;
  --object-tools-hover-bg: #00D7B4;
  --message-success-bg: #0F2A26;
  --message-warning-bg: #2E2610;
  --message-error-bg: #3A1414;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #00D7B4;
    --secondary: #0C1219;
    --accent: #00D7B4;
    --primary-fg: #04120F;
    --body-fg: #F2F4F5;
    --body-bg: #05080D;
    --body-quiet-color: #B7C2D0;
    --body-medium-color: #B7C2D0;
    --body-loud-color: #FFFFFF;
    --header-color: #EAEFF6;
    --header-branding-color: #EAEFF6;
    --header-bg: #080D14;
    --header-link-color: #EAEFF6;
    --breadcrumbs-fg: #B7C2D0;
    --breadcrumbs-link-fg: #F2F4F5;
    --breadcrumbs-bg: #18212D;
    --link-fg: #F2F4F5;
    --link-hover-color: #00D7B4;
    --link-selected-fg: #00D7B4;
    --hairline-color: #243040;
    --border-color: #243040;
    --darkened-bg: #0C1219;
    --selected-bg: #243040;
    --selected-row: #0F2A26;
    --button-fg: #04120F;
    --button-bg: #00D7B4;
    --button-hover-bg: #00A98D;
    --default-button-bg: #00D7B4;
    --default-button-hover-bg: #00A98D;
    --close-button-bg: #7C8A9B;
    --close-button-hover-bg: #B7C2D0;
    --object-tools-fg: #04120F;
    --object-tools-bg: #B7C2D0;
    --object-tools-hover-bg: #00D7B4;
    --message-success-bg: #0F2A26;
    --message-warning-bg: #2E2610;
    --message-error-bg: #3A1414;
  }
}

.joulud-login-logo {
  text-align: center;
  margin: 0 0 16px;
}

.joulud-login-logo img {
  width: 220px;
  height: auto;
}

.joulud-login-logo .joulud-logo-dark {
  display: none;
}

:root[data-theme="dark"] .joulud-login-logo .joulud-logo-light {
  display: none;
}

:root[data-theme="dark"] .joulud-login-logo .joulud-logo-dark {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .joulud-login-logo .joulud-logo-light {
    display: none;
  }

  :root:not([data-theme="light"]) .joulud-login-logo .joulud-logo-dark {
    display: inline;
  }
}

#content a:link,
#content a:visited,
#nav-sidebar a,
.breadcrumbs a,
#recent-actions-module a {
  font-weight: 500;
}

#content a:hover,
#nav-sidebar a:hover,
.breadcrumbs a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.module caption,
a.section:link,
a.section:visited,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--accent);
}