/* =============================================================================
   notch.org — Obsidian Publish Theme
   Solarized Dark + Monospace + Clean Technical Aesthetic
   
   Place this file at the ROOT of your Obsidian vault as `publish.css`
   then publish it via Publish > Publish changes.
   ============================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* --- Solarized Palette Reference ---
   Base03:  #002b36  (bg)
   Base02:  #073642  (bg highlights)
   Base01:  #586e75  (comments, secondary)
   Base00:  #657b83  (body text alt)
   Base0:   #839496  (body text)
   Base1:   #93a1a1  (emphasis)
   Base2:   #eee8d5  (bg light)
   Base3:   #fdf6e3  (bg light)
   Yellow:  #b58900
   Orange:  #cb4b16
   Red:     #dc322f
   Magenta: #d33682
   Violet:  #6c71c4
   Blue:    #268bd2
   Cyan:    #2aa198
   Green:   #859900
   ---------------------------------------- */

/* === DARK MODE (primary) ================================================== */
.theme-dark {
  /* Backgrounds */
  --background-primary: #002b36;
  --background-primary-alt: #073642;
  --background-secondary: #073642;
  --background-secondary-alt: #002b36;
  --background-modifier-border: #586e7540;
  --background-modifier-form-field: #073642;
  --background-modifier-hover: #07364280;
  --background-modifier-active-hover: #073642;
  --background-modifier-success: #859900;
  --background-modifier-error: #dc322f;

  /* Text */
  --text-normal: #839496;
  --text-muted: #586e75;
  --text-faint: #586e7590;
  --text-on-accent: #fdf6e3;
  --text-error: #dc322f;
  --text-success: #859900;
  --text-selection: #268bd230;
  --text-highlight-bg: #b5890030;
  --text-accent: #268bd2;
  --text-accent-hover: #2aa198;

  /* Interactive */
  --interactive-normal: #073642;
  --interactive-hover: #0a4050;
  --interactive-accent: #268bd2;
  --interactive-accent-hover: #2aa198;

  /* Headings */
  --h1-color: #fdf6e3;
  --h2-color: #eee8d5;
  --h3-color: #93a1a1;
  --h4-color: #93a1a1;
  --h5-color: #839496;
  --h6-color: #839496;

  /* Links */
  --link-color: #268bd2;
  --link-color-hover: #2aa198;
  --link-external-color: #2aa198;
  --link-external-color-hover: #268bd2;
  --link-unresolved-color: #6c71c4;

  /* Tags */
  --tag-color: #2aa198;
  --tag-background: #2aa19815;
  --tag-color-hover: #268bd2;
  --tag-background-hover: #268bd215;

  /* Code */
  --code-normal: #93a1a1;
  --code-background: #073642;
  --code-comment: #586e75;

  /* Graph */
  --graph-line: #586e7540;
  --graph-node: #839496;
  --graph-node-focused: #268bd2;
  --graph-node-tag: #2aa198;
  --graph-node-attachment: #b58900;
}

/* === LIGHT MODE =========================================================== */
.theme-light {
  /* Backgrounds */
  --background-primary: #fdf6e3;
  --background-primary-alt: #eee8d5;
  --background-secondary: #eee8d5;
  --background-secondary-alt: #fdf6e3;
  --background-modifier-border: #93a1a130;
  --background-modifier-form-field: #eee8d5;
  --background-modifier-hover: #eee8d580;
  --background-modifier-active-hover: #eee8d5;
  --background-modifier-success: #859900;
  --background-modifier-error: #dc322f;

  /* Text */
  --text-normal: #657b83;
  --text-muted: #93a1a1;
  --text-faint: #93a1a190;
  --text-on-accent: #fdf6e3;
  --text-error: #dc322f;
  --text-success: #859900;
  --text-selection: #268bd225;
  --text-highlight-bg: #b5890025;
  --text-accent: #268bd2;
  --text-accent-hover: #2aa198;

  /* Interactive */
  --interactive-normal: #eee8d5;
  --interactive-hover: #ddd6c1;
  --interactive-accent: #268bd2;
  --interactive-accent-hover: #2aa198;

  /* Headings */
  --h1-color: #073642;
  --h2-color: #002b36;
  --h3-color: #586e75;
  --h4-color: #586e75;
  --h5-color: #657b83;
  --h6-color: #657b83;

  /* Links */
  --link-color: #268bd2;
  --link-color-hover: #2aa198;
  --link-external-color: #2aa198;
  --link-external-color-hover: #268bd2;
  --link-unresolved-color: #6c71c4;

  /* Tags */
  --tag-color: #2aa198;
  --tag-background: #2aa19812;
  --tag-color-hover: #268bd2;
  --tag-background-hover: #268bd212;

  /* Code */
  --code-normal: #586e75;
  --code-background: #eee8d5;
  --code-comment: #93a1a1;

  /* Graph */
  --graph-line: #93a1a140;
  --graph-node: #657b83;
  --graph-node-focused: #268bd2;
  --graph-node-tag: #2aa198;
  --graph-node-attachment: #b58900;
}

/* === PUBLISH CONTAINER ==================================================== */
.published-container {
  /* Layout */
  --page-width: 760px;
  --page-padding: 48px;

  /* Fonts */
  --font-text-theme: 'IBM Plex Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --font-monospace-theme: 'IBM Plex Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --font-interface-theme: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* Page title */
  --page-title-font: 'IBM Plex Sans', -apple-system, sans-serif;
  --page-title-size: 2rem;
  --page-title-weight: 700;
  --page-title-line-height: 1.2;

  /* Site name */
  --site-name-font: 'IBM Plex Mono', monospace;
  --site-name-size: 0.95rem;
  --site-name-weight: 600;

  /* Navigation */
  --nav-item-color: var(--text-muted);
  --nav-item-color-hover: var(--text-normal);
  --nav-item-color-active: var(--text-accent);
  --nav-parent-item-weight: 600;
  --nav-item-weight-active: 600;
  --nav-item-border-color: transparent;
  --nav-item-border-color-active: var(--text-accent);

  /* Sidebars */
  --sidebar-left-background: var(--background-primary);
  --sidebar-left-border-color: var(--background-modifier-border);
  --sidebar-left-border-width: 1px;
  --sidebar-right-background: var(--background-primary);
  --sidebar-right-border-color: var(--background-modifier-border);
  --sidebar-right-border-width: 1px;
  --sidebar-left-width: 260px;
  --sidebar-right-width: 240px;

  /* Component titles (Backlinks, Graph, TOC) */
  --component-title-font: 'IBM Plex Mono', monospace;
  --component-title-size: 0.7rem;
  --component-title-weight: 600;
  --component-title-transform: uppercase;
  --component-title-color: var(--text-muted);

  /* Outline / TOC */
  --outline-heading-color: var(--text-muted);
  --outline-heading-color-hover: var(--text-normal);
  --outline-heading-color-active: var(--text-accent);

  /* Graph */
  --graph-height: 280px;

  /* Logo */
  --logo-max-height: 32px;
  --logo-radius: 0;
}

/* === TYPOGRAPHY =========================================================== */

/* Body text — slightly larger for readability in monospace */
.published-container .markdown-rendered {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

/* Page title — clean sans-serif contrast with mono body */
.published-container .page-title {
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

/* Headings — monospace with subtle differentiation */
.published-container h1,
.published-container h2,
.published-container h3,
.published-container h4,
.published-container h5,
.published-container h6 {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: -0.01em;
}

.published-container h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.published-container h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

.published-container h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.published-container h4,
.published-container h5,
.published-container h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Paragraphs */
.published-container p {
  margin-bottom: 1rem;
}

/* === LINKS ================================================================ */
.published-container a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.published-container a:hover {
  border-bottom-color: currentColor;
}

/* External link icon — subtle */
.published-container .external-link::after {
  opacity: 0.4;
  font-size: 0.75em;
}

/* === CODE ================================================================= */

/* Inline code */
.published-container code:not(pre code) {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background: var(--code-background);
  color: var(--code-normal);
  border: 1px solid var(--background-modifier-border);
}

/* Code blocks */
.published-container pre {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  overflow-x: auto;
  margin: 1.25rem 0;
}

.published-container pre code {
  font-size: 13px;
  padding: 0;
  border: none;
  background: none;
}

/* === BLOCKQUOTES ========================================================== */
.published-container blockquote {
  border-left: 3px solid var(--text-accent);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-style: normal;
}

.published-container blockquote p {
  margin-bottom: 0.5rem;
}

/* === CALLOUTS ============================================================= */
.published-container .callout {
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  margin: 1.25rem 0;
}

/* === LISTS ================================================================ */
.published-container ul,
.published-container ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.published-container li {
  margin-bottom: 0.35rem;
  line-height: 1.6;
}

.published-container li::marker {
  color: var(--text-muted);
}

/* Task lists */
.published-container .task-list-item-checkbox {
  border-radius: 2px;
}

/* === TABLES =============================================================== */
.published-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1.25rem 0;
}

.published-container th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--background-modifier-border);
  padding: 0.6rem 0.75rem;
  text-align: left;
}

.published-container td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

.published-container tr:hover td {
  background: var(--background-modifier-hover);
}

/* === HORIZONTAL RULES ===================================================== */
.published-container hr {
  border: none;
  border-top: 1px dashed var(--text-faint);
  margin: 2rem 0;
}

/* === IMAGES =============================================================== */
.published-container img:not(.logo-image) {
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  margin: 1rem 0;
}

/* === TAGS ================================================================= */
.published-container .tag {
  font-size: 0.8em;
  font-family: 'IBM Plex Mono', monospace;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  transition: background 0.15s ease;
}

/* === FOOTNOTES ============================================================ */
.published-container .footnotes {
  font-size: 0.85em;
  color: var(--text-muted);
  border-top: 1px solid var(--background-modifier-border);
  margin-top: 3rem;
  padding-top: 1.5rem;
}

/* === NAVIGATION SIDEBAR =================================================== */

/* Site name — clean mono styling */
.published-container .site-body-left-column .site-name {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}

/* Nav items — tighter spacing */
.published-container .nav-file-title,
.published-container .nav-folder-title {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}

.published-container .nav-file-title:hover,
.published-container .nav-folder-title:hover {
  background: var(--background-modifier-hover);
}

/* Active nav item */
.published-container .is-active > .nav-file-title {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  font-weight: 600;
}

/* === RIGHT SIDEBAR (TOC, Graph, Backlinks) ================================ */

/* TOC items */
.published-container .outline-heading {
  font-size: 0.8rem;
  transition: color 0.15s ease;
}

/* Backlinks */
.published-container .backlink-title {
  font-size: 0.85rem;
}

/* === GRAPH ================================================================ */
.published-container .graph-view-container {
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
}

/* === SEARCH =============================================================== */
.published-container .search-input-container input {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  border-radius: 3px;
}

/* === SCROLLBAR (webkit) =================================================== */
.published-container ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.published-container ::-webkit-scrollbar-track {
  background: transparent;
}

.published-container ::-webkit-scrollbar-thumb {
  background: var(--text-faint);
  border-radius: 3px;
}

.published-container ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* === SELECTION ============================================================ */
.published-container ::selection {
  background: var(--text-selection);
}

/* === MOBILE RESPONSIVE ==================================================== */
@media (max-width: 768px) {
  .published-container {
    --page-padding: 20px;
  }

  .published-container .markdown-rendered {
    font-size: 14px;
  }

  .published-container h1 { font-size: 1.4rem; }
  .published-container h2 { font-size: 1.15rem; }
  .published-container h3 { font-size: 1rem; }

  .published-container pre {
    font-size: 12px;
    padding: 1rem;
  }
}

/* === PRINT ================================================================ */
@media print {
  .published-container {
    --background-primary: #ffffff;
    --text-normal: #1a1a1a;
  }

  .published-container .site-body-left-column,
  .published-container .site-body-right-column {
    display: none;
  }
}