/* =========================================
   TYPOGRAPHY SYSTEM
========================================= */


/* =========================================
   BODY TEXT
========================================= */

body {

  font-family:
    var(--font-primary);

  font-size:
    var(--text-base);

  line-height:
    var(--line-normal);

  color:
    var(--color-text);
}


/* =========================================
   HEADINGS
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    var(--font-heading);

  font-weight:
    var(--font-bold);

  line-height:
    var(--line-tight);

  color:
    var(--color-text);
}


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);
}

h6 {
  font-size: var(--text-md);
}


/* =========================================
   PARAGRAPHS
========================================= */

p {

  font-size:
    var(--text-base);

  line-height:
    var(--line-relaxed);

  color:
    var(--color-text-light);
}


/* =========================================
   HERO TITLES
========================================= */

.hero-title {

  font-size:
    clamp(
      2.5rem,
      5vw,
      4.5rem
    );

  font-weight:
    var(--font-bold);

  line-height:
    1.1;

  color:
    var(--color-text);

  margin-bottom:
    var(--space-6);
}


.hero-subtitle {

  font-size:
    var(--text-lg);

  line-height:
    var(--line-relaxed);

  color:
    var(--color-text-light);

  max-width:
    700px;

  margin:
    0 auto;
}


/* =========================================
   SECTION TITLES
========================================= */

.section-title {

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  font-weight:
    var(--font-bold);

  text-align:
    center;

  margin-bottom:
    var(--space-4);

  color:
    var(--color-text);
}


.section-subtitle {

  font-size:
    var(--text-lg);

  color:
    var(--color-text-light);

  text-align:
    center;

  max-width:
    700px;

  margin:
    0 auto var(--space-12);
}


/* =========================================
   SMALL TEXT
========================================= */

.small-text {

  font-size:
    var(--text-sm);

  color:
    var(--color-text-muted);
}


/* =========================================
   MUTED TEXT
========================================= */

.text-muted {

  color:
    var(--color-text-muted);
}


/* =========================================
   TEXT ALIGNMENT
========================================= */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


/* =========================================
   FONT WEIGHTS
========================================= */

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

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

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

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

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


/* =========================================
   RESPONSIVE TYPOGRAPHY
========================================= */

@media (max-width: 768px) {

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .hero-subtitle,
  .section-subtitle {

    font-size:
      var(--text-base);
  }
}