/* Fluid Typography with CSS clamp() */
:root {
  /* Font Family */
  --font-family-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --display-lg-size: clamp(2.01rem, calc(1.66rem + 1.71vw), 2.94rem);
  --display-lg-weight: 800;
  --display-lg-line-height: 1.5;
  --display-lg-letter-spacing: 0.012em;

  --display-md-size: clamp(1.84rem, calc(1.57rem + 1.34vw), 2.57rem);
  --display-md-weight: 800;
  --display-md-line-height: 1.5;
  --display-md-letter-spacing: 0.012em;

  --h1-size: clamp(1.69rem, calc(1.48rem + 1.02vw), 2.25rem);
  --h1-weight: 700;
  --h1-line-height: 1.5;
  --h1-letter-spacing: 0.016em;

  --h2-size: clamp(1.42rem, calc(1.31rem + 0.55vw), 1.72rem);
  --h2-weight: 600;
  --h2-line-height: 1.5;
  --h2-letter-spacing: 0.016em;

  --h3-size: clamp(1.3rem, calc(1.22rem + 0.37vw), 1.5rem);
  --h3-weight: 600;
  --h3-line-height: 1.5;
  --h3-letter-spacing: 0.02em;

  --h4-size: clamp(1.19rem, calc(1.15rem + 0.22vw), 1.31rem);
  --h4-weight: 500;
  --h4-line-height: 1.5;
  --h4-letter-spacing: 0.02em;

  --h5-size: clamp(1.14rem, calc(1.11rem + 0.15vw), 1.22rem);
  --h5-weight: 500;
  --h5-line-height: 1.5;
  --h5-letter-spacing: 0.024em;

  --h6-size: clamp(1.09rem, calc(1.07rem + 0.1vw), 1.14rem);
  --h6-weight: 500;
  --h6-line-height: 1.5;
  --h6-letter-spacing: 0.024em;

  --body-xl-size: clamp(1.04rem, calc(1.04rem + 0.05vw), 1.07rem);
  --body-xl-weight: 400;
  --body-xl-line-height: 1.5;
  --body-xl-letter-spacing: 0.024em;

  --body-size: clamp(1rem, calc(1rem + 0vw), 1rem);
  --body-weight: 400;
  --body-line-height: 1.5;
  --body-letter-spacing: 0.024em;

  --body-sm-size: clamp(0.96rem, calc(0.97rem + -0.04vw), 0.93rem);
  --body-sm-weight: 400;
  --body-sm-line-height: 1.6;
  --body-sm-letter-spacing: 0.024em;

  --caption-lg-size: clamp(0.92rem, calc(0.93rem + -0.08vw), 0.87rem);
  --caption-lg-weight: 400;
  --caption-lg-line-height: 1.6;
  --caption-lg-letter-spacing: 0.024em;

  --caption-size: clamp(0.88rem, calc(0.9rem + -0.11vw), 0.82rem);
  --caption-weight: 400;
  --caption-line-height: 1.6;
  --caption-letter-spacing: 0.024em;

  --caption-sm-size: clamp(0.84rem, calc(0.87rem + -0.14vw), 0.76rem);
  --caption-sm-weight: 300;
  --caption-sm-line-height: 1.6;
  --caption-sm-letter-spacing: 0.024em;

  --overline-size: clamp(0.8rem, calc(0.84rem + -0.17vw), 0.71rem);
  --overline-weight: 500;
  --overline-line-height: 1.6;
  --overline-letter-spacing: 0.024em;

  --body-color: hsl(220, 20%, 25%);

  --primary-color: rgb(0, 172, 215);
  --primary-color-rgb: 0, 190, 197;
  --accent-color: rgb(0, 66, 196);
  --accent-color-rgb: 0, 66, 196;
}

body {
  font-family: var(--font-family-body);
  background-color: #f6fbff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

h6 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

caption {
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
}

.overline {
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  line-height: var(--overline-line-height);
  letter-spacing: var(--overline-letter-spacing);
  text-transform: uppercase;
}

/* End of Fluid Typography with CSS clamp() */