/*
  Ecological Intentionality
  Obsidian Publish theme
  ecologicalintentionality.org
*/

/* ---------------------------------------------------------
   COLOR SYSTEM
   --------------------------------------------------------- */

.theme-light {
  --background-primary: #f7f1e4;
  --background-secondary: #f0e7d5;
  --background-primary-alt: #f3ead9;

  --text-normal: #302e26;
  --text-muted: #716b5d;
  --text-faint: #999181;

  --text-accent: #52582d;
  --text-accent-hover: #373c1d;
  --interactive-accent: #52582d;

  --link-color: #52582d;
  --link-color-hover: #373c1d;

  --divider-color: #d9cfbb;
  --background-modifier-border: #d9cfbb;
}

.theme-dark {
  --background-primary: #191b16;
  --background-secondary: #20231b;
  --background-primary-alt: #1e211a;

  --text-normal: #e5dfd0;
  --text-muted: #aaa392;
  --text-faint: #7f796d;

  --text-accent: #adb77a;
  --text-accent-hover: #ccd59c;
  --interactive-accent: #adb77a;

  --link-color: #adb77a;
  --link-color-hover: #ccd59c;

  --divider-color: #383c30;
  --background-modifier-border: #383c30;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.markdown-rendered,
.markdown-preview-view {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-normal);
}


/* Interface remains sans-serif */

.site-body-left-column,
.site-body-right-column,
.site-header {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text-normal);
  letter-spacing: -0.02em;
}

.markdown-rendered h1 {
  font-size: 2.15rem;
  line-height: 1.1;
  font-weight: 650;
  margin-bottom: 1.35rem;
}

.markdown-rendered h2 {
  font-size: 1.55rem;
  font-weight: 650;
  margin-top: 2.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--divider-color);
}

.markdown-rendered h3 {
  font-size: 1.2rem;
  font-weight: 650;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.markdown-rendered a,
.markdown-rendered .internal-link,
.markdown-rendered .external-link {
  color: var(--text-accent);
  text-decoration-color: color-mix(
    in srgb,
    var(--text-accent) 45%,
    transparent
  );
  text-underline-offset: 0.15em;
}

.markdown-rendered a:hover,
.markdown-rendered .internal-link:hover,
.markdown-rendered .external-link:hover {
  color: var(--text-accent-hover);
  text-decoration-color: var(--text-accent-hover);
}


/* ---------------------------------------------------------
   EMPHASIS + QUOTATIONS
   --------------------------------------------------------- */

.markdown-rendered em {
  color: var(--text-muted);
}

.markdown-rendered strong {
  color: var(--text-normal);
}

.markdown-rendered blockquote {
  border-left: 3px solid var(--text-accent);
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--text-muted);
  font-style: italic;
}


/* ---------------------------------------------------------
   LEFT NAVIGATION
   --------------------------------------------------------- */

.site-body-left-column,
.site-body-left-column:before {
  background: var(--background-secondary);
}

.site-body-left-column {
  border-right: 1px solid var(--divider-color);
}

.site-body-left-column-site-name {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-normal);
}

.tree-item-self {
  color: var(--text-muted);
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.tree-item-self:hover {
  color: var(--text-accent);
  background: transparent;
}

.tree-item-self.mod-active {
  color: var(--text-accent);
  background: transparent;
  font-weight: 600;
}


/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.search-view-container input,
.site-body-left-column .search-input-container input {
  background: var(--background-primary);
  border: 1px solid var(--divider-color);
  border-radius: 7px;
}

.search-view-container input:focus,
.site-body-left-column .search-input-container input:focus {
  border-color: var(--text-accent);
  box-shadow: none;
}


/* ---------------------------------------------------------
   RIGHT COLUMN / GRAPH
   --------------------------------------------------------- */

.site-body-right-column {
  color: var(--text-muted);
}

.graph-view-outer {
  border: 1px solid var(--divider-color);
  border-radius: 10px;
  opacity: 0.92;
}

.graph-view-outer .published-section-header,
.site-body-right-column .published-section-header {
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  font-weight: 600;
}


/* ---------------------------------------------------------
   CONTENT + SPACING
   --------------------------------------------------------- */

.site-body-center-column {
  background: var(--background-primary);
}

.markdown-rendered p {
  margin-bottom: 1.15em;
}

.markdown-rendered ul,
.markdown-rendered ol {
  line-height: 1.65;
}


/* Intro/tagline treatment */

.markdown-rendered > p:first-of-type em {
  display: block;
  color: var(--text-muted);
  font-size: 1.03rem;
  line-height: 1.5;
  margin-bottom: 1.7rem;
}


/* ---------------------------------------------------------
   HORIZONTAL RULES
   --------------------------------------------------------- */

.markdown-rendered hr {
  border: 0;
  border-top: 1px solid var(--divider-color);
  margin: 2.5rem 0;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .markdown-rendered,
  .markdown-preview-view {
    font-size: 1rem;
    line-height: 1.65;
  }

  .markdown-rendered h1 {
    font-size: 1.9rem;
  }

  .markdown-rendered h2 {
    font-size: 1.4rem;
  }
}