From 95ec8f30dd96a7910114907ab5ced77dae8d9d50 Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Fri, 27 Feb 2026 12:46:15 -0500
Subject: [PATCH] Fix branding not applying: move CSS vars out of @theme,
 inject after Tailwind

Tailwind v4's @theme block outputs CSS that came after the tenant theme
<style> tag, causing the defaults to win by source order. Two fixes:
- Move custom property defaults from @theme {} to :root {} so they're
  at the same cascade level as tenant overrides
- Inject tenant CSS before </head> instead of after <head> so it comes
  after all Tailwind output in the cascade

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app.css         | 2 +-
 src/hooks.server.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/app.css b/src/app.css
index 6bcd6a9..0034afd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,7 +2,7 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-@theme {
+:root {
 	--color-board-bg: #f1f2f4;
 	--color-page-bg: #f9fafb;
 	--color-nav-bg: #0079bf;
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 2e0c1de..6bb081e 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -63,7 +63,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	const response = await resolve(event, {
 		transformPageChunk: tenantCSS
-			? ({ html }) => html.replace('<head>', `<head>${tenantCSS}`)
+			? ({ html }) => html.replace('</head>', `${tenantCSS}</head>`)
 			: undefined
 	});
 
