@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --mg-bg: #242130;
  --mg-bg-soft: #343455;
  --mg-surface: #3c4d81;
  --mg-accent: #6aa5da;
  --mg-accent-2: #7675c3;
  --mg-text: #f9f4ed;
  --mg-muted: #b9bbd3;
  --mg-border: rgba(106, 165, 218, 0.25);
  --mg-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  --mg-font-ui: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mg-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

html[data-bs-theme="dark"] body,
html[data-bs-theme="light"] body {
  background: radial-gradient(circle at top right, #3c4d81 0%, #242130 46%, #1f1c2a 100%);
  color: var(--mg-text);
  font-family: var(--mg-font-ui);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

html[data-bs-theme="dark"] .navbar,
html[data-bs-theme="light"] .navbar,
html[data-bs-theme="dark"] .content,
html[data-bs-theme="light"] .content,
html[data-bs-theme="dark"] .sidetoc,
html[data-bs-theme="light"] .sidetoc,
html[data-bs-theme="dark"] .toc,
html[data-bs-theme="light"] .toc {
  background-color: rgba(36, 33, 48, 0.9);
}

.content,
.article {
  font-family: var(--mg-font-ui);
}

.navbar-brand #logo {
  display: none;
}

.navbar-brand::before {
  content: "MOONGATE";
  margin-right: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

html[data-bs-theme="dark"] .navbar-brand,
html[data-bs-theme="light"] .navbar-brand,
html[data-bs-theme="dark"] a,
html[data-bs-theme="light"] a {
  color: var(--mg-accent);
}

html[data-bs-theme="dark"] a:hover,
html[data-bs-theme="light"] a:hover,
html[data-bs-theme="dark"] a:focus,
html[data-bs-theme="light"] a:focus {
  color: var(--mg-accent-2);
}

html[data-bs-theme="dark"] .toc .nav > li > a,
html[data-bs-theme="light"] .toc .nav > li > a {
  color: var(--mg-muted);
}

html[data-bs-theme="dark"] .toc .nav > li.active > a,
html[data-bs-theme="light"] .toc .nav > li.active > a {
  color: var(--mg-text);
  border-left-color: var(--mg-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mg-font-ui);
  letter-spacing: 0.01em;
  color: var(--mg-text);
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.45rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.6rem;
}

p,
li {
  color: var(--mg-text);
}

small,
.text-muted,
.article-meta {
  color: var(--mg-muted) !important;
}

html[data-bs-theme="dark"] code,
html[data-bs-theme="light"] code,
html[data-bs-theme="dark"] pre,
html[data-bs-theme="light"] pre {
  background-color: rgba(52, 52, 85, 0.65);
  border-color: var(--mg-border);
  font-family: var(--mg-font-mono);
}

code {
  padding: 0.14rem 0.36rem;
  font-size: 0.9em;
}

pre {
  border: 1px solid var(--mg-border);
  border-radius: 6px;
  box-shadow: var(--mg-shadow);
  padding: 0.9rem 1rem;
}

.navbar,
.sidefilter,
.sidetoc,
.toc,
.content {
  border-color: var(--mg-border) !important;
}

.sidetoc .toc,
.toc .nav,
.sideaffix {
  font-size: 0.92rem;
}

.sidetoc .toc a {
  padding-top: 0.26rem;
  padding-bottom: 0.26rem;
}

html[data-bs-theme="dark"] .table > thead > tr > th,
html[data-bs-theme="dark"] .table > tbody > tr > td,
html[data-bs-theme="light"] .table > thead > tr > th,
html[data-bs-theme="light"] .table > tbody > tr > td {
  border-color: var(--mg-border);
}

.table thead th {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn,
.form-control,
.input-group-text {
  font-family: var(--mg-font-ui);
}