refreshed themes

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
+         * Token → variable mapping:
-         * fallback chained to an existing semantic theme token, so all
+         *   Almost every token uses a semantic theme variable directly
-         * existing themes keep working with sensible defaults; individual
+         *   (--accent-primary, --text-tertiary, --border-primary), so
-         * themes can override --syntax-bold/--syntax-italic/--syntax-code
+         *   adding a new theme requires zero syntax-highlight work — the
-         * for fine-tuning.
+         *   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-heading   { color: var(--accent-primary); }
-        .syntax-overlay .md-bold      { color: var(--syntax-bold, var(--warning)); }
+        .syntax-overlay .md-bold      { color: var(--syntax-bold, #fbbf24); }
-        .syntax-overlay .md-italic    { color: var(--syntax-italic, var(--accent-primary)); }
+        .syntax-overlay .md-italic    { color: var(--syntax-italic, #22d3ee); }
-        .syntax-overlay .md-code      { color: var(--syntax-code, var(--error)); background: var(--bg-tertiary); border-radius: 2px; }
+        .syntax-overlay .md-code      { color: var(--accent-secondary, var(--accent-primary)); background: var(--bg-tertiary); border-radius: 2px; }
-        .syntax-overlay .md-link      { color: var(--syntax-link, var(--link-color, var(--accent-primary))); }
+        .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-list      { color: var(--accent-primary); }
-        .syntax-overlay .md-blockquote{ color: var(--syntax-blockquote, var(--text-tertiary)); }
+        .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); }
         

themes/cobalt2.css

@@ -29,6 +29,9 @@
     --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);

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);

themes/light.css

@@ -27,15 +27,9 @@
   --error: #ef4444;
   --warning: #f59e0b;
 
-  /* Markdown syntax-highlight colors (color-only, no font-weight / italic) */
+  /* Bold/italic overrides: deeper variants for readability on light background. */
-  --syntax-heading: #2563eb; /* deep blue */
+  --syntax-bold:   #b45309; /* deep amber */
-  --syntax-bold:    #b45309; /* deep amber — readable on white */
+  --syntax-italic: #0891b2; /* deep cyan */
-  --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 */
 
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

themes/matcha-light.css

@@ -29,6 +29,10 @@
     --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);

themes/monokai.css

@@ -29,6 +29,9 @@
     --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);

themes/vs-blue.css

@@ -29,6 +29,11 @@
     --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);