@layer composite-tokens {
/*
 * Composite typography tokens: font roles as classes, one per text role
 * defined in tokens/semantics/text-role.yml. Apply them to any element
 * (heading or not) — they set family, size, line-height, weight, and
 * letter-spacing, never color. See MARKUP.md for the markup contract.
 */
.ct-heading-display {
    font-family: var(--sem-typography-heading-family);
    font-size: var(--sem-text-role-display-size-compact);
    line-height: var(--sem-text-role-display-line-height);
    font-weight: var(--sem-text-role-display-weight);
    letter-spacing: var(--sem-text-role-display-letter-spacing);

    @container layout (width > 64rem) {
      font-size: var(--sem-text-role-display-size);
    }
  }

  .ct-heading-section {
    font-family: var(--sem-typography-heading-family);
    font-size: var(--sem-text-role-section-size);
    line-height: var(--sem-text-role-section-line-height);
    font-weight: var(--sem-text-role-section-weight);
    letter-spacing: var(--sem-text-role-section-letter-spacing);
  }

  .ct-label {
    font-family: var(--sem-typography-body-family);
    font-size: var(--sem-text-role-label-size);
    font-weight: var(--sem-text-role-label-weight);
    line-height: var(--sem-text-role-label-line-height);
    letter-spacing: var(--sem-text-role-label-letter-spacing);
  }

  .ct-text-body {
    font-family: var(--sem-typography-body-family);
    font-size: var(--sem-text-role-body-size);
    font-weight: var(--sem-text-role-body-weight);
    line-height: var(--sem-text-role-body-line-height);
    letter-spacing: var(--sem-text-role-body-letter-spacing);
  }

  .ct-text-lead {
    font-size: var(--sem-text-role-lead-size);
    font-weight: var(--sem-text-role-lead-weight);
    line-height: var(--sem-text-role-lead-line-height);
    letter-spacing: var(--sem-text-role-lead-letter-spacing);
  }

  .ct-text-small {
    font-size: var(--sem-text-role-small-size);
    font-weight: var(--sem-text-role-small-weight);
    line-height: var(--sem-text-role-small-line-height);
    letter-spacing: var(--sem-text-role-small-letter-spacing);
  }

}