Fix syntax highlighting colors being overridden by body text color

Add explicit color rules for .highlight pre/code elements in @layer base to
ensure Rouge syntax highlighting colors take precedence over Tailwind's body text color inheritance.

Author: JuanitoFatas

stylesheets/compiled.css

@@ -1962,6 +1962,20 @@ body:is(.dark *){
   color: rgb(250 250 249 / var(--tw-text-opacity, 1));
 }
 
+/* Ensure syntax highlighting colors are not overridden by body color */
+
+.highlight code {
+  color: inherit;
+}
+
+.highlight pre {
+  color: #333;
+}
+
+.dark .highlight pre {
+  color: #c9d1d9;
+}
+
 .container{
   width: 100%;
   margin-right: auto;

stylesheets/tailwind.css

@@ -23,4 +23,15 @@
     @apply bg-white text-stone-900 text-base leading-5 font-default;
     @apply dark:bg-stone-900 dark:text-stone-50;
   }
+
+  /* Ensure syntax highlighting colors are not overridden by body color */
+  .highlight code {
+    color: inherit;
+  }
+  .highlight pre {
+    color: #333;
+  }
+  .dark .highlight pre {
+    color: #c9d1d9;
+  }
 }