/* main.css */
@import url('variables/_colors.css');
@import url('variables/_fonts.css');
@import url('variables/_typescale.css');
@import url('variables/_spacing.css');
@import url('variables/_borders.css');
@import url('variables/_systems.css');

/* You can add global styles here */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;

  appearance: none;
  box-sizing: border-box;
  box-sizing: inherit;
  list-style: none;
}

html {
  font-size: var(--body-size);
}

body {
  width: 100vw;
  height: 100vh;

  font-family: var(--body-font);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);

  background-color: var(--color-background);
  user-select: none;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--color-dark);
}

img {
  display: block;
  width: 100%;
}

h1 {
  font-family: var(--h1-font);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

h2 {
  font-family: var(--h2-font);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  font-family: var(--h3-font);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4 {
  font-family: var(--h4-font);
  font-weight: var(--h4-weight);
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h5 {
  font-family: var(--h5-font);
  font-weight: var(--h5-weight);
  font-size: var(--h5-size);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

h6 {
  font-family: var(--h6-font);
  font-weight: var(--h6-weight);
  font-size: var(--h6-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

.body-xl {
  font-family: var(--body-xl-font);
  font-weight: var(--body-xl-weight);
  font-size: var(--body-xl-size);
  line-height: var(--body-xl-height);
  letter-spacing: var(--body-xl-letter-spacing);
}

.body {
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-height);
  letter-spacing: var(--body-letter-spacing);
}

.body-sm {
  font-family: var(--body-sm-font);
  font-weight: var(--body-sm-weight);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-height);
  letter-spacing: var(--body-sm-letter-spacing);
}

.display-large {
  font-family: var(--display-lg-font);
  font-weight: var(--display-lg-weight);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-height);
  letter-spacing: var(--display-lg-letter-spacing);
}

.m-100   { margin: var(--space-100); }
.m-175   { margin: var(--space-175); }
.p-050   { padding: var(--space-050); }
.mt-075  { margin-top: var(--space-075); }
.pb-250  { padding-bottom: var(--space-250); }