/* Ratios: 1.25, 1.618 */

:root {
	/* Base */
	--scrollbar-width: calc(100vw - 100%);
	--font-size: 10px;
	--ratioGolden: 1.618;
	--ratioMajorThird: 1.25;
	/* golden-ratio */
	--grl: 61.8%;
	--grm: 38.2%;
	--grs: 23.6%;
	/* Dimensions major third, 1.25 */
	--2xs: 0.819rem;
	--xs: 1.024rem;
	--s: 1.28rem;
	--m: 1.6rem;
	--l: 2rem;
	--xl: 2.5rem;
	--2xl: 3.125rem;
	--3xl: 3.906rem;
	--4xl: 4.883rem;
	/* Dimensions golden section, 1.618 */
	--2xsg: 0.378rem;
	--xsg: 0.611rem;
	--sg: 0.989rem;
	--mg: 1.6rem;
	--lg: 2.589rem;
	--xlg: 4.189rem;
	--2xlg: 6.777rem;
	--3xlg: 10.996rem;
	--4xlg: 17.742rem;
	/* UI */
	--header-height: 48px;
	--border-radius-l: var(--m);
	--border-radius: calc(var(--m) * 0.618);
	--border-radius-s: var(--2xsg);
	/* --border-radius-lg: 0; */
	/* --border-radius: 0; */
	--toolbar-height: 48px;
	--footer-height: 48px;
}