/**
 * Design tokens (#714).
 *
 * Single source of truth for the z-index scale. Previously every layered
 * component picked an ad-hoc magic number (100 / 110 / 1000 / 9999 / 10000 /
 * 10001), so unrelated components tied and modal layers collided. These named
 * tiers replace the scattered literals; the numeric values are preserved from
 * the originals so this is a pure rename with no visual reordering.
 *
 * Loaded first on every page (before any other stylesheet) so the custom
 * properties are available document-wide, including to elements that set
 * `z-index` via inline style in JS.
 *
 * Tiers, low → high:
 *   --z-sticky          sticky headers / menu bar
 *   --z-sticky-raised   an open menu-bar dropdown above its bar
 *   --z-popover         in-page popovers / sticky toolbars
 *   --z-popover-raised  a popover layered above another
 *   --z-overlay         page-level non-modal overlays (e.g. install hint)
 *   --z-modal-backdrop  lightbox / base-modal full-screen backdrop
 *   --z-modal           primary modal dialogs
 *   --z-modal-raised    a confirm / inspector / picker stacked above a modal
 *   --z-toast           notifications — ABOVE every modal layer so error
 *                       toasts are never hidden behind a dialog's dimming (#777)
 *
 * Toasts deliberately sit at the very top: a modal's backdrop dims the page,
 * and the most important notifications (errors raised by an action taken
 * inside a dialog) must remain readable over that dimming.
 */
:root {
    --z-sticky: 100;
    --z-sticky-raised: 110;
    --z-popover: 1000;
    --z-popover-raised: 1100;
    --z-overlay: 9000;
    --z-modal-backdrop: 9999;
    --z-modal: 10000;
    --z-modal-raised: 10001;
    --z-toast: 10002;
}