:root {
  --site-bg-top: #f8fafc;
  --site-bg-bottom: #edf3fa;
  --surface: #ffffff;
  --ink: #0a2540;
  --muted: #5b6b7c;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --border: #dbe4f0;
  --radius: 14px;

  /* Obsidian Publish accent tokens (prevents default purple UI bits). */
  --text-accent: #2563eb;
  --text-accent-hover: #1d4ed8;
  --interactive-accent: #2563eb;
  --interactive-accent-hover: #1d4ed8;
  --nav-item-color-active: #2563eb;
  --nav-item-border-color-active: #2563eb;
  --link-color: #2563eb;
  --link-color-hover: #1d4ed8;
  --link-external-color: #2563eb;
  --link-external-color-hover: #1d4ed8;
  --link-unresolved-color: #2563eb;
}

body {
  background:
    radial-gradient(1200px 500px at 80% -10%, #e6f4ff 0%, transparent 60%),
    linear-gradient(180deg, var(--site-bg-top), var(--site-bg-bottom));
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.markdown-preview-view,
.site-body-center-column,
.publish-renderer {
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Keep three-column layout from overlapping content. */
.site-body-center-column {
  flex: 1 1 760px;
  min-width: 0;
  width: 100%;
  max-width: 1080px;
}

.site-body-right-column {
  position: relative !important;
  top: auto !important;
  flex: 0 0 280px;
  width: 280px;
  min-width: 240px;
  max-width: 300px;
  align-self: flex-start;
}

.site-body-left-column {
  flex: 0 0 clamp(240px, 22vw, 320px);
  width: clamp(240px, 22vw, 320px);
  max-width: 320px;
}

.site-body-right-column [class*="outline"],
.site-body-right-column [class*="toc"] {
  position: static !important;
  top: auto !important;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-top: 0.3em;
  margin-bottom: 0.35em;
}

h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  margin-top: 1.8em;
  padding-top: 0.2em;
  border-top: 1px solid var(--border);
}

a,
.external-link {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.08em;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

a:visited,
.external-link:visited {
  color: var(--accent);
}

a:hover,
.external-link:hover {
  color: var(--accent-2);
  text-decoration-color: currentColor;
}

/* Force identical colors for internal/external links across markdown + backlinks. */
.markdown-rendered a,
.markdown-rendered .internal-link,
.markdown-rendered .external-link,
.metadata-property-value .internal-link,
.backlinks .internal-link {
  color: var(--accent) !important;
}

.markdown-rendered a:visited,
.markdown-rendered .internal-link:visited,
.markdown-rendered .external-link:visited,
.metadata-property-value .internal-link:visited,
.backlinks .internal-link:visited {
  color: var(--accent) !important;
}

.markdown-rendered a:hover,
.markdown-rendered .internal-link:hover,
.markdown-rendered .external-link:hover,
.metadata-property-value .internal-link:hover,
.backlinks .internal-link:hover {
  color: var(--accent-2) !important;
}

img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

ul,
ol {
  padding-left: 1.3em;
}

li {
  margin: 0.4em 0;
}

blockquote,
.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.markdown-preview-view blockquote {
  padding: 0.7em 0.9em;
}

.site-body-left-column,
.site-body-right-column {
  background: color-mix(in srgb, var(--site-bg-top) 72%, white);
  border-right: 1px solid var(--border);
}

/* Keep site title/header links neutral instead of accent-colored. */
.site-body-left-column-site-name,
.site-header-text,
.site-header-logo,
.site-body-left-column-site-logo {
  color: var(--ink) !important;
  text-decoration: none !important;
}

.nav-file-title,
.tree-item-inner,
.search-result-file-title,
.search-result-file-match {
  border-radius: 8px;
}

.nav-file-title:hover,
.tree-item-inner:hover {
  background: color-mix(in srgb, var(--accent) 8%, white);
}

@media (max-width: 900px) {
  .site-body-center-column {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
}

/* Hide right outline on medium desktop sizes to prevent crowding. */
@media (max-width: 1900px) {
  .site-body-right-column {
    display: none;
  }

  .site-body-center-column {
    max-width: 1180px;
  }
}

@media (max-width: 1280px) {
  .site-body-left-column {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
  }
}