/* typography.css — шрифты и текстовые стили.
 * line-height relaxed (1.65) — основной для нейроотличных пользователей. */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--clr-text-2);
  background: var(--clr-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--clr-text-1);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p {
  max-width: 70ch; /* комфортная длина строки для чтения */
}

a {
  color: var(--clr-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--clr-primary-hover);
}

strong { font-weight: var(--font-semi); }

.text-muted   { color: var(--clr-text-3); }
.text-lead    { font-size: var(--text-lg); color: var(--clr-text-2); }
.text-center  { text-align: center; }
.text-balance { text-wrap: balance; }

.display {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--clr-text-1);
}

@media (max-width: 640px) {
  .display { font-size: var(--text-4xl); }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}