From 7bbe336f6b530fb6c5b2e62cee401ca7de0d09ce Mon Sep 17 00:00:00 2001
From: Jason Tudisco <tudisco@macm4pro.folk-galaxy.ts.net>
Date: Wed, 27 May 2026 22:06:55 -0600
Subject: [PATCH] =?UTF-8?q?fix(kez-chat/web):=20@theme=20block=20was=20bei?=
 =?UTF-8?q?ng=20dropped=20=E2=80=94=20theme=20never=20applied?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The deployed redesign rendered dark-bg but unstyled, low-contrast text
because none of the --color-* tokens or token utilities were in the
output CSS. Two compounding causes, both fixed:

1. A CSS @import url(google-fonts) AFTER @import "tailwindcss" becomes a
   misplaced import once Tailwind inlines itself; Lightning CSS drops it
   and everything after — including @theme. Fonts now load via <link> in
   index.html.
2. A box-drawing-unicode comment immediately before @theme stopped
   Tailwind v4 from transforming the block. Replaced with plain ASCII.

CSS 21.8KB → 26.3KB; tokens + utilities now present; theme applies.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 kez-chat/web/index.html  |  6 ++++++
 kez-chat/web/src/app.css | 15 +++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/kez-chat/web/index.html b/kez-chat/web/index.html
index 87d855b..fad9c0d 100644
--- a/kez-chat/web/index.html
+++ b/kez-chat/web/index.html
@@ -7,6 +7,12 @@
   <title>kez-chat</title>
   <meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." />
 
+  <!-- Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). Loaded
+       here, not via CSS @import — see app.css note. -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" />
+
   <!-- Browser tab + Android Chrome favicon -->
   <link rel="icon" href="/favicon.ico" sizes="48x48" />
   <link rel="icon" type="image/svg+xml" href="/kez-icon.svg" />
diff --git a/kez-chat/web/src/app.css b/kez-chat/web/src/app.css
index c927942..7ca8b05 100644
--- a/kez-chat/web/src/app.css
+++ b/kez-chat/web/src/app.css
@@ -1,13 +1,12 @@
 @import "tailwindcss";
 
-/* Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");
-
-/* ───────────────────────────────────────────────────────────────────────────
-   KEZ design tokens — see DESIGN.md. Dark-first, "muted tactical terminal."
-   Tailwind v4 turns each --color-* into bg-*/text-*/border-* utilities,
-   each --font-* into font-*, each --radius-* into rounded-*.
-   ─────────────────────────────────────────────────────────────────────────── */
+/* KEZ design tokens (see DESIGN.md). Dark-first, "muted tactical terminal."
+   Tailwind v4 turns each --color-* into bg-/text-/border- utilities, each
+   --font-* into font-*, each --radius-* into rounded-*.
+   NOTE: keep this @theme block free of fancy unicode comments and do NOT
+   put a CSS `@import url()` before it — either one stops Tailwind from
+   transforming @theme, and Lightning CSS then drops the whole block.
+   Fonts load via <link> in index.html for that reason. */
 @theme {
   /* Elevation ramp (neutral near-black) */
   --color-bg: #0b0c0e;