/**
 * VOSKA — Typography
 *
 * Font definitions, heading scale, paragraph styles, links.
 * All values reference variables.css.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

body {
	font-family: var(--vsk-font-primary);
	font-size: var(--vsk-font-size-base);
	line-height: var(--vsk-line-height);
	color: var(--vsk-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Headings ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vsk-font-secondary);
	font-weight: 600;
	line-height: 1.25;
	color: var(--vsk-color-secondary);
	margin-top: 0;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* ── Paragraphs & inline ──────────────────────────────────────────────── */

p {
	margin-top: 0;
	margin-bottom: var(--vsk-space-md);
}

strong, b {
	font-weight: 600;
}

small {
	font-size: 0.875em;
}

/* ── Links ────────────────────────────────────────────────────────────── */

a {
	color: var(--vsk-color-primary);
	text-decoration: none;
	transition: color var(--vsk-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--vsk-color-secondary);
}

/* ── Lists ────────────────────────────────────────────────────────────── */

ul, ol {
	padding-left: var(--vsk-space-lg);
	margin-bottom: var(--vsk-space-md);
}

li + li {
	margin-top: var(--vsk-space-xs);
}

/* ── Code ─────────────────────────────────────────────────────────────── */

code, pre {
	font-family: var(--vsk-font-mono);
	font-size: 0.875em;
}

code {
	background: var(--vsk-color-bg-alt);
	padding: 2px 6px;
	border-radius: var(--vsk-radius-sm);
}

pre {
	background: var(--vsk-color-bg-alt);
	padding: var(--vsk-space-md);
	border-radius: var(--vsk-radius-md);
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
}