Z-Index Scale

# Z-Index Scale

Centralize z-index into a named scale instead of scattered magic numbers 🪄

## Problem

- ~47 `z-index:` declarations in SCSS/Vue + ~14 Tailwind `z-*` classes, no single source of truth.
- Values cluster into unnamed tiers: chrome (drawer 110, header 120, notifications 130), dropdowns/overlays (200/300), modals (1000/1001).
- Tailwind `z-100`/`z-200`/`z-1000` classes are used but **not in the default scale and not extended in config** — likely inert (generate no CSS).

## Proposed scale

Named layers with gaps so future insertions don't renumber:

| Token | Value |
|-------|-------|
| dropdown | 100 |
| sticky | 200 |
| drawer | 300 |
| header | 400 |
| overlay | 500 |
| modal | 600 |
| toast | 700 |

Gaps of 100 leave room to insert layers, and stay close to the values already in use (110/120/130).

Delivery: CSS custom properties (`--z-modal: 600`) — usable from both SCSS `var(--z-modal)` and Tailwind `z-[var(--z-modal)]`. One source, no duplication.

## Scope

- Only tokenise values in the **global** stacking contest. Leave local `1/2/3/10` literals alone.
- ~15–20 global sites to migrate; the rest stay.

## Risk

- Inert `z-100/200/1000` Tailwind classes will start working once tokenised — visual pass needed on modals/overlays, not a blind find-replace.
- A scale aids readability, not correctness — most z-index bugs are stacking contexts (`position`/`transform`/`overflow`), which this does not fix.