/**
 * Heading XL (Display) Component Styles
 *
 * Levels: display1 (XXL, 120 px) | display2 (XL, 92 px) | display3 (Large, 76 px)
 * All font sizes are responsive via CSS tokens in tokens/typography.css.
 * Letter-spacing uses em units so it scales automatically with font size.
 *
 * Figma node: 141:66329
 */

/* ── Shared base ── */
.heading-xl {
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
  margin: 0;
  margin-bottom:0.5em;

  /* ── Attitude highlight: <em> and <strong> inside headings ── */

  & em,
  & strong,
  & .bosch-highlight {
    /* only gradients work, otherwise descenders get obfuscated in multiline text */
    background-image: linear-gradient(
      to bottom,
      transparent 0em,
      var(--attitude, #FFA0FA) 0em,
      var(--attitude, #FFA0FA) 1.23em,
      transparent 1.23em
    );
    font-style: normal;
    font-weight: inherit;
    padding-inline: 0.1em 0.15em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  p {
    margin: 0;
  }
}

/* ── Display 1 — XXL (120 px) / line-height 1.05 / tracking -2.6% ── */
.heading-xl--xxl {
  font-size: var(--text-display-1, 48px);
  line-height: 1.05;
  letter-spacing: -0.026em;
}

/* ── Display 2 — XL (92 px) / line-height 1.1 / tracking -2.3% ── */
.heading-xl--xl {
  font-size: var(--text-display-2, 44px);
  line-height: 1.1;
  letter-spacing: -0.023em;
}

/* ── Display 3 — Large (76 px) / line-height 1.1 / tracking -2.3% ── */
.heading-xl--large {
  font-size: var(--text-display-3, 40px);
  line-height: 1.1;
  letter-spacing: -0.023em;
}