:root {
  --font-stack: 'Inter', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', ui-sans-serif;
  --font-logo: 'IBM Plex Sans', ui-sans-serif;
  --logo-font-22: 2.2rem;
  --xxxl-font-32: 3.2rem;
  --xxl-font-28: 2.8rem;
  --xxl-font-24: 2.4rem;
  --xl-font-20: 2rem;
  --l-font-18: 1.8rem;
  --m-font-16: 1.6rem;
  --s-font-14: 1.4rem;
  --xs-font-12: 1.2rem;
  --xxs-font-10: 1rem;
  --normal: 400;
  --semi-bold: 500;
  --bold: 600;
  --line-height-text: 1.5;
  --line-height-display: 1.3;
}

.h1,
h1,
.h2,
h2,
.h3,
h3 {
  line-height: var(--line-height-display);
}

.h1,
h1 {
  font-size: var(--xxxl-font-32);
}

.h2,
h2 {
  font-size: var(--xxl-font-28);
}

.h3,
h3 {
  font-size: var(--xxl-font-24);
}

.h4,
h4,
.h5,
h5,
.p,
p,
.small,
small,
textarea {
  line-height: var(--line-height-text);
}

.h4,
h4 {
  font-size: var(--xl-font-20);
}

.h5,
h5 {
  font-size: var(--l-font-18);
}

.p,
p {
  font-size: var(--m-font-16);
}

.small,
small {
  font-size: var(--xs-font-12);
}

textarea {
  font-size: var(--s-font-14);
  font-weight: var(--semi-bold);
}

textarea::placeholder {
  color: var(--text-input-placeholder);
  font-weight: var(--semi-bold);
}

.bold {
  font-weight: var(--bold);
}

.semi-bold {
  font-weight: var(--semi-bold);
}
