Update code.css

Author: LeaVerou

style/partials/code.css

@@ -1,3 +1,5 @@
+
+
 code, textarea, pre {
 	margin: 0;
 	font: 100%/1.5 var(--font-mono);
@@ -19,16 +21,25 @@ pre + pre {
 }
 
 /* Syntax highlighting */
+:where(.token) {
+	--color-code-comment: var(--color-neutral-50a);
+	--color-code-punctuation: var(--color-neutral-80a);
+	--color-code-1: var(--color-accent-2);
+	--color-code-2: var(--color-accent-1);
+	--color-code-3: var(--color-accent-4);
+	--color-code-4: var(--color-accent-3);
+	--color-code-5: orange;
+}
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: var(--color-neutral-50a);
+	color: var(--color-code-comment);
 }
 
 .token.punctuation {
-	color: var(--color-neutral-80a);
+	color: var(--color-code-punctuation);
 }
 
 .namespace {
@@ -41,15 +52,15 @@ pre + pre {
 .token.number,
 .token.constant,
 .token.symbol {
-	color: var(--color-accent-2);
+	color: var(--color-code-1);
 }
 
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin {
-	color: var(--color-accent-1);
+	color: var(--color-code-2);
 }
 
 .token.operator,
@@ -58,19 +69,19 @@ pre + pre {
 .language-css > .token.string,
 .token.inserted,
 .token.function {
-	color: var(--color-accent-4); /* deep pink */
+	color: var(--color-code-3);
 }
 
 .token.attr-value,
 .token.keyword,
 .token.variable {
-	color: var(--color-accent-3);
+	color: var(--color-code-4);
 }
 
 .token.atrule,
 .token.regex,
 .token.important {
-	color: orange;
+	color: var(--color-code-5);
 }
 
 .token.important,
@@ -90,4 +101,4 @@ pre + pre {
 	&.punctuation {
 		mix-blend-mode: normal;
 	}
-}
+}