css-media-vars docs

xs = 0px to 600px, (0em+)
sm = 600px to 900px, (37.5em+)
md = 900px to 1200px, (56.25em+)
lg = 1200px to 1800px, (75em+)
xl = 1800px and up, (112.5em+)
Why these breakpoints? https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
Why em breakpoint units? https://zellwk.com/blog/media-query-units/

Media vars available for these breakpoints:
--media-xs (only extra small)
--media-sm (only small)
--media-md (only medium)
--media-lg (only large)
--media-xl (only extra large)
gte (greater than or equal)
--media-gte-sm (small and up)
--media-gte-md (medium and up)
--media-gte-lg (large and up)
lte (less than or equal)
--media-lte-sm (small and down)
--media-lte-md (medium and down)
--media-lte-lg (large and down)
sets
--media-sm-md (small and medium only)
--media-sm-md-lg (small, medium, and large only)
--media-md-lg (medium and large only)

--media-print
--media-screen
--media-speech
.media-print-demo:

--media-landscape
--media-portrait
--media-prefers-light
--media-prefers-dark
--media-prefers-reduced-motion
--media-any-hover-hover
--media-any-hover-none
--media-any-pointer-coarse
--media-any-pointer-fine
--media-any-pointer-none
--media-hover-hover
--media-hover-none
--media-pointer-coarse
--media-pointer-fine
--media-pointer-none

AND
--gray-if-prefers-dark-and-is-printing: var(--media-prefers-dark) var(--media-print) gray;

OR
--gray-if-prefers-dark-or-is-printing: var(--media-prefers-dark, var(--media-print)) gray;

If the condition applies to multiple properties, you can create compound conditions and use them in multiple places:
--prefers-dark-and-is-printing: var(--media-prefers-dark) var(--media-print);
--my-query-bg-color: var(--prefers-dark-and-is-printing) gray;
--my-query-border-size: var(--prefers-dark-and-is-printing) 2px;
background: var(--my-query-bg-color, black);
border: var(--my-query-border-size, 10px) solid black;