// the idea is to put base styles in here
* {
  .box-sizing(border-box);
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

html, button, input, textarea, select {
  .type-primary;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
	.type-primary;
	.font-s3();
  line-height: 26px;
  color: @color-darkest;
  background-color: @color-ancillary;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

/* Default type layout */
h1, h2, h3, h4, h5, h6 {
  .type-normal;
  margin: 0;
  padding: 0;
}

h1 { .font-m3; }
h2 { .font-m2; }
h3 { .font-m1; }
h4 { .font-s3; }
h5 {}
h6 {}

p {}

sub,
sup { font-size: .8em; }

sub { bottom: -.2em; }

sup { top: -.2em; }

b { .type-bold; }

em {
  .type-italic;
}

hr {
  border: none;
  border-top: 1px solid @color-mediumlight;
  clear: both;
  margin-bottom: 1.25rem;
}

code,
pre {
	.type-code;
  .font-code;
}

code {
	&:not([class*="language-"]) {
		background: @color-light;
	}
	display: inline-block;
	padding-left: 2px;
	padding-right: 2px;
	vertical-align: baseline;

	color: darken(@color-complementary, 7%);
}

pre {
	padding: 1em 1.25em;
	white-space: pre-wrap;
  background: @color-light !important;
  color: @color-darkest;

  .line-highlight {
    background: fade(@color-complementary, 15%);
  }
}