@import url(./bones.css);
@import url(./family-recursive.css);

:root {
	--back: light-dark(oklch(0.9822 0.001 106.43), oklch(0.2129 0.002 106.58));
	--edge: light-dark(oklch(0.8525 0.006 96.6), oklch(0.4007 0.007 96.1));
	--mute: light-dark(oklch(0.4979 0.008 106.68), oklch(0.7666 0.009 97.38));
	--text: light-dark(oklch(0.2434 0.008 96.31), oklch(0.9483 0.003 106.45));

	--loud: light-dark(oklch(0.5919 0.186 46.95), oklch(0.8706 0.175 85.07));
	--sbtl: light-dark(oklch(0.3501 0.069 40.82), oklch(0.9349 0.072 85.99));

	--fv-casl: 0; /* 0 to 1 */
	--fv-mono: 0; /* 0 to 1 */
	--fv-slnt: 0; /* 0 to -15 */
	--fv-wght: 400; /* 300 to 1000 */
}

* {
	border-color: var(--edge);
	font-family: var(--family-recursive);
	font-variant-ligatures: discretionary-ligatures;
	font-variation-settings:
		"CASL" var(--fv-casl),
		"MONO" var(--fv-mono),
		"slnt" var(--fv-slnt),
		"wght" var(--fv-wght),
		"CRSV" 0.501;
}

body {
	max-width: 640px;
	margin-inline: auto;
	margin-block: 0;
	padding: 1em;
	color: var(--text);
	background-color: var(--back);
	accent-color: var(--loud);
}

:is(h1, h2, h3, h4, h5, h6) {
	--fv-casl: 1;
	--fv-wght: 800;
	color: var(--loud);
}
.h-anchor {
	--fv-wght: 300;
	text-decoration: none;
	color: var(--mute);

	&:hover,
	&:focus {
		--fv-wght: 500;
	}
}

a,
abbr {
	&:hover,
	&:focus {
		color: var(--loud);
	}
}

b,
strong {
	--fv-wght: 800;
	color: var(--bold);
}

i,
em,
blockquote {
	--fv-casl: 1;
	--fv-slnt: -15;
	font-style: normal;
}

code,
pre {
	--fv-casl: 1;
	--fv-mono: 1;
	font-feature-settings:
		"liga" 0,
		"kern" 0;
}

code {
	color: var(--sbtl);
}

time {
	--fv-casl: 1;
	--fv-wght: 350;
	color: var(--mute);
}

::marker {
	color: var(--sbtl);
}

figcaption {
	--fv-casl: 1;
	text-align: center;
}

mark {
	color: var(--back);
	background-color: var(--bold);
	box-shadow: 0 0 0 2px var(--bold);
}

th {
	--fv-wght: 700;
	background-color: var(--back);
}

footer {
	--fv-wght: 350;
	margin-block: 2em;
	text-align: center;
	color: var(--mute);

	a {
		color: inherit;
	}
}

details {
	margin-block: 1em;
	padding: 0.25em;
	border: 1px solid var(--edge);
	background-color: var(--soft);
}
summary {
	--back: light-dark(oklch(0.9555 0.002 97.61), oklch(0.2531 0.003 106.62));

	padding-inline: 0.7em;
	padding-block: 0.3em;
	background-color: var(--back);
	border: 1px solid var(--edge);

	:where(h2, h3, h4) {
		display: inline;
		font: inherit;
		color: inherit;
	}

	&:hover,
	&:focus {
		color: var(--loud);
		border-color: var(--loud);
	}
}
[open] {
	::marker,
	summary {
		color: var(--loud);
	}

	&::details-content {
		padding-inline: 0.5em;
		padding-block: 0.2em;
	}
}

.color-scheme-selector {
	display: flex;
	gap: 1ch;

	label {
		&:hover,
		&:focus,
		&:has(:checked) {
			color: var(--loud);
		}

		&:has(:checked) {
			--fv-wght: 700;
		}
	}
}