:root {

	/* -- Global core sizing dimension --- */
	--dimension-0:   0px;
	--dimension-px:  1px;
	--dimension-0_5: 2px;
	--dimension-1:   4px;
	--dimension-1_5: 6px;
	--dimension-2:   8px;
	--dimension-2_5: 10px;
	--dimension-3:   12px;
	--dimension-3_5: 14px;
	--dimension-4:   16px;
	--dimension-5:   20px;
	--dimension-6:   24px;
	--dimension-7:   28px;
	--dimension-8:   32px;
	--dimension-9:   36px;
	--dimension-10:  40px;
	--dimension-11:  44px;
	--dimension-12:  48px;
	--dimension-14:  56px;
	--dimension-16:  64px;
	--dimension-20:  80px;
	--dimension-24:  96px;
	--dimension-28:  112px;
	--dimension-32:  128px;
	--dimension-36:  144px;
	--dimension-40:  160px;
	--dimension-44:  176px;
	--dimension-48:  192px;
	--dimension-56:  224px;
	--dimension-64:  256px;
	--dimension-72:  288px;
	--dimension-80:  320px;
	--dimension-96:  384px;

	/* Spacing tokens → dimensions */
	--spacing-null: var(--dimension-0);    /* 0px */
	--spacing-2xs: var(--dimension-0_5); /* 2px */
	--spacing-xs:   var(--dimension-1);    /* 4px */
	--spacing-sm:   var(--dimension-1_5);  /* 6px */
	--spacing-md:   var(--dimension-2);    /* 8px */
	--spacing-lg:   var(--dimension-2_5);  /* 10px */
	--spacing-xl:   var(--dimension-3);    /* 12px */
	--spacing-2xl:  var(--dimension-3_5);  /* 14px */
	--spacing-3xl:  var(--dimension-4);    /* 16px */
	--spacing-4xl:  var(--dimension-5);    /* 20px */
	--spacing-5xl:  var(--dimension-6);    /* 24px */
	--spacing-6xl:  var(--dimension-8);    /* 32px */

	/* Size tokens → dimensions (for heights etc.) */
	--size-3xs: var(--dimension-4);   /* 16px */
	--size-2xs: var(--dimension-5);   /* 20px */
	--size-xs:  var(--dimension-6);   /* 24px */
	--size-sm:  var(--dimension-8);   /* 32px */
	--size-md:  var(--dimension-9);   /* 36px */
	--size-lg:  var(--dimension-11);  /* 44px */
	--size-xl:  var(--dimension-12);  /* 48px */
	--size-2xl: var(--dimension-14);  /* 56px */
	--size-3xl: var(--dimension-16);  /* 64px */

	/* Icon sizes */
	--icon-size-xs:  var(--dimension-3);   /* 12px */
	--icon-size-sm:  var(--dimension-4);   /* 16px */
	--icon-size-md:  var(--dimension-5);   /* 20px */
	--icon-size-lg:  var(--dimension-6);   /* 24px */
	--icon-size-xl:  var(--dimension-8);   /* 32px */
	--icon-size-2xl: var(--dimension-10);  /* 40px */
}
