/* The font pairings exploration (templates/design-system/explorations/font-pairings.php).
   Each pairing re-points the voices' font tokens on its own section, so the real voices
   (sizes, rhythm) render in the trial faces. The faces load from styles/body-font-trial.css. */

.font-pairings {
	.pairing + .pairing {
		margin-top: var(--space-large);
	}

	.pairing-label {
		margin-bottom: var(--space-medium);
	}

	.surfaces {
		display: grid;
		gap: var(--space-medium);

		@media (width >= 1000px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.specimen {
		padding: var(--space-large);
		background-color: var(--fill-primary);
		color: var(--ink-primary);

		> * + * {
			margin-top: 1em;
		}

		h3 {
			margin-top: 1.5em;
		}

		ul {
			padding-left: 1.2em;
		}
	}
}

/* The faces, by slot. */
[data-pairing^='montreal-'] {
	--attention-voice-font-family: 'PP Neue Montreal', sans-serif;
	--strong-voice-font-family: 'PP Neue Montreal', sans-serif;
}

[data-pairing$='-montreal'] {
	--calm-voice-font-family: 'PP Neue Montreal', sans-serif;
}

[data-pairing='montreal-georgia'] { --calm-voice-font-family: Georgia, serif; }
[data-pairing='montreal-fragment'] { --calm-voice-font-family: 'PP Fragment Text', Georgia, serif; }

[data-pairing='georgia-montreal'] { --attention-voice-font-family: Georgia, serif; --strong-voice-font-family: Georgia, serif; }
[data-pairing='right-serif-montreal'] { --attention-voice-font-family: 'PP Right Serif', Georgia, serif; --strong-voice-font-family: 'PP Right Serif', Georgia, serif; }
[data-pairing='pangaia-montreal'] { --attention-voice-font-family: 'PP Pangaia', Georgia, serif; --strong-voice-font-family: 'PP Pangaia', Georgia, serif; }
[data-pairing='fragment-montreal'] { --attention-voice-font-family: 'PP Fragment Serif', Georgia, serif; --strong-voice-font-family: 'PP Fragment Serif', Georgia, serif; }

/* Neue Montreal is variable: a touch lighter on the dark band, so light text doesn't read heavier than dark text on paper. */
[data-pairing$='-montreal'] [data-surface='dark'] p,
[data-pairing$='-montreal'] [data-surface='dark'] li {
	font-weight: 360;
}

[data-pairing^='montreal-'] [data-surface='dark'] :is(h2, h3) {
	font-weight: 430;
}