/**
 * Type scale — Playfair Display (headings), Lato (body, caption, button)
 * Breakpoints: default (>767px), tablet (≤767px), small (≤480px)
 */

:root {
  /* H1 */
  --type-h1-size: 3.25rem;
  --type-h1-letter-spacing: -0.04em;
  --type-h1-line-height: 0.95;

  /* H2 */
  --type-h2-size: 1.75rem;
  --type-h2-letter-spacing: -0.03em;
  --type-h2-line-height: 1.1;

  /* H3 */
  --type-h3-size: 1.375rem;
  --type-h3-letter-spacing: -0.02em;
  --type-h3-line-height: 1.2;

  /* H4 */
  --type-h4-size: 1.13rem;
  --type-h4-letter-spacing: -0.01em;
  --type-h4-line-height: 1.3;

  /* Body */
  --type-body-size: 1rem;
  --type-body-letter-spacing: normal;
  --type-body-line-height: 1.6;

  /* Body 2 */
  --type-body-2-size: 0.88rem;
  --type-body-2-letter-spacing: normal;
  --type-body-2-line-height: 1.6;

  /* Caption */
  --type-caption-size: 0.75rem;
  --type-caption-letter-spacing: 0.11em;
  --type-caption-line-height: 1.5;

  /* Button */
  --type-button-size: 0.88rem;
  --type-button-letter-spacing: 0.1em;
  --type-button-line-height: 1.2;
}

@media (max-width: 767px) {
  :root {
    --type-h1-size: 2.6rem;
    --type-h1-line-height: 1;
  }
}

@media (max-width: 480px) {
  :root {
    --type-h1-size: 2.08rem;
    --type-h1-line-height: 1.05;

    --type-body-size: 0.88rem;
    --type-body-letter-spacing: 0.01em;
    --type-body-line-height: 1.55;

    --type-body-2-size: 0.75rem;
    --type-body-2-letter-spacing: 0.01em;
    --type-body-2-line-height: 1.55;
  }
}

h1,
.text-h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-h1-size);
  font-weight: 600;
  letter-spacing: var(--type-h1-letter-spacing);
  line-height: var(--type-h1-line-height);
}

h2,
.text-h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-h2-size);
  font-weight: 600;
  letter-spacing: var(--type-h2-letter-spacing);
  line-height: var(--type-h2-line-height);
}

h3,
.text-h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-h3-size);
  font-weight: 600;
  letter-spacing: var(--type-h3-letter-spacing);
  line-height: var(--type-h3-line-height);
}

h4,
.text-h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-h4-size);
  font-weight: 600;
  letter-spacing: var(--type-h4-letter-spacing);
  line-height: var(--type-h4-line-height);
}

body,
.text-body {
  font-family: "Lato", system-ui, sans-serif;
  font-size: var(--type-body-size);
  font-weight: 400;
  letter-spacing: var(--type-body-letter-spacing);
  line-height: var(--type-body-line-height);
}

.text-body-2 {
  font-family: "Lato", system-ui, sans-serif;
  font-size: var(--type-body-2-size);
  font-weight: 400;
  letter-spacing: var(--type-body-2-letter-spacing);
  line-height: var(--type-body-2-line-height);
}

.text-caption,
caption,
figcaption {
  font-family: "Lato", system-ui, sans-serif;
  font-size: var(--type-caption-size);
  font-weight: 400;
  letter-spacing: var(--type-caption-letter-spacing);
  line-height: var(--type-caption-line-height);
}

.text-button {
  font-family: "Lato", system-ui, sans-serif;
  font-size: var(--type-button-size);
  font-weight: 500;
  letter-spacing: var(--type-button-letter-spacing);
  line-height: var(--type-button-line-height);
}