restructure theme css

CLAUDE.md

@@ -43,6 +43,13 @@ writes CSS, and the text is just as likely to be Go (the gowasm kit writes its m
 Go and has no JS build at all). Keeping it in the bundler made every Go-only consumer
 drag a JavaScript bundler along for a CSS file.
 
+`tw` also owns the **shared design system** as CSS, in three files: `tw_theme.css` and
+`tw_preflight.css` are Tailwind's own defaults, and `tw/kjol_theme.css` is the kjol
+extension layer — the semantic tokens (`surface`/`line`/`ink`/…), the class-based `dark`
+variant and the chart palette that BOTH kits name. `tw.CompileApp` stacks them: base
+Tailwind → kjol extensions → the app's brand `style.css`. So neither kit ships the tokens
+in its own tree; both inherit them from the compiler, and an app carries only brand.
+
 ### go/ — module `kjol`
 
 Packages, imported as `kjol/<name>`: `appenv basic chrono config csv dbutil finance httputil
@@ -125,8 +132,8 @@ tokens).
 `@custom-variant dark (&:where(.dark, .dark *));` is required — the built-in `dark` variant is a
 `prefers-color-scheme` media query, which a site with its own switch cannot use (the OS says one
 thing, the switch says another, and the media query wins). For gowasm the app defines the tokens
-(see `webui.ThemeTokens`); for the Solid kit `jsruntime/styles/theme.css` defines them and the
-bundler prepends it, so the app's `style.css` carries brand only.
+(see `webui.ThemeTokens`); for the Solid kit `tw/kjol_theme.css` defines them and the Tailwind
+engine prepends it (`tw.CompileApp`), so the app's `style.css` carries brand only.
 
 Controllers: `webui.Theme` (Go) and `jsruntime/uikit/Theme.tsx` (Solid) — both read the same
 `kjol-theme` localStorage key, so a preference survives crossing between two front-ends.
@@ -145,10 +152,6 @@ get a white flash until the bundle loads. It is the only hand-written JavaScript
   registry; the generated file is app-owned, not committed here). kjol ships only the SUBSET its
   own kit + `kjol-website` reference. An app's own `frontend/icons` is searched FIRST, so an app with
   a fuller kit keeps it — see `jsbundler.iconsDirs`.
-- `styles/theme.css` — the `@theme` scaffold, the semantic tokens, the `.dark` overrides, and the
-  `:root` fa vars. **It does the `@import "tailwindcss"`**, because the bundler PREPENDS it to the
-  app's `style.css` and an `@import` has to come first. An app adopting the shared tree therefore
-  drops that import from its own stylesheet and keeps only brand.
 - `auth/ utils/ hooks/ ssr/ env.ts basic.ts finance.ts superfun.ts types.d.ts` — generic TS
   scaffolding. Apps import as `@kjol/*`. (Concrete permission constants stay app-side.)