$vl-font-location: "assets/fonts/" !default;
$vl-font-family-name-sans: "Flanders Art Sans";
$vl-font-family-name-serif: "Flanders Art Serif";
$vl-flanders-family: "flanders-sans";
$vl-flanders-serif-family: "flanders-serif";

@include font-face(
  $vl-font-family-name-sans,
  $vl-font-location,
  $vl-flanders-family + "-light",
  300,
  normal
);
@include font-face(
  $vl-font-family-name-sans,
  $vl-font-location,
  $vl-flanders-family + "-regular",
  400,
  normal
);
@include font-face(
  $vl-font-family-name-sans,
  $vl-font-location,
  $vl-flanders-family + "-medium",
  500,
  normal
);
@include font-face(
  $vl-font-family-name-sans,
  $vl-font-location,
  $vl-flanders-family + "-bold",
  700,
  normal
);

@include font-face(
  $vl-font-family-name-serif,
  $vl-font-location,
  $vl-flanders-serif-family + "-light",
  300,
  normal
);
@include font-face(
  $vl-font-family-name-serif,
  $vl-font-location,
  $vl-flanders-serif-family + "-regular",
  400,
  normal
);
@include font-face(
  $vl-font-family-name-serif,
  $vl-font-location,
  $vl-flanders-serif-family + "-medium",
  500,
  normal
);
@include font-face(
  $vl-font-family-name-serif,
  $vl-font-location,
  $vl-flanders-serif-family + "-bold",
  700,
  normal
);

h1 {
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 34px;
}

h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 29px;
}

h3 {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

h4 {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

h5 {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 19px;
}

h6 {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 17px;
}

p {
  font-size: 16px;
  font-style: normal;
  line-height: 19px;
}

p.small {
  font-size: 14px;
  font-style: normal;
  line-height: 17px;
  color: $vl-shade-dark;
}

label {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.tab {
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 22px;
}

a {
  color: $vl-action-text-color;
  text-decoration: underline;
  text-decoration-skip: ink;

  &:hover,
  &:focus {
    text-decoration: none;
    color: $vl-action-text-hover-color;
  }
}

button, select {
  font-weight: 300;
}

a,
button {
  cursor: pointer;

  &:focus {
    outline: auto $vl-outline-color 3px;
  }
}

// Typography
.vl-u-text--ellipse {
  @include vl-u-text--ellipse;
}

.vl-u-text--uppercase {
  @include vl-u-text--uppercase;
}

.vl-u-text--lowercase {
  @include vl-u-text--lowercase;
}

.vl-u-text--capitalize {
  @include vl-u-text--capitalize;
}

.vl-u-text--success {
  @include vl-u-text--success;
}

.vl-u-text--error {
  @include vl-u-text--error;
}

.vl-u-text--bold {
  @include vl-u-text--bold;
}

.vl-u-text--italic {
  @include vl-u-text--italic;
}

.vl-u-text--small {
  @include vl-u-text--small;
}

.vl-u-text--xsmall {
  @include vl-u-text--xsmall;
}

.vl-u-text--xxsmall {
  @include vl-u-text--xxsmall;
}