/**
 * Typography and global focus.
 */

body {
	background-color: var(--mavi-color-bg);
	color: var(--mavi-color-text);
	font-family: var(--mavi-font-family);
	font-size: var(--mavi-font-size-body);
	font-weight: var(--mavi-font-weight-regular);
	line-height: var(--mavi-line-height-body);
}

.mavitamine h1,
.mavitamine h2,
.mavitamine h3,
.mavitamine h4 {
	color: var(--mavi-color-text);
	font-family: var(--mavi-font-family);
	font-weight: var(--mavi-font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: var(--mavi-line-height-heading);
	margin-block: 0 0.5em;
}

.mavitamine h1 {
	font-size: var(--mavi-font-size-h1);
}

.mavitamine h2 {
	font-size: var(--mavi-font-size-h2);
}

.mavitamine h3 {
	font-size: var(--mavi-font-size-h3);
}

.mavitamine h4 {
	font-size: var(--mavi-font-size-h4);
	font-weight: var(--mavi-font-weight-medium);
	letter-spacing: 0;
}

.mavitamine p,
.mavitamine li {
	line-height: var(--mavi-line-height-body);
}

.mavi-text-small,
.mavitamine small {
	color: var(--mavi-color-muted);
	font-size: var(--mavi-font-size-small);
	line-height: var(--mavi-line-height-tight);
}

.mavi-product-title {
	color: var(--mavi-color-text);
	font-size: var(--mavi-font-size-product-title);
	font-weight: var(--mavi-font-weight-semibold);
	letter-spacing: -0.01em;
	line-height: var(--mavi-line-height-tight);
}

.mavi-price {
	color: var(--mavi-color-text);
	font-size: var(--mavi-font-size-price);
	font-variant-numeric: tabular-nums;
	font-weight: var(--mavi-font-weight-semibold);
	line-height: var(--mavi-line-height-tight);
}

.mavi-nav {
	font-size: var(--mavi-font-size-nav);
	font-weight: var(--mavi-font-weight-medium);
	line-height: var(--mavi-line-height-tight);
}

:focus-visible {
	outline: 2px solid var(--mavi-color-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.mavi-sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.mavitamine *,
	.mavitamine *::before,
	.mavitamine *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}