style(css): enhance code readability and maintainability by reformatting CSS rules and improving variable naming

Refactor CSS to improve readability and maintainability by reformatting
rules for better visual hierarchy. Introduce more descriptive variable
names for color themes and enhance the dark mode support. This change
aims to make the styles more consistent and easier to understand, while
also providing a more visually appealing and accessible user interface.

Author: kzndotsh

src/styles/code-highlight.css

@@ -148,7 +148,10 @@ pre {
   color: var(--hue-3);
 }
 
-.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
+.language-javascript
+  .token.template-string
+  > .token.interpolation
+  > .token.interpolation-punctuation.punctuation {
   color: var(--hue-5-2);
 }
 
@@ -276,7 +279,9 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
 
 /* Hovering over a linkable line number (in the gutter area) */
 /* Requires Line Numbers plugin as well */
-pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
+pre[id].linkable-line-numbers.linkable-line-numbers
+  span.line-numbers-rows
+  > span:hover:before {
   background-color: var(--syntax-cursor-line);
 }