/* ============================================================================
TOKENS — one type scale, one surface, one spacing scale.
============================================================================
WHY THIS FILE EXISTS
Counted across cmms/, inventory/ and static/:
• 36 distinct font sizes (24 in px, 12 more in rem — .88rem and 14px are
the same 14.08px vs 14px, from two different authors)
• 4 font families (IBM Plex, ui-sans-serif, system-ui twice)
• 12 border radii (5 6 8 9 10 11 12 14 15 16 18 999)
• 12 card border colours (rgba(15,23,42,.08), #cbd5e1, rgba(226,231,239,.9) …)
• ~30 box-shadows
Nothing here is a new look. It is the same design, expressed once.
The handoff's own rule for surfaces:
"a near-white canvas, white cards with hairline borders"
— hairline borders, no shadows. That is what --fx-shadow-card resolves to.
HOW TO USE IT
New CSS references these variables instead of literals. Existing declarations
are migrated file by file, not all at once — this file only DECLARES the
scale. The one place it also applies anything is the font family, because a
stray `system-ui` in an inventory stylesheet was overriding the app typeface
on those pages.
TO REVERT
Delete this file and its in templates/base.html.
========================================================================= */
:root {
/* ── type: 6 steps ─────────────────────────────────────────────────────
Named by role, not by size, so a change of mind is one edit here. */
--fx-text-page: 20px; /* page title — "Delivery channels" */
--fx-text-card: 15px; /* card / section title — "Priorities" */
--fx-text-body: 13px; /* table cells, nav rows, form values */
--fx-text-meta: 12px; /* secondary line, helper text, timestamps */
--fx-text-label: 11px; /* uppercase column and group labels */
--fx-text-mono: 12px; /* codes and ids — ITM-0041, AST-01142 */
--fx-weight-normal: 400;
--fx-weight-medium: 500;
--fx-weight-bold: 600; /* nothing heavier; 700/800 read as shouting */
--fx-leading-tight: 1.25;
--fx-leading-body: 1.5;
--fx-track-label: .07em; /* the only place letter-spacing is used */
/* ── surface: one card ────────────────────────────────────────────────── */
--fx-radius: 12px; /* every card, panel, table and modal */
--fx-radius-sm: 8px; /* controls inside a card — inputs, buttons */
--fx-radius-pill: 999px; /* status chips only */
--fx-hairline: 1px solid var(--fx-border, #E4E9F0);
--fx-shadow-card: none; /* the handoff has no shadows */
--fx-shadow-pop: 0 8px 24px rgba(16, 24, 40, .10); /* dropdowns/modals */
/* ── spacing: 4 steps ─────────────────────────────────────────────────── */
--fx-space-1: 4px; /* label to its field */
--fx-space-2: 8px; /* between rows, chips, buttons */
--fx-space-3: 16px; /* inside a card, and between cards */
--fx-space-4: 24px; /* between page sections */
}
/* ── the one thing this file applies ──────────────────────────────────────
inventory/css/home.css and warehouse_base.css each declare their own
`font-family: system-ui, …`. Because they are ed per page they can beat
the app typeface on inventory screens, which is why the font looked different
between modules. Anchoring the family on both html and body, and letting
everything else inherit, removes the divergence without editing those files.
`font: inherit` on form controls is the browser default that Bootstrap resets
away and then only partially restores. */
html,
body,
body.app-body {
font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, "Segoe UI", sans-serif;
}
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn {
font-family: inherit;
}
/* Named, so anything outside this file can reach the same stack instead of
retyping it. The AI chat widget renders inline code and fenced blocks and
was about to hardcode a fourth copy of this list. */
:root {
--fx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
code, kbd, pre, samp, .font-mono {
font-family: var(--fx-font-mono);
font-size: var(--fx-text-mono);
}
/* ============================================================================
TYPE STEPS AND ELEVATION the design system defines and this file did not
============================================================================
COLOUR IS NOT HERE, ON PURPOSE.
static/general/theme.css already declares the whole palette — brand
neutrals, the four module accents, the five status triples — transcribed
from the same design system document, on the `body[data-theme="light"]`
selector. That selector outranks `:root`, so a colour declared here would
be dead code AND a second place to edit. Colour belongs to theme.css; this
file is type, surface geometry and spacing.
(Recorded because it is not obvious: a scan of tokens.css alone shows 38
`--fx-*` names referenced and undefined, which looks like a missing colour
layer and is not one. Grep the whole of static/general/ before concluding a
token has no home.)
Added from "CAFM Design System v1.0", which specifies eight type steps where
this file had six. The four below are the ones with no equivalent.
TWO DISAGREEMENTS between this file and the document, left as they are
rather than changed silently — each moves real pages and deserves its own
decision:
• --fx-text-page is 20px; the document's "Title 1" is 22px.
• --fx-weight-bold is 600, with a comment that 700 "reads as shouting".
The document uses 700 for Display / Title 1 / Title 2 and 600 only for
"Heading". --fx-weight-heavy is that 700, available but unused.
========================================================================= */
:root {
--fx-text-display: 34px; /* auth screens, empty states */
--fx-text-title-1: 22px; /* page title (web), mobile root title */
--fx-text-title-2: 17px; /* detail title, drawer title */
--fx-text-heading: 15px; /* card headings — same value as --fx-text-card */
--fx-weight-heavy: 700;
/* "Cards never cast shadows; they sit on the canvas with a hairline."
Levels 1 and 2 are only for things that float above the page. --fx-elev-2
is the same value --fx-shadow-pop already carries; both names are kept
because the document numbers its levels and the app named its use. */
--fx-elev-0: none;
--fx-elev-1: 0 4px 12px rgba(16, 24, 40, .08);
--fx-elev-2: var(--fx-shadow-pop);
}