/*
 * HOSTREND TYPOGRAPHY SYSTEM v2.1 — HEADING WEIGHT REFINEMENT
 *
 * Primary font: Be Vietnam Pro
 * Typography direction: Canva-inspired hierarchy without copying Canva's font.
 * Primary display and section headings use the shared Semibold (600) token.
 * Body copy and smaller text preserve their existing hierarchy and sizing.
 */

:where(html) {
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(body) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  line-height: var(--line-body);
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * DISPLAY
 * -------------------------------------------------------------------------- */

:where(.display-xl) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-display-xl);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-display-xl);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

:where(.display-lg) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-display-lg);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-display-lg);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

:where(.display-md) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-display-md);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-display-md);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

/* Common semantic aliases for existing page classes. */
:where(.hero-heading) {
  font-size: var(--font-display-xl);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-display-xl);
  letter-spacing: var(--tracking-display);
}

/* --------------------------------------------------------------------------
 * HEADINGS
 * -------------------------------------------------------------------------- */

:where(h1) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h1);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-h1);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h2) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h2);
  font-weight: var(--font-section-heading-weight, var(--font-weight-semibold));
  line-height: var(--line-h2);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h3) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h3);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h4) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h4);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h5) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h5);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h6) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-size: var(--font-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h6);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
 * BODY
 * -------------------------------------------------------------------------- */

:where(p) {
  margin: 0;
  max-width: var(--content-measure);
  font-family: var(--font-primary);
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

:where(.text-xl, .body-xl) {
  font-family: var(--font-primary);
  font-size: var(--font-body-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body-xl);
  letter-spacing: var(--tracking-normal);
}

:where(.text-large, .lead, .large-body, .body-large) {
  font-family: var(--font-primary);
  font-size: var(--font-large-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body-large);
  letter-spacing: var(--tracking-normal);
}

:where(.text-small, .body-small, small) {
  font-family: var(--font-primary);
  font-size: var(--font-small-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-small);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

:where(.caption) {
  font-family: var(--font-primary);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-caption);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * UI / NAVIGATION / CONTROLS
 * -------------------------------------------------------------------------- */

:where(nav, .navigation) {
  font-family: var(--font-primary);
  font-size: var(--font-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-nav);
  letter-spacing: var(--tracking-normal);
}

:where(button, .button, input[type="button"], input[type="submit"]) {
  font-family: var(--font-primary);
  font-size: var(--font-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-button);
  letter-spacing: var(--tracking-normal);
}

:where(.button-small) {
  font-family: var(--font-primary);
  font-size: var(--font-button-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.43;
  letter-spacing: var(--tracking-normal);
}

:where(label, .label, .badge) {
  font-family: var(--font-primary);
  font-size: var(--font-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1.50;
  letter-spacing: var(--tracking-normal);
}

:where(.overline) {
  font-family: var(--font-primary);
  font-size: var(--font-overline);
  font-weight: var(--font-weight-medium);
  line-height: 1.40;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

:where(input, textarea, select) {
  font-family: var(--font-primary);
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * WIDTH / READING MEASURE
 * -------------------------------------------------------------------------- */

:where(.section-heading, .page-title) {
  max-width: 900px;
}

:where(.prose, .rich-text, .content-copy) {
  max-width: var(--content-measure);
}