/* Shared dark preview. Keep the existing layout and image assets. */
html[lang] {
  color-scheme: dark;
  --paper: #0f0f0f;
  --ink: #f2f1ed;
  --muted: #b9c1b7;
  --line: #3b403b;
  --soft: #171a17;
  --cover-name: #b4c0b7;
  --cover-discipline: #fff;
  --focus: #d5e5cd;
  background: var(--paper);
}

html[lang] body {
  background: var(--paper);
  color: var(--ink);
}

html[lang] .site-header {
  background: rgb(15 15 15 / .8);
}

html[lang] .nav-panel {
  background: rgb(15 15 15 / .85);
  box-shadow: 0 12px 20px rgb(0 0 0 / .2);
}

html[lang] .languages .separator {
  color: var(--muted);
}

html[lang] .site-footer {
  background: #181a18;
}

html[lang] .lightbox,
html[lang] .lightbox::backdrop {
  background: var(--paper);
}

html[lang] .lightbox {
  color: var(--ink);
}

html[lang] :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

html[lang] :is(.option-project-link, .project-strip-link):focus-visible {
  outline-offset: -5px;
}

html[lang] .contact-button:focus-visible {
  outline-offset: 5px;
}