/* Heading/Text Default */
.heading,
.text,
h1, h2, h3, h4, h5, h6,
p, blockquote {
  font-family: var(--font);
  font-style: normal;
  letter-spacing: 0.2px;
  color: var(--color-gray-900);
}

/* Heading Sizes */
.heading {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;

  &.lined {
    display: flex;
    flex-direction: column;
    gap: 4px;

    &:after {
      display: block;
      width: 25px;
      height: 2px;
      background-color: var(--color-brand-blue-600);
      content: '';
    }
  }

  &.xx-large {
    font-size: 20px;
    line-height: 30px;
  }

  &.x-large {
    font-size: 18px;
    line-height: 26px;
  }

  &.large {
    font-size: 16px;
    line-height: 24px;
  }

  &.medium {
    font-size: 14px;
    line-height: 20px;
  }

  &.small {
    font-size: 12px;
    line-height: 18px;
  }

  &.x-small {
    font-size: 11px;
    line-height: 12px;
  }

  &.xx-small {
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
  }

  &.bold { font-weight: 500; }
}

/* Text/Body Sizes */
.text, p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;

  &.large {
    font-size: 16px;
    line-height: 24px;
  }

  &.medium {
    font-size: 14px;
    line-height: 20px;
  }

  &.small {
    font-size: 12px;
    line-height: 18px;
  }
}

/* Heading/Text Weight */
.heading, .text, p {
  &.w-regular { font-weight: 400; }
  &.w-medium { font-weight: 500; }
  &.w-bold { font-weight: 700; }
}

/* text align */
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.ta-right { text-align: right; }