/* ═════════════════════════════════════════════════════════════════════════════
js/forgeos-brand.css — the ForgeOS look, for the STAFF-FACING CRM.
Phoenix, 2026-09-13: "bring Spartan CRM into this … calling it ForgeOS CRM
with ForgeOS branding and colours. Complete colour change across all buttons,
everything in ForgeOS branding."
─── WHAT THIS FILE IS ────────────────────────────────────────────────────
The TOKEN layer. `js/spartan-tokens.css`, `js/portal-theme.css` and
`js/polish.css` each declare a `:root` block; this one is loaded after all
three and RE-DECLARES the same custom properties with ForgeOS values. So
every one of the ~350 `var(--red)` / `var(--spartan-red)` / `var(--sNNN)`
reads across nineteen stylesheets moves at once, without any of them being
edited. Then it restyles the handful of SHARED component classes — `.btn-r`
(386 call sites), `.nav-item`, `.pill`, `.inp`, `.bdg`, the login card — so
the primitives every page is built from are on-brand in one place rather
than at 386 of them.
What it CANNOT reach is a hex written into an inline `style="…"` inside a
module's template literal. Those are rewritten in the modules themselves.
This file's job is to make sure that work is a FINISH, not a prerequisite:
miss one and it still reads brand-correct, because the token fallbacks are
chosen to be legible either way (see THE ACCENT HAS THREE FORMS below).
─── WHERE IT LOADS ───────────────────────────────────────────────────────
ABOVE `js/responsive.css`, which must stay LAST in (CLAUDE.md, the
A-668 chain: responsive.css works by overriding inline styles and needs last
position, and `test/a668-responsive-chain.mjs` fails the deploy if it moves).
Below everything else, because overriding is the whole point.
`js/*.css` is served immutable/max-age=1yr and is NOT manifest-hashed, so
the `?v=` on its is the only thing that reaches a device that already
has the file — bump it on every edit.
─── THE ACCENT HAS THREE FORMS, AND THAT IS THE WHOLE RULE ───────────────
The CRM is a LIGHT application: white cards on a pale body. BRAND.md §2 is
explicit about what the brand does there — "On light backgrounds use the
light lockup — ink mark, ink wordmark, #a16207 slashes. NEVER yellow on
white." So the accent is not one colour:
PLATE a filled accent block: a primary button, an active nav pill,
a progress bar. #facc15 — and whatever sits ON it is BLACK.
ACCENT INK the accent used as TEXT, an icon, or a border that carries
meaning, on a white or pale ground. #a16207 — 4.96:1 on white.
SOFT the pale accent wash that replaces --pale-red #FBF3F4.
#fefce8, carrying #854d0e.
Getting this wrong is the ONE failure a search-and-replace of the old
#C41230 guarantees, and it is silent: white on #c41230 is 6.6:1 and was
correct everywhere, white on #facc15 is 1.7:1 and is a button whose label
has vanished. Nothing throws; the text is merely gone. That is the same
shape as every silent defect CLAUDE.md records.
Which is why `--red` below is mapped to the INK form, not to the yellow:
#a16207 is the only value that is legible BOTH as text on white AND as a
plate under white text, so a `var(--red)` this rebrand has not reached yet
degrades to something readable in either role rather than to an invisible
one. The bright #facc15 plate is applied deliberately, per component,
together with its black foreground — never by a token nobody can see the
other half of.
═════════════════════════════════════════════════════════════════════════ */
/* ── TOKENS ─────────────────────────────────────────────────────────────────
Re-declared, not renamed. Every consumer keeps reading the name it always
read; only the value moves. New `--fos-*` names are added alongside for the
three accent roles, because `--red` cannot express "and the text on it is
black" and a renderer must be able to ask for the ROLE. */
:root {
/* Brand — spartan-tokens.css */
--red: #a16207; /* accent INK: legible as text on white AND under white */
--red-dark: #854d0e;
--pale-red: #fefce8;
--ink: #0a0a0a;
--anthracite: #262626;
/* Brand — portal-theme.css */
--spartan-red: #a16207;
--spartan-red-hover: #854d0e;
--spartan-red-soft: #fefce8;
--portal-sidebar: #0a0a0a;
--portal-bg: #fafafa;
--portal-overlay: rgba(10,10,10,.45);
/* Brand — polish.css */
--red-light: #ca8a04;
--shadow-red-glow: 0 0 0 4px rgba(250,204,21,.22), 0 8px 24px -8px rgba(161,98,7,.30);
--pill-inner-red: inset 0 0 0 1px rgba(161,98,7,.22);
/* The three accent roles, named. A renderer asks for one of these. */
--fos-yellow: #facc15;
--fos-yellow-hi: #fde047;
--fos-plate: #facc15;
--fos-plate-hover: #eab308;
--fos-on-plate: #000000;
--fos-ink: #a16207;
--fos-ink-hover: #854d0e;
--fos-soft: #fefce8;
--fos-soft-ink: #854d0e;
--fos-soft-border: #fef08a;
--fos-near-black: #0a0a0a;
--fos-fg: #fafafa;
/* Neutrals. BRAND.md §3 is greyscale; the CRM's two scales were WARM STONE,
which reads brown beside yellow. Both scales (spartan-tokens' --sNNN and
portal-theme's --stone-NNN) move onto the brand's own neutral ramp, step
for step, so nothing shifts in weight — only in temperature. */
--s50: #fafafa; --stone-50: #fafafa;
--s100: #f5f5f5; --stone-100: #f5f5f5;
--s200: #e5e5e5; --stone-200: #e5e5e5;
--s300: #d4d4d4; --stone-300: #d4d4d4;
--s400: #a3a3a3; --stone-400: #a3a3a3;
--s500: #737373; --stone-500: #737373;
--s600: #525252; --stone-600: #525252;
--s700: #404040; --stone-700: #404040;
--s800: #262626; --stone-800: #262626;
--s900: #171717; --stone-900: #171717;
/* Status. BRAND.md §3's own hues, kept paired with the pale grounds the CRM
already uses for them — §9: colour never carries state alone, so these
stay distinguishable from the accent by more than temperature. */
--err-fg: #b91c1c; --err-bg: #fee2e2;
/* Type — BRAND.md §4. Inter carries the interface; Archivo Black is DISPLAY
and is reserved for the lockup and the page heroes below. JetBrains Mono
is the label/data face.
⚠ `system-ui` IS DELIBERATELY ABSENT FROM THESE STACKS, and that is a
MEASURED decision, not a style preference. CLAUDE.md's own scenario — a
surveyor's tablet with no network — means the Google Fonts does not
resolve and every stack falls through to its LAST resolvable entry. On a
box with no Inter installed, `system-ui` resolves to a face **19% wider**
than the generic `sans-serif` the old `'DM Sans', sans-serif` stack landed
on (measured: 'Installation Schedule' at 20px/800 — sans-serif 200px,
system-ui 238px). Putting `system-ui` first therefore made an OFFLINE
device silently re-flow every heading and every