/*
 * Dark mode
 *
 * Applied when <html data-theme="dark"> is set (OS preference or the toggle,
 * see _includes/head.html). Only content colors are overridden; the sidebar
 * (.sidebar, hyde.css) is intentionally left untouched so it stays distinctive.
 * Uses native CSS nesting.
 */

:root { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;

  & body {
    color: #c9d1d9;
    background-color: #14161a;
  }

  & .content a { color: #8b93ff; }
  & .content a:hover, & .content a:focus { color: #a9afff; }

  & h1, & h2, & h3, & h4, & h5, & h6,
  & strong,
  & .page-title, & .post-title, & .post-title a {
    color: #eceff4;
  }

  & hr { border-top-color: #2b2f36; border-bottom-color: #14161a; }
  & abbr { color: #aab; }
  & abbr[title] { border-bottom-color: #3a3f47; }

  & code { color: #e88b95; background-color: #1d2026; }
  & pre, & .message { background-color: #1d2026; }
  & pre code { color: inherit; background-color: transparent; }

  & blockquote { color: #9aa0a8; border-left-color: #3a3f47; }

  & table, & td, & th { border-color: #2b2f36; }
  & tbody tr:nth-child(odd) td,
  & tbody tr:nth-child(odd) th { background-color: #1d2026; }

  & .message { color: #aab0b8; }
  & .masthead-title, & .masthead-title a { color: #d0d4da; }
  & .post-date { color: #7d848d; }

  & .related { border-top-color: #2b2f36; }
  & .related-posts li small { color: #7d848d; }
  & .related-posts li a:hover { color: #6cb6ff; }

  & .pagination { color: #5d636b; }
  & .pagination-item { border-color: #2b2f36; }
  & a.pagination-item:hover { background-color: #1d2026; }

  /* Syntax highlighting */
  & .highlight .hll { background-color: #3b3a1f; }
  & .highlight .c, & .highlight .c1, & .highlight .cs { color: #7d8590; }
  & .highlight .cm { color: #6cb6ff; }
  & .highlight .cp { color: #56d4c4; }
  & .highlight .err { color: #ffb3b3; background-color: #5a1d1d; }
  & .highlight .k, & .highlight .kc, & .highlight .kd, & .highlight .kn,
  & .highlight .kp, & .highlight .kr { color: #6cb6ff; }
  & .highlight .kt { color: #4ad0c0; }
  & .highlight .o { color: #b6bdc6; }
  & .highlight .ow { color: #e6edf3; }
  & .highlight .gd { background-color: #4a1f1f; border-color: #a33; }
  & .highlight .gi { background-color: #1f4a28; border-color: #2a8a3c; }
  & .highlight .gr { color: #ff7b72; }
  & .highlight .gh, & .highlight .gu { color: #7ee787; }
  & .highlight .go { color: #7d8590; }
  & .highlight .gp { color: #8b93ff; }
  & .highlight .gt { color: #a5d66b; }
  & .highlight .m, & .highlight .mf, & .highlight .mh, & .highlight .mi,
  & .highlight .mo, & .highlight .il { color: #ffa657; }
  & .highlight .s, & .highlight .sb, & .highlight .sc, & .highlight .sd,
  & .highlight .s2, & .highlight .se, & .highlight .sh, & .highlight .sx,
  & .highlight .s1 { color: #f0a08a; }
  & .highlight .si { color: #ff7b72; }
  & .highlight .sr { color: #56d4c4; }
  & .highlight .ss { color: #ffd866; }
  & .highlight .na { color: #79c0ff; }
  & .highlight .nb, & .highlight .bp { color: #56d4c4; }
  & .highlight .nc { color: #4ad0c0; }
  & .highlight .no { color: #a5d66b; }
  & .highlight .nd, & .highlight .nl { color: #b3b8ff; }
  & .highlight .ni { color: #7d8590; }
  & .highlight .ne { color: #ff7b72; }
  & .highlight .nf { color: #d2a8ff; }
  & .highlight .nn { color: #56d4f0; }
  & .highlight .nt { color: #7ab8e8; }
  & .highlight .nv, & .highlight .vc, & .highlight .vg, & .highlight .vi { color: #7fd1c1; }
  & .highlight .w { color: #3a3f47; }
  & .css .o, & .css .o + .nt, & .css .nt + .nt { color: #7d8590; }
}

/* Theme toggle: pill switch at the bottom of the sidebar. The knob slides and
   shows the current theme's icon (sun = light, moon = dark); the icon is
   always white so it stays visible on the colored knob. */
.theme-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.theme-toggle {
  position: relative;
  width: 4rem;
  height: 2rem;
  padding: 0;
  background: #333537;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
  transition: background-color .35s ease, border-color .35s ease;
}
.theme-knob {
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: 1.625rem;
  height: 1.625rem;
  color: #fff;
  background: #f5a524;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.4, 1.4, .5, 1), background-color .35s ease;
}
.theme-knob svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin: -.575rem 0 0 -.575rem;
  transition: opacity .3s ease, transform .35s ease;
}
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.theme-toggle:focus-visible { outline: 2px solid #8b93ff; outline-offset: 2px; }
html[data-theme="dark"] .theme-toggle { background: #f4f4f4; border-color: #f4f4f4; }
html[data-theme="dark"] .theme-knob { background: #4a50d9; transform: translateX(1.875rem); }
html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* Fade the whole page between themes; the class is only set briefly on toggle */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
html.theme-transition .theme-knob { transition: transform .35s cubic-bezier(.4, 1.4, .5, 1), background-color .35s ease !important; }
html.theme-transition .theme-knob svg { transition: opacity .3s ease, transform .35s ease !important; }

/* Darker sidebar in dark theme (darker than the page, so it stays distinct) */
html[data-theme="dark"] .sidebar { background-color: #0a0b0d; }