@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* =============================================================
   WHISKER & WIRE — Obsidian Publish Theme
   Second Self Studios

   Fonts: Cormorant Garamond (display), Source Sans 3 (body)
   Colors: Aged Paper / Ink Black / Garden Green headers /
           Library Teal links / Salvage Brown accents
   ============================================================= */


/* =============================================================
   FONTS & SIZING (body)
   ============================================================= */

body {
  --font-text-theme: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-interface-theme: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-monospace-theme: 'Courier New', Courier, monospace;
  --font-text-size: 17px;
  --line-height-normal: 1.75;
  --line-height-tight: 1.2;
  --bold-weight: 600;

  --h1-font: 'Cormorant Garamond', Georgia, serif;
  --h2-font: 'Cormorant Garamond', Georgia, serif;
  --h3-font: 'Cormorant Garamond', Georgia, serif;
  --h4-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --h5-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --h6-font: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --h1-size: 2.4em;
  --h2-size: 1.7em;
  --h3-size: 1.3em;
  --h4-size: 1em;
  --h5-size: 0.95em;
  --h6-size: 0.9em;

  --h1-weight: 700;
  --h2-weight: 700;
  --h3-weight: 700;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;

  --h1-line-height: 1.2;
  --h2-line-height: 1.2;
  --h3-line-height: 1.3;
}


/* =============================================================
   PUBLISH-SPECIFIC (.published-container)
   ============================================================= */

.published-container {
  --page-title-font: 'Cormorant Garamond', Georgia, serif;
}


/* =============================================================
   LIGHT THEME (.theme-light)
   ============================================================= */

.theme-light {
  /* Backgrounds — warm but restrained */
  --background-primary: #F7F2E8;
  --background-primary-alt: #F2ECDF;
  --background-secondary: #EDE6D6;
  --background-secondary-alt: #E7DFCE;
  --background-modifier-border: rgba(139, 111, 71, 0.35);

  /* Text */
  --text-normal: #1F1B16;
  --text-muted: #504A42;
  --text-faint: #7A7168;
  --text-on-accent: #F7F2E8;

  /* Accent — Library Teal (links, interactive) */
  --text-accent: #1F6B6B;
  --text-accent-hover: #B8893E;
  --interactive-accent: #1F6B6B;
  --interactive-accent-hover: #185858;

  /* Links — Library Teal, unmistakable */
  --link-color: #1F6B6B;
  --link-color-hover: #B8893E;
  --link-unresolved-color: #8B7F73;
  --link-external-color: #1F6B6B;
  --link-external-color-hover: #B8893E;
  --link-decoration: underline;
  --link-decoration-hover: underline;

  /* Headings — green for H1/H2, gray for lower */
  --h1-color: #2E6B3A;
  --h2-color: #2E6B3A;
  --h3-color: #5C564E;
  --h4-color: #5C564E;
  --h5-color: #6B6358;
  --h6-color: #6B6358;

  /* Lists */
  --list-marker-color: #8B6F47;
  --list-marker-color-hover: #1F6B6B;

  /* Tables */
  --table-border-color: rgba(139, 111, 71, 0.25);
  --table-header-background: rgba(139, 111, 71, 0.12);
  --table-header-color: #504A42;
  --table-header-font-weight: 600;
  --table-row-background-hover: rgba(31, 107, 107, 0.05);

  /* Tags */
  --pill-background: rgba(31, 107, 107, 0.1);
  --pill-color: #1F6B6B;
  --pill-border-color: rgba(31, 107, 107, 0.28);

  /* Navigation */
  --nav-item-color: #5C564E;
  --nav-item-color-hover: #1F6B6B;
  --nav-item-color-active: #1F6B6B;
  --nav-item-color-selected: #1F6B6B;
  --nav-item-background-hover: rgba(31, 107, 107, 0.08);
  --nav-item-background-active: rgba(31, 107, 107, 0.12);
  --nav-item-background-selected: rgba(31, 107, 107, 0.12);
  --nav-heading-color: #1F1B16;
  --nav-heading-weight: 600;

  /* Scrollbar */
  --scrollbar-bg: #F7F2E8;
  --scrollbar-thumb-bg: #8B6F47;
}


/* =============================================================
   DARK THEME (.theme-dark)
   ============================================================= */

.theme-dark {
  /* Backgrounds */
  --background-primary: #1F1B16;
  --background-primary-alt: #2A2520;
  --background-secondary: #252019;
  --background-secondary-alt: #302A22;
  --background-modifier-border: rgba(184, 137, 62, 0.3);

  /* Text */
  --text-normal: #EDE4CE;
  --text-muted: #B8AD9A;
  --text-faint: #8B7F73;
  --text-on-accent: #1F1B16;

  /* Accent — lighter teal for dark backgrounds */
  --text-accent: #5CC0B5;
  --text-accent-hover: #D4A94E;
  --interactive-accent: #5CC0B5;
  --interactive-accent-hover: #4AADA3;

  /* Links */
  --link-color: #5CC0B5;
  --link-color-hover: #D4A94E;
  --link-unresolved-color: #8B7F73;
  --link-external-color: #5CC0B5;
  --link-external-color-hover: #D4A94E;
  --link-decoration: underline;
  --link-decoration-hover: underline;

  /* Headings */
  --h1-color: #7DB85A;
  --h2-color: #7DB85A;
  --h3-color: #B8AD9A;
  --h4-color: #B8AD9A;
  --h5-color: #8B7F73;
  --h6-color: #8B7F73;

  /* Lists */
  --list-marker-color: #D4A94E;
  --list-marker-color-hover: #5CC0B5;

  /* Tables */
  --table-border-color: rgba(184, 137, 62, 0.25);
  --table-header-background: rgba(184, 137, 62, 0.15);
  --table-header-color: #B8AD9A;
  --table-header-font-weight: 600;
  --table-row-background-hover: rgba(92, 192, 181, 0.07);

  /* Tags */
  --pill-background: rgba(92, 192, 181, 0.12);
  --pill-color: #5CC0B5;
  --pill-border-color: rgba(92, 192, 181, 0.28);

  /* Navigation */
  --nav-item-color: #B8AD9A;
  --nav-item-color-hover: #5CC0B5;
  --nav-item-color-active: #5CC0B5;
  --nav-item-color-selected: #5CC0B5;
  --nav-item-background-hover: rgba(92, 192, 181, 0.08);
  --nav-item-background-active: rgba(92, 192, 181, 0.12);
  --nav-item-background-selected: rgba(92, 192, 181, 0.12);
  --nav-heading-color: #EDE4CE;
  --nav-heading-weight: 600;

  /* Scrollbar */
  --scrollbar-bg: #1F1B16;
  --scrollbar-thumb-bg: #8B6F47;
}


/* =============================================================
   CALLOUTS — visible, color-coded blocks
   ============================================================= */

/* Base callout styling */
.callout {
  border-radius: 6px !important;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
  border-left-width: 5px !important;
  border-left-style: solid !important;
}

.callout .callout-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 0.3rem !important;
}

/* Note / Info — Library Teal */
.callout[data-callout="note"],
.callout[data-callout="info"] {
  --callout-color: 31, 107, 107;
  background-color: rgba(31, 107, 107, 0.08) !important;
  border-left-color: #1F6B6B !important;
}
.callout[data-callout="note"] .callout-title,
.callout[data-callout="info"] .callout-title {
  color: #1F6B6B !important;
}

/* Tip / Success — Garden Green */
.callout[data-callout="tip"],
.callout[data-callout="success"] {
  --callout-color: 46, 107, 58;
  background-color: rgba(46, 107, 58, 0.08) !important;
  border-left-color: #2E6B3A !important;
}
.callout[data-callout="tip"] .callout-title,
.callout[data-callout="success"] .callout-title {
  color: #2E6B3A !important;
}

/* Warning / Caution — Memorial Gold */
.callout[data-callout="warning"],
.callout[data-callout="caution"] {
  --callout-color: 184, 137, 62;
  background-color: rgba(184, 137, 62, 0.1) !important;
  border-left-color: #B8893E !important;
}
.callout[data-callout="warning"] .callout-title,
.callout[data-callout="caution"] .callout-title {
  color: #9A7232 !important;
}

/* Danger / Error — Forsaken Rust */
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: 139, 58, 47;
  background-color: rgba(139, 58, 47, 0.08) !important;
  border-left-color: #8B3A2F !important;
}
.callout[data-callout="danger"] .callout-title,
.callout[data-callout="error"] .callout-title {
  color: #8B3A2F !important;
}

/* Quote — Salvage Brown */
.callout[data-callout="quote"] {
  --callout-color: 139, 111, 71;
  background-color: rgba(139, 111, 71, 0.08) !important;
  border-left-color: #8B6F47 !important;
  font-style: italic !important;
}
.callout[data-callout="quote"] .callout-title {
  color: #8B6F47 !important;
}

/* Example — Ascendant Copper */
.callout[data-callout="example"] {
  --callout-color: 184, 115, 51;
  background-color: rgba(184, 115, 51, 0.08) !important;
  border-left-color: #B87333 !important;
}
.callout[data-callout="example"] .callout-title {
  color: #B87333 !important;
}

/* Abstract / Summary / TLDR — Iron Gray */
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
  --callout-color: 92, 86, 78;
  background-color: rgba(92, 86, 78, 0.07) !important;
  border-left-color: #5C564E !important;
}
.callout[data-callout="abstract"] .callout-title,
.callout[data-callout="summary"] .callout-title,
.callout[data-callout="tldr"] .callout-title {
  color: #5C564E !important;
}

/* Dark mode callouts — brighter for visibility */
.theme-dark .callout[data-callout="note"],
.theme-dark .callout[data-callout="info"] {
  background-color: rgba(92, 192, 181, 0.1) !important;
  border-left-color: #5CC0B5 !important;
}
.theme-dark .callout[data-callout="note"] .callout-title,
.theme-dark .callout[data-callout="info"] .callout-title {
  color: #5CC0B5 !important;
}

.theme-dark .callout[data-callout="tip"],
.theme-dark .callout[data-callout="success"] {
  background-color: rgba(125, 184, 90, 0.1) !important;
  border-left-color: #7DB85A !important;
}
.theme-dark .callout[data-callout="tip"] .callout-title,
.theme-dark .callout[data-callout="success"] .callout-title {
  color: #7DB85A !important;
}

.theme-dark .callout[data-callout="warning"],
.theme-dark .callout[data-callout="caution"] {
  background-color: rgba(212, 169, 78, 0.12) !important;
  border-left-color: #D4A94E !important;
}
.theme-dark .callout[data-callout="warning"] .callout-title,
.theme-dark .callout[data-callout="caution"] .callout-title {
  color: #D4A94E !important;
}

.theme-dark .callout[data-callout="danger"],
.theme-dark .callout[data-callout="error"] {
  background-color: rgba(180, 80, 65, 0.12) !important;
  border-left-color: #B45041 !important;
}
.theme-dark .callout[data-callout="danger"] .callout-title,
.theme-dark .callout[data-callout="error"] .callout-title {
  color: #B45041 !important;
}

.theme-dark .callout[data-callout="quote"] {
  background-color: rgba(184, 137, 62, 0.1) !important;
  border-left-color: #B8893E !important;
}
.theme-dark .callout[data-callout="quote"] .callout-title {
  color: #B8893E !important;
}

.theme-dark .callout[data-callout="example"] {
  background-color: rgba(212, 150, 70, 0.1) !important;
  border-left-color: #D49646 !important;
}
.theme-dark .callout[data-callout="example"] .callout-title {
  color: #D49646 !important;
}

.theme-dark .callout[data-callout="abstract"],
.theme-dark .callout[data-callout="summary"],
.theme-dark .callout[data-callout="tldr"] {
  background-color: rgba(184, 173, 154, 0.1) !important;
  border-left-color: #B8AD9A !important;
}
.theme-dark .callout[data-callout="abstract"] .callout-title,
.theme-dark .callout[data-callout="summary"] .callout-title,
.theme-dark .callout[data-callout="tldr"] .callout-title {
  color: #B8AD9A !important;
}


/* Left nav — subtle background step for visual separation */
.site-body-left-column {
  background-color: #EDE6D6 !important;
  border-right: 1px solid rgba(139, 111, 71, 0.15) !important;
}

.theme-dark .site-body-left-column {
  background-color: #252019 !important;
  border-right: 1px solid rgba(184, 137, 62, 0.12) !important;
}

/* Nav links — no underlines, clean sidebar */
.site-body-left-column a,
.nav-view a,
.tree-item-inner a {
  text-decoration: none !important;
  border-bottom: none !important;
}

.tree-item-self.mod-active .tree-item-inner a {
  color: #1F6B6B !important;
  font-weight: 600 !important;
}

.theme-dark .tree-item-self.mod-active .tree-item-inner a {
  color: #5CC0B5 !important;
}

/* Site title — branded, not styled as a link */
.site-header-text {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #1F1B16 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.site-header-text:hover {
  color: #2E6B3A !important;
  text-decoration: none !important;
}

.theme-dark .site-header-text {
  color: #EDE4CE !important;
}

.theme-dark .site-header-text:hover {
  color: #7DB85A !important;
}

/* Sidebar site name — same branded treatment */
.site-body-left-column-site-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #1F1B16 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.site-body-left-column-site-name:hover {
  color: #2E6B3A !important;
  text-decoration: none !important;
}

.theme-dark .site-body-left-column-site-name {
  color: #EDE4CE !important;
}

.theme-dark .site-body-left-column-site-name:hover {
  color: #7DB85A !important;
}


/* =============================================================
   ELEMENT OVERRIDES
   ============================================================= */

h1 {
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #8B6F47;
  font-style: italic;
}

h3 {
  font-style: italic;
}

blockquote {
  border-left: 4px solid #8B6F47;
  background-color: rgba(139, 111, 71, 0.07);
  padding: 0.9rem 1.25rem;
  border-radius: 0 4px 4px 0;
}

hr {
  border: none;
  border-top: 1px solid rgba(139, 111, 71, 0.5);
  margin: 2.5rem 0;
}

code {
  color: #1F6B6B;
  background-color: rgba(31, 107, 107, 0.07);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

pre {
  background-color: #F0E9D8;
  border: 1px solid rgba(139, 111, 71, 0.3);
  border-radius: 4px;
}

.theme-dark pre {
  background-color: #2A2520;
  border-color: rgba(184, 137, 62, 0.2);
}

.theme-dark code {
  color: #5CC0B5;
  background-color: rgba(92, 192, 181, 0.1);
}

strong {
  color: #1F1B16;
}

.theme-dark strong {
  color: #F2EBD9;
}

/* Links — direct selector fallback */
.theme-light a,
.theme-light .internal-link,
.theme-light .external-link {
  color: #1F6B6B;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 107, 107, 0.35);
}

.theme-light a:hover,
.theme-light .internal-link:hover,
.theme-light .external-link:hover {
  color: #B8893E;
  text-decoration-color: #B8893E;
}

.theme-dark a,
.theme-dark .internal-link,
.theme-dark .external-link {
  color: #5CC0B5;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(92, 192, 181, 0.35);
}

.theme-dark a:hover,
.theme-dark .internal-link:hover,
.theme-dark .external-link:hover {
  color: #D4A94E;
  text-decoration-color: #D4A94E;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 750px) {
  body {
    --font-text-size: 16px;
    --h1-size: 1.9em;
    --h2-size: 1.4em;
  }
}