/* ═══════════════════════════════════════════════════════════
   Dark mode — overrides for light-mode defaults
   Applies via media query (respects OS preference)
   and via [data-theme="dark"] (manual override via JS toggle)
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0e1410;
    --color-text: #eef4f0;
    --color-border: #2e4a38;
    --color-muted: #7a9a8a;
    --color-header: #1e3a2f;
    --color-dark: #b8c9d9;
    --footer-text: #9abba8;
    --color-accent: #ffd000;
    --accent-contrast: #111111;
    --accent-on-highlight: #ffd000;
    --prompt-user: #3dd455;
    --color-link: #ffd000;
    --color-link-visited: #c4a000;
    --post-code-bg: #162018;
    --post-pre-bg: #0a1a0f;
    --post-pre-text: #c8ddd4;
    --highlight-bg: #2a1e00;
    --highlight-text: #ffd000;
  }

  :root:not([data-theme="light"]) ::selection {
    background: #2a1e00;
    color: #ffd000;
  }

  :root:not([data-theme="light"]) :focus-visible {
    outline-color: #ffd000;
  }

  :root:not([data-theme="light"]) body {
    -webkit-font-smoothing: antialiased;
  }

  :root:not([data-theme="light"]) .post-references a {
    color: var(--color-accent);
  }

  :root:not([data-theme="light"]) .post-toc__list a {
    color: var(--color-accent);
    opacity: 0.8;
  }

  :root:not([data-theme="light"]) .mermaid-light {
    display: none;
  }

  :root:not([data-theme="light"]) .mermaid-dark {
    display: block;
  }

  :root:not([data-theme="light"]) .shiki,
  :root:not([data-theme="light"]) .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
  }

  :root:not([data-theme="light"]) .home-avatar-wrap {
    border-color: #3dd455;
    box-shadow: 4px 4px 0 #3dd455;
  }

  :root:not([data-theme="light"]) .post-abstract {
    background: #2a1e00;
  }

  :root:not([data-theme="light"]) .post-toc {
    background: #1a1400;
  }

  :root:not([data-theme="light"]) .post-content .shiki {
    border-color: var(--color-border);
  }

  :root:not([data-theme="light"]) .post-content th {
    background: #1a1400;
    border-bottom-color: var(--color-accent);
    opacity: 1;
  }

  :root:not([data-theme="light"]) .post-content > h2:target,
  :root:not([data-theme="light"]) .post-content > h3:target {
    background: #2a1e00;
    color: var(--color-accent);
  }

  :root:not([data-theme="light"]) .post-content kbd {
    border-bottom-color: #4a6070;
  }
}

/* ═══════════════════════════════════════════════════════════
   Manual dark theme override (JS toggle → data-theme="dark")
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --color-bg: #0e1410;
  --color-text: #eef4f0;
  --color-border: #2e4a38;
  --color-muted: #7a9a8a;
  --color-header: #1e3a2f;
  --color-dark: #b8c9d9;
  --footer-text: #9abba8;
  --color-accent: #ffd000;
  --accent-contrast: #111111;
  --accent-on-highlight: #ffd000;
  --prompt-user: #3dd455;
  --color-link: #ffd000;
  --color-link-visited: #c4a000;
  --post-code-bg: #162018;
  --post-pre-bg: #0a1a0f;
  --post-pre-text: #c8ddd4;
  --highlight-bg: #2a1e00;
  --highlight-text: #ffd000;
}

:root[data-theme="dark"] ::selection {
  background: #2a1e00;
  color: #ffd000;
}

:root[data-theme="dark"] :focus-visible {
  outline-color: #ffd000;
}

:root[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .post-references a {
  color: var(--color-accent);
}

:root[data-theme="dark"] .post-toc__list a {
  color: var(--color-accent);
  opacity: 0.8;
}

:root[data-theme="dark"] .mermaid-light {
  display: none;
}

:root[data-theme="dark"] .mermaid-dark {
  display: block;
}

:root[data-theme="dark"] .shiki,
:root[data-theme="dark"] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

:root[data-theme="dark"] .home-avatar-wrap {
  border-color: #3dd455;
  box-shadow: 4px 4px 0 #3dd455;
}

:root[data-theme="dark"] .post-abstract {
  background: #2a1e00;
}

:root[data-theme="dark"] .post-toc {
  background: #1a1400;
}

:root[data-theme="dark"] .post-content .shiki {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .post-content th {
  background: #1a1400;
  border-bottom-color: var(--color-accent);
  opacity: 1;
}

:root[data-theme="dark"] .post-content > h2:target,
:root[data-theme="dark"] .post-content > h3:target {
  background: #2a1e00;
  color: var(--color-accent);
}

:root[data-theme="dark"] .post-content kbd {
  border-bottom-color: #4a6070;
}