Elevation

Five shadow levels as shadow-elevation-*, for what floats over content.

Panels separate by tone first: the surface-container steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning.

@foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)

{{ $shadow }}

@endforeach