/* ========================================================================== AlienView design system — "control-room at night" — TOKENS Portal redesign phase 1A + UX overhaul U1. Single source of design tokens. STYLESHEET SPLIT (U1) --------------------- The system now ships as three stylesheets, loaded in this order from dashboard/_base.html so the cascade + var resolution stay predictable: 1. theme.css — this file: tokens (:root vars), theming, data-status indirection, and the reduced-motion global. 2. components.css — the concrete component classes (card, pill, stat, check, button, tab bar, sheet, …) + the `.ui-app` scope and the phone-nav global. 3. patterns.css — the U1 instrumentation kit (notice, page/kpi headers, sparkline, meter, timeline, stages, age, queue row, segmented, icon). It was split when the single file passed ~500 lines; each `{% static %}` include is version-stamped for cache-busting and covered by the static-resolution tripwire test (dashboard/tests/test_static_assets.py). NAMESPACING ----------- Every token and class is prefixed `--ui-*` / `.ui-*`, with exactly TWO deliberate unprefixed globals (documented so the namespacing claim stays honest): 1. `header nav { display: none }` at <=720px — the IA change itself: the phone tab bar REPLACES the 20-link header nav, so the legacy selector must be reached. Lives in components.css (with the tab bar it enables). Known side effect: communications/notifications.js injects its unread-count bell pill into that header nav, so the badge is hidden on phones for now (documented follow-up for the reskin sweep). 2. The `prefers-reduced-motion` universal freeze at the bottom of THIS file — it intentionally spans the whole page, so it also stops legacy animations (the live page's heartbeat pip, the alarm-tile pulse): exactly what a reduced-motion user asked for. State is still conveyed by colour/text/icon, never by motion alone. Otherwise, the legacy templates each still carry their own `