/* ===================== */
/* RESET V1 TYPE STYLING */
/* ===================== */

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

/* =================== */
/* START OF V2 STYLING */
/* =================== */

/* DESIGN SYSTEM TOKENS */
:root {
  --font-family-base: neue-haas-grotesk-text, Helvetica, Arial, sans-serif;
  --font-family-heading: neue-haas-grotesk-display, Helvetica, Arial, sans-serif;

  /* Font Sizes */
  --font-size-base: 1.6rem; /* 16px */

  --font-size-3xl: 4.0rem; /* 40px */
  --font-size-2xl: 3.2rem; /* 32px */
  --font-size-xl:  2.4rem; /* 24px */
  --font-size-lg:  2.0rem; /* 20px */
  --font-size-md:  1.6rem; /* 16px */
  --font-size-sm:  1.4rem; /* 14px */
  --font-size-xs:  1.2rem; /* 12px */
  --font-size-2xs: 1.1rem; /* 11px */
  --font-size-3xs: 1.0rem; /* 10px */

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --font-lh-base: 1.25;
}

/* APPLYING TO V2 THEME */
:root {
  font-size: 62.5%; /* Sets 1rem to equal 10px, making it easier to calculate sizes based on a 10px base */
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

/* Baseline Heading Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.25
}

h1 {
  font-size: var(--font-size-3xl); /* 40px */
}

h2 {
  font-size: var(--font-size-2xl); /* 32px */
  margin-bottom: var(--sp-600);
}

h3 {
  font-size: var(--font-size-xl); /* 24px */
}

h4 {
  font-size: var(--font-size-lg); /* 20px */
}

h5 {
  font-size: var(--font-size-md); /* 16px */
}

h6 {
  font-size: var(--font-size-sm); /* 14px */
}

p {
  line-height: 1.35;
}


/* Link styles */
a {
  text-decoration: underline;
  text-decoration-color: var(--color-blue-500);
  text-underline-offset: 0.4rem;
  font-weight: var(--font-weight-medium);

  &:hover {
    color: var(--color-blue-500);
  }
}

a.link-no-underline {
  text-decoration: none;
  color: inherit;

  &:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-gray-500);
  }
}

a.link-on-dark {
  color: var(--color-text-on-color);
  text-decoration-color: var(--color-red-500);

  &:hover {
    color: var(--color-red-500);
  }
}

.eyebrow {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
}