// =============================================================================
// base/_typography.scss
// =============================================================================

h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-dark);
}

p {
	margin-bottom: var(--space-3);
}

code,
pre {
	font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
	font-size: 0.875em;
}

pre {
	overflow-x: auto;
	padding: var(--space-3);
	background: var(--color-surface);
	border-radius: var(--card-radius);
	border-left: 4px solid var(--color-primary);

	code {
		background: transparent;
		padding: 0;
	}
}

blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-3);
	margin-left: 0;
	color: #6b7280;
	font-style: italic;
}

.screen-reader-text {
	@include visually-hidden;

	&:focus {
		background-color: var(--color-background);
		clip: auto;
		height: auto;
		left: var(--space-3);
		top: var(--space-3);
		width: auto;
		z-index: 100000;
		padding: var(--space-2) var(--space-3);
		border: 2px solid var(--color-primary);
		border-radius: 4px;
		font-weight: 600;
	}
}