// Text mixins
@mixin text-title-1 {
  color: var(--ec-color-primary-dark);
  font-size: var(--ec-font-size-title);
  font-weight: var(--ec-font-weight-bold);
  line-height: 1.2;
  margin: 0;
}

@mixin text-title-2 {
  @include text-title-1;
  font-weight: var(--ec-font-weight-normal);
}

@mixin text-heading-1 {
  color: var(--ec-color-primary-dark);
  font-size: var(--ec-font-size-body);
  font-weight: var(--ec-font-weight-bold);
  line-height: 1.5;
  margin: 0;
}

@mixin text-heading-2 {
  @include text-heading-1;
  font-weight: var(--ec-font-weight-normal);
}

@mixin text-heading-3 {
  color: var(--ec-color-secondary-dark);
  font-size: var(--ec-font-size-label);
  font-weight: var(--ec-font-weight-bold);
  line-height: 1.333333333;
  margin: 0;
  text-transform: uppercase;
}

@mixin text-body-1 {
  color: var(--ec-color-primary-dark);
  font-size: var(--ec-font-size);
  font-weight: var(--ec-font-weight-normal);
  line-height: 1.285714286;
  margin: 0;
}

@mixin text-body-2 {
  color: var(--ec-color-primary-dark);
  font-size: var(--ec-font-size-label);
  font-weight: var(--ec-font-weight-normal);
  line-height: 1.333333333;
  margin: 0;
}

@mixin text-caption-1 {
  color: var(--ec-color-secondary-dark);
  font-size: var(--ec-font-size-label);
  font-weight: var(--ec-font-weight-normal);
  line-height: 1.333333333;
  margin: 0;
}

@mixin text-caption-2 {
  color: var(--ec-color-secondary-dark);
  font-size: var(--ec-font-size-tiny);
  font-weight: var(--ec-font-weight-bold);
  line-height: 1.6;
  margin: 0;
}

@mixin text-display-1 {
  color: var(--ec-color-primary-dark);
  font-size: var(--ec-font-size-body);
  font-weight: var(--ec-font-weight-normal);
  line-height: 1.25;
  margin: 0;
}

@mixin text-link {
  color: var(--ec-color-link) !important;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    outline: none;
    text-decoration: underline;
  }
}
