/* ============================================================================
V2 — the Aug 31 redesign. Began at tablet Active Orders; now the whole app.
Source of truth: docs/design/aug31-ui-layouts/ (screen `7a`). The handoff
README's token table is authoritative EXCEPT for the accent: it lists blue
#3b6fd4, but that colour appears only in the superseded 5d/6a/6b screens.
Every accent in 7a/7b/7c is teal #2a7d94, and 7a supersedes. Teal it is.
WHY A SEPARATE SHEET rather than swapping the tokens in :root — the DESIGN
covers Active Orders, Customers and the phone screens, and nothing else. It
has never covered Reports, Teams, Admin, Settings or the twenty modals, and
those were full of literal rgba() picked against a DARK background.
Rewriting :root would have flipped the app to paper and left every
undesigned surface illegible, in one diff nobody could review.
Reports, Teams, Admin and the modals HAVE since been extended from the same
system — their sections are at the foot of this file. They are still not in
the handoff, so this sheet, not the design, is their source of truth.
TWO SCOPES, and the difference is structural rather than stylistic:
`#app.v2` the operator board and its panes — everything inside #app.
`body.v2-on` the five customer-facing pages AND all twenty modals, which
sit OUTSIDE #app in the markup and so cannot be reached by
the selector above.
shared.js sets both, on every page.
⚠️ `body.v2-on` is on the operator app's too, so a rule written for
the public pages' primitives (.btn, .card, .form-input) also lands on the
operator app's identically-named ones. That is deliberate — same controls,
one set of rules — but it means no rule here is only a "public page" rule.
HOW IT LOADS: a AFTER index.html's inline