/* ==========================================================================
   Typography System — Display, Headline, Title, Body, Label

   Usage: add ONE class to any element to get its complete type style
   (font-size, line-height, letter-spacing where applicable, weight,
   font-family) in one go.

     <h1 class="text-display-2xl-bold">Hello</h1>
     <p class="text-body-md-regular">Paragraph text</p>
     <span class="text-label-sm-medium">A tag</span>

   Naming pattern: text-{family}-{size}-{weight}
     family: display | headline | title | body | label
     size:   varies per family (see variables.css for the exact list)
     weight: regular | medium | semibold | bold
             (headline has no semibold step — regular/medium/bold only)

   All values are pulled from CSS custom properties in variables.css, so
   redesigning the scale means editing tokens in ONE place — every class
   built from a token updates automatically.
   ========================================================================== */

/* Shared resets/behavior for every typography class, regardless of family/size/weight */
[class*="text-"] {
  font-family: var(--font-base);
  margin: 0;
}

/* ============================================================================
   Display scale
   ============================================================================ */

/* Display 2XL — 72px / 90px line-height */
.text-display-2xl-regular,
.text-display-2xl-medium,
.text-display-2xl-semibold,
.text-display-2xl-bold {
  font-size: var(--text-display-2xl-size);
  line-height: var(--text-display-2xl-line-height);
  letter-spacing: var(--text-display-2xl-letter-spacing);
}
.text-display-2xl-regular {
  font-weight: var(--font-weight-normal);
}
.text-display-2xl-medium {
  font-weight: var(--font-weight-medium);
}
.text-display-2xl-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-display-2xl-bold {
  font-weight: var(--font-weight-bold);
}

/* Display XL — 60px / 72px line-height */
.text-display-xl-regular,
.text-display-xl-medium,
.text-display-xl-semibold,
.text-display-xl-bold {
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line-height);
  letter-spacing: var(--text-display-xl-letter-spacing);
}
.text-display-xl-regular {
  font-weight: var(--font-weight-normal);
}
.text-display-xl-medium {
  font-weight: var(--font-weight-medium);
}
.text-display-xl-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-display-xl-bold {
  font-weight: var(--font-weight-bold);
}

/* Display Large — 48px / 60px line-height */
.text-display-lg-regular,
.text-display-lg-medium,
.text-display-lg-semibold,
.text-display-lg-bold {
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line-height);
  letter-spacing: var(--text-display-lg-letter-spacing);
}
.text-display-lg-regular {
  font-weight: var(--font-weight-normal);
}
.text-display-lg-medium {
  font-weight: var(--font-weight-medium);
}
.text-display-lg-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-display-lg-bold {
  font-weight: var(--font-weight-bold);
}

/* Display Medium — 36px / 44px line-height */
.text-display-md-regular,
.text-display-md-medium,
.text-display-md-semibold,
.text-display-md-bold {
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line-height);
  letter-spacing: var(--text-display-md-letter-spacing);
}
.text-display-md-regular {
  font-weight: var(--font-weight-normal);
}
.text-display-md-medium {
  font-weight: var(--font-weight-medium);
}
.text-display-md-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-display-md-bold {
  font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Headline scale
   ============================================================================ */

/* Headline Large — 32px / 40px line-height */
.text-headline-lg-regular,
.text-headline-lg-medium,
.text-headline-lg-bold {
  font-size: var(--text-headline-lg-size);
  line-height: var(--text-headline-lg-line-height);
}
.text-headline-lg-regular {
  font-weight: var(--font-weight-normal);
}
.text-headline-lg-medium {
  font-weight: var(--font-weight-medium);
}
.text-headline-lg-bold {
  font-weight: var(--font-weight-bold);
}

/* Headline Medium — 28px / 36px line-height */
.text-headline-md-regular,
.text-headline-md-medium,
.text-headline-md-bold {
  font-size: var(--text-headline-md-size);
  line-height: var(--text-headline-md-line-height);
}
.text-headline-md-regular {
  font-weight: var(--font-weight-normal);
}
.text-headline-md-medium {
  font-weight: var(--font-weight-medium);
}
.text-headline-md-bold {
  font-weight: var(--font-weight-bold);
}

/* Headline Small — 24px / 32px line-height */
.text-headline-sm-regular,
.text-headline-sm-medium,
.text-headline-sm-bold {
  font-size: var(--text-headline-sm-size);
  line-height: var(--text-headline-sm-line-height);
}
.text-headline-sm-regular {
  font-weight: var(--font-weight-normal);
}
.text-headline-sm-medium {
  font-weight: var(--font-weight-medium);
}
.text-headline-sm-bold {
  font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Title scale
   ============================================================================ */

/* Title Large — 20px / 28px line-height */
.text-title-lg-regular,
.text-title-lg-medium,
.text-title-lg-semibold,
.text-title-lg-bold {
  font-size: var(--text-title-lg-size);
  line-height: var(--text-title-lg-line-height);
}
.text-title-lg-regular {
  font-weight: var(--font-weight-normal);
}
.text-title-lg-medium {
  font-weight: var(--font-weight-medium);
}
.text-title-lg-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-title-lg-bold {
  font-weight: var(--font-weight-bold);
}

/* Title Medium — 16px / 24px line-height */
.text-title-md-regular,
.text-title-md-medium,
.text-title-md-semibold,
.text-title-md-bold {
  font-size: var(--text-title-md-size);
  line-height: var(--text-title-md-line-height);
}
.text-title-md-regular {
  font-weight: var(--font-weight-normal);
}
.text-title-md-medium {
  font-weight: var(--font-weight-medium);
}
.text-title-md-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-title-md-bold {
  font-weight: var(--font-weight-bold);
}

/* Title Small — 14px / 20px line-height */
.text-title-sm-regular,
.text-title-sm-medium,
.text-title-sm-semibold,
.text-title-sm-bold {
  font-size: var(--text-title-sm-size);
  line-height: var(--text-title-sm-line-height);
}
.text-title-sm-regular {
  font-weight: var(--font-weight-normal);
}
.text-title-sm-medium {
  font-weight: var(--font-weight-medium);
}
.text-title-sm-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-title-sm-bold {
  font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Body scale
   ============================================================================ */

/* Body XL — 18px / 24px line-height */
.text-body-xl-regular,
.text-body-xl-medium,
.text-body-xl-semibold,
.text-body-xl-bold {
  font-size: var(--text-body-xl-size);
  line-height: var(--text-body-xl-line-height);
}
.text-body-xl-regular {
  font-weight: var(--font-weight-normal);
}
.text-body-xl-medium {
  font-weight: var(--font-weight-medium);
}
.text-body-xl-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-body-xl-bold {
  font-weight: var(--font-weight-bold);
}

/* Body Large — 16px / 24px line-height */
.text-body-lg-regular,
.text-body-lg-medium,
.text-body-lg-semibold,
.text-body-lg-bold {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}
.text-body-lg-regular {
  font-weight: var(--font-weight-normal);
}
.text-body-lg-medium {
  font-weight: var(--font-weight-medium);
}
.text-body-lg-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-body-lg-bold {
  font-weight: var(--font-weight-bold);
}

/* Body Medium — 14px / 20px line-height */
.text-body-md-regular,
.text-body-md-medium,
.text-body-md-semibold,
.text-body-md-bold {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line-height);
}
.text-body-md-regular {
  font-weight: var(--font-weight-normal);
}
.text-body-md-medium {
  font-weight: var(--font-weight-medium);
}
.text-body-md-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-body-md-bold {
  font-weight: var(--font-weight-bold);
}

/* Body Small — 13px / 16px line-height */
.text-body-sm-regular,
.text-body-sm-medium,
.text-body-sm-semibold,
.text-body-sm-bold {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
}
.text-body-sm-regular {
  font-weight: var(--font-weight-normal);
}
.text-body-sm-medium {
  font-weight: var(--font-weight-medium);
}
.text-body-sm-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-body-sm-bold {
  font-weight: var(--font-weight-bold);
}

/* Body XS — 12px / 16px line-height */
.text-body-xs-regular,
.text-body-xs-medium,
.text-body-xs-semibold,
.text-body-xs-bold {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-line-height);
}
.text-body-xs-regular {
  font-weight: var(--font-weight-normal);
}
.text-body-xs-medium {
  font-weight: var(--font-weight-medium);
}
.text-body-xs-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-body-xs-bold {
  font-weight: var(--font-weight-bold);
}

/* ============================================================================
   Label scale
   ============================================================================ */

/* Label Large — 14px / 20px line-height */
.text-label-lg-regular,
.text-label-lg-medium,
.text-label-lg-semibold,
.text-label-lg-bold {
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line-height);
}
.text-label-lg-regular {
  font-weight: var(--font-weight-normal);
}
.text-label-lg-medium {
  font-weight: var(--font-weight-medium);
}
.text-label-lg-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-label-lg-bold {
  font-weight: var(--font-weight-bold);
}

/* Label Medium — 13px / 16px line-height */
.text-label-md-regular,
.text-label-md-medium,
.text-label-md-semibold,
.text-label-md-bold {
  font-size: var(--text-label-md-size);
  line-height: var(--text-label-md-line-height);
}
.text-label-md-regular {
  font-weight: var(--font-weight-normal);
}
.text-label-md-medium {
  font-weight: var(--font-weight-medium);
}
.text-label-md-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-label-md-bold {
  font-weight: var(--font-weight-bold);
}

/* Label Small — 12px / 16px line-height */
.text-label-sm-regular,
.text-label-sm-medium,
.text-label-sm-semibold,
.text-label-sm-bold {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line-height);
}
.text-label-sm-regular {
  font-weight: var(--font-weight-normal);
}
.text-label-sm-medium {
  font-weight: var(--font-weight-medium);
}
.text-label-sm-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-label-sm-bold {
  font-weight: var(--font-weight-bold);
}

/* Label XS — 11px / 14px line-height */
.text-label-xs-regular,
.text-label-xs-medium,
.text-label-xs-semibold,
.text-label-xs-bold {
  font-size: var(--text-label-xs-size);
  line-height: var(--text-label-xs-line-height);
}
.text-label-xs-regular {
  font-weight: var(--font-weight-normal);
}
.text-label-xs-medium {
  font-weight: var(--font-weight-medium);
}
.text-label-xs-semibold {
  font-weight: var(--font-weight-semibold);
}
.text-label-xs-bold {
  font-weight: var(--font-weight-bold);
}