:root{
/* Light, warm-greige admin theme (Brompton DEFECTS aesthetic) */
--bg:#f4f3ee; --bg2:#efece4; --panel:#ffffff; --panel2:#faf9f5;
--gunmetal:#f1efe9; --border:#e8e5dc; --border2:#dedacd;
--txt:#1b1a16; --muted:#76746a; --muted2:#777268; /* synced to theme.css 2026-08-25 — the old #a6a39a was 2.4:1 on --bg */
--ink:#14130f; /* brand black / active nav */
--amber:#3b454d; --amber2:#262e34; --amber-dim:#e8ebee; --on-accent:#f4f5f6; /* accent: gunmetal grey (light) */
--chase:#9e2f23; --quote:#6b6a69; --reply:#6e6d6c; /* chase = the sanctioned exception hue, synced to theme.css 2026-08-25 */
--await:#81817f; --notissued:#8a877d; --awarded:#6b6a69; --internal:#7c7a70; --grey:#8a877d;
--radius:14px; --radius-sm:8px; --radius-lg:20px; --r:8px;
/* control-size scale (2026-08-16 decision): the .btn family's heights were
cascade accidents — three competing font-sizes and one hardcoded 38px —
so control geometry gets tokens like spacing got --sp-N. On-grid:
36 / 28 / 24. check-control-scale.mjs bans raw-px control heights. */
--ctl-h:36px; --ctl-h-sm:28px; --ctl-h-xs:24px; --ctl-h-lg:44px; /* lg = the touch floor */
--mono:ui-monospace,'JetBrains Mono','SF Mono','Cascadia Code','Roboto Mono',Menlo,Consolas,monospace;
--sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px;
--shadow:0 1px 2px rgba(28,27,22,.05);
--shadow-sm:0 1px 2px rgba(28,27,22,.06);
--shadow-md:0 1px 2px rgba(28,27,22,.05), 0 8px 20px -14px rgba(28,27,22,.16);
--shadow-lg:0 1px 3px rgba(28,27,22,.06), 0 14px 30px -18px rgba(28,27,22,.20);
--shadow-xl:0 4px 14px -8px rgba(28,27,22,.12), 0 30px 60px -30px rgba(28,27,22,.26);
--ring:0 0 0 1px color-mix(in srgb,var(--amber) 60%,transparent);
--ring-focus:0 0 0 3px color-mix(in srgb,var(--amber) 26%,transparent), 0 0 0 1px color-mix(in srgb,var(--amber) 72%,transparent);
--ease:cubic-bezier(.16,.84,.44,1);
--ease-out:cubic-bezier(.22,1,.36,1);
--sheen:none;
--hairline:inset 0 0 0 1px rgba(28,27,22,.015);
--panel-grad:#ffffff;
--panel-grad-hover:#faf9f4;
--amber-glow:none;
--display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--txt); font:400 14px/1.5 var(--body); letter-spacing:0;
min-height:100vh; padding:0;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::after{content:none}
/* TOOLBOX ambient layer — a near-invisible engineering vector-field behind the
whole app. Sits above the opaque paper background (negative z-index paints
above the parent body bg) but below all in-flow content, so it reads as faint
texture in the gutters, never competing with data. Painted by the IIFE near
; honours prefers-reduced-motion and pauses on tab-hide. */
#procBg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;
pointer-events:none;opacity:.5;transition:opacity .6s var(--ease,ease)}
@media (prefers-reduced-motion: reduce){ #procBg{opacity:.34} }
/* ── BOOT SPLASH ────────────────────────────────────────────────────────────
The cloud boot is a chain of round-trips (config fetch -> CDN supabase-js ->
getSession -> hydrate every island -> realBoot), and until realBoot runs the
shell is PAINTED BUT EMPTY: sidebar and chrome drawn, every register blank,
the header mid-layout. That half-built state was the first thing a user saw.
This covers it with the brand until the app is genuinely ready.
Rules that make it safe rather than another thing that can break:
* it is markup + CSS in