Style syntax tokens: print colours on the web, monochrome in the EPUBs

The web uses ink with a few print colours: oxblood keywords, bottle-green
strings, umber literals, slate types, muted italic comments. Each is
defined as an --hl-* token, and all reach at least 4.5:1 on paper-2 in
both themes. The EPUBs rely on weight and slant (bold keywords, grey
italic comments), using flat selectors for the X4.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/epub/templates/style-x4.css

@@ -169,6 +169,24 @@ pre, code {
   -webkit-hyphens: none;
 }
 
+/* Syntax tokens (src/highlight.rs), monochrome for e-ink: weight and slant
+   carry the structure, one grey for comments. Flat selectors on purpose. */
+.hl-keyword,
+.hl-tag,
+.hl-title,
+.hl-strong {
+  font-weight: bold;
+}
+
+.hl-comment {
+  font-style: italic;
+  color: #444444;
+}
+
+.hl-emphasis {
+  font-style: italic;
+}
+
 table {
   border-collapse: collapse;
   font-size: 0.85em;

src/epub/templates/style.css

@@ -228,6 +228,24 @@ hr.rule {
   padding-left: 0.5em;
 }
 
+/* Syntax tokens (src/highlight.rs), monochrome for e-ink: weight and slant
+   carry the structure, one grey for comments. Flat selectors on purpose. */
+.hl-keyword,
+.hl-tag,
+.hl-title,
+.hl-strong {
+  font-weight: bold;
+}
+
+.hl-comment {
+  font-style: italic;
+  color: #555555;
+}
+
+.hl-emphasis {
+  font-style: italic;
+}
+
 .article-body table {
   border-collapse: collapse;
   font-size: 0.85em;

src/web/tailwind.css

@@ -83,6 +83,7 @@
   --paper:#f6f3ec; --paper-2:#ece7db; --ink:#1c1b18; --ink-2:#4f4b43; --muted:#6b665a;
   --rule:#d8d2c4; --rule-strong:#1c1b18; --accent:#a3231f; --accent-hover:#7c1a16;
   --loved:#2f6f46; --good:#2f6a8f; --down:#9c3f36; --warn:#7d631c; color-scheme:light;
+  --hl-keyword:#8c2a22; --hl-string:#3b6246; --hl-number:#7a4f16; --hl-type:#2c5572;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -90,6 +91,7 @@
     --paper:#151513; --paper-2:#1e1d1a; --ink:#ebe6da; --ink-2:#bfb9aa; --muted:#8f8a7d;
     --rule:#3a3833; --rule-strong:#ebe6da; --accent:#ef8c82; --accent-hover:#f7aaa2;
     --loved:#7fcb92; --good:#7fb8d8; --down:#ea8f84; --warn:#d9b45a; color-scheme:dark;
+    --hl-keyword:#e3a197; --hl-string:#a3c9a9; --hl-number:#d8b77a; --hl-type:#9dbdd3;
   }
 }
 
@@ -97,6 +99,7 @@
   --paper:#151513; --paper-2:#1e1d1a; --ink:#ebe6da; --ink-2:#bfb9aa; --muted:#8f8a7d;
   --rule:#3a3833; --rule-strong:#ebe6da; --accent:#ef8c82; --accent-hover:#f7aaa2;
   --loved:#7fcb92; --good:#7fb8d8; --down:#ea8f84; --warn:#d9b45a; color-scheme:dark;
+  --hl-keyword:#e3a197; --hl-string:#a3c9a9; --hl-number:#d8b77a; --hl-type:#9dbdd3;
 }
 
 @theme inline {
@@ -178,6 +181,17 @@
   .prose-body th, .prose-body td { overflow-wrap:normal; }
   .prose-body pre { @apply max-w-full overflow-x-auto rounded-sm bg-paper-2 p-4 text-sm leading-relaxed; }
   .prose-body :not(pre) > code { @apply rounded-sm bg-paper-2 px-1 py-0.5 text-[0.9em]; }
+  /* Syntax tokens (src/highlight.rs): ink-first, with a few print colours —
+     oxblood keywords, bottle-green strings, umber literals, slate types. All at
+     least 4.5:1 on paper-2 in both themes. Names and variables stay ink. */
+  .hl-keyword, .hl-tag, .hl-diff-delete { color:var(--hl-keyword); }
+  .hl-string, .hl-diff-add { color:var(--hl-string); }
+  .hl-number, .hl-constant, .hl-macro, .hl-attribute, .hl-label { color:var(--hl-number); }
+  .hl-type, .hl-namespace, .hl-constructor { color:var(--hl-type); }
+  .hl-comment { color:var(--muted); font-style:italic; }
+  .hl-punctuation, .hl-operator { color:var(--ink-2); }
+  .hl-title, .hl-strong { font-weight:600; }
+  .hl-emphasis { font-style:italic; }
   .prose-body blockquote { @apply my-7 border-l-2 border-rule-strong pl-5 text-ink-2; }
   .prose-body ul { @apply list-disc pl-6; }
   .prose-body ol { @apply list-decimal pl-6; }