/* Dark mode + floating theme toggle. Shared across all pages. */

.theme-toggle {
  position: fixed;
  right: 2.5ex;
  bottom: 2.5ex;
  z-index: 60;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px dashed steelblue;
  color: #404040;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}

.theme-toggle:hover { background-color: #e9eef2; }
.theme-toggle:focus-visible { outline: 3px solid #1b8fac; outline-offset: 4px; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.theme-toggle .icon-sun { display: none; }

html[data-theme="dark"] .theme-toggle {
  background-color: #1d2126;
  border-color: #4b7c9b;
  color: #cfcfcf;
}
html[data-theme="dark"] .theme-toggle:hover { background-color: #272c31; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

@media print { .theme-toggle { display: none; } }

/* ---------- dark palette ---------- */

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #15181b;

  /* CSS variables used by the writeup article template */
  --paper: #15181b;
  --panel: #1d2126;
  --ink: #d4d4d4;
  --muted: #8f8f8f;
  --heading: #c9c9c9;
  --line: #4b7c9b;
  --line-soft: #3a4a56;
  --link: #4ec8e6;
  --code-bg: #0e1113;
  --code-ink: #d8d8d8;
  --accent: #ff4d6a;
}

html[data-theme="dark"] body {
  background-color: #15181b;
  color: #d4d4d4;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: #c9c9c9; }

html[data-theme="dark"] .site-title,
html[data-theme="dark"] .site-title:hover,
html[data-theme="dark"] .site-title:visited,
html[data-theme="dark"] .site-title:active,
html[data-theme="dark"] .site-masthead { color: #c9c9c9; }

html[data-theme="dark"] a { color: #4ec8e6; }
html[data-theme="dark"] a:visited { color: #d47ab8; }
html[data-theme="dark"] a:active { color: #ff7a7a; }

html[data-theme="dark"] .box,
html[data-theme="dark"] .role,
html[data-theme="dark"] .writeup-entry,
html[data-theme="dark"] .article-header,
html[data-theme="dark"] .skip-link {
  background-color: #1d2126;
  border-color: #4b7c9b;
}

html[data-theme="dark"] ul { color: #7d7d7d; }
html[data-theme="dark"] li p { color: #d4d4d4; }

html[data-theme="dark"] .nav { background-color: #15181b; }

html[data-theme="dark"] .foot,
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .placeholder,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .role .meta { color: #8f8f8f; }

html[data-theme="dark"] .route { color: #8fb0c1; }
html[data-theme="dark"] .rdot { color: #ff4d6a; }
html[data-theme="dark"] .writeup-entry h2 a { color: #4ec8e6; }

html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
  background-color: #272c31;
  color: #dcdcdc;
}

html[data-theme="dark"] hr { border-top-color: #3a3f45; }

/* ---------- writeup article template ---------- */

html[data-theme="dark"] .eyebrow { color: #8fb0c1; }
html[data-theme="dark"] .deck,
html[data-theme="dark"] .article blockquote { color: #b6b6b6; }
html[data-theme="dark"] .article strong { color: #eaeaea; }
html[data-theme="dark"] .heading-anchor { color: #6d8592 !important; }

html[data-theme="dark"] .toc { background: rgb(29 33 38 / 72%); }
html[data-theme="dark"] .toc li { border-top-color: #33383d; }
html[data-theme="dark"] .toc .toc-subsection a::before { color: #6d8592; }

html[data-theme="dark"] .code-figure { border-color: #3a4a56; }
html[data-theme="dark"] .optional-code { border-color: #4b7c9b; }

html[data-theme="dark"] .article-figure {
  background-color: #1d2126;
  border-color: #55606a;
}

/* Excalidraw sketches are dark line art, so keep a light plate behind them. */
html[data-theme="dark"] .sketch-figure .figure-image-link { background: #e8e8e8; }

html[data-theme="dark"] .diagram-text {
  background: #1d2126;
  border-color: #55606a;
  color: #d4d4d4;
}

html[data-theme="dark"] .table-scroll { border-color: #4b7c9b; }
html[data-theme="dark"] th {
  background: #232a30;
  color: #9db4c1;
}
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-bottom-color: #33404a; }

html[data-theme="dark"] .site-footer {
  border-top-color: #3a3f45;
  color: #8f8f8f;
}