From 18a2c1314a1255d0250a8f66f43dce83db7feb4f Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 21:15:47 +0800
Subject: [PATCH] Remove @layer base cyan defaults to eliminate refresh flash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Browser paints cached Vite CSS (@layer base cyan defaults) before the
inline script populates the static style tag. Remove the competing
cyan defaults — accent vars now come exclusively from the static
<style id="umbra-accent"> tag in index.html, which the inline script
always populates with the correct color before first paint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/index.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index c7eaa7d..677e3ad 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,12 +26,11 @@
     --ring: var(--accent-h) var(--accent-s) var(--accent-l);
     --radius: 0.5rem;
 
-    /* Default accent: cyan — safety fallback if inline script fails.
-       The <style id="umbra-accent"> tag injected by index.html overrides
-       these (unlayered > @layer base), as does useTheme's inline styles. */
-    --accent-h: 187;
-    --accent-s: 85.7%;
-    --accent-l: 53.3%;
+    /* Accent vars (--accent-h/s/l) are NOT defined here.
+       They come exclusively from <style id="umbra-accent"> in index.html
+       (populated by inline script from localStorage, fallback cyan).
+       Defining them here causes a cyan flash on refresh because the
+       browser paints cached CSS before the inline script executes. */
 
     /* Transitions */
     --transition-fast: 150ms;