/*
 * Typography utilities — Figma text styles from variables.css.
 * Manrope applies only on sk-* component classes, not legacy page chrome.
 */

.sk-text-heading-1 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-1-size);
  font-weight: var(--text-heading-1-weight);
  line-height: var(--text-heading-1-lh);
  color: var(--skilvana-primary-headings);
}

.sk-text-heading-2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-2-size);
  font-weight: var(--text-heading-2-weight);
  line-height: var(--text-heading-2-lh);
  color: var(--skilvana-primary-headings);
}

.sk-text-heading-3 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-3-size);
  font-weight: var(--text-heading-3-weight);
  line-height: var(--text-heading-3-lh);
  color: var(--skilvana-primary-headings);
}

.sk-text-heading-4 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-heading-4-size);
  font-weight: var(--text-heading-4-weight);
  line-height: var(--text-heading-4-lh);
  color: var(--skilvana-primary-headings);
}

.sk-text-body-1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-1-size);
  font-weight: var(--text-body-1-weight);
  line-height: var(--text-body-1-lh);
  color: var(--skilvana-body-text);
}

.sk-text-body-2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-2-size);
  font-weight: var(--text-body-2-weight);
  line-height: var(--text-body-2-lh);
  color: var(--skilvana-body-text);
}

.sk-text-caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-lh);
  color: var(--skilvana-body-text);
}

.sk-text-label {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-lh);
  color: var(--skilvana-body-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sk-text-muted {
  color: var(--skilvana-body-text);
}

.sk-text-dim {
  color: var(--text-dim);
}

.sk-text-italic {
  font-style: italic;
}

/* Shared sk-* components (Button uses button-component.css) */
.sk-card,
.sk-card-header,
.sk-card-title,
.sk-card-subtitle,
.sk-card-body,
.sk-sidenav-heading,
button.sk-sidenav-item,
.sk-form-field,
.sk-form-field-hint,
select.sk-select,
.sk-tabs,
button.sk-tab,
.sk-tab-panel,
.sk-modal,
.sk-modal-title,
.sk-modal-body,
.sk-error-banner {
  font-family: var(--font-brand);
}