/* basic spacing --------------------------------------------------------*/

/* @group @Variables - padding / margin */

:root {
--spacing-xx-small: .1875rem;
--spacing-x-small: calc(var(--spacing-paragraph) * .25);
--spacing-small: calc(var(--spacing-paragraph) * .5);
--spacing-medium: calc(var(--spacing-paragraph) * .75);
--spacing-paragraph: 1.5rem;
--spacing-section-x-small: calc(var(--spacing-paragraph) * 1.25);
--spacing-section-small: calc(var(--spacing-paragraph) * 1.5);
--spacing-section: calc(var(--spacing-paragraph) * 2);
--spacing-section-large: calc(var(--spacing-paragraph) * 2.5);
--spacing-section-x-large: calc(var(--spacing-paragraph) * 3);

--form-spacing-xx-small: calc(var(--form-spacing-paragraph) * .125);
--form-spacing-x-small: calc(var(--form-spacing-paragraph) * .25);
--form-spacing-small: calc(var(--form-spacing-paragraph) * .5);
--form-spacing-medium: calc(var(--form-spacing-paragraph) * .75);
--form-spacing-paragraph: 1.5rem;
--form-checkbox-height: calc(var(--form-spacing-paragraph) * 2);
--form-spacing-section-x-small: calc(var(--form-spacing-paragraph) * 1.25);
--form-spacing-section-small: calc(var(--form-spacing-paragraph) * 1.5);
--form-spacing-section: calc(var(--form-spacing-paragraph) * 2);
--form-spacing-section-large: calc(var(--form-spacing-paragraph) * 2.5);
--form-spacing-section-x-large: calc(var(--form-spacing-paragraph) * 3);
}

/* @end @Variables - padding / margin */

/* horizontal spacing --------------------------------------------------------*/




/* @group @Variables - horizontal margin / padding */

:root {
--body-xn-padding-base:4.375vw;
}

@media all and (min-width: 48em) {

:root {
--body-xn-padding-base: calc( ((100vw - 45rem) / 2) + 4.375vw);
}

}

:root {
--body-xn-padding: var(--body-xn-padding-base);
--body-xn-padding-sf-right: calc(env(safe-area-inset-right) + var(--body-xn-padding));
--body-xn-padding-sf-left: calc(env(safe-area-inset-left) + var(--body-xn-padding));
}

/* @end @Variables - horizontal margin / padding */




/* horizontal spacing --------------------------------------------------------*/

/* @group @Variables - horizontal margin / padding */

:root {
--body-x-padding-base:4.375vw;
}

/*@media all and (min-width: 62em) {

:root {
--body-x-padding-base: calc((100vw - 60rem) / 2);
}

}*/

@media all and (min-width: 62em) {

:root {
/*--body-x-padding-base: calc(2.5vw + 1.5rem);*/
--body-x-padding-base: calc((100vw - 60rem) / 2);
}

}

/*@media all and (min-width: 80em) {

:root {
--body-x-padding-base: calc((100vw - 74rem) / 2);
}

}*/

/* @end @Variables - horizontal margin / padding */

/* horizontal spacing --------------------------------------------------------*/

/* @group @Variables - horizontal margin / padding */

:root {
--body-x-padding: var(--body-x-padding-base);
--body-x-padding-sf-right: calc(env(safe-area-inset-right) + var(--body-x-padding));
--body-x-padding-sf-left: calc(env(safe-area-inset-left) + var(--body-x-padding));
}

/* @end @Variables - horizontal margin / padding */

/* @group @Variables - horizontal margin / padding */

:root {
--body-x-padding-inset: calc(var(--body-x-padding-base) * -1);
--body-x-padding-sf-right-inset: calc(var(--body-x-padding-sf-right) * -1);
--body-x-padding-sf-left-inset: calc(var(--body-x-padding-sf-left) * -1);
}

@media all and (min-width: 48em) {

:root {
--body-x-padding-inset: 0;
--body-x-padding-sf-right-inset: 0;
--body-x-padding-sf-left-inset: 0;
}

}

/* @end @Variables - horizontal margin / padding */

/* @group @Variables - horizontal margin / padding */

:root {
--reading-x-padding: var(--body-x-padding-base);
--reading-x-padding-sf-right: calc(env(safe-area-inset-right) + var(--reading-x-padding));
--reading-x-padding-sf-left: calc(env(safe-area-inset-left) + var(--reading-x-padding));
}

@media all and (min-width: 48em) {

:root {
--reading-x-padding: calc((100vw - 45rem) / 2);
--reading-x-padding-sf-right: var(--reading-x-padding));
--reading-x-padding-sf-left: var(--reading-x-padding));
}

}

/* @end @Variables - horizontal margin / padding */

/* @group @Variables - horizontal margin / padding */

@media all and (min-width: 48em) {

:root {
--linklist-x-padding: var(--body-x-padding-base);
--linklist-x-padding-sf-right: calc(env(safe-area-inset-right) + var(--reading-x-padding));
--linklist-x-padding-sf-left: calc(env(safe-area-inset-left) + var(--reading-x-padding));
}

}

@media all and (min-width:50em){

:root {
--linklist-x-padding: calc((100vw - 50rem) / 2);
--linklist-x-padding-sf-right: var(--reading-x-padding));
--linklist-x-padding-sf-left: var(--reading-x-padding));
}

}

/* @end @Variables - horizontal margin / padding */

/* @group @Variables - horizontal margin / padding */

:root {
--link-x-padding: var(--body-x-padding-base);
--link-x-padding-sf-right: calc(env(safe-area-inset-right) + var(--link-x-padding));
--link-x-padding-sf-left: calc(env(safe-area-inset-left) + var(--link-x-padding));
}

@media all and (min-width: 48em) {

:root {
--link-x-padding: var(--spacing-small);
--link-x-padding-sf-right: var(--link-x-padding));
--link-x-padding-sf-left: var(--link-x-padding));
}

}

/* @end @Variables - horizontal margin / padding */

/* @group @Variables - horizontal margin / padding */

:root {
--stepper-x-padding: var(--body-x-padding-base);
--stepper-x-padding-sf-right: calc(env(safe-area-inset-right) + var(--link-x-padding));
--stepper-x-padding-sf-left: calc(env(safe-area-inset-left) + var(--link-x-padding));
}

@media all and (min-width: 48em) {

:root {
--stepper-x-padding: calc((100vw - 40rem) / 2);
}

}

/* @end @Variables - horizontal margin / padding */

/* nav --------------------------------------------------------*/

/* @group @Variables - icon-size */

:root {
--close-icon-size-after: 2.25rem;
}

/* @end @Variables - icon-size */

/* @group @Variables - linklist nav */

:root {
--linklist-icon-size-before: 2.25rem;
--linklist-icon-size-after: 1.5rem;
}

/* @end @Variables - linklist nav */

/* @group @Variables - link btn */

:root {
--linklist-icon-size-before: 2.25rem;
--linklist-icon-size-after: 1.5rem;
}

/* @end @Variables - link btn */

/* @group @root */

:root {
--gap-column-size: var(--spacing-paragraph);
--gap-row-size: var(--spacing-paragraph);
--gap-row-section-size: var(--spacing-section-small);
--grid-count: 2;
}

/* @end @root */