html,
body {
	font-family: var( --font-family-base );
	font-variation-settings: 'GRAD' var( --font-grade );
	font-weight: var( --font-weight-normal );
	/*
	 * TODO: Revisit this when italic VF is better supported
	 * Don't let browser faux font styles and weight
	 * 1. We are already using VF
	 * 2. Not all font styles apply to some languages (e.g. Italic is different in ZH)
	 */
	// font-synthesis: none;
}

input {
	font-family: var( --font-family-base ); // Override browser's default
}

b,
strong {
	font-weight: var( --font-weight-semi-bold );
}

cite {
	font-style: inherit;
}

p:not( .mw-empty-elt ) {
	+ ul,
	+ ol,
	+ table,
	+ dl,
	+ blockquote {
		margin-top: calc( var( --space-xs ) * -1 );
	}
}

blockquote {
	font-style: italic;
	.mixin-citizen-font-styles( 'body' );

	@supports ( text-wrap: pretty ) {
		text-wrap: pretty;
	}

	cite {
		font-style: normal;
		.mixin-citizen-font-styles( 'small' );
	}
}

figcaption {
	color: var( --color-subtle );
	.mixin-citizen-font-styles( 'small' );
}

em {
	&:lang( ja ),
	&:lang( ko ),
	&:lang( mn ),
	&:lang( zh ) {
		/* CJK languages do not use italics for emphasis */
		font-style: normal;
		text-emphasis: filled;
	}

	&:lang( ja ),
	&:lang( ko ),
	&:lang( mn ) {
		text-emphasis-position: over right;
	}

	&:lang( zh ) & {
		text-emphasis-position: under right;
	}
}

.citizen-body {
	font-size: var( --font-size-medium );
	line-height: var( --line-height-content );

	/* CJK languages need increased line-height for readability */
	&:lang( ja ),
	&:lang( ko ),
	&:lang( zh ) {
		--line-height-content: 1.75;
	}
}

/*
 * Utility classes
 */
.citizen-text-heading-1 {
	.mixin-citizen-font-styles( 'heading-1' );
}

.citizen-text-heading-2 {
	.mixin-citizen-font-styles( 'heading-2' );
}

.citizen-text-heading-3 {
	.mixin-citizen-font-styles( 'heading-3' );
}

.citizen-text-heading-4 {
	.mixin-citizen-font-styles( 'heading-4' );
}

.citizen-text-body {
	.mixin-citizen-font-styles( 'body' );
}

.citizen-text-small {
	.mixin-citizen-font-styles( 'small' );
}

.citizen-text-overline {
	.mixin-citizen-font-styles( 'overline' );
}