/* =========================================================
   Dark theme override
   Mirrors the design tokens from main.css with a refined
   palette tuned for low-light reading.
   ========================================================= */
:root {
  /* Warm-toned dark — matches the paper-ish light theme */
  --fg: #e8e4d6;
  --fg-muted: #aea798;
  --fg-subtle: #76705f;
  --bg: #14130f;
  --bg-soft: #1c1b16;
  --bg-elev: #25241e;
  --border: #2c2b25;
  --border-strong: #3e3d34;

  --maincolor: var(--darkMaincolor);
  --maincolor-soft: rgba(95, 193, 151, 0.10);
  --hovercolor: #8fdcb6;
  --accent: #d9a574;
  --accent-soft: rgba(217, 165, 116, 0.14);
}

html,
body {
  background-color: var(--bg);
  color: var(--fg);
}

::-moz-selection,
::selection {
  background: var(--maincolor-soft);
  color: var(--fg);
  text-shadow: none;
}

hr {
  border-top: 1px solid var(--border);
}

code {
  background-color: var(--bg-elev);
  color: var(--fg);
}

pre {
  background-color: #15171c;
  border-color: var(--border);
}

blockquote {
  border-left-color: var(--maincolor);
  background: var(--bg-soft);
  color: var(--fg-muted);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  color: var(--maincolor);
}

.toc {
  background-color: var(--bg-soft);
  color: var(--fg);
  border-color: var(--border);
}

a {
  color: var(--maincolor);
}
a:hover {
  color: var(--hovercolor);
}

/* Inline body links */
section.body a,
.biography a,
.content-column a,
li a {
  border-bottom-color: var(--border-strong);
}
section.body a:hover,
.biography a:hover,
.content-column a:hover,
li a:hover {
  border-bottom-color: var(--maincolor);
}

/* Header */
header {
  border-bottom-color: var(--border);
}
header .main a {
  color: var(--fg);
}
header .main a:hover {
  color: var(--maincolor);
}
header nav a {
  color: var(--fg-muted);
}
header nav a:hover {
  color: var(--maincolor);
}

#dark-mode-toggle {
  color: var(--fg-muted);
}
#dark-mode-toggle:hover {
  color: var(--maincolor);
  background-color: var(--bg-soft);
}

.site-description a {
  color: var(--fg);
}
.site-description a:hover {
  color: var(--maincolor);
}

/* Tags */
.tags a {
  color: var(--fg-muted);
  background: var(--bg);
  border-color: var(--border-strong);
}
.tags a:hover {
  color: var(--maincolor);
  border-color: var(--maincolor);
  background: var(--maincolor-soft);
}

.site-title a {
  color: var(--fg);
  text-decoration: none !important;
}

/* Footer */
footer {
  border-top-color: var(--border);
  color: var(--fg-subtle);
}
.soc {
  color: var(--fg-muted);
}
.soc:hover {
  color: var(--maincolor);
  background: var(--bg-soft);
}
.footer-info a {
  color: var(--fg-muted);
  border-bottom-color: var(--border-strong);
}
.footer-info a:hover {
  color: var(--maincolor);
  border-bottom-color: var(--maincolor);
}

/* Posts */
.posts .post {
  border-bottom-color: var(--border);
}

/* Profile */
.profile-container > img {
  border-color: var(--bg);
  outline-color: var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Date / content rows — timeline */
.date-content-container::before {
  background: var(--border);
}
.date-content-container::after {
  background: var(--bg);
  border-color: var(--border-strong);
}
.date-content-container:hover::after {
  background: var(--maincolor);
  border-color: var(--maincolor);
}
.date-content-container.is-ongoing::after {
  background: var(--maincolor);
  border-color: var(--maincolor);
}
.date-content-container.is-ongoing .date-column {
  color: var(--maincolor);
}
.date-column {
  color: var(--fg-muted);
}

/* Section H2 accent bar */
section h2::before {
  background: var(--maincolor);
}

/* News list */
.news-list li {
  border-bottom-color: var(--border);
}
.news-list .news-date {
  color: var(--fg-muted);
}
.news-list a {
  color: var(--fg);
}
.news-list a:hover {
  color: var(--maincolor);
}

/* Tables */
table th,
table td {
  border-bottom-color: var(--border);
}
table th {
  background: var(--bg-soft);
}
table tbody tr:hover {
  background: var(--bg-soft);
}

/* Biography */
.biography {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border);
  border-left-color: var(--maincolor);
}

/* Email copy */
.email-copy {
  border-bottom-color: var(--maincolor);
}
.email-copy:hover {
  background-color: var(--maincolor-soft);
  color: var(--maincolor);
}

/* Bio TOC */
.bio-toc {
  border-left-color: var(--border);
}
.bio-toc strong {
  color: var(--fg-subtle);
}
.bio-toc a {
  color: var(--fg-muted);
}
.bio-toc a:hover {
  color: var(--maincolor);
  background-color: transparent;
}

/* Highlighted code */
.highlight {
  background-color: transparent;
}
.highlight pre code[class*="language-"]::before {
  background: var(--fg);
  color: var(--bg);
}

.draft-label {
  color: var(--accent);
  background-color: rgba(200, 155, 255, 0.16);
}

/* Code language tag overrides — keep brand colors readable */
.highlight pre code[class=language-javaScript]::before,
.highlight pre code[class="language-js"]::before {
  content: "js";
  background: #f7df1e;
  color: black;
}
.highlight pre code[class*='language-yml']::before,
.highlight pre code[class*='language-yaml']::before {
  content: 'yaml';
  background: #f71e6a;
  color: white;
}
.highlight pre code[class*='language-shell']::before,
.highlight pre code[class*='language-bash']::before,
.highlight pre code[class*='language-sh']::before {
  content: 'shell';
  background: #2c8a3a;
  color: white;
}
.highlight pre code[class*='language-json']::before {
  content: 'json';
  background: #1f8fff;
  color: #fff;
}
.highlight pre code[class*='language-python']::before,
.highlight pre code[class*='language-py']::before {
  content: 'py';
  background: #3776ab;
  color: #ffd43b;
}
.highlight pre code[class*='language-css']::before {
  content: 'css';
  background: #2196f3;
  color: white;
}
.highlight pre code[class*='language-go']::before {
  content: 'Go';
  background: #00add8;
  color: white;
}
.highlight pre code[class*='language-md']::before {
  content: 'Markdown';
  background: #4263eb;
  color: whitesmoke;
}