From 473d3dd28c514fd976786f4887df7d5144895cc1 Mon Sep 17 00:00:00 2001
From: Justin Reiners <justin@reiners.io>
Date: Thu, 26 Mar 2026 17:25:05 -0500
Subject: [PATCH] fix: use :root:root for org branding to beat stylesheet
 specificity

The @theme `:root` block in the compiled CSS was overriding the inline
style tag because the stylesheet loads after svelte:head content.
Double :root selector gives the inline override higher specificity.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app.css                        | 12 +++++++++++-
 src/routes/(public)/+layout.svelte |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 92dcfb5..f0aee2e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,16 @@
 @import 'tailwindcss';
 
-@theme inline {
+@theme {
+	--color-primary: initial;
+	--color-primary-light: initial;
+	--color-primary-dark: initial;
+	--color-accent: initial;
+	--color-accent-light: initial;
+	--color-accent-dark: initial;
+	--color-warm-bg: initial;
+}
+
+:root {
 	--color-primary: #0d9488;
 	--color-primary-light: #14b8a6;
 	--color-primary-dark: #0f766e;
diff --git a/src/routes/(public)/+layout.svelte b/src/routes/(public)/+layout.svelte
index b49d936..db14f84 100644
--- a/src/routes/(public)/+layout.svelte
+++ b/src/routes/(public)/+layout.svelte
@@ -9,7 +9,7 @@
 	<meta name="description" content="{data.orgConfig.orgInfo.name} — {data.orgConfig.orgInfo.tagline || 'A foster-based animal rescue'}" />
 	<meta property="og:site_name" content={data.orgConfig.orgInfo.name} />
 	<meta property="og:type" content="website" />
-	{@html `<style>:root{--color-primary:${data.orgConfig.branding.primaryColor};--color-primary-light:${data.orgConfig.branding.primaryColorLight};--color-primary-dark:${data.orgConfig.branding.primaryColorDark};--color-accent:${data.orgConfig.branding.accentColor};--color-accent-light:${data.orgConfig.branding.accentColorLight};--color-accent-dark:${data.orgConfig.branding.accentColorDark}}</style>`}
+	{@html `<style>:root:root{--color-primary:${data.orgConfig.branding.primaryColor};--color-primary-light:${data.orgConfig.branding.primaryColorLight};--color-primary-dark:${data.orgConfig.branding.primaryColorDark};--color-accent:${data.orgConfig.branding.accentColor};--color-accent-light:${data.orgConfig.branding.accentColorLight};--color-accent-dark:${data.orgConfig.branding.accentColorDark}}</style>`}
 </svelte:head>
 
 <div class="min-h-screen flex flex-col bg-warm-bg">