Shadow
Five elevations, where the number is a rank rather than a multiplier — and the only scale whose colour belongs to the mode.
Every other scale here is base × N, where the trailing number multiplies a base unit. Shadow is not, and cannot be. A shadow is four numbers and a colour, and they do not move together — doubling a blur while doubling an offset gives a different kind of shadow, not a bigger one. So --shadow-3 is the third step up, not three of anything, and the set is a curated ramp rather than an arithmetic one.
The previews below cast from a real surface rather than the guide purple used everywhere else. That is deliberate: the other previews borrow a colour because their token has none, and a shadow already carries one.
Elevations
Five elevations, each one geometry plus a reference to the mode's shadow colour.
| Token | Value | Preview |
|---|---|---|
| --shadow-0 | … | |
| --shadow-1 | … | |
| --shadow-2 | … | |
| --shadow-3 | … | |
| --shadow-4 | … |
Blur grows faster than offset — offset runs 1 · 2 · 8 · 16 while blur runs 2 · 8 · 24 · 40 — because that is what distance actually does. A thing barely lifted has a tight, dark contact shadow; a thing lifted far has a wide, soft one. Scaling the two together produces a shape nothing casts.
The spread goes negative, and increasingly so — 0 · −2 · −4 · −8. Without it, a 40px blur bleeds out sideways as far as it falls downward and the card reads as glowing rather than raised. Pulling the shadow in at the edges keeps the light overhead, which is the only lighting model an interface can afford to have.
--shadow-0 is none, not a zeroed geometry — the identity step, so elevation can be removed by swapping a variable rather than by deleting a declaration. Only 1 and 2 are used so far, on the shell's buttons and its active segment; 3 and 4 wait for the components that need them.
Geometry is fixed, the mode sets the colour
Read the Value column and every step ends in var(--color-shadow). The geometries live in :root and never change; the colour is declared once per mode and resolves at the point of use, so the same token gives a different shadow inside a data-mode subtree without a second set of tokens.
The two modes are not the same colour at a different lightness — they are wildly different strengths. Light uses near-black at 12%; dark uses pure black at 50%, over four times the alpha. A shadow works by darkening what is behind it, and on a near-black surface there is almost nothing left to darken, so the same geometry that reads clearly on white disappears entirely on dark unless it is pushed that far. Toggle the mode and watch the lower steps: they are the same numbers doing much harder work.
Which is worth knowing before reaching for elevation on dark at all. Shadow is a weak signal there whatever the alpha, and a border or a surface step often says raised more clearly — the reason --color-surface-raised exists alongside this scale rather than instead of it.