/* Purpose-built dark theme: mirror of light without invert hacks */

:root {
  --bg: #111218;
  --panel: #181a22;
  --panel-strong: #202433;
  --text: #f2f4f8;
  --muted: #c7cbd6;
  --border: #2c3140;
  --accent: #8ecbff;
  --accent-strong: #5fb1ff;
  --shadow: rgba(0, 0, 0, 0.45);
}

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

body {
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-strong);
}

.navbar,
.card,
.system7-desktop-footer,
.btn,
.badge,
.tag-badge {
  background-color: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 10px var(--shadow);
}

.navbar,
.navbar-light,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  background-color: var(--panel-strong) !important;
  color: var(--text) !important;
}

/* Override Bootstrap bg-light on navbar */
.navbar.bg-light,
.bg-light {
  background-color: var(--panel-strong) !important;
  color: var(--text) !important;
}

.navbar-brand img {
  filter: invert(1) brightness(1.2) saturate(0) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--accent) !important;
}

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

.card-body {
  background: var(--panel);
  color: var(--text);
}

.dropdown-divider,
hr {
  border-top: 1px solid var(--border);
  color: var(--border);
}

.bio,
.serif,
.heading,
.name,
.name b,
.subheading,
.card-title,
.card-text,
.card-date {
  color: var(--text) !important;
}

/* Force all headings to light text */
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* Hero tagline text on home */
.bio.lh-base.fs-1.serif + p,
.bio.lh-base.fs-1.serif + p + p {
  color: var(--text);
}

/* Hero title line */
.name.display-1 {
  color: var(--text) !important;
}

.btn-outline-dark,
.btn-outline-primary,
.btn-outline-secondary {
  color: var(--text);
  border-color: var(--border);
}
.btn-outline-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--panel-strong);
  border-color: var(--accent);
  color: var(--text);
}

/* Filters/buttons on zettels page */
.button {
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--border);
}
.button.is-checked,
.btn-check:checked + .button {
  background: var(--accent);
  color: #0b1020;
  border-color: var(--accent);
}

/* Status badges */
.tag-badge {
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Footer text */
.desktop-icon,
.desktop-file {
  color: var(--text);
}
.system7-desktop-footer {
  /* Keep the classic light-mode footer colors even in dark mode */
  background: #c0c0c0 !important;
  border-top: 2px solid black;
  border-bottom: 1px solid #999;
  color: black !important;
  box-shadow: none;
}
.desktop-icon,
.desktop-file {
  color: black !important;
}

/* Override desktop bar to keep light-mode styling in dark mode */
.desktop-bar {
  background: #c0c0c0 !important;
  border-top: 2px solid black !important;
  border-bottom: 1px solid #999 !important;
  box-shadow: none !important;
}
.desktop-bar * {
  color: black !important;
}

/* Avoid inverting media */
img, video {
  filter: none !important;
}

/* Mermaid and code blocks */
pre, code {
  background: var(--panel-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}