Sombras y estados

Sombras, hover, deshabilitado y foco.

Sombras: shadow-xs inputs; shadow-xs-skeuomorphic botones e iconos destacados; shadow-sm mando del toggle; shadow-lg menús, tooltips, notificaciones; shadow-xl modales. Son las mismas en claro y oscuro; sobre fondos oscuros las exteriores casi no se ven y la separación la dan bg-primary_alt y los bordes.
Hover: cambia el fondo un escalón (bg-primary → bg-primary_hover) o el color del texto a su _hover. Deshabilitado: 50% de opacidad en todo el control. Sin animaciones decorativas; transiciones de 100–150 ms en color y en el mando del toggle.
Backdrop de modal: bg-overlay al 70% con backdrop-blur-lg (16px).

Sombras

Utilidad	Muestra	Uso
		Inputs, badge modern, botones secundarios (planos).
		Botones e iconos destacados (modern). El borde interior da el leve relieve; en oscuro solo queda el borde interior.
		Mando del toggle, pestaña seleccionada de un control segmentado.
		Tarjetas que se elevan con hover.
		Menús desplegables, tooltips, notificaciones.
		Modales.
		Slideouts, menús de comandos.
		Maquetas de cabecera.
		Foco de teclado en cualquier control: hueco de 2px en bg-primary y después 4px de focus-ring.
		Foco de teclado en un control destructivo o un campo con error.

Utilidad	Valor	Uso
	`blur(8px)`	Cabeceras fijas.
	`blur(16px)`	Fondo de los modales.
	`blur(24px)`	Paneles de cristal.
	`blur(40px)`	Capas sobre cabeceras grandes.