/* Element styles */
/* These styles serve as a baseline for all typography */

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--color--text);
  font-family: var(--font-family--body);
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--normal);
  line-height: var(--line-height--base);
}

p {
  text-wrap: pretty;
}

:where(
  h1,
  h2,
  h3,
  h4
) {
  font-weight: var(--font-weight--bold);
  font-family: var(--font-family--heading);
}

strong {
  font-weight: var(--font-weight--bold);
  display: inline-block;
}

title,
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.02rem;
  line-height: var(--line-height--tight);
  margin: 0;
  text-wrap: balance;
  text-wrap: pretty;
}

a {
  color: var(--color--text);

  &:hover {
    text-decoration: none;
  }
}

label {
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--bold);
  text-align: left;
}

input {
  font-size: var(--font-size--base);
}

legend {
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--bold);
}

hr {
  margin: 0;
  border: none;
  border-top: var(--border--light);
  width: 100%;
}

.title,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
  font-family: var(--font-family--heading);
  font-weight: var(--font-weight--bold);
}

/* Heading size definitions */
.title {
  font-size: var(--font-size--title);
}

h1,
.heading-1 {
  font-size: var(--font-size--h1);
}

h2,
.heading-2 {
  font-size: var(--font-size--h2);
}

h3,
.heading-3 {
  font-size: var(--font-size--h3);
}

h4,
.heading-4 {
  font-size: var(--font-size--h4);
}

h5,
.heading-5 {
  font-size: var(--font-size--h5);
}

h6,
.heading-6 {
  font-size: var(--font-size--h6);
}

/* Body text size definitions */

.text-large {
  font-size: var(--font-size--large);
}

.text-base {
  font-size: var(--font-size--base);
}

.text-small {
  font-size: var(--font-size--small);
}

.text-x-small {
  font-size: var(--font-size--x-small);
}

.text-xx-small {
  font-size: var(--font-size--xx-small);
}

/* Font weight options */

.text-normal {
  font-weight: var(--font-weight--normal);
}

.text-bold {
  font-weight: var(--font-weight--bold);
}

/* Text color options */

.color-text-alt {
  color: var(--color--text-alt);
}

.color-text-brand {
  color: var(--color--text-brand);
}

.color-text-danger {
  color: var(--color--ui-danger-dark);
}

/* Text utilities */

.text-center {
  text-align: center;
}