fix(marimo): theme=light root cause + blanket syntax token fallback

Root cause of the unreadable code editor: infra/marimo/marimo.toml had
`theme = "dark"` under [display], which causes marimo to apply the
.dark class to its app root. That triggers the rule

    .dark, .marimo:is(.dark *) { color-scheme: dark }

and flips every token through light-dark() to its dark value, so our
editorial cream palette was being replaced at the root with dark navy
at render time. All the panels, outline sidebar, data table headers,
and code cells were unreadable because of this single setting.

Fix: flip to theme = "light" in infra/marimo/marimo.toml. That removes
the .dark class from the app root, CodeMirror uses its oneLight theme
instead of oneDark, and all our existing :root / .marimo token overrides
now actually reach descendant elements.

CSS changes:
- Remove the .dark / html.dark / body.dark selector hacks — unneeded
  now that the root cause is fixed.
- Add a blanket fallback: `.cm-editor .cm-line [class^="ͼ"]` forces
  any unmapped CodeMirror token class to var(--foreground) at
  specificity (0,2,0). Specific token rules (.cm-editor .ͼq..ͼ15)
  override by equal specificity + later source position. This means
  token hashes can drift across marimo versions without regressing to
  invisible text.
- Explicit font-family on every cm-editor descendant — JetBrains Mono
  with a proper monospace fallback stack and font-feature-settings
  disabled so the editor doesn't fall back to a proportional font
  on any device.

assets/css/marimo.css

@@ -3,26 +3,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
-/* Force light color scheme globally. Marimo has a rule
-   `.dark, .marimo:is(.dark *) { color-scheme: dark }` which flips the
-   entire token set to dark values via `light-dark()`. That causes the
-   outline panel, context sidebars, etc. to render with dark navy
-   backgrounds even when the user wants editorial cream. Hard-kill it. */
-:root,
-html,
-body,
-.marimo,
-.dark,
-.dark .marimo,
-.dark-theme {
-  color-scheme: light !important;
-  --csstools-color-scheme--light: initial !important;
-}
-
 /* ============================================
    HTI-5 COLOR PALETTE
    ============================================ */
-:root, .marimo, html.dark, body.dark, .dark .marimo {
+:root, .marimo {
   --background:          #F7F5F0;
   --foreground:          #1A1A18;
   --card:                #FAFAF7;
@@ -62,7 +46,7 @@ body,
 /* ============================================
    FONT CONFIGURATION
    ============================================ */
-:root, .marimo, html.dark, body.dark, .dark .marimo {
+:root, .marimo {
   --monospace-font: var(--font-mono);
   --text-font: var(--font-body);
   --heading-font: var(--font-display);
@@ -74,7 +58,7 @@ body,
 /* ============================================
    MARIMO SEMANTIC VARIABLES
    ============================================ */
-:root, .marimo, html.dark, body.dark, .dark .marimo {
+:root, .marimo {
   --popover: var(--card);
   --popover-foreground: var(--foreground);
 
@@ -110,7 +94,7 @@ body,
    Remap neutral scales to HTI-5 warm cream palette.
    Steps 11-12 must be dark for text on light bg.
    ============================================ */
-:root, .marimo, html.dark, body.dark, .dark .marimo {
+:root, .marimo {
   /* Gray → Warm cream/linen */
   --gray-1:  #F7F5F0;
   --gray-2:  #F0EDE6;
@@ -325,7 +309,7 @@ body,
 /* ============================================
    TAILWIND PROSE - Markdown content
    ============================================ */
-:root, .marimo, html.dark, body.dark, .dark .marimo {
+:root, .marimo {
   --tw-prose-body: var(--foreground);
   --tw-prose-headings: var(--foreground);
   --tw-prose-lead: var(--muted-foreground);
@@ -378,21 +362,29 @@ body {
 /* ============================================
    CODE EDITOR - CODEMIRROR
    ============================================ */
+.cm-editor,
+.cm-editor *,
+.cm-content,
+.cm-content *,
+.cm-line,
+.cm-line *,
+.cm-gutters,
+.cm-gutterElement {
+  font-family: "JetBrains Mono", "Fira Mono", "Fira Code", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
+  font-feature-settings: "liga" 0, "calt" 0 !important;
+}
+
 .cm-editor {
-  font-family: var(--monospace-font) !important;
   font-size: 14px !important;
   background: var(--card) !important;
+  color: var(--foreground) !important;
 }
 
-.cm-content {
-  font-family: var(--monospace-font) !important;
-}
-
+.cm-content,
 .cm-line,
 .cm-editor .cm-line,
 .marimo-cell .cm-content,
 .marimo-cell .cm-line {
-  font-family: var(--monospace-font) !important;
   color: var(--foreground) !important;
   opacity: 1 !important;
 }
@@ -429,17 +421,33 @@ body {
 .tok-typeName { color: #A85800 !important; }
 .tok-bool { color: #C0392B !important; }
 
-/* CodeMirror/Lezer obfuscated syntax token classes — override the
-   One Dark theme marimo ships with editorial colours that are legible
-   on the cream background. Class hashes (.ͼq, .ͼr, etc.) are stable for
-   a given marimo frontend version (0.21.x at time of writing). */
+/* CodeMirror/Lezer obfuscated syntax token classes. CodeMirror generates
+   hash-based class names for each theme token at runtime. With the
+   light theme, known hashes are ͼq .. ͼ15 (per marimo frontend 0.21.x);
+   on theme or version bump these will change. The blanket rule under
+   these specific overrides catches ANY unmapped token and forces a
+   legible foreground colour so we never regress to invisible text.
+   Specific rules below win for the tokens we want coloured. */
 .cm-editor .ͼp,
 .marimo-cell .cm-editor {
   background-color: var(--card) !important;
   color: var(--foreground) !important;
 }
+
+/* Fallback: any child of .cm-line / .cm-content gets foreground. This
+   beats the default CodeMirror token rule (class alone = specificity
+   (0,1,0)) with specificity (0,2,0). Specific tokens below override. */
+.cm-editor .cm-line > *,
+.cm-editor .cm-line [class^="ͼ"],
+.cm-editor .cm-line [class*=" ͼ"],
+.cm-editor .cm-content > *,
+.cm-editor .cm-content [class^="ͼ"],
+.cm-editor .cm-content [class*=" ͼ"] {
+  color: var(--foreground) !important;
+}
+
 .cm-editor .ͼq { color: #2E3D8F !important; font-weight: 600 !important; }  /* keyword   → indigo dark */
-.cm-editor .ͼr { color: #1A1A18 !important; }                                /* variable  → near-black (was salmon!) */
+.cm-editor .ͼr { color: #1A1A18 !important; font-weight: 500 !important; } /* variable  → near-black */
 .cm-editor .ͼs { color: #2E3D8F !important; }                                /* function  → indigo dark */
 .cm-editor .ͼt { color: #A85800 !important; }                                /* number    → sepia */
 .cm-editor .ͼu { color: #1A1A18 !important; }                                /* default   → near-black */
@@ -500,6 +508,38 @@ th {
   border-bottom: 2px solid var(--sidebar-accent) !important;
 }
 
+/* Every descendant of a table header on dark navy must be LIGHT.
+   mo.ui.table renders column type labels (i32, str, f64) using
+   .text-muted-foreground which is #6B6B68 slate — invisible on navy.
+   Force all th/columnheader descendants to light palette. */
+th *,
+th span,
+th div,
+th button,
+th .text-muted-foreground,
+[role="columnheader"],
+[role="columnheader"] *,
+[role="columnheader"] span,
+[role="columnheader"] div,
+[role="columnheader"] button,
+[role="columnheader"] .text-muted-foreground {
+  color: var(--sidebar-foreground) !important;
+}
+
+[role="columnheader"] {
+  background: var(--primary) !important;
+  font-family: var(--heading-font) !important;
+}
+
+/* Primary column name text (not the type label) — brighter cream */
+th > span:first-child,
+th > div:first-child,
+[role="columnheader"] > span:first-child,
+[role="columnheader"] > div:first-child {
+  color: var(--primary-foreground) !important;
+  font-weight: 600 !important;
+}
+
 td {
   background: var(--card) !important;
   color: var(--foreground) !important;
@@ -852,15 +892,24 @@ b {
   background: transparent !important;
 }
 
-/* Inline code in markdown body */
+/* Inline code in markdown body — editorial pill with strong contrast.
+   Warm sepia text on cream pill with a hairline border reads as a
+   monospace quote on the cream canvas. */
 .markdown code,
-.paragraph code {
-  background: var(--secondary) !important;
-  color: var(--primary) !important;
-  padding: 0.1rem 0.3rem !important;
+.markdown p code,
+.paragraph code,
+.prose code,
+p code,
+li code,
+td code {
+  background: #F0EDE3 !important;
+  color: #8E3A00 !important;
+  padding: 0.1rem 0.4rem !important;
+  border: 1px solid #D4CFBF !important;
   border-radius: var(--radius) !important;
   font-family: var(--monospace-font) !important;
-  font-size: 0.92em !important;
+  font-size: 0.88em !important;
+  font-weight: 500 !important;
 }
 
 /* Cell output area — don't wrap in its own background box */

infra/marimo/marimo.toml

@@ -51,7 +51,7 @@ enable_pyflakes = false
 default_width = "medium"
 dataframes = "rich"
 cell_output = "below"
-theme = "dark"
+theme = "light"
 default_table_page_size = 10
 default_table_max_columns = 50
 reference_highlighting = true