@base-url: "../mixins";
@import "@{base-url}/root.less";
@import "@{base-url}/colors.less";
@import "@{base-url}/utilities.less";
@import "@{base-url}/grid.less";
@import "@{base-url}/vendor-prefixes.less";

//screen widths
@set-screen: {
	xs:	551px;
	sm: 641px;
	md: 761px;
	lg: 1025px;
	xl:	1281px;
	xxl:1441px;
};

@font-family: 'Noto Sans TC', 'Noto Sans SC';
	
// colors
@blue: 	#007bff;
@indigo:#6610f2;
@purple:#6f42c1;
@pink:	#e83e8c;
@red:	#dc3545;
@orange:#fd7e14;
@yellow:#ffc107;
@green:	#28a745;
@teal:	#20c997;
@cyan:	#17a2b8;
@set-colors: {
	blue: 	@blue;
	indigo:	@indigo;
	purple:	@purple;
	pink:	@pink;
	red:	@red;
	orange:	@orange;
	yellow:	@yellow;
	green:	@green;
	teal:	@teal;
	cyan:	@cyan;
};
	
// theme colors
@primary:	#be9aa3;
@secondary:	#000;
@complement:spin(@primary, 180);
@triadic1:	spin(@primary, -120);
@triadic2:	spin(@primary, 120);
@info:		#313131;
@white:		#fff;
@black:		#000;
@gray:		#666;
@set-theme-colors: {
	primary: 	@primary;
	secondary:	@secondary;
	complement:	@complement;
	triadic1:	@triadic1;
	triadic2:	@triadic2;
	info:		@info;
	white:		@white;
	black:		@black;
	gray:		@gray;
};

// Grid columns
@grid-columns: 		12;
@grid-name:			~"col";
@grid-gutter-width:	15px;

.make-columns-loop("", @grid-columns);
.make-utilities();
each(@set-screen, {
	@media (min-width: @value) {
		.make-columns-loop(@key, @grid-columns);
		.make-utilities(@key);
	}
});