:root{
--container-xs:560px;
--container-sm:760px;
--container-md:1040px;
--container-lg:1280px;
--container-full:1600px;

--header-h:72px;
--header-h-compact:56px;
--announce-h:40px;

--z-base:0; /* @kind other */
--z-raised:10; /* @kind other */
--z-sticky:100; /* @kind other */
--z-header:200; /* @kind other */
--z-drawer:300; /* @kind other */
--z-overlay:400; /* @kind other */
--z-dialog:500; /* @kind other */
--z-toast:600; /* @kind other */

/* editorial ratios used for product and hero imagery */
--ratio-bottle:3 / 4; /* @kind other */
--ratio-box:1 / 1; /* @kind other */
--ratio-editorial:4 / 5; /* @kind other */
--ratio-wide:16 / 9; /* @kind other */
--ratio-band:21 / 9; /* @kind other */
}