@fylgja/tokens/css/mq.css

[](https://www.npmjs.com/package/@fylgja/tokens) [](https://www.npmjs.com/package/@fylgja/tokens) [![License](https://img.shields.

:where(:root) {
	--sm: (width >= 480px);
	--sm-max: (width < 480px);
	--md: (width >= 768px);
	--md-max: (width < 768px);
	--lg: (width >= 1024px);
	--lg-max: (width < 1024px);
	--xl: (width >= 1440px);
	--xl-max: (width < 1440px);
	--xxl: (width >= 1920px);
	--xxl-max: (width < 1920px);
	--hd-color: (dynamic-range: high);
	--touch: (hover: none) and (pointer: coarse);
	--stylus: (hover: none) and (pointer: fine);
	--pointer: (hover) and (pointer: coarse);
	--mouse: (hover) and (pointer: fine);
	--scheme-dark: (prefers-color-scheme: dark);
	--scheme-light: (prefers-color-scheme: light);
	--motion-safe: (prefers-reduced-motion: no-preference);
	--motion-reduce: (prefers-reduced-motion: reduce);
	--opacity-safe: (prefers-reduced-transparency: no-preference);
	--opacity-reduce: (prefers-reduced-transparency: reduce);
	--data-safe: (prefers-reduced-data: no-preference);
	--data-reduce: (prefers-reduced-data: reduce);
	--contrast-more: (prefers-contrast: more);
	--contrast-less: (prefers-contrast: less);
	--portrait: (orientation: portrait);
	--landscape: (orientation: landscape);
}