header {
  --nav-fg: #111;
  --nav-line: rgba(255, 255, 255, .28);
  --nav-bg: rgba(0, 0, 0, .10);
  --nav-chip-bg: #111;
  --nav-chip-fg: #fff;
  --nav-hover-bg: #fff;
  --nav-hover-fg: #111;
  --nav-hover-line: #111;
  border-color: var(--nav-line);
  background: var(--nav-bg);
  color: var(--nav-fg);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

header[data-tone="dark"] {
  --nav-fg: #fff;
  --nav-line: rgba(255, 255, 255, .38);
  --nav-bg: rgba(0, 0, 0, .14);
  --nav-chip-bg: #fff;
  --nav-chip-fg: #111;
  --nav-hover-bg: #111;
  --nav-hover-fg: #fff;
  --nav-hover-line: #fff;
}

header > a:nth-child(2),
header span,
header .close {
  background: var(--nav-chip-bg);
  color: var(--nav-chip-fg);
}