/* DS-012: appearance-aware token replacement for legacy dark-mode rules. */
body,
.site-wrapper,
.post,
.post-content {
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-bg);
}

.post-title,
.watch-title,
.speaker-name {
  color: var(--tkc-color-text);
}

.theme-toggle {
  position: fixed;
  right: var(--tkc-space-4);
  bottom: var(--tkc-space-4);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tkc-space-7);
  height: var(--tkc-space-7);
  padding: 0;
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-surface);
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-pill);
  box-shadow: var(--tkc-shadow-md);
  font-size: var(--tkc-size-300);
  line-height: var(--tkc-leading-tight);
  cursor: pointer;
  transition:
    color var(--tkc-motion-fast) ease,
    border-color var(--tkc-motion-fast) ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--tkc-color-accent);
  border-color: var(--tkc-color-accent);
}

.theme-toggle:focus-visible {
  outline: medium solid var(--tkc-color-focus);
  outline-offset: var(--tkc-space-1);
}

/* screen.css targets the id. The extra project class deliberately raises
   specificity without modifying the vendored theme. */
#particles-js.tkc-particles {
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition-duration: 0s;
  }
}

/* The toggle is fixed to the bottom-right corner, so at the end of the page it
   covered the last footer links, including when they held keyboard focus
   (Requirement 8.2). Room below the footer, and scroll padding for focus, keep
   them clear of it. */
html:has(.theme-toggle) {
  scroll-padding-bottom: var(--tkc-space-8);
}

body:has(.theme-toggle) .site-footer {
  padding-bottom: var(--tkc-space-8);
}