diff --git a/frontend/index.html b/frontend/index.html
index 5667b30..fe47d13 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -715,22 +715,30 @@
* keeps every glyph at the same width and the caret perfectly
* aligned on every platform.
*
- * Each token uses a dedicated CSS variable (--syntax-*) with a
- * fallback chained to an existing semantic theme token, so all
- * existing themes keep working with sensible defaults; individual
- * themes can override --syntax-bold/--syntax-italic/--syntax-code
- * for fine-tuning.
+ * 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(--syntax-heading, var(--accent-primary)); }
- .syntax-overlay .md-bold { color: var(--syntax-bold, var(--warning)); }
- .syntax-overlay .md-italic { color: var(--syntax-italic, var(--accent-primary)); }
- .syntax-overlay .md-code { color: var(--syntax-code, var(--error)); background: var(--bg-tertiary); border-radius: 2px; }
- .syntax-overlay .md-link { color: var(--syntax-link, var(--link-color, var(--accent-primary))); }
+ .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-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); }
- .syntax-overlay .md-list { color: var(--syntax-list, var(--accent-primary)); }
- .syntax-overlay .md-blockquote{ color: var(--syntax-blockquote, var(--text-tertiary)); }
+ .syntax-overlay .md-list { color: var(--accent-primary); }
+ .syntax-overlay .md-blockquote{ color: var(--text-tertiary); }
.syntax-overlay .md-hr { color: var(--border-primary); }
- .syntax-overlay .md-wikilink { color: var(--syntax-wikilink, var(--link-internal, var(--accent-primary))); }
+ .syntax-overlay .md-wikilink { color: var(--link-internal, var(--accent-primary)); }
.syntax-overlay .md-frontmatter { color: var(--text-tertiary); }
.syntax-overlay .md-codeblock { color: var(--text-secondary); background: var(--bg-tertiary); }
diff --git a/themes/cobalt2.css b/themes/cobalt2.css
index 007c2af..55cf289 100644
--- a/themes/cobalt2.css
+++ b/themes/cobalt2.css
@@ -28,7 +28,10 @@
--success: #3ad900;
--error: #ff0088;
--warning: #ffc600;
-
+
+ /* Bold override: accent is yellow, so default yellow bold would collide. */
+ --syntax-bold: #ff9d00; /* cobalt2 orange */
+
/* 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);
diff --git a/themes/dark.css b/themes/dark.css
index dd6874b..428de2e 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -27,16 +27,6 @@
--error: #f87171;
--warning: #fbbf24;
- /* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
- --syntax-heading: #60a5fa; /* blue */
- --syntax-bold: #fbbf24; /* amber/yellow — Cursor-style */
- --syntax-italic: #c084fc; /* violet */
- --syntax-code: #f87171; /* salmon red */
- --syntax-link: #60a5fa;
- --syntax-list: #f59e0b; /* warm orange — stands out at line start */
- --syntax-wikilink:#a5b4fc; /* indigo */
- --syntax-blockquote: #9ca3af; /* muted gray */
-
/* 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);
diff --git a/themes/dracula.css b/themes/dracula.css
index dc2ca99..fa21e92 100644
--- a/themes/dracula.css
+++ b/themes/dracula.css
@@ -28,7 +28,7 @@
--success: #50fa7b;
--error: #ff5555;
--warning: #f1fa8c;
-
+
/* 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);
diff --git a/themes/gruvbox-dark.css b/themes/gruvbox-dark.css
index 2b99fab..5294a0f 100644
--- a/themes/gruvbox-dark.css
+++ b/themes/gruvbox-dark.css
@@ -28,7 +28,7 @@
--success: #b8bb26; /* Green */
--error: #fb4934; /* Red */
--warning: #fabd2f; /* Yellow */
-
+
/* 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);
diff --git a/themes/light.css b/themes/light.css
index f4461d3..63908e7 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -27,15 +27,9 @@
--error: #ef4444;
--warning: #f59e0b;
- /* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
- --syntax-heading: #2563eb; /* deep blue */
- --syntax-bold: #b45309; /* deep amber — readable on white */
- --syntax-italic: #7c3aed; /* deep violet */
- --syntax-code: #be123c; /* crimson */
- --syntax-link: #2563eb;
- --syntax-list: #c2410c; /* burnt orange */
- --syntax-wikilink:#4f46e5; /* indigo */
- --syntax-blockquote: #6b7280; /* slate */
+ /* Bold/italic overrides: deeper variants for readability on light background. */
+ --syntax-bold: #b45309; /* deep amber */
+ --syntax-italic: #0891b2; /* deep cyan */
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
diff --git a/themes/matcha-light.css b/themes/matcha-light.css
index 13f2f94..f1471bd 100644
--- a/themes/matcha-light.css
+++ b/themes/matcha-light.css
@@ -28,7 +28,11 @@
--success: #5da60a;
--error: #d9534f;
--warning: #f0ad4e;
-
+
+ /* Bold/italic overrides: deeper variants for readability on lime background. */
+ --syntax-bold: #a16207; /* deep amber */
+ --syntax-italic: #0e7490; /* deep cyan */
+
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(58, 77, 34, 0.1);
--shadow-md: 0 4px 6px -1px rgba(58, 77, 34, 0.15);
diff --git a/themes/monokai.css b/themes/monokai.css
index de26aa0..9f09f3a 100644
--- a/themes/monokai.css
+++ b/themes/monokai.css
@@ -28,7 +28,10 @@
--success: #a6e22e;
--error: #f92672;
--warning: #e6db74;
-
+
+ /* Italic override: accent is cyan, so default cyan italic would collide. */
+ --syntax-italic: #ae81ff; /* Monokai purple — cool but distinct */
+
/* 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);
diff --git a/themes/nord.css b/themes/nord.css
index 7956a11..951d634 100644
--- a/themes/nord.css
+++ b/themes/nord.css
@@ -28,7 +28,7 @@
--success: #a3be8c;
--error: #bf616a;
--warning: #ebcb8b;
-
+
/* 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);
diff --git a/themes/vs-blue.css b/themes/vs-blue.css
index ac3be2c..0b1431b 100644
--- a/themes/vs-blue.css
+++ b/themes/vs-blue.css
@@ -28,7 +28,12 @@
--success: #388a34;
--error: #e51400;
--warning: #f6a623;
-
+
+ /* Bold/italic overrides: deeper variants for readability on light background,
+ picked to match VS Code Light+ token colours. */
+ --syntax-bold: #795e26; /* VS function brown-amber */
+ --syntax-italic: #267f99; /* VS type teal */
+
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
diff --git a/themes/vue-high-contrast.css b/themes/vue-high-contrast.css
index 1743e0d..696e9e2 100644
--- a/themes/vue-high-contrast.css
+++ b/themes/vue-high-contrast.css
@@ -28,7 +28,7 @@
--success: #4caf50;
--error: #ff5252;
--warning: #ffb74d;
-
+
/* 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);