/*
 * Keep authenticated product surfaces on VestMind Core typography.
 *
 * VestStudio is an embedded application with component-level font
 * declarations, while VestMonitor and authenticated How It Works load
 * their page styles after the core theme.  This final cascade layer makes the
 * shared typography roles authoritative without changing component sizing or
 * layout.
 */
:root {
  --font-product-body: var(--font-primary);
  --font-product-display: var(--font-secondary);
}

body,
body :where(p, li, a, label, span, small, input, textarea, select, option, td, th, dt, dd) {
  font-family: var(--font-product-body) !important;
  font-weight: var(--font-weight-text);
}

body :where(h1, h2, h3, h4, h5, h6),
body :where(h1, h2, h3, h4, h5, h6) :where(em, span, strong) {
  font-family: var(--font-product-display) !important;
  font-weight: var(--font-weight-headline) !important;
  letter-spacing: var(--font-tracking-headline);
}

body :where(button, input[type='button'], input[type='submit'], [role='button']),
body :where(button, [role='button']) :where(span, strong) {
  font-family: var(--font-product-body) !important;
  font-weight: var(--font-weight-button) !important;
  letter-spacing: var(--font-tracking-button);
}