// PHOTON v 0.1.2-alpha
// Variables
// --------------------------------------------------

// Type
// --------------------------------------------------

// Try to use the system's font on whatever platform the user is on.
$font-family-default: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default;
$font-size-default: 13px !default;
$font-weight: 500 !default;
$font-weight-bold: 700 !default;
$font-weight-light: 300 !default;
$line-height-default: 1.6 !default;


// Colors
// --------------------------------------------------

// Main colors
$primary-color: #3b99fc !default;
$chrome-color:  #fff !default;

// Copy
$gray-color: #333 !default;

// Borders
$border-color: #ddd !default;
$dark-border-color: #b3b2b3 !default; // for small size bottom of header tile
// small header tile: bottom: #d2d0d2 rgb(210, 208, 210)
// the top of it #e8e6(7)e8 rgb(233, 231, 233) perhaps on top there is a inside shadow light and on bottom there is a inside shadow dark, both 1px width

// the devider width: #c2c0c2 rgb(194, 192, 194)


// THE TOP OF THE DESK: #d3d3d3 rgb(211, 211, 211)


/// the first tab from left (or main tab): #ececec rgb(236, 236, 236)
/// the second tab from left: #e3e3e3 rgb(227, 227, 227)


$darker-bottom-border-color: #a19fa1 !default;
$toolbar-border-color: #939293 !default;

// Action colors
$default-color:  #fff !default;
$positive-color: #34c84a !default;
$negative-color: #fc605b !default;
$warning-color: #fdbc40 !default;

// Shades
$dark-color: #57acf5 !default;

// Focus and active colors
$active-color: #116cd6;
$focus-input-color: lighten($primary-color, 10%)  !default;

// Other
// --------------------------------------------------

// Border radius
$default-border-radius: 4px;

// Padding
$padding: 10px;
$padding-mini: 3px;
$padding-less: 5px;
$padding-more: 20px;





// $main-color: #336666;
$main-color: rgb(90, 130, 170);
$main-color-op: #eee;
$main-color-s: #eee;
// $second-color: #ff0033;
$second-color: rgb(230, 145, 230);
$second-color-op: #eee;
$second-color-s: #eee;
$third-color: black;
$fourth-color: red;

$main-color: rgb(16, 137, 177);
$second-color: rgb(77, 171, 171);





@mixin breakpoint($class) {
	@if $class == sm {
		@media screen and (min-width: 35.5em) { @content; }
	}
 
	@else if $class == md {
		@media screen and (min-width: 48em) { @content; }
	}
 
	@else if $class == lg {
		@media screen and (min-width: 64em) { @content; }
	}
 
	@else if $class == xl {
		@media screen and (min-width: 80em) { @content; }
	}
	@else if $class == xx {
		@media screen and (min-width: 120em) { @content; }
	}
	@else {
		@warn "Breakpoint mixin supports: sm, md, lg, xl, xx";
	}
}