/*
 * Base typography + element defaults.
 */

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: var(--cz-font);
	font-size: var(--cz-fs-md);
	font-weight: var(--cz-fw-regular);
	line-height: var(--cz-lh-base);
	color: var(--cz-ink);
	background: var(--cz-surface);
	direction: rtl;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cz-font-display);
	font-weight: var(--cz-fw-bold);
	line-height: var(--cz-lh-tight);
	color: var(--cz-ink);
}

h1 { font-size: var(--cz-fs-4xl); font-weight: var(--cz-fw-heavy); }
h2 { font-size: var(--cz-fs-3xl); }
h3 { font-size: var(--cz-fs-2xl); }
h4 { font-size: var(--cz-fs-xl); }
h5 { font-size: var(--cz-fs-lg); }
h6 { font-size: var(--cz-fs-md); font-weight: var(--cz-fw-semi); }

p {
	font-size: var(--cz-fs-md);
	line-height: var(--cz-lh-base);
	color: var(--cz-ink);
}

a {
	color: var(--cz-red);
	text-decoration: none;
	transition: color var(--cz-transition);
}
a:hover { color: var(--cz-red-600); }

small, .cz-text-sm { font-size: var(--cz-fs-sm); }

hr {
	border: 0;
	border-top: 1px solid var(--cz-border);
	margin: var(--cz-sp-6) 0;
}

::selection { background: var(--cz-red-100); color: var(--cz-red-700); }

/* Responsive text scaling. */
@media (max-width: 768px) {
	h1 { font-size: var(--cz-fs-3xl); }
	h2 { font-size: var(--cz-fs-2xl); }
	h3 { font-size: var(--cz-fs-xl); }
	h4 { font-size: var(--cz-fs-lg); }
}