/*
 * Typography utility classes
 *
 * Pre-compiled utility CSS for consumers who prefer plain classes over the
 * Typography React component. These are the same styles as Typography.module.css
 * but with kebab-case class names (non-module).
 *
 * Usage:
 *   import '@gostudent/shared-ui-library/tokens/typography-classes.css';
 *   <p class="font-body-md">...</p>
 */

/* ─── heading-h1 ──────────────────────────────────────────────────────────── */

.font-heading-h1 {
  font-family: var(--font-family);
  font-size: var(--font-mobile-heading-font-size-h1);
  font-weight: var(--font-mobile-heading-font-weight-h1);
  line-height: var(--font-mobile-heading-line-height-h1);
}

@media (min-width: 1024px) {
  .font-heading-h1 {
    font-size: var(--font-desktop-heading-font-size-h1);
    font-weight: var(--font-desktop-heading-font-weight-h1);
    line-height: var(--font-desktop-heading-line-height-h1);
  }
}

/* ─── heading-h2 ──────────────────────────────────────────────────────────── */

.font-heading-h2 {
  font-family: var(--font-family);
  font-size: var(--font-mobile-heading-font-size-h2);
  font-weight: var(--font-mobile-heading-font-weight-h2);
  line-height: var(--font-mobile-heading-line-height-h2);
}

@media (min-width: 1024px) {
  .font-heading-h2 {
    font-size: var(--font-desktop-heading-font-size-h2);
    font-weight: var(--font-desktop-heading-font-weight-h2);
    line-height: var(--font-desktop-heading-line-height-h2);
  }
}

/* ─── heading-h3 (cross-level: mobile h3 → desktop h4) ───────────────────── */

.font-heading-h3 {
  font-family: var(--font-family);
  font-size: var(--font-mobile-heading-font-size-h3);
  font-weight: var(--font-mobile-heading-font-weight-h3);
  line-height: var(--font-mobile-heading-line-height-h3);
}

@media (min-width: 1024px) {
  .font-heading-h3 {
    font-size: var(--font-desktop-heading-font-size-h4);
    font-weight: var(--font-desktop-heading-font-weight-h4);
    line-height: var(--font-desktop-heading-line-height-h4);
  }
}

/* ─── heading-h4 ──────────────────────────────────────────────────────────── */

.font-heading-h4 {
  font-family: var(--font-family);
  font-size: var(--font-mobile-heading-font-size-h4);
  font-weight: var(--font-mobile-heading-font-weight-h4);
  line-height: var(--font-mobile-heading-line-height-h4);
}

@media (min-width: 1024px) {
  .font-heading-h4 {
    font-size: var(--font-desktop-heading-font-size-h4);
    font-weight: var(--font-desktop-heading-font-weight-h4);
    line-height: var(--font-desktop-heading-line-height-h4);
  }
}

/* ─── heading-h5 (universal baseline — no mobile-specific token) ──────────── */

.font-heading-h5 {
  font-family: var(--font-family);

  font-size: var(--font-desktop-heading-font-size-h5);

  font-weight: var(--font-desktop-heading-font-weight-h5);

  line-height: var(--font-desktop-heading-line-height-h5);
}

/* ─── heading-h6 (universal baseline — no mobile-specific token) ──────────── */

.font-heading-h6 {
  font-family: var(--font-family);

  font-size: var(--font-desktop-heading-font-size-h6);

  font-weight: var(--font-desktop-heading-font-weight-h6);

  line-height: var(--font-desktop-heading-line-height-h6);
}

/* ─── subtitle-md ─────────────────────────────────────────────────────────── */

.font-subtitle-md {
  font-family: var(--font-family);
  font-size: var(--font-mobile-subtitle-font-size-md);
  font-weight: var(--font-mobile-subtitle-font-weight-md);
  line-height: var(--font-mobile-subtitle-line-height-md);
}

@media (min-width: 1024px) {
  .font-subtitle-md {
    font-size: var(--font-desktop-subtitle-font-size-md);
    font-weight: var(--font-desktop-subtitle-font-weight-md);
    line-height: var(--font-desktop-subtitle-line-height-md);
  }
}

/* ─── subtitle-sm ─────────────────────────────────────────────────────────── */

.font-subtitle-sm {
  font-family: var(--font-family);
  font-size: var(--font-mobile-subtitle-font-size-sm);
  font-weight: var(--font-mobile-subtitle-font-weight-sm);
  line-height: var(--font-mobile-subtitle-line-height-sm);
}

@media (min-width: 1024px) {
  .font-subtitle-sm {
    font-size: var(--font-desktop-subtitle-font-size-sm);
    font-weight: var(--font-desktop-subtitle-font-weight-sm);
    line-height: var(--font-desktop-subtitle-line-height-sm);
  }
}

/* ─── body-md ─────────────────────────────────────────────────────────────── */

.font-body-md {
  font-family: var(--font-family);
  font-size: var(--font-mobile-body-font-size-md);
  font-weight: var(--font-mobile-body-font-weight-md);
  line-height: var(--font-mobile-body-line-height-md);
}

@media (min-width: 1024px) {
  .font-body-md {
    font-size: var(--font-desktop-body-font-size-md);
    font-weight: var(--font-desktop-body-font-weight-md);
    line-height: var(--font-desktop-body-line-height-md);
  }
}

/* ─── body-sm ─────────────────────────────────────────────────────────────── */

.font-body-sm {
  font-family: var(--font-family);
  font-size: var(--font-mobile-body-font-size-sm);
  font-weight: var(--font-mobile-body-font-weight-sm);
  line-height: var(--font-mobile-body-line-height-sm);
}

@media (min-width: 1024px) {
  .font-body-sm {
    font-size: var(--font-desktop-body-font-size-sm);
    font-weight: var(--font-desktop-body-font-weight-sm);
    line-height: var(--font-desktop-body-line-height-sm);
  }
}

/* ─── label (universal baseline — no mobile-specific token) ─────────────── */

.font-label {
  font-family: var(--font-family);
  font-size: var(--font-desktop-label-font-size);
  font-weight: var(--font-desktop-label-font-weight-medium);
  line-height: var(--font-desktop-label-line-height);
}

/* ─── tooltip (universal baseline — no mobile-specific token) ───────────── */

.font-tooltip {
  font-family: var(--font-family);
  font-size: var(--font-desktop-tooltip-font-size);
  font-weight: var(--font-desktop-tooltip-font-weight);
  line-height: var(--font-desktop-tooltip-line-height);
}