/* Mirrors the MDDS design system ("MDDS · 01 Foundations (tokens & styles)",
   Figma). Do not edit by hand: change it in the DS and sync here. */

/* ==========================================================================
    MDDS — Typography Utilities
    One class per role, size and weight, plus the two composable axes

    Conventions:
    - Prefix: .md-*, and the class name is the semantic token without `text`:
      --md-text-body-mn-regular-font-weight  →  .md-body-mn-regular
    - Every declaration is a var() at the semantic layer. Nothing here reads a
      primitive: that is what makes a single Figma change reach the product.
    - 50 role classes, which is exactly the 50 non-link text styles on the
      canvas. The correspondence is 1:1 and is the check that closes the loop.

    Two axes are NOT multiplied into the role classes, because in CSS they
    compose and in Figma they cannot:

    - FONT STYLE. Figma packs weight and italic into one font-style string
      ("Bold Italic") because the canvas applies a style by name. CSS has two
      independent properties, so `.md-italic` composes with any role and the
      five italic weights are never exported. Doubling 50 classes to express
      one declaration would be a poor trade.

          <em class="md-body-mn-regular md-italic">hapax legomenon</em>

    - LINK. A link has no metrics of its own: it inherits size, line-height
      and tracking from the text around it. `.md-link` therefore sets only
      weight, decoration and colour. The canvas has link/lg, link/mn and
      link/sm only because a Figma text node cannot inherit — each is exactly
      body/{size}/regular plus the underline, which is what `.md-link` on a
      body role produces.

          <a class="md-link" href="…">both, composed</a>

    PARAGRAPH SPACING (body and mono only). Not a CSS property: it becomes
    margin-block-start between adjacent siblings of the same role and size,
    as Figma spaces paragraphs. Specificity 0,1,0; interface/utilities.css
    loads after, so .md-m-* wins. In a flex/grid container use .md-gap-* and
    .md-m-none on the children, or margin and gap add up.
   ========================================================================== */

/* ═══════════════════════════════════════
   DISPLAY
   ═══════════════════════════════════════ */

.md-display-xl-semibold {
  font-family: var(--md-text-display-xl-font-family);
  font-size: var(--md-text-display-xl-font-size);
  line-height: var(--md-text-display-xl-line-height);
  letter-spacing: var(--md-text-display-xl-letter-spacing);
  font-weight: var(--md-text-display-xl-semibold-font-weight);
}

.md-display-xl-bold {
  font-family: var(--md-text-display-xl-font-family);
  font-size: var(--md-text-display-xl-font-size);
  line-height: var(--md-text-display-xl-line-height);
  letter-spacing: var(--md-text-display-xl-letter-spacing);
  font-weight: var(--md-text-display-xl-bold-font-weight);
}

.md-display-lg-semibold {
  font-family: var(--md-text-display-lg-font-family);
  font-size: var(--md-text-display-lg-font-size);
  line-height: var(--md-text-display-lg-line-height);
  letter-spacing: var(--md-text-display-lg-letter-spacing);
  font-weight: var(--md-text-display-lg-semibold-font-weight);
}

.md-display-lg-bold {
  font-family: var(--md-text-display-lg-font-family);
  font-size: var(--md-text-display-lg-font-size);
  line-height: var(--md-text-display-lg-line-height);
  letter-spacing: var(--md-text-display-lg-letter-spacing);
  font-weight: var(--md-text-display-lg-bold-font-weight);
}

.md-display-mn-semibold {
  font-family: var(--md-text-display-mn-font-family);
  font-size: var(--md-text-display-mn-font-size);
  line-height: var(--md-text-display-mn-line-height);
  letter-spacing: var(--md-text-display-mn-letter-spacing);
  font-weight: var(--md-text-display-mn-semibold-font-weight);
}

.md-display-mn-bold {
  font-family: var(--md-text-display-mn-font-family);
  font-size: var(--md-text-display-mn-font-size);
  line-height: var(--md-text-display-mn-line-height);
  letter-spacing: var(--md-text-display-mn-letter-spacing);
  font-weight: var(--md-text-display-mn-bold-font-weight);
}

.md-display-sm-semibold {
  font-family: var(--md-text-display-sm-font-family);
  font-size: var(--md-text-display-sm-font-size);
  line-height: var(--md-text-display-sm-line-height);
  letter-spacing: var(--md-text-display-sm-letter-spacing);
  font-weight: var(--md-text-display-sm-semibold-font-weight);
}

.md-display-sm-bold {
  font-family: var(--md-text-display-sm-font-family);
  font-size: var(--md-text-display-sm-font-size);
  line-height: var(--md-text-display-sm-line-height);
  letter-spacing: var(--md-text-display-sm-letter-spacing);
  font-weight: var(--md-text-display-sm-bold-font-weight);
}

/* ═══════════════════════════════════════
   HEADING
   ═══════════════════════════════════════ */

.md-heading-xl-regular {
  font-family: var(--md-text-heading-xl-font-family);
  font-size: var(--md-text-heading-xl-font-size);
  line-height: var(--md-text-heading-xl-line-height);
  letter-spacing: var(--md-text-heading-xl-letter-spacing);
  font-weight: var(--md-text-heading-xl-regular-font-weight);
}

.md-heading-xl-semibold {
  font-family: var(--md-text-heading-xl-font-family);
  font-size: var(--md-text-heading-xl-font-size);
  line-height: var(--md-text-heading-xl-line-height);
  letter-spacing: var(--md-text-heading-xl-letter-spacing);
  font-weight: var(--md-text-heading-xl-semibold-font-weight);
}

.md-heading-xl-bold {
  font-family: var(--md-text-heading-xl-font-family);
  font-size: var(--md-text-heading-xl-font-size);
  line-height: var(--md-text-heading-xl-line-height);
  letter-spacing: var(--md-text-heading-xl-letter-spacing);
  font-weight: var(--md-text-heading-xl-bold-font-weight);
}

.md-heading-lg-regular {
  font-family: var(--md-text-heading-lg-font-family);
  font-size: var(--md-text-heading-lg-font-size);
  line-height: var(--md-text-heading-lg-line-height);
  letter-spacing: var(--md-text-heading-lg-letter-spacing);
  font-weight: var(--md-text-heading-lg-regular-font-weight);
}

.md-heading-lg-semibold {
  font-family: var(--md-text-heading-lg-font-family);
  font-size: var(--md-text-heading-lg-font-size);
  line-height: var(--md-text-heading-lg-line-height);
  letter-spacing: var(--md-text-heading-lg-letter-spacing);
  font-weight: var(--md-text-heading-lg-semibold-font-weight);
}

.md-heading-lg-bold {
  font-family: var(--md-text-heading-lg-font-family);
  font-size: var(--md-text-heading-lg-font-size);
  line-height: var(--md-text-heading-lg-line-height);
  letter-spacing: var(--md-text-heading-lg-letter-spacing);
  font-weight: var(--md-text-heading-lg-bold-font-weight);
}

.md-heading-mn-regular {
  font-family: var(--md-text-heading-mn-font-family);
  font-size: var(--md-text-heading-mn-font-size);
  line-height: var(--md-text-heading-mn-line-height);
  letter-spacing: var(--md-text-heading-mn-letter-spacing);
  font-weight: var(--md-text-heading-mn-regular-font-weight);
}

.md-heading-mn-semibold {
  font-family: var(--md-text-heading-mn-font-family);
  font-size: var(--md-text-heading-mn-font-size);
  line-height: var(--md-text-heading-mn-line-height);
  letter-spacing: var(--md-text-heading-mn-letter-spacing);
  font-weight: var(--md-text-heading-mn-semibold-font-weight);
}

.md-heading-mn-bold {
  font-family: var(--md-text-heading-mn-font-family);
  font-size: var(--md-text-heading-mn-font-size);
  line-height: var(--md-text-heading-mn-line-height);
  letter-spacing: var(--md-text-heading-mn-letter-spacing);
  font-weight: var(--md-text-heading-mn-bold-font-weight);
}

.md-heading-sm-regular {
  font-family: var(--md-text-heading-sm-font-family);
  font-size: var(--md-text-heading-sm-font-size);
  line-height: var(--md-text-heading-sm-line-height);
  letter-spacing: var(--md-text-heading-sm-letter-spacing);
  font-weight: var(--md-text-heading-sm-regular-font-weight);
}

.md-heading-sm-semibold {
  font-family: var(--md-text-heading-sm-font-family);
  font-size: var(--md-text-heading-sm-font-size);
  line-height: var(--md-text-heading-sm-line-height);
  letter-spacing: var(--md-text-heading-sm-letter-spacing);
  font-weight: var(--md-text-heading-sm-semibold-font-weight);
}

.md-heading-sm-bold {
  font-family: var(--md-text-heading-sm-font-family);
  font-size: var(--md-text-heading-sm-font-size);
  line-height: var(--md-text-heading-sm-line-height);
  letter-spacing: var(--md-text-heading-sm-letter-spacing);
  font-weight: var(--md-text-heading-sm-bold-font-weight);
}

.md-heading-xs-regular {
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
  font-weight: var(--md-text-heading-xs-regular-font-weight);
}

.md-heading-xs-semibold {
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
  font-weight: var(--md-text-heading-xs-semibold-font-weight);
}

.md-heading-xs-bold {
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
  font-weight: var(--md-text-heading-xs-bold-font-weight);
}

/* ═══════════════════════════════════════
   BODY
   ═══════════════════════════════════════ */

.md-body-lg-regular {
  font-family: var(--md-text-body-lg-font-family);
  font-size: var(--md-text-body-lg-font-size);
  line-height: var(--md-text-body-lg-line-height);
  letter-spacing: var(--md-text-body-lg-letter-spacing);
  font-weight: var(--md-text-body-lg-regular-font-weight);
}

.md-body-lg-semibold {
  font-family: var(--md-text-body-lg-font-family);
  font-size: var(--md-text-body-lg-font-size);
  line-height: var(--md-text-body-lg-line-height);
  letter-spacing: var(--md-text-body-lg-letter-spacing);
  font-weight: var(--md-text-body-lg-semibold-font-weight);
}

.md-body-lg-bold {
  font-family: var(--md-text-body-lg-font-family);
  font-size: var(--md-text-body-lg-font-size);
  line-height: var(--md-text-body-lg-line-height);
  letter-spacing: var(--md-text-body-lg-letter-spacing);
  font-weight: var(--md-text-body-lg-bold-font-weight);
}

:where(.md-body-lg-regular, .md-body-lg-semibold, .md-body-lg-bold)
  + :is(.md-body-lg-regular, .md-body-lg-semibold, .md-body-lg-bold) {
  margin-block-start: var(--md-text-body-lg-paragraph-spacing);
}

.md-body-mn-regular {
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
  font-weight: var(--md-text-body-mn-regular-font-weight);
}

.md-body-mn-semibold {
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
  font-weight: var(--md-text-body-mn-semibold-font-weight);
}

.md-body-mn-bold {
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
  font-weight: var(--md-text-body-mn-bold-font-weight);
}

:where(.md-body-mn-regular, .md-body-mn-semibold, .md-body-mn-bold)
  + :is(.md-body-mn-regular, .md-body-mn-semibold, .md-body-mn-bold) {
  margin-block-start: var(--md-text-body-mn-paragraph-spacing);
}

.md-body-sm-regular {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
  font-weight: var(--md-text-body-sm-regular-font-weight);
}

.md-body-sm-semibold {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
  font-weight: var(--md-text-body-sm-semibold-font-weight);
}

.md-body-sm-bold {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
  font-weight: var(--md-text-body-sm-bold-font-weight);
}

:where(.md-body-sm-regular, .md-body-sm-semibold, .md-body-sm-bold)
  + :is(.md-body-sm-regular, .md-body-sm-semibold, .md-body-sm-bold) {
  margin-block-start: var(--md-text-body-sm-paragraph-spacing);
}

/* ═══════════════════════════════════════
   LABEL
   ═══════════════════════════════════════ */

.md-label-lg-regular {
  font-family: var(--md-text-label-lg-font-family);
  font-size: var(--md-text-label-lg-font-size);
  line-height: var(--md-text-label-lg-line-height);
  letter-spacing: var(--md-text-label-lg-letter-spacing);
  font-weight: var(--md-text-label-lg-regular-font-weight);
}

.md-label-lg-semibold {
  font-family: var(--md-text-label-lg-font-family);
  font-size: var(--md-text-label-lg-font-size);
  line-height: var(--md-text-label-lg-line-height);
  letter-spacing: var(--md-text-label-lg-letter-spacing);
  font-weight: var(--md-text-label-lg-semibold-font-weight);
}

.md-label-lg-bold {
  font-family: var(--md-text-label-lg-font-family);
  font-size: var(--md-text-label-lg-font-size);
  line-height: var(--md-text-label-lg-line-height);
  letter-spacing: var(--md-text-label-lg-letter-spacing);
  font-weight: var(--md-text-label-lg-bold-font-weight);
}

.md-label-mn-regular {
  font-family: var(--md-text-label-mn-font-family);
  font-size: var(--md-text-label-mn-font-size);
  line-height: var(--md-text-label-mn-line-height);
  letter-spacing: var(--md-text-label-mn-letter-spacing);
  font-weight: var(--md-text-label-mn-regular-font-weight);
}

.md-label-mn-semibold {
  font-family: var(--md-text-label-mn-font-family);
  font-size: var(--md-text-label-mn-font-size);
  line-height: var(--md-text-label-mn-line-height);
  letter-spacing: var(--md-text-label-mn-letter-spacing);
  font-weight: var(--md-text-label-mn-semibold-font-weight);
}

.md-label-mn-bold {
  font-family: var(--md-text-label-mn-font-family);
  font-size: var(--md-text-label-mn-font-size);
  line-height: var(--md-text-label-mn-line-height);
  letter-spacing: var(--md-text-label-mn-letter-spacing);
  font-weight: var(--md-text-label-mn-bold-font-weight);
}

.md-label-sm-regular {
  font-family: var(--md-text-label-sm-font-family);
  font-size: var(--md-text-label-sm-font-size);
  line-height: var(--md-text-label-sm-line-height);
  letter-spacing: var(--md-text-label-sm-letter-spacing);
  font-weight: var(--md-text-label-sm-regular-font-weight);
}

.md-label-sm-semibold {
  font-family: var(--md-text-label-sm-font-family);
  font-size: var(--md-text-label-sm-font-size);
  line-height: var(--md-text-label-sm-line-height);
  letter-spacing: var(--md-text-label-sm-letter-spacing);
  font-weight: var(--md-text-label-sm-semibold-font-weight);
}

.md-label-sm-bold {
  font-family: var(--md-text-label-sm-font-family);
  font-size: var(--md-text-label-sm-font-size);
  line-height: var(--md-text-label-sm-line-height);
  letter-spacing: var(--md-text-label-sm-letter-spacing);
  font-weight: var(--md-text-label-sm-bold-font-weight);
}

/* ═══════════════════════════════════════
   MONO
   ═══════════════════════════════════════ */

.md-mono-lg-regular {
  font-family: var(--md-text-mono-lg-font-family);
  font-size: var(--md-text-mono-lg-font-size);
  line-height: var(--md-text-mono-lg-line-height);
  letter-spacing: var(--md-text-mono-lg-letter-spacing);
  font-weight: var(--md-text-mono-lg-regular-font-weight);
}

.md-mono-lg-semibold {
  font-family: var(--md-text-mono-lg-font-family);
  font-size: var(--md-text-mono-lg-font-size);
  line-height: var(--md-text-mono-lg-line-height);
  letter-spacing: var(--md-text-mono-lg-letter-spacing);
  font-weight: var(--md-text-mono-lg-semibold-font-weight);
}

.md-mono-lg-bold {
  font-family: var(--md-text-mono-lg-font-family);
  font-size: var(--md-text-mono-lg-font-size);
  line-height: var(--md-text-mono-lg-line-height);
  letter-spacing: var(--md-text-mono-lg-letter-spacing);
  font-weight: var(--md-text-mono-lg-bold-font-weight);
}

:where(.md-mono-lg-regular, .md-mono-lg-semibold, .md-mono-lg-bold)
  + :is(.md-mono-lg-regular, .md-mono-lg-semibold, .md-mono-lg-bold) {
  margin-block-start: var(--md-text-mono-lg-paragraph-spacing);
}

.md-mono-mn-regular {
  font-family: var(--md-text-mono-mn-font-family);
  font-size: var(--md-text-mono-mn-font-size);
  line-height: var(--md-text-mono-mn-line-height);
  letter-spacing: var(--md-text-mono-mn-letter-spacing);
  font-weight: var(--md-text-mono-mn-regular-font-weight);
}

.md-mono-mn-semibold {
  font-family: var(--md-text-mono-mn-font-family);
  font-size: var(--md-text-mono-mn-font-size);
  line-height: var(--md-text-mono-mn-line-height);
  letter-spacing: var(--md-text-mono-mn-letter-spacing);
  font-weight: var(--md-text-mono-mn-semibold-font-weight);
}

.md-mono-mn-bold {
  font-family: var(--md-text-mono-mn-font-family);
  font-size: var(--md-text-mono-mn-font-size);
  line-height: var(--md-text-mono-mn-line-height);
  letter-spacing: var(--md-text-mono-mn-letter-spacing);
  font-weight: var(--md-text-mono-mn-bold-font-weight);
}

:where(.md-mono-mn-regular, .md-mono-mn-semibold, .md-mono-mn-bold)
  + :is(.md-mono-mn-regular, .md-mono-mn-semibold, .md-mono-mn-bold) {
  margin-block-start: var(--md-text-mono-mn-paragraph-spacing);
}

.md-mono-sm-regular {
  font-family: var(--md-text-mono-sm-font-family);
  font-size: var(--md-text-mono-sm-font-size);
  line-height: var(--md-text-mono-sm-line-height);
  letter-spacing: var(--md-text-mono-sm-letter-spacing);
  font-weight: var(--md-text-mono-sm-regular-font-weight);
}

.md-mono-sm-semibold {
  font-family: var(--md-text-mono-sm-font-family);
  font-size: var(--md-text-mono-sm-font-size);
  line-height: var(--md-text-mono-sm-line-height);
  letter-spacing: var(--md-text-mono-sm-letter-spacing);
  font-weight: var(--md-text-mono-sm-semibold-font-weight);
}

.md-mono-sm-bold {
  font-family: var(--md-text-mono-sm-font-family);
  font-size: var(--md-text-mono-sm-font-size);
  line-height: var(--md-text-mono-sm-line-height);
  letter-spacing: var(--md-text-mono-sm-letter-spacing);
  font-weight: var(--md-text-mono-sm-bold-font-weight);
}

:where(.md-mono-sm-regular, .md-mono-sm-semibold, .md-mono-sm-bold)
  + :is(.md-mono-sm-regular, .md-mono-sm-semibold, .md-mono-sm-bold) {
  margin-block-start: var(--md-text-mono-sm-paragraph-spacing);
}
/* ═══════════════════════════════════════
   FONT STYLE
   ═══════════════════════════════════════ */

/* Composes with any role class above; the role keeps setting the weight. */

.md-italic {
  font-style: var(--md-text-italic-font-style);
}

/* ═══════════════════════════════════════
   LINK
   ═══════════════════════════════════════ */

/* No font-size and no line-height, on purpose — see the note at the top.
   The underline is what makes a link recognisable without relying on telling
   two hues apart, so there is no variant that drops it and keeps the colour. */

.md-link {
  font-weight: var(--md-text-link-font-weight);
  text-decoration: var(--md-text-link-text-decoration);
  color: var(--md-content-vivid);
}

.md-link:hover {
  color: var(--md-content-vivid-hover);
}

.md-link:active {
  color: var(--md-content-vivid-pressed);
}