/**
 * Typography System
 * Reusable classes that map to semantic tokens with responsive fluid scaling.
 * Follows modern best practices with automatic text resizing on smaller displays.
 * Prefix `t-` keeps semantic meaning clear and avoids collisions with components.
 */

/* Display Scale - Fluid serif typography for hero sections */
.t-display-xxl {
  font-family: var(--type-display-xxl-font-family);
  font-weight: var(--type-display-xxl-font-weight);
  font-size: var(--type-display-xxl-font-size);
  line-height: var(--type-display-xxl-line-height);
  letter-spacing: var(--type-display-xxl-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-display-xl {
  font-family: var(--type-display-xl-font-family);
  font-weight: var(--type-display-xl-font-weight);
  font-size: var(--type-display-xl-font-size);
  line-height: var(--type-display-xl-line-height);
  letter-spacing: var(--type-display-xl-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-display-lg {
  font-family: var(--type-display-lg-font-family);
  font-weight: var(--type-display-lg-font-weight);
  font-size: var(--type-display-lg-font-size);
  line-height: var(--type-display-lg-line-height);
  letter-spacing: var(--type-display-lg-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Heading Scale - Sans-serif headings for content structure */
.t-heading-lg {
  font-family: var(--type-heading-lg-font-family);
  font-weight: var(--type-heading-lg-font-weight);
  font-size: var(--type-heading-lg-font-size);
  line-height: var(--type-heading-lg-line-height);
  letter-spacing: var(--type-heading-lg-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-heading-md {
  font-family: var(--type-heading-md-font-family);
  font-weight: var(--type-heading-md-font-weight);
  font-size: var(--type-heading-md-font-size);
  line-height: var(--type-heading-md-line-height);
  letter-spacing: var(--type-heading-md-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-heading-sm {
  font-family: var(--type-heading-sm-font-family);
  font-weight: var(--type-heading-sm-font-weight);
  font-size: var(--type-heading-sm-font-size);
  line-height: var(--type-heading-sm-line-height);
  letter-spacing: var(--type-heading-sm-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Footer - Heading S with regular weight */
.t-footer {
  font-family: var(--type-footer-font-family);
  font-weight: var(--type-footer-font-weight);
  font-size: var(--type-footer-font-size);
  line-height: var(--type-footer-line-height);
  letter-spacing: var(--type-footer-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Body Scale - Readable content typography */
.t-body {
  font-family: var(--type-body-font-family);
  font-weight: var(--type-body-font-weight);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-body-serif {
  font-family: var(--type-body-serif-font-family);
  font-weight: var(--type-body-serif-font-weight);
  font-size: var(--type-body-serif-font-size);
  line-height: var(--type-body-serif-line-height);
  letter-spacing: var(--type-body-serif-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-body-strong {
  font-family: var(--type-body-strong-font-family);
  font-weight: var(--type-body-strong-font-weight);
  font-size: var(--type-body-strong-font-size);
  line-height: var(--type-body-strong-line-height);
  letter-spacing: var(--type-body-strong-letter-spacing);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Label and UI Typography - Uppercase metadata and form labels */
.t-label {
  font-family: var(--type-label-font-family);
  font-weight: var(--type-label-font-weight);
  font-size: var(--type-label-font-size);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-button {
  font-family: var(--type-button-font-family);
  font-weight: var(--type-button-font-weight);
  font-size: var(--type-button-font-size);
  line-height: var(--type-button-line-height);
  letter-spacing: var(--type-button-letter-spacing);
  text-transform: uppercase;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-caption {
  font-family: var(--type-caption-font-family);
  font-weight: var(--type-caption-font-weight);
  font-size: var(--type-caption-font-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: uppercase;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

.t-caption-strong {
  font-family: var(--type-caption-strong-font-family);
  font-weight: var(--type-caption-strong-font-weight);
  font-size: var(--type-caption-strong-font-size);
  line-height: var(--type-caption-strong-line-height);
  letter-spacing: var(--type-caption-strong-letter-spacing);
  text-transform: uppercase;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

/* Mobile Responsive Overrides - Enhanced fluid scaling on small screens */
@media (max-width: 720px) {
  .t-display-xxl {
    font-size: var(--type-display-xxl-font-size-fluid);
    line-height: var(--type-display-xxl-line-height-fluid);
    letter-spacing: var(--type-display-xxl-letter-spacing-fluid);
  }

  .t-display-xl {
    font-size: var(--type-display-xl-font-size-fluid);
    line-height: var(--type-display-xl-line-height-fluid);
    letter-spacing: var(--type-display-xl-letter-spacing-fluid);
  }

  .t-display-lg {
    font-size: var(--type-display-lg-font-size-fluid);
    line-height: var(--type-display-lg-line-height-fluid);
    letter-spacing: var(--type-display-lg-letter-spacing-fluid);
  }

  .t-heading-lg {
    font-size: var(--type-heading-lg-font-size-fluid);
    line-height: var(--type-heading-lg-line-height-fluid);
    letter-spacing: var(--type-heading-lg-letter-spacing-fluid);
  }

  .t-heading-md {
    font-size: var(--type-heading-md-font-size-fluid);
    line-height: var(--type-heading-md-line-height-fluid);
    letter-spacing: var(--type-heading-md-letter-spacing-fluid);
  }

  .t-heading-sm {
    font-size: var(--type-heading-sm-font-size-fluid);
    line-height: var(--type-heading-sm-line-height-fluid);
    letter-spacing: var(--type-heading-sm-letter-spacing-fluid);
  }

  .t-footer {
    font-size: var(--type-footer-font-size-fluid);
    line-height: var(--type-footer-line-height-fluid);
    letter-spacing: var(--type-footer-letter-spacing-fluid);
  }

  .t-body {
    font-size: var(--type-body-font-size-fluid);
    line-height: var(--type-body-line-height-fluid);
    letter-spacing: var(--type-body-letter-spacing-fluid);
  }

  .t-body-serif {
    font-size: var(--type-body-serif-font-size-fluid);
    line-height: var(--type-body-serif-line-height-fluid);
    letter-spacing: var(--type-body-serif-letter-spacing-fluid);
  }

  .t-body-strong {
    font-size: var(--type-body-strong-font-size-fluid);
    line-height: var(--type-body-strong-line-height-fluid);
    letter-spacing: var(--type-body-strong-letter-spacing-fluid);
  }

  .t-label {
    font-size: var(--type-label-font-size-fluid);
    line-height: var(--type-label-line-height-fluid);
    letter-spacing: var(--type-label-letter-spacing-fluid);
  }

  .t-button {
    font-size: var(--type-button-font-size-fluid);
    line-height: var(--type-button-line-height-fluid);
    letter-spacing: var(--type-button-letter-spacing-fluid);
  }

  .t-caption {
    font-size: var(--type-caption-font-size-fluid);
    line-height: var(--type-caption-line-height-fluid);
    letter-spacing: var(--type-caption-letter-spacing-fluid);
  }

  .t-caption-strong {
    font-size: var(--type-caption-strong-font-size-fluid);
    line-height: var(--type-caption-strong-line-height-fluid);
    letter-spacing: var(--type-caption-strong-letter-spacing-fluid);
  }
}