/*
 * Base typography and resets -- ported from the global styles block in
 * p1b_globalstyles.jsx so the reading surface (body copy, headings, mono
 * figures) matches the React site before any component-level overrides.
 */

body {
	font-family: var(--mls-font-body);
	background: var(--mls-paper);
	color: var(--mls-body);
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
}

h1, h2, h3, h4 {
	font-family: var(--mls-font-display);
	color: var(--mls-ink);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

button, input, select, textarea {
	font-family: inherit;
}

.mls-mono {
	font-family: var(--mls-font-mono);
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--mls-red);
}

a:hover {
	color: var(--mls-red-deep);
}

/* Storefront's own container is narrower and uses different breakpoints
   than the Medlive layout grid -- header-footer.css and shop.css widen /
   restyle it component by component as each template gets ported. */