diff --git a/src/app.css b/src/app.css
index f0aee2e..ada40f1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,16 +1,6 @@
 @import 'tailwindcss';
 
 @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 db14f84..c1828e8 100644
--- a/src/routes/(public)/+layout.svelte
+++ b/src/routes/(public)/+layout.svelte
@@ -9,10 +9,10 @@
 	<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: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">
+<div class="min-h-screen flex flex-col bg-warm-bg" style="--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}">
 	<Header
 		orgName={data.orgConfig.orgInfo.name}
 		logoUrl={data.orgConfig.branding.logoUrl}