/* Shared theme toggle styling.
   Each direction supplies --paper, --ink, --rule, --accent-fg, --mono.
   Toggle inherits those tokens so the control reads correctly in either mode. */
.theme-toggle {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  color: var(--ink-soft, currentColor);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule, currentColor);
  transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-toggle:hover {
  border-color: var(--accent-fg, currentColor);
}
.theme-toggle span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 11px 7px;
  opacity: 0.45;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-toggle span + span {
  border-left: 1px solid var(--rule, currentColor);
}
.theme-toggle[data-theme-now="light"] .opt-light,
.theme-toggle[data-theme-now="dark"] .opt-dark {
  color: var(--accent-fg, currentColor);
  opacity: 1;
}
.theme-toggle .glyph {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.theme-toggle .opt-dark .glyph {
  background: currentColor;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-fg, currentColor);
  outline-offset: 2px;
}