/* Catppuccin Mocha — overrides Hugo Book CSS variables and direct properties */

/* Override Book's CSS variables unconditionally (light + dark + media query) */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --body-background:           #1e1e2e;
  --body-font-color:           #cdd6f4;

  --gray-100:                  #313244;
  --gray-200:                  #45475a;
  --gray-500:                  #6c7086;

  --color-link:                #89b4fa;
  --color-visited-link:        #cba6f7;

  --search-input-background:   #313244;
  --search-input-color:        #cdd6f4;
  --search-input-border-color: #45475a;

  --code-background:           #181825;
  --code-accent-color:         #f38ba8;

  --icon-filter:               invert(85%) hue-rotate(180deg);
}

/* Also override for system dark-mode media query (Book applies vars here too) */
@media (prefers-color-scheme: dark) {
  :root {
    --body-background:           #1e1e2e;
    --body-font-color:           #cdd6f4;
    --gray-100:                  #313244;
    --gray-200:                  #45475a;
    --gray-500:                  #6c7086;
    --color-link:                #89b4fa;
    --color-visited-link:        #cba6f7;
    --search-input-background:   #313244;
    --search-input-color:        #cdd6f4;
    --search-input-border-color: #45475a;
    --code-background:           #181825;
    --code-accent-color:         #f38ba8;
  }
}

/* ── Direct property overrides ───────────────── */

html, body {
  background: #1e1e2e !important;
  color: #cdd6f4 !important;
}

.book-menu,
.book-menu nav,
.book-menu .book-menu-content {
  background: #181825 !important;
  color: #cdd6f4 !important;
}

.book-header {
  background: #181825 !important;
  border-bottom: 1px solid #313244 !important;
}

.book-page,
.book-toc {
  background: #1e1e2e !important;
}

/* ── Links ────────────────────────────────────── */

a { color: #89b4fa !important; }
a:visited { color: #cba6f7 !important; }

.book-menu a { color: #bac2de !important; }
.book-menu a:hover { color: #89b4fa !important; background: #313244 !important; border-radius: 4px; }
.book-menu a.active { color: #89b4fa !important; background: #313244 !important; font-weight: 600; }

.book-toc a { color: #a6adc8 !important; }
.book-toc a:hover { color: #89b4fa !important; }

/* ── Headings ─────────────────────────────────── */

.markdown h1 { color: #cba6f7 !important; }
.markdown h2 { color: #89b4fa !important; }
.markdown h3 { color: #94e2d5 !important; }
.markdown h4,
.markdown h5,
.markdown h6 { color: #bac2de !important; }

/* ── Code ─────────────────────────────────────── */

.markdown code {
  background: #313244 !important;
  color: #cdd6f4 !important;
  border-radius: 4px;
}

.markdown pre {
  background: #181825 !important;
  border: 1px solid #45475a !important;
  border-radius: 6px !important;
}

.markdown pre code {
  background: transparent !important;
}

.chroma { background: #181825 !important; }

/* ── Tables ───────────────────────────────────── */

.markdown table { border-collapse: collapse; width: 100%; }

.markdown th {
  background: #181825 !important;
  color: #cba6f7 !important;
  border: 1px solid #45475a !important;
  padding: 0.5em 0.75em;
}

.markdown td {
  border: 1px solid #45475a !important;
  padding: 0.5em 0.75em;
}

.markdown tr:nth-child(even) td {
  background: #181825 !important;
}

/* ── Blockquotes ──────────────────────────────── */

.markdown blockquote {
  border-left: 3px solid #89b4fa !important;
  background: #181825 !important;
  color: #a6adc8 !important;
  border-radius: 0 4px 4px 0;
  padding: 0.6em 1em;
  margin: 1em 0;
}

/* ── Misc ─────────────────────────────────────── */

hr { border-color: #313244 !important; }

.book-footer {
  color: #6c7086 !important;
  border-top: 1px solid #313244 !important;
}

/* ── Search ───────────────────────────────────── */

.book-search input {
  background: #313244 !important;
  color: #cdd6f4 !important;
  border: 1px solid #45475a !important;
  border-radius: 4px;
}

.book-search input::placeholder { color: #6c7086 !important; }
.book-search input:focus { border-color: #89b4fa !important; outline: none; }

/* ── Mermaid diagrams ─────────────────────────── */

.mermaid-wrapper {
  overflow-x: auto;
  background: #181825;
  border: 1px solid #45475a;
  border-radius: 6px;
  padding: 1.25em;
  margin: 1.25em 0;
}

/* Let diagrams breathe — don't crush wide graphs */
.mermaid-wrapper svg {
  min-width: 480px;
  height: auto;
  display: block;
}

/* Mermaid injects its own background — override it */
.mermaid-wrapper .mermaid > svg,
.mermaid-wrapper pre.mermaid > svg {
  background: transparent !important;
}

/* ── Scrollbar ────────────────────────────────── */

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #181825; }
::-webkit-scrollbar-thumb { background: #585b70; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6c7086; }