/* Kangaroo — typography scale (Montserrat display/headline, Inter body/label) */

body {
	font-family: var(--kg-font-body);
	font-size: var(--kg-body-md-size);
	font-weight: var(--kg-body-md-weight);
	line-height: var(--kg-body-md-line);
	color: var(--kg-on-background);
	background-color: var(--kg-background);
}

.kg-display-lg {
	font-family: var(--kg-font-display);
	font-size: var(--kg-display-lg-mobile-size);
	font-weight: var(--kg-display-lg-mobile-weight);
	line-height: var(--kg-display-lg-mobile-line);
}

@media (min-width: 768px) {
	.kg-display-lg {
		font-size: var(--kg-display-lg-size);
		line-height: var(--kg-display-lg-line);
		letter-spacing: var(--kg-display-lg-tracking);
	}
}

.kg-headline-md {
	font-family: var(--kg-font-display);
	font-size: var(--kg-headline-md-size);
	font-weight: var(--kg-headline-md-weight);
	line-height: var(--kg-headline-md-line);
}

.kg-headline-sm {
	font-family: var(--kg-font-display);
	font-size: var(--kg-headline-sm-size);
	font-weight: var(--kg-headline-sm-weight);
	line-height: var(--kg-headline-sm-line);
}

.kg-body-lg {
	font-family: var(--kg-font-body);
	font-size: var(--kg-body-lg-size);
	font-weight: var(--kg-body-lg-weight);
	line-height: var(--kg-body-lg-line);
}

.kg-body-md {
	font-family: var(--kg-font-body);
	font-size: var(--kg-body-md-size);
	font-weight: var(--kg-body-md-weight);
	line-height: var(--kg-body-md-line);
}

.kg-label-bold {
	font-family: var(--kg-font-body);
	font-size: var(--kg-label-bold-size);
	font-weight: var(--kg-label-bold-weight);
	line-height: var(--kg-label-bold-line);
	letter-spacing: var(--kg-label-bold-tracking);
}

.kg-label-sm {
	font-family: var(--kg-font-body);
	font-size: var(--kg-label-sm-size);
	font-weight: var(--kg-label-sm-weight);
	line-height: var(--kg-label-sm-line);
}

h1,
h2,
h3,
h4 {
	font-family: var(--kg-font-display);
	color: var(--kg-on-background);
}

.kg-text-muted {
	color: var(--kg-on-surface-variant);
}

.kg-text-primary {
	color: var(--kg-primary);
}

.kg-text-secondary {
	color: var(--kg-secondary);
}

.kg-text-tertiary {
	color: var(--kg-tertiary);
}