Elevation

Variable: shadow-elevation-1

Use for: Cards, subtle containers at base level.

Spec: x: -4px, y: 4px, blur: 8px, spread: 0, color: #CCCCCC @ 40%

Variable: shadow-elevation-2

Use for: Interactive elements, modals, dropdowns.

Spec: x: -4px, y: 4px, blur: 8px, spread: 0, color: #999999 @ 40%

Variable: shadow-elevation-3

Use for: Bottom navigation (primary), topmost overlays, highest depth.

Spec: x: 0, y: -4px, blur: 8px, spread: 0, color: #CCCCCC @ 40%

Variable: shadow-elevation-cta

Use for: Primary call-to-action buttons (brand accent).

Spec: x: 2px, y: 2px, blur: 0, spread: 0, color: RAW/greyscale/grey-20 @ 100%

Variable: shadow-meal-tray

Use for: Cut-out product shots on a card — meal trays, bottles. A filter, not a box-shadow, so it follows the image's alpha silhouette.

Spec: filter: drop-shadow(x: 24px, y: 20px, blur: 8px, color: #000000 @ 25%)