/* Regular */
@font-face {
	font-family: 'Serrif';
	src: url('./serrif/Serrif-Regular.woff2') format('woff2'),
		url('./serrif/Serrif-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Serrif';
	src: url('./serrif/Serrif-Medium.woff2') format('woff2'),
		url('./serrif/Serrif-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* SemiBold */
@font-face {
	font-family: 'Serrif';
	src: url('./serrif/Serrif-SemiBold.woff2') format('woff2'),
		url('./serrif/Serrif-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* Regular */
@font-face {
	font-family: 'Helvetica Now Text';
  src: url('./helvetica-now-text/HelveticaNowText-Regular.woff2') format('woff2'),
    url('./helvetica-now-text/HelveticaNowText-Regular.woff') format('woff'),
    url('./helvetica-now-text/HelveticaNowText-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Medium */
@font-face {
	font-family: 'Helvetica Now Text';
	src: url('./helvetica-now-text/HelveticaNowText-Medium.woff2') format('woff2'),
		url('./helvetica-now-text/HelveticaNowText-Medium.woff') format('woff'),
		url('./helvetica-now-text/HelveticaNowText-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


/* CSS Custom Properties - Variables */
:root {
  /* Typography */
  --font-family-primary: 'Helvetica Now Text', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Serrif', sans-serif;
}


/* Page utilities */
.page {
  font-family: var(--font-family-primary);
  color: var(--color-primary);
  font-weight: 400;
  letter-spacing: -.2px;
}

/* Heading utilities */
h1, .style-h1 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-900);
  font-size: 40px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.8px;

  @media (min-width: 1024px) {
    font-size: 72px;
    line-height: 108%;
    letter-spacing: -1.44px;
  }
}

h2, .style-h2 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-800);
  font-size: 32px;
  font-weight: 500;
  line-height: 132%;
  letter-spacing: -0.64px;

  @media (min-width: 1024px) {
    font-size: 38px;
    line-height: 120%;
    letter-spacing: -0.76px;
  }
}

h3, .style-h3 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-700);
  font-size: 20px;
  font-weight: 500;
  line-height: 144%;
  letter-spacing: -0.4px;

  @media (min-width: 1024px) {
    font-size: 28px;
    line-height: 132%;
    letter-spacing: -0.56px;
  }
}

/* Text utilities */
.text-b1, .style-b1 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-500);
  font-size: 16px;
  line-height: 136%;
  letter-spacing: -0.32px;

  @media (min-width: 1024px) {
    font-size: 20px;
    line-height: 136%;
    letter-spacing: -0.4px;
  }
}

.text-b2, .style-b2 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-500);
  font-size: 15px;
  line-height: 138%;
  letter-spacing: -0.3px;

  @media (min-width: 1024px) {
    font-size: 18px;
    line-height: 138%;
    letter-spacing: -0.36px;
  }
}

.text-b3, .style-b3 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-400);
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.28px;

  @media (min-width: 1024px) {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.32px;
  }
}

.text-c1, .style-c1 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-350);
  font-size: 13px;
  line-height: 136%;
  letter-spacing: -0.26px;

  @media (min-width: 1024px) {
    font-size: 14px;
    line-height: 136%;
    letter-spacing: -0.28px;
  }
}

.text-c2, .style-c2 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-300);
  font-size: 12px;
  line-height: 138%;
  letter-spacing: -0.24px;

  @media (min-width: 1024px) {
    font-size: 13px;
    line-height: 138%;
    letter-spacing: -0.26px;
  }
}

.text-c3, .style-c3 {
  font-family: var(--font-family-primary);
  color: var(--color-gray-300);
  font-size: 11px;
  line-height: 140%;
  letter-spacing: -0.22px;

  @media (min-width: 1024px) {
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -0.24px;
  }
}