fixed themes

frontend/index.html

@@ -703,35 +703,10 @@
             to { opacity: 1; }
         }
         
-        /*
+        /* Syntax highlight colors (color-only — see issue #212) */
-         * Syntax highlight colors — COLOR-ONLY (issue #212).
-         *
-         * Why no font-weight or font-style?
-         *   The overlay sits on top of a transparent <textarea>. Macs render
-         *   bold/italic monospace glyphs (Monaco, Menlo) with slightly
-         *   different advance widths than regular glyphs, which shifts the
-         *   overlay characters out of alignment with the textarea caret.
-         *   Color-only highlighting (Cursor / One Dark Pro / Monokai style)
-         *   keeps every glyph at the same width and the caret perfectly
-         *   aligned on every platform.
-         *
-         * Token → variable mapping:
-         *   Almost every token uses a semantic theme variable directly
-         *   (--accent-primary, --text-tertiary, --border-primary), so
-         *   adding a new theme requires zero syntax-highlight work — the
-         *   theme's own brand colour automatically propagates.
-         *
-         *   The two exceptions are bold and italic, which have no natural
-         *   semantic home (the originals relied on font-weight/style which
-         *   we can no longer use). They have universal warm/cool defaults
-         *   (yellow/cyan) and themes only override --syntax-bold or
-         *   --syntax-italic when the default would collide with their
-         *   accent (e.g. Cobalt2 yellow accent) or needs a deeper variant
-         *   for a light background.
-         */
         .syntax-overlay .md-heading   { color: var(--accent-primary); }
         .syntax-overlay .md-bold      { color: var(--syntax-bold, #fbbf24); }
-        .syntax-overlay .md-italic    { color: var(--syntax-italic, #22d3ee); }
+        .syntax-overlay .md-italic    { color: var(--syntax-italic, #a78bfa); }
         .syntax-overlay .md-code      { color: var(--accent-secondary, var(--accent-primary)); background: var(--bg-tertiary); border-radius: 2px; }
         .syntax-overlay .md-link      { color: var(--link-color, var(--accent-primary)); }
         .syntax-overlay .md-link-url  { color: var(--text-tertiary); }

themes/cobalt2.css

@@ -29,8 +29,11 @@
     --error: #ff0088;
     --warning: #ffc600;
 
-    /* Bold override: accent is yellow, so default yellow bold would collide. */
+    /* Bold + italic — Cobalt2 native orange + cyan.
+       Heading is yellow (warm), so italic uses Cobalt2's signature cyan
+       instead of "lighter primary" to preserve warm/cool hierarchy. */
     --syntax-bold:   #ff9d00; /* cobalt2 orange */
+    --syntax-italic: #9effff; /* cobalt2 cyan */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);

themes/dark.css

@@ -27,6 +27,10 @@
   --error: #f87171;
   --warning: #fbbf24;
 
+  /* Bold + italic — warm emphasis + lighter primary for italic (cohesive with heading) */
+  --syntax-bold:   #fbbf24; /* amber/yellow */
+  --syntax-italic: #93c5fd; /* lighter blue — same family as heading, distinct by luminance */
+
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

themes/dracula.css

@@ -29,6 +29,10 @@
     --error: #ff5555;
     --warning: #f1fa8c;
 
+    /* Bold + italic — Dracula yellow + lighter purple (cohesive with purple heading) */
+    --syntax-bold:   #f1fa8c; /* Dracula yellow */
+    --syntax-italic: #d8b4fe; /* lighter purple — same family as heading */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

themes/gruvbox-dark.css

@@ -29,6 +29,10 @@
     --error: #fb4934;   /* Red */
     --warning: #fabd2f; /* Yellow */
 
+    /* Bold + italic — Gruvbox yellow + lighter peach (cohesive with orange heading) */
+    --syntax-bold:   #fabd2f; /* gruvbox yellow */
+    --syntax-italic: #fdba74; /* lighter peach — same family as orange heading */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);

themes/hacker.css

@@ -28,6 +28,10 @@
   --error: #ff6b8a;
   --warning: #ffd447;
 
+  /* Bold + italic — amber CRT alert + lighter matrix green (same green family) */
+  --syntax-bold:   #ffd447; /* amber CRT alert (historically authentic — amber CRTs existed) */
+  --syntax-italic: #86efac; /* lighter green — same family as matrix-green heading */
+
   /* Shadows — heavy, like a dim room */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.55);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.65);

themes/light.css

@@ -27,9 +27,9 @@
   --error: #ef4444;
   --warning: #f59e0b;
 
-  /* Bold/italic overrides: deeper variants for readability on light background. */
+  /* Bold + italic — warm emphasis + deeper primary for italic (cohesive on white) */
   --syntax-bold:   #b45309; /* deep amber */
-  --syntax-italic: #0891b2; /* deep cyan */
+  --syntax-italic: #1d4ed8; /* deeper blue — same family as heading, distinct by depth */
 
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

themes/matcha-light.css

@@ -29,9 +29,9 @@
     --error: #d9534f;
     --warning: #f0ad4e;
 
-    /* Bold/italic overrides: deeper variants for readability on lime background. */
+    /* Bold + italic — deep amber + deeper matcha green (cohesive with green heading on lime) */
-    --syntax-bold:   #a16207; /* deep amber */
+    --syntax-bold:   #a16207; /* deep amber — warm contrast on lime */
-    --syntax-italic: #0e7490; /* deep cyan */
+    --syntax-italic: #365314; /* deeper green — same family as matcha heading */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(58, 77, 34, 0.1);

themes/monokai.css

@@ -29,8 +29,9 @@
     --error: #f92672;
     --warning: #e6db74;
 
-    /* Italic override: accent is cyan, so default cyan italic would collide. */
+    /* Bold + italic — Monokai yellow + lighter cyan (cohesive with cyan heading) */
-    --syntax-italic: #ae81ff; /* Monokai purple — cool but distinct */
+    --syntax-bold:   #e6db74; /* Monokai yellow (strings) */
+    --syntax-italic: #a5f3fc; /* lighter cyan — same family as heading */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

themes/nord.css

@@ -29,6 +29,10 @@
     --error: #bf616a;
     --warning: #ebcb8b;
 
+    /* Bold + italic — aurora yellow + lighter frost (cohesive with frost-cyan heading) */
+    --syntax-bold:   #ebcb8b; /* nord13 — aurora yellow */
+    --syntax-italic: #bae6fd; /* lighter frost — same family as heading, distinct by luminance */
+
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

themes/ubuntu.css

@@ -28,6 +28,10 @@
   --error: #f07171;
   --warning: #ef7c2a;
 
+  /* Bold + italic — Ubuntu gold + lighter peach (cohesive with orange heading) */
+  --syntax-bold:   #ffce6b; /* warm gold */
+  --syntax-italic: #fdba74; /* lighter peach — same family as orange heading */
+
   /* Shadows — widget.shadow */
   --shadow-sm: 0 1px 2px 0 rgba(6, 1, 4, 0.55);
   --shadow-md: 0 4px 6px -1px rgba(6, 1, 4, 0.6);

themes/vs-blue.css

@@ -29,10 +29,9 @@
     --error: #e51400;
     --warning: #f6a623;
 
-    /* Bold/italic overrides: deeper variants for readability on light background,
+    /* Bold + italic — VS brown-amber + deeper VS blue (cohesive with blue heading on white) */
-       picked to match VS Code Light+ token colours. */
     --syntax-bold:   #795e26; /* VS function brown-amber */
-    --syntax-italic: #267f99; /* VS type teal */
+    --syntax-italic: #1e40af; /* deeper blue — same family as heading, distinct by depth */
 
     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);

themes/vue-high-contrast.css

@@ -29,6 +29,10 @@
     --error: #ff5252;
     --warning: #ffb74d;
 
+    /* Bold + italic — warm amber + lighter Vue green (cohesive with green heading) */
+    --syntax-bold:   #ffb74d; /* warm amber */
+    --syntax-italic: #86efac; /* lighter green — same family as heading, distinct by luminance */
+
     /* Shadows - deeper for high contrast */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7);