/*
 * Container widths and spacing rhythm shared across the whole site. Kept
 * separate from tokens.css so layout structure can change without touching the
 * palette/scale, and vice versa.
 */

body {
	background: var(--keepsakes-color-bg);
	color: var(--keepsakes-color-text);
	font-family: var(--keepsakes-font-family);
	font-size: var(--keepsakes-font-size-base);
	line-height: var(--keepsakes-line-height-base);
}

h1, h2, h3, h4 {
	line-height: var(--keepsakes-line-height-heading);
	color: var(--keepsakes-color-text);
}

a {
	color: var(--keepsakes-color-accent);
}

a:hover {
	color: var(--keepsakes-color-accent-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--keepsakes-color-focus);
	outline-offset: 2px;
}

.keepsakes-container {
	max-width: var(--keepsakes-container-width);
	margin-inline: auto;
	padding-inline: var(--keepsakes-space-4);
}

.keepsakes-breadcrumb {
	font-size: var(--keepsakes-font-size-sm);
	color: var(--keepsakes-color-text-muted);
	margin-block: var(--keepsakes-space-4);
}

.keepsakes-breadcrumb a {
	color: var(--keepsakes-color-text-muted);
}