/*
  tresscross: minimal slate + forest green theme for Obsidian Publish.
  Same palette in light and dark mode, so the site is always dark.
  Edit the palette block below; everything else reads from it.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400&display=swap');

/* ---------- Palette ---------- */
.theme-dark,
.theme-light {
  --slate:        #2a2f33;   /* page background            */
  --slate-deep:   #24282c;   /* sidebars                   */
  --slate-code:   #212528;   /* code blocks                */
  --slate-line:   #383e43;   /* hairlines                  */
  --ink:          #d6dbdf;   /* body text      (9.7:1)     */
  --ink-muted:    #949da5;   /* secondary text (4.9:1)     */
  --ink-faint:    #737c84;   /* meta / disabled            */
  --forest:       #4f9a5f;   /* accent: markers, borders   */
  --forest-light: #6fae7c;   /* links          (5.2:1)     */
  --forest-deep:  #2e7d46;   /* fills, selection           */

  /* map onto Obsidian's variables */
  color-scheme: dark;
  --background-primary: var(--slate);
  --background-primary-alt: var(--slate-deep);
  --background-secondary: var(--slate);
  --background-secondary-alt: var(--slate-deep);
  --background-modifier-border: var(--slate-line);
  --background-modifier-hover: rgba(255, 255, 255, 0.04);
  --text-normal: var(--ink);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-accent: var(--forest-light);
  --text-accent-hover: var(--ink);
  --text-selection: rgba(46, 125, 70, 0.45);
  --interactive-accent: var(--forest);
  --interactive-accent-hover: var(--forest-light);
  --link-color: var(--forest-light);
  --link-color-hover: var(--ink);
  --link-external-color: var(--forest-light);
  --link-external-color-hover: var(--ink);
  --link-unresolved-color: var(--ink-muted);
  --code-background: var(--slate-code);
  --code-normal: var(--ink);
  --blockquote-border-color: var(--forest);
  --hr-color: var(--slate-line);
  --h1-color: var(--ink);
  --h2-color: var(--ink);
  --h3-color: var(--ink);
  --h4-color: var(--ink);

  /* type */
  --font-text-theme: 'Inter', system-ui, sans-serif;
  --font-interface-theme: 'Inter', system-ui, sans-serif;
  --font-monospace-theme: 'JetBrains Mono', ui-monospace, monospace;
  --font-text-size: 17px;
  --line-height-normal: 1.7;
  --file-line-width: 700px;
  --h1-size: 1.9em;
  --h2-size: 1.35em;
  --h3-size: 1.12em;
  --h4-size: 1em;
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 600;
}

body { background: var(--slate); }

/* ---------- Chrome: flat, no borders ---------- */
.site-header,
.site-body-left-column,
.site-body-right-column,
.published-container {
  background: var(--slate) !important;
  border: none !important;
  box-shadow: none !important;
}
.site-body-left-column,
.site-body-right-column { opacity: 0.85; }
.site-body-left-column:hover,
.site-body-right-column:hover { opacity: 1; transition: opacity .2s; }

.site-header-text { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* nav: muted, green for the current page */
.nav-view-outer .tree-item-self { color: var(--ink-muted); }
.nav-view-outer .tree-item-self:hover { color: var(--ink); background: transparent; }
.nav-view-outer .tree-item-self.mod-active {
  color: var(--forest-light);
  background: transparent;
  box-shadow: inset 2px 0 0 var(--forest);
}

/* ---------- Content ---------- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3 { letter-spacing: -0.015em; margin-top: 2em; }
.markdown-rendered .inline-title,
.markdown-rendered h1:first-child { margin-top: 0; }

.markdown-rendered a { text-decoration: none; border-bottom: 1px solid rgba(111, 174, 124, 0.35); }
.markdown-rendered a:hover { border-bottom-color: var(--ink); }

.markdown-rendered img {
  display: block;
  margin: 1.5em auto;
  border-radius: 4px;
}
.markdown-rendered em:only-child { color: var(--ink-faint); font-size: .9em; } /* image captions */

.markdown-rendered pre {
  border: 1px solid var(--slate-line);
  border-radius: 4px;
  padding: 1em 1.2em;
}
.markdown-rendered :not(pre) > code {
  background: var(--slate-code);
  color: var(--forest-light);
  padding: .1em .35em;
  border-radius: 3px;
  font-size: .88em;
}

.markdown-rendered blockquote {
  border-left: 2px solid var(--forest);
  color: var(--ink-muted);
  padding-left: 1em;
  background: none;
}

.markdown-rendered hr { border: none; border-top: 1px solid var(--slate-line); margin: 3em 0; }

.markdown-rendered table { border-collapse: collapse; font-size: .92em; }
.markdown-rendered th,
.markdown-rendered td { border: none; border-bottom: 1px solid var(--slate-line); padding: .5em .8em; }
.markdown-rendered th { color: var(--ink-muted); font-weight: 600; }

/* callouts: flat, thin green rule */
.callout {
  --callout-color: 79, 154, 95;
  background: var(--slate-deep) !important;
  border: none;
  border-left: 2px solid var(--forest);
  border-radius: 0 4px 4px 0;
}

/* frontmatter properties block: hide on the published page */
.frontmatter-container,
.metadata-container { display: none; }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--slate-line); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }