/* Global tags - Tags are defined before classes in order to be able to correctly override tags with a class*/

/* Heading styles */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-text-heading);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}

:where(h6) {
  font-size: 1rem; /* 16px */
  margin-bottom: var(--space-2x);
}

:where(h5) {
  font-size: 1.25rem; /* 20px */
  margin-bottom: var(--space-2x);
}

:where(h4) {
  font-size: 1.5rem; /* 24px */
  margin-bottom: var(--space-4x);
}

:where(h3) {
  font-size: 1.5rem; /* 24px on mobile */
  margin-bottom: var(--space-4x); /* 16px */
}

:where(h2) {
  font-size: 1.75rem; /* 28px on mobile */
  margin-bottom: var(--space-4x); /* 16px */
}

:where(h1) {
  font-size: 2rem; /* 32px on mobile */
  margin-bottom: var(--space-4x); /* 16px on mobile */
}

@media screen and (min-width: 768px) {
  :where(h3) {
    font-size: 1.75rem;
  }

  :where(h2) {
    font-size: 2rem;
  }

  :where(h1) {
    font-size: 2.5rem;
    margin-bottom: var(--space-6x);
  }
}

/* Paragraph  */
:where(body, p) {
  font-family: var(--font-family-text);
  line-height: 1.5;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary); /* --gray-600 or #6d7380 */
}

:where(p) {
  font-size: 1rem; /* 16px */
  max-width: 640px;
  margin-bottom: var(--space-6x);
}

/* Text  */
:where(span, label) {
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  line-height: 1rem;
  font-size: 0.875rem; /* 14px */
}

:where(label.disabled) {
  color: var(--color-text-disabled);
}

:where(select) {
  font-family: var(--font-family-text);
}

/* Typography Classes */

/* Heading styles */
:where(
    .heading,
    .heading-100,
    .heading-200,
    .heading-300,
    .heading-400,
    .heading-500,
    .heading-600
  ) {
  font-family: var(--font-family-text-heading);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}

:where(.heading-100) {
  font-size: 1rem; /* 16px */
  margin-bottom: var(--space-2x);
}

:where(.heading-200) {
  font-size: 1.25rem; /* 20px */
  margin-bottom: var(--space-2x);
}

:where(.heading-300) {
  font-size: 1.5rem; /* 24px */
  margin-bottom: var(--space-4x);
}

:where(.heading-400) {
  font-size: 1.5rem; /* 24px on mobile */
  margin-bottom: var(--space-4x); /* 16px */
}

:where(.heading-500) {
  font-size: 1.75rem; /* 28px on mobile */
  margin-bottom: var(--space-4x); /* 16px */
}

:where(.heading-600) {
  font-size: 2rem; /* 32px on mobile */
  margin-bottom: var(--space-4x); /* 16px on mobile */
}

@media screen and (min-width: 768px) {
  :where(.heading-400) {
    font-size: 1.75rem;
  }

  :where(.heading-500) {
    font-size: 2rem;
  }

  :where(.heading-600) {
    font-size: 2.5rem;
    margin-bottom: var(--space-6x);
  }
}

/* Paragraph styles */
:where(.paragraph, .paragraph-100, .paragraph-200, .paragraph-300) {
  font-family: var(--font-family-text);
  line-height: 1.5;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary); /* --gray-600 or #6d7380 */
  max-width: 640px;
}

:where(.paragraph-100) {
  font-size: 0.875rem; /* 14px */
}

:where(.paragraph-200) {
  margin-bottom: var(--space-6x);
  font-size: 1rem; /* 16px */
}

:where(.paragraph-300) {
  font-size: 1.25rem;
}

/* Text styles */
:where(.text, .text-100, .text-200, .text-300) {
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  line-height: 1rem;
}

:where(.text-100) {
  font-size: 0.75rem; /* 12px */
}

:where(.text-200) {
  font-size: 0.875rem; /* 14px */
}

:where(.text-300) {
  font-size: 1rem;
}

/* Label style */
:where(.label) {
  font-family: var(--font-family-text);
  font-size: 0.875rem; /* 14px */
  line-height: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-label);
  display: block;
}

/* count */
:where(.count) {
  font-size: 12px;
  line-height: 12px;
  border-radius: var(--space-3x);
  color: var(--color-text-secondary);
  height: var(--space-4x);
  background-color: var(--gray-200);
  padding: 2px var(--space-1x);
  display: inline-block;
}

/* Support text for inputs*/
:where(p.support-text) {
  font-size: 0.875rem; /* 14px */
  margin: var(--space-2x) 0 0;
}

:where(p.support-text.error) {
  color: var(--color-text-error);
}

p.support-text.error:before {
  content: '';
  background: url(https://smartcontract.imgix.net/icons/alert_diamond.svg?auto=compress%2Cformat)
    no-repeat left center;
  width: var(--space-4x);
  /* Magic number that matches the line height of p (1.5) */
  height: 21px;
  float: left;
  margin-right: var(--space-2x);
}

/* Display styles, primarily used on Marketing sites */
:where(.display, .display-400, .display-500, .display-600) {
  font-family: var(--font-family-text);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}

:where(.display-400) {
  font-size: 2rem; /* 32px on mobile */
  margin-bottom: var(--space-4x);
  letter-spacing: -0.04rem;
}

:where(.display-500) {
  font-size: 2.5rem; /* 40px on mobile */
  margin-bottom: var(--space-6x);
  letter-spacing: -0.05rem;
}

:where(.display-600) {
  font-size: 3rem; /* 48px on mobile */
  margin-bottom: var(--space-6x);
  letter-spacing: -0.06rem;
}

@media screen and (min-width: 768px) {
  :where(.display-400) {
    font-size: 2.5rem;
    letter-spacing: -0.05rem;
  }

  :where(.display-500) {
    font-size: 3rem;
    letter-spacing: -0.06rem;
  }

  :where(.display-600) {
    font-size: 3.5rem;
    letter-spacing: -0.07rem;
  }
}