/**
 * BASE
 *
 * Unclassed element defaults, expressed entirely in tokens.
 * If a value here isn't a var(), it probably belongs in a token file.
 */

@layer base {
	body {
		font-family: var(--font-text);
		font-size: var(--fs-body);
		font-weight: var(--weight-regular);
		line-height: var(--lh-body);
		color: var(--clr-text);
		background-color: var(--clr-bg);
		-webkit-font-smoothing: antialiased;
	}

	/*
	 * Headings are display type: Kaneda, uppercase, very tight leading and
	 * negative tracking. That combination is the design's signature.
	 */
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-display);
		font-weight: var(--weight-regular);
		text-transform: uppercase;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--fs-display-2);
		line-height: var(--lh-display-2);
		letter-spacing: var(--track-display-2);
	}

	h2 {
		font-size: var(--fs-display-3);
		line-height: var(--lh-display-3);
		letter-spacing: var(--track-display-3);
	}

	h3 {
		font-size: var(--fs-display-4);
		line-height: var(--lh-display-4);
	}

	h4, h5, h6 {
		font-size: var(--fs-body);
		line-height: var(--lh-display-4);
	}

	p { text-wrap: pretty; }

	a {
		color: inherit;
		text-decoration-thickness: max(0.06em, 1px);
		text-underline-offset: 0.18em;
		transition: color var(--transition-fast);
	}
	a:hover { color: var(--clr-accent); }

	strong, b { font-weight: var(--weight-bold); }

	blockquote {
		margin: 0;
		font-family: var(--font-text);
	}

	hr {
		border: none;
		border-block-start: 1px solid var(--clr-border);
	}

	table { width: 100%; border-collapse: collapse; }
	th, td {
		text-align: start;
		padding: var(--space-2xs) var(--space-xs);
		border-block-end: 1px solid var(--clr-border);
	}

	:focus-visible {
		outline: 3px solid var(--clr-accent);
		outline-offset: 3px;
	}
	:focus:not(:focus-visible) { outline: none; }

	::selection {
		background-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}
}