/* Responsive Typography Styles */

/* Base text size for body */
body {
  font-size: 16px;
  line-height: 1.5; /* 150% of font size */
}

/* Heading styles */
h1 {
  font-size: 2rem; /* 32px */
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
}

h3 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
}

h4 {
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
}

h5 {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
}

h6 {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

/* Small text (captions) */
.small-text {
  font-size: 0.875rem; /* 14px - not smaller for accessibility */
}

/* Buttons and interactive elements */
.btn, button, input[type="button"], input[type="submit"] {
  font-size: 1rem; /* At least 16px for easy tapping on mobile */
}

/* Desktop styles */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 2.5rem; /* 40px */
  }

  h2 {
    font-size: 2rem; /* 32px */
  }

  h3 {
    font-size: 1.5rem; /* 24px */
  }

  h4 {
    font-size: 1.25rem; /* 20px */
  }

  h5 {
    font-size: 1.125rem; /* 18px */
  }

  h6 {
    font-size: 1rem; /* 16px */
  }
}