:root {
  --bg-color: #fff;
  --bg-color-secondary: #fafafa;
  --text-color: #000000e0;
  --text-color-secondary: #00000073;
  --border-color: #f0f0f0;
  --header-bg: #fff;
  --sider-bg: #fff;
  --item-hover-bg: #f5f5f5;
  --card-bg: #fff;

  /* Markdown & Editor Specific */
  --code-bg: #f6f8fa;
  --table-border-color: #dfe2e5;
  --table-header-bg: #f6f8fa;
  --blockquote-border-color: #dfe2e5;
  --blockquote-text-color: #6a737d;
  --toolbar-bg: #fafafa;
  --link-color: #1677ff;
}

body.dark {
  --bg-color: #141414;
  --bg-color-secondary: #1f1f1f;
  --text-color: #ffffffd9;
  --text-color-secondary: #ffffff73;
  --border-color: #303030;
  --header-bg: #141414;
  --sider-bg: #141414;
  --item-hover-bg: #1f1f1f;
  --card-bg: #1f1f1f;

  /* Markdown & Editor Specific Dark */
  --code-bg: #2d2d2d;
  --table-border-color: #303030;
  --table-header-bg: #1f1f1f;
  --blockquote-border-color: #303030;
  --blockquote-text-color: #8b949e;
  --toolbar-bg: #1f1f1f;
  --link-color: #177ddc;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.search-highlight {
  background-color: #ffd54f !important;
  color: black !important;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

/* Dark mode overrides for highlight.js */
body.dark .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #c9d1d9;
  background: var(--code-bg) !important;
}

body.dark .hljs-comment,
body.dark .hljs-quote {
  color: #8b949e;
}

body.dark .hljs-keyword,
body.dark .hljs-selector-tag {
  color: #ff7b72;
}

body.dark .hljs-literal,
body.dark .hljs-number,
body.dark .hljs-variable,
body.dark .hljs-template-variable,
body.dark .hljs-tag .hljs-attr {
  color: #79c0ff;
}

body.dark .hljs-string,
body.dark .hljs-doctag {
  color: #a5d6ff;
}

body.dark .hljs-title,
body.dark .hljs-section,
body.dark .hljs-selector-id {
  color: #d2a8ff;
}

body.dark .hljs-title.class_,
body.dark .hljs-class .hljs-title {
  color: #f0883e;
}

body.dark .hljs-type,
body.dark .hljs-built_in,
body.dark .hljs-builtin-name,
body.dark .hljs-symbol,
body.dark .hljs-selector-class,
body.dark .hljs-selector-attr,
body.dark .hljs-selector-pseudo {
  color: #79c0ff;
}

body.dark .hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}

body.dark .hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}