/* ============================================================================
* Shared visual design system — "modern dark sidebar" look, introduced 1.8.0.
* Loaded by every page via .
*
* Scope: this file owns fixed PLATFORM CHROME — the sidebar shell, page
* background, card chrome, semantic status colors (success/warning/danger),
* and the metric pill badges. It deliberately does NOT touch --color-primary
* / --color-secondary — those stay per-org themeable via the Theme Library
* (see services/theme_catalog.py) and are set inline per-page + overridden
* at runtime by applyThemeColors() in js/api.js. Mixing the two systems in
* one file would make it unclear which colors an org admin can actually
* change; keeping platform chrome here and brand colors in :root keeps that
* boundary visible in the code, not just in your head.
* ==========================================================================*/
/* --- Fonts -------------------------------------------------------------
* --font-heading/--font-body/--font-sidebar are set at runtime by
* applyAppearance() (js/api.js) from the platform admin's typography
* settings (Platform Console → Appearance). Falls back to Open Sans if
* nothing has been customized. Headings and the sidebar fall back to the
* body font specifically (not straight to Open Sans) so setting only the
* body font still gives a consistent look everywhere else. */
body {
font-family: var(--font-body, "Open Sans"), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading, var(--font-body, "Open Sans")), sans-serif;
}
.sidebar-shell {
font-family: var(--font-sidebar, var(--font-body, "Open Sans")), sans-serif;
}
/* --- Page background: light neutral canvas + selectable pattern -----------
* --page-bg and the pattern class are set at runtime by applyAppearance()
* in js/api.js, from the platform admin's appearance settings (Platform
* Console only — see services/appearance.py). Falls back to the built-in
* look (grid pattern, #f8fafc) if nothing has been customized. */
body.bg-background {
background-color: var(--page-bg, #f8fafc);
}
body.bg-pattern-grid {
background-image:
linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
background-size: 24px 24px;
}
body.bg-pattern-dots {
background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
background-size: 18px 18px;
}
body.bg-pattern-none {
background-image: none;
}
/* --- Sidebar shell ---------------------------------------------------------
* Applied to the