/* ==========================================================================
   Base Typography — applies tokens to elements and utility classes
   ========================================================================== */

/* Display */
.display-1 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-display-1);
  line-height:    var(--lh-display-1);
  letter-spacing: var(--ls-display-1);
  font-weight:    var(--fw-display-1);
}

/* Headings */
/* text-box-trim: Chrome 133+, Safari 18.2+. Graceful no-op elsewhere. */
h1, .heading-1 {
  font-family:     var(--font-heading);
  font-size:       var(--fs-heading-1);
  line-height:     var(--lh-heading-1);
  letter-spacing:  var(--ls-heading-1);
  font-weight:     var(--fw-heading-1);
  text-transform:  uppercase;
  text-box-trim:   trim-both;
  text-box-edge:   cap alphabetic;
}

h2, .heading-2 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-heading-2);
  line-height:    var(--lh-heading-2);
  letter-spacing: var(--ls-heading-2);
  font-weight:    var(--fw-heading-2);
  text-transform: uppercase;
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

h3, .heading-3 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-heading-3);
  line-height:    var(--lh-heading-3);
  letter-spacing: var(--ls-heading-3);
  font-weight:    var(--fw-heading-3);
  text-transform: uppercase;
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

h4, .heading-4 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-heading-4);
  line-height:    var(--lh-heading-4);
  letter-spacing: var(--ls-heading-4);
  font-weight:    var(--fw-heading-4);
  text-transform: uppercase;
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

h5, .heading-5 {
  font-family:    var(--font-heading);
  font-size:      var(--fs-heading-5);
  line-height:    var(--lh-heading-5);
  letter-spacing: var(--ls-heading-5);
  font-weight:    var(--fw-heading-5);
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

h6, .heading-6 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-heading-6);
  line-height:    var(--lh-heading-6);
  letter-spacing: var(--ls-heading-6);
  font-weight:    var(--fw-heading-6);
  /* Andresweb is all-caps (lowercase draws capitals) and has no uppercase Ó,
     so never let h1–h4's uppercase leak into a heading-6 on those tags. */
  text-transform: none;
}

/* Body */
.body-1 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-body-1);
  line-height:    var(--lh-body-1);
  letter-spacing: var(--ls-body-1);
  font-weight:    var(--fw-body-1);
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

.body-2 {
  font-family:    var(--font-secondary);
  font-size:      var(--fs-body-2);
  line-height:    var(--lh-body-2);
  letter-spacing: var(--ls-body-2);
  font-weight:    var(--fw-body-2);
}

.body-3 {
  font-family:    var(--font-secondary);
  font-size:      var(--fs-body-3);
  line-height:    var(--lh-body-3);
  letter-spacing: var(--ls-body-3);
  font-weight:    var(--fw-body-3);
}

.body-4 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-body-4);
  line-height:    var(--lh-body-4);
  letter-spacing: var(--ls-body-4);
  font-weight:    var(--fw-body-4);
  text-box-trim:  trim-both;
  text-box-edge:  cap alphabetic;
}

.body-5 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-body-5);
  line-height:    var(--lh-body-5);
  letter-spacing: var(--ls-body-5);
  font-weight:    var(--fw-body-5);
}

.body-6 {
  font-family:    var(--font-secondary);
  font-size:      var(--fs-body-6);
  line-height:    var(--lh-body-6);
  letter-spacing: var(--ls-body-6);
  font-weight:    var(--fw-body-6);
}

/* Mobile-only overrides — trim changes that can't be handled by tokens alone */
@media (max-width: 768px) {
  h6, .heading-6 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .body-4 {
    text-box-trim: none;
  }
}

/* TODO: label classes pending design specs
.label-1 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-label-1);
  line-height:    var(--lh-label-1);
  letter-spacing: var(--ls-label-1);
  font-weight:    var(--fw-label-1);
}

.label-2 {
  font-family:    var(--font-primary);
  font-size:      var(--fs-label-2);
  line-height:    var(--lh-label-2);
  letter-spacing: var(--ls-label-2);
  font-weight:    var(--fw-label-2);
}
*/