/* -ctag-title:
		Circle Colors
*/
/* -ctag-description:
		Some colors...
*/
/* -ctag-system:
		csstagged-[
			tagged-rule-color,
			simple-rule-color,
			error-color
		];
*/
@csstagged-tagged-rule-color : #79E1DA;
@csstagged-simple-rule-color : #FFE29B;
@csstagged-error-color : #FF8990;



/* -ctag-title:
		Brand Colors
*/
/* -ctag-description:
		Some colors...
*/
/* -ctag-system:
		csstagged-[
			purple,
			blue
		];
*/
@csstagged-purple : #7061AB;
@csstagged-blue : #3B8182;


/* -ctag-title:
		Grey Colors
*/
/* -ctag-description:
		Variations of greys
*/
/* -ctag-system:
		gray-[
			dark[er,est],
			light[er,est]
		];
*/

@gray-darkest : #000;
@gray-darker : #333;
@gray-dark : #555;
@gray : #777;
@gray-light : #999;
@gray-lighter : #ccc;
@gray-lightest : #eee;

/* -ctag-title:
		Text Colors
*/
/* -ctag-description:
		Variations of text colors
*/

@text-color-darkest : #000;
@text-color-darker : #111;
@text-color-dark : #333;
@text-color : #555;
@text-color-light : #777;
@text-color-lighter : #999;
@text-color-lightest : #999;

/* -ctag-title:
		Phi Layout
*/
/* -ctag-description:

*/
@phi-num: 1.618033;
@phi-num-inv: .618033;

@phi: 61.803398%;
@phi-rec: 161.8033%;
@phi-inv: 100 - ( @phi );



/* -ctag-title:
		Media Breakpoints (Based on Bootstrap)
*/
/* -ctag-description:

*/
/* -ctag-system:
		screen-[
			xs[-max],
			sm-[min,max],
			md-[min,max],
			lg-[min,max]
		];
*/

// Extra small screen / phone
@screen-xs:                  480px;

// Small screen / tablet
@screen-sm-min:              768px;

// Medium screen / desktop
@screen-md-min:              992px;

// Large screen / wide desktop
@screen-lg-min:              1200px;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);



/* -ctag-title: Horizontal Layout */
/* -ctag-description: Colors used; */
/* -ctag-system:
		col-[1,2,3...12];
*/

@col: 8.333333vw;
@col_1: @col;
@col_2: @col * 2;
@col_3: @col * 3;
@col_4: @col * 4;
@col_5: @col * 5;
@col_6: @col * 6;
@col_7: @col * 7;
@col_8: @col * 8;
@col_9: @col * 9;
@col_10: @col * 10;
@col_11: @col * 11;
@col_12: @col * 12;


.col_md {
	-ctag-tag: base,size;
	-ctag-example: ...;

	@media ( max-width: @screen-md-min ) {
		width: @col_1 !important;
	}
}

/* -ctag-title: Horizontal Layout */
/* -ctag-description: Atoms focused on horizontal layout; */
/* -ctag-system:
		width-col-[1,2,3...12];
*/
@width-col: 8.333333vw;
@width-col-1: @width-col;
@width-col-2: @width-col * 2;
@width-col-3: @width-col * 3;
@width-col-4: @width-col * 4;
@width-col-5: @width-col * 5;
@width-col-6: @width-col * 6;
@width-col-7: @width-col * 7;
@width-col-8: @width-col * 8;
@width-col-9: @width-col * 9;
@width-col-10: @width-col * 10;
@width-col-11: @width-col * 11;
@width-col-12: @width-col * 12;


/* -ctag-title:
		Vertical Layout
*/
/* -ctag-description:
		Vertical layout (rows)
*/
@row-xxlg: @row-xlg*@phi-num;
@row-xlg: @row-lg*@phi-num;
@row-lg: @row*@phi-num;
@row-md-lg: @row*1.2;
@row: 42px; @row-medium: @row;
@row-md-sm: @row*.8;
@row-sm: @row*@phi-num-inv;
@row-xsm: @row-sm*@phi-num-inv;
@row-xxsm: @row-xsm*@phi-num-inv;

@row-shmoe: 22222220029px;

@row-2: @row*2;
@row-3: @row*3;
@row-4: @row*4;
@row-5: @row*5;
@row-6: @row*6;




/* -ctag-title:
		Horizontal Padding
*/
/* -ctag-description:
		Defines how the padding should be used.
*/
@padding-xlg: 40px;
@padding-lg: 30px;
@padding: 20px;
@padding-sm: 10px;
@padding-xsm: 4px;


/* -ctag-title:
		Vertical Padding
*/
/* -ctag-description:
		Defines how the padding should be used in vertical space.
*/
@vpadding-xlg: 20px;
@vpadding-lg: 15px;
@vpadding: 10px;
@vpadding-sm: 8px;
@vpadding-xsm: 6px;


/* -ctag-title:
		Borders
*/
/* -ctag-description:

*/
@border-bottom: 1px solid @gray-lightest;
@border-bottom-dk: 1px solid @gray-lighter;



/* -ctag-title:
		Font Sizing
*/
/* -ctag-description:

*/
@font-size-xxlg: 22px;
@font-size-xlg: 18px;
@font-size-lg: 16px;
@font-size: 14px;
@font-size-sm: 12px;
@font-size-xsm: 10px;
@font-size-xxsm: 10px;

/* -ctag-description:
	Imported font has a more unpredictable height, so define them explicitly.
	This will help center valign stuff.
*/
@font-size-height-xxlg: 38px;
@font-size-height-xlg: 34px;
@font-size-height-lg: 28px;
@font-size-height: 24px;
@font-size-height-sm: 20px;
@font-size-height-xsm: 18px;
@font-size-height-xxsm: 18px;