/* ============================================================
   Overnotes — publish.css
   A quiet, editorial look for Obsidian Publish.
   Place this file in the ROOT of the vault (it won't appear in
   the file explorer by default; edit it externally, then push it
   from the "Publish changes" dialog). Tweak freely.
   ============================================================ */

/* --- Optional webfonts. Delete this line to fall back to the
   system stacks defined below (faster, no external request). --- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Inter:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------
   1. Palette & type tokens
   --------------------------------------------------------------- */
body {
  /* Colour — warm paper, ink text, one restrained accent */
  --background-primary:   #fbfaf7;
  --background-secondary: #f3f1ea;
  --text-normal:          #23201b;
  --text-muted:           #6b6459;
  --text-faint:           #9a9184;
  --text-accent:          #3c4a6b;   /* muted ink-blue for external links */
  --text-accent-hover:    #27324b;
  --interactive-accent:   #3c4a6b;
  --accent-warm:          #cc6a1e;   /* warm accent — italics & note links */
  --accent-warm-hover:    #a85413;
  --background-modifier-border: #e7e3d9;

  /* Callout hues — muted, earthy, drawn from the same family.
     Each is an "r, g, b" triple used by the rules in section 5. */
  --co-stone:  122, 112, 96;   /* warm grey  — quotes            */
  --co-sage:    79, 122, 113;  /* sage-teal  — note / info       */
  --co-olive:  106, 133, 90;   /* muted green — tip / success    */
  --co-terra:  204, 106, 30;   /* warm accent — important/warning */

  /* Type */
  --font-text: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-interface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-monospace: 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  --font-text-size: 20px;
  --line-height-normal: 1.7;
  --line-width: 40rem;

  font-family: var(--font-interface);
  background: var(--background-primary);
  color: var(--text-normal);
}

/* ---------------------------------------------------------------
   2. Reading column
   --------------------------------------------------------------- */
.markdown-preview-view,
.published-container .markdown-preview-sizer {
  font-family: var(--font-text);
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  color: var(--text-normal);
}

.markdown-preview-sizer {
  max-width: var(--line-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 6rem;
}

/* ---------------------------------------------------------------
   3. Headings — clean, no accent bar
   --------------------------------------------------------------- */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-normal);
}

.markdown-preview-view h1 { font-size: 2.35em; margin: 0 0 0.6em; }
.markdown-preview-view h2 { font-size: 1.5em;  margin: 2em 0 0.5em; }
.markdown-preview-view h3 { font-size: 1.2em;  margin: 1.6em 0 0.4em; }
.markdown-preview-view h4 { font-size: 1.05em; margin: 1.4em 0 0.3em; }

/* Italic / emphasis picks up the warm accent */
.markdown-preview-view em,
.markdown-preview-view i {
  color: var(--accent-warm);
  font-style: italic;
}

/* ---------------------------------------------------------------
   4. Links
   External: ink-blue. Internal (note links): warm accent,
   underlined, upright — never italic.
   --------------------------------------------------------------- */
.markdown-preview-view a {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(60, 74, 107, 0.28);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.markdown-preview-view a:hover {
  color: var(--text-accent-hover);
  border-bottom-color: var(--text-accent-hover);
}

.markdown-preview-view .internal-link {
  color: var(--accent-warm);
  font-style: normal;
  text-decoration: none;
  border-bottom: 1px solid rgba(204, 106, 30, 0.45);
}
.markdown-preview-view .internal-link:hover {
  color: var(--accent-warm-hover);
  border-bottom-color: var(--accent-warm-hover);
}
.markdown-preview-view .internal-link.is-unresolved {
  color: var(--text-faint);
  border-bottom-style: dotted;
}

/* ---------------------------------------------------------------
   5. Callouts & blockquotes
   Obsidian derives each callout's title, icon, border and
   background wash from --callout-color (an "r, g, b" triple),
   so setting that per type is all we need.
   --------------------------------------------------------------- */
.markdown-preview-view .callout {
  --callout-radius: 8px;
  border-radius: 8px;
  border: 1px solid rgba(var(--callout-color, var(--co-stone)), 0.30);
  background-color: rgba(var(--callout-color, var(--co-stone)), 0.07);
}

/* Quote / cite — warm stone */
.markdown-preview-view .callout[data-callout="quote"],
.markdown-preview-view .callout[data-callout="cite"] {
  --callout-color: var(--co-stone);
}

/* Note / info / abstract — calm sage-teal (was default blue) */
.markdown-preview-view .callout[data-callout="note"],
.markdown-preview-view .callout[data-callout="info"],
.markdown-preview-view .callout[data-callout="abstract"],
.markdown-preview-view .callout[data-callout="summary"] {
  --callout-color: var(--co-sage);
}

/* Tip / hint / success — muted green */
.markdown-preview-view .callout[data-callout="tip"],
.markdown-preview-view .callout[data-callout="hint"],
.markdown-preview-view .callout[data-callout="success"] {
  --callout-color: var(--co-olive);
}

/* Important / warning / attention — the warm accent */
.markdown-preview-view .callout[data-callout="important"],
.markdown-preview-view .callout[data-callout="warning"],
.markdown-preview-view .callout[data-callout="attention"],
.markdown-preview-view .callout[data-callout="danger"] {
  --callout-color: var(--co-terra);
}

/* Plain blockquotes (> ...) keep a light warm rule */
.markdown-preview-view blockquote {
  border-left: 3px solid var(--accent-warm);
  background: var(--background-secondary);
  color: var(--text-muted);
  margin: 1.6em 0;
  padding: 0.6em 1.2em;
  font-style: italic;
}

/* ---------------------------------------------------------------
   6. Sidebar / navigation
   --------------------------------------------------------------- */
.site-body-left-column,
.site-body-left-column .site-body-left-column-inner {
  font-family: var(--font-interface);
  font-size: 15px;
  background: var(--background-secondary);
}
.nav-link, .tree-item-self {
  color: var(--text-muted);
}
.nav-link:hover, .tree-item-self:hover {
  color: var(--accent-warm);
}

.site-name {
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   7. Rules, code, images
   --------------------------------------------------------------- */
.markdown-preview-view hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2.5em 0;
}
.markdown-preview-view code {
  font-family: var(--font-monospace);
  font-size: 0.85em;
  background: var(--background-secondary);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.markdown-preview-view img {
  border-radius: 6px;
  max-width: 100%;
}