CSS Architecture

Source files (`app/public/assets/css/`)

variables.css — all CSS custom properties (colors, spacing, sizing tokens)
colors.css — colour tokens (referenced by variables.css)
reset.css / modern-normalize.min.css — resets
base.css — base element styles
common.css — shared components (header/nav, search bar, accessibility, buttons)
typography.css — type scale
utilities.css — utility classes and spacing tokens
style.css — main public entry point (via @import chain)
Page-specific: public.css (home), tfe.css, repertoire.css, content-page.css (about/licences), system.css (admin system dashboard), file-access.css, admin.css (admin section)
Form: form-base.css + form-admin.css (plus FilePond vendor CSS)

Source CSS is bundled and minified by scripts/build-css.mjs (lightningcss) into app/public/assets/dist/*.min.css:

base.min.css — resolves the @import chain in style.css into one file (eliminates ~17 sequential imports)
admin.min.css — minified admin.css
form.min.css — form-base.css + form-admin.css + FilePond vendor CSS
plus individual .min.css for the page-specific files

Run with just build-css / just dev-build. Never commit hand-edits into dist/ — they are generated.

Colour values live in variables.css/colors.css as custom properties; avoid hardcoding hex/rgb in other files.
Admin and public share the same token names — no separate admin theme.
modern-normalize.min.css and FilePond vendor CSS are third-party (minified — do not edit).