Elevação & Profundidade

Visão ao vivo

Sombra em 5 níveis, todas usando a mesma cor-base, variando só o espalhamento — cresce junto com a escala de espaçamento:

Nível	Classe	`box-shadow`
1	`.mds-elevation--1` (ou `.elevation--1`)	`0 1px 1px rgba(22, 22, 23, 0.15)`
2	`.mds-elevation--2` (ou `.elevation--2`)	`0 2px 4px rgba(22, 22, 23, 0.15)`
3	`.mds-elevation--3` (ou `.elevation--3`)	`0 4px 8px rgba(22, 22, 23, 0.15)`
4	`.mds-elevation--4` (ou `.elevation--4`)	`0 8px 16px rgba(22, 22, 23, 0.15)`
5	`.mds-elevation--5` (ou `.elevation--5`)	`0 16px 24px rgba(22, 22, 23, 0.15)`

Blur (glassmorphism pontual — não é padrão de fundo): --mds-blur-xs 8px · --mds-blur-sm 16px · --mds-blur-md 32px · --mds-blur-lg 48px · --mds-blur-xl 64px, via .blur--{tam} (backdrop-filter).

Divisores: linha 1px sólida na cor de borda (não sombra) — usada em vez de elevação para separar seções de mesma superfície.

Motion: transições de estado (hover/active/expand) usam 0.2s com easing cubic-bezier(0.645, 0.045, 0.355, 1) — perceptível mas rápido, sem “bounce”.