/*
 * File: /common/css/typography.css
 *
 * MICROBA Foundation Alignment™
 * Living Typography
 * Version: 1.3.0
 * Revised: 24 July 2026
 *
 * @package Microba_Outlook
 */

html {
	font-size: 100%;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	color: var(--mo-text);
	font-family: var(--mo-font-body);
	font-size: var(--mo-font-size-base);
	font-weight: var(--mo-font-weight-regular);
	line-height: var(--mo-line-height-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.65em;
	color: inherit;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-font-weight-regular);
	line-height: var(--mo-line-height-heading);
	letter-spacing: var(--mo-letter-spacing-tight);
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.75rem, 7vw, 6.25rem);
	line-height: 0.98;
}

h2 {
	font-size: clamp(2.15rem, 4.5vw, 4.25rem);
	line-height: 1.04;
}

h3 {
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}

h4 {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

p {
	margin-block: 0 1.25em;
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
}

strong,
b {
	font-weight: var(--mo-font-weight-semibold);
}

small {
	font-size: var(--mo-font-size-sm);
}

.mo-eyebrow {
	display: inline-block;
	margin: 0 0 var(--mo-space-2);
	color: var(--mo-gold);
	font-family: var(--mo-font-ui);
	font-size: var(--mo-font-size-xs);
	font-weight: var(--mo-font-weight-bold);
	line-height: 1.4;
	letter-spacing: var(--mo-letter-spacing-wide);
	text-transform: uppercase;
}

.mo-title {
	margin: 0;
	font-size: clamp(3rem, 8vw, 7rem);
	font-weight: var(--mo-font-weight-regular);
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.mo-section-title {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.045em;
}

.mo-lead {
	max-width: 42rem;
	margin: 0;
	color: var(--mo-muted);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.65;
}

.mo-copy {
	max-width: var(--mo-reading);
	color: var(--mo-text-soft);
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: var(--mo-line-height-relaxed);
}

.mo-caption {
	color: var(--mo-muted-soft);
	font-family: var(--mo-font-ui);
	font-size: var(--mo-font-size-sm);
	line-height: 1.55;
}

.mo-ui-text {
	font-family: var(--mo-font-ui);
	font-size: var(--mo-font-size-sm);
	font-weight: var(--mo-font-weight-medium);
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.mo-balance {
	text-wrap: balance;
}

.mo-pretty {
	text-wrap: pretty;
}

@media (max-width: 640px) {
	body {
		line-height: 1.62;
	}

	h1 {
		font-size: clamp(2.45rem, 13vw, 4rem);
	}

	h2 {
		font-size: clamp(2rem, 10vw, 3.25rem);
	}

	.mo-title {
		font-size: clamp(2.65rem, 15vw, 4.75rem);
	}

	.mo-section-title {
		font-size: clamp(2.15rem, 11vw, 3.5rem);
	}
}