/* WanderPlan app-level component rules — design system v1 * * Deliberately SEPARATE from tokens.css and rules.css, which are the * Claude Design handoff verbatim. Keeping our own rules here means a * future handoff revision can be dropped straight in without a merge. * * Load order: tokens.css -> rules.css -> app.css. */ /* ==================================================================== 0 · Tokens the handoff did not ship tokens.css covers surfaces, ink, status and party. It has nothing for the four things the templates keep reaching for a literal to get: a modal backdrop, a hover wash, a translucent panel over map tiles, and a shadow colour. Every one of those was written as rgba(0,0,0,x) or rgba(255,255,255,x), and a fixed black or white cannot follow a theme — which is exactly what made dark mode unreadable. These live here rather than in tokens.css because tokens.css is the Claude Design handoff verbatim and has to stay droppable-in. Each is built with color-mix() over tokens that ALREADY flip, so none of them contains a value of its own. THE ONE TRAP, recorded so nobody re-derives it: --wp-n-50..950 are NOT redefined in the dark block. A raw ramp token therefore keeps its light-mode lightness when the surface under it flips. That is a bug for text (n-700 on the dark raised surface is 1.9:1) but it is the whole point for a scrim: a backdrop must be near-black in BOTH themes, so --wp-n-950 is the correct base in light, and in dark the darkest token available is --wp-sunken (L 14%). ==================================================================== */ :root { /* ---- color-scheme ----------------------------------------------- Nothing in this app declared `color-scheme` anywhere, in any stylesheet or template, and everything below is a consequence of that. It is invisible to a static check because none of it is expressed as a colour we author. · base.html sets `html { overflow-y: scroll }`, so EVERY page carries a permanent scrollbar. Without color-scheme the UA draws it in its light palette — a white gutter down the side of a dark page, on every screen. · The form-control baseline in section 1 deliberately excludes checkbox, radio, file, range and color inputs, and it cannot reach a