/* * Application shell. (Plan section 12) * * The look is meant to read as an instrument rather than a website: a dark * graphite housing, hairline separation instead of drop shadows, one warm accent * that means "act here", and the numbers set in a monospaced face because on * every screen in this product the numbers are the thing. Somebody has this open * for eight hours while they dispatch crews and chase invoices. It should sit * still and be legible, not perform. * * Dark is the primary theme and is authored first, on bare :root. Light is the * variant and is written twice below it. That is the inverse of the usual * arrangement and it is deliberate: the theme that gets the care should be the * one that isn't assembled from two half-definitions. * * Light-or-dark is one axis. Colour is a second, independent one: six palettes, * each authored in both modes, selected by data-app-palette on . The two * do not interact -- the neutral ramps below read their values out of * --pal-*-dark and --pal-*-light, and the palette blocks near the end of the * token section set both halves at once. See "the palettes" below. * * Dark mode has three states, not two: an explicit choice sets data-bs-theme on * , and the default "system" sets nothing and leaves prefers-color-scheme * to decide. Reading the four cases against the blocks below: * * no attribute + system dark -> :root (dark). The light media block is * scoped :not([data-bs-theme="dark"]) but its * media query does not match. -> dark * no attribute + system light -> light media block matches. -> light * attribute="dark" -> :root, and the light media block excludes * it by selector even if the OS is light. * attribute="light" -> :root[data-bs-theme="light"] wins. * * Every colour is a custom property and nothing below the token block hardcodes * one. That is not tidiness -- it is the whole mechanism behind the dark theme * and the per-tenant theme designer that lets a company set its own palette. * Both work by rewriting the same dozen variables, one from a media query and a * data attribute, the other from a