/*----------------------------------------------------------------------------
Site Style Sheet

Author:   David Foster
Details:  Controls the styling of the entire davidfoster.co website.

ToC:      F - Fonts
          0 - Reset
          1 - Tokens
          2 - Site
----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------
  ~F - Fonts
----------------------------------------------------------------------------*/

/* Self-hosted Latin subsets from Google Fonts; all three faces are SIL OFL licensed. */
/* N.B. Inter and JetBrains Mono are variable fonts; one file covers weights 400-700. */

@font-face {
	font-display: swap;
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	src: url("fonts/fraunces-600.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 600;
	src: url("fonts/fraunces-600-italic.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	src: url("fonts/inter-400-700.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 700;
	src: url("fonts/jetbrains-mono-400-700.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: italic;
	font-weight: 400;
	src: url("fonts/jetbrains-mono-400-italic.woff2") format("woff2");
}

/*----------------------------------------------------------------------------
  ~0 - Reset
----------------------------------------------------------------------------*/

/* N.B. see Andy Bell's "(more) modern CSS reset" for the fuller version this is trimmed from. */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	body {
		margin: 0;
		min-height: 100svh;
		line-height: 1.5;
	}

	h1,
	h2,
	h3,
	h4 {
		line-height: 1.15;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}

	img,
	picture,
	video,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}
}

/*----------------------------------------------------------------------------
  ~1 - Tokens
----------------------------------------------------------------------------*/

:root {
	color-scheme: light dark;

	--color-paper: light-dark(#faf7f0, #0b0e17);
	--color-ink: light-dark(#1c1e26, #e8e6df);
	--color-ink-muted: light-dark(#464852, #bbbab4);
	--color-ink-faint: light-dark(#7b7d88, #787a84);
	--color-accent: light-dark(#b07d10, #e3b341);

	--font-body: "Inter", system-ui, sans-serif;
	--font-display: "Fraunces", "Georgia", serif;
	--font-mono: "JetBrains Mono", monospace;

	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 2rem;

	--measure: 60ch;
}

/*----------------------------------------------------------------------------
  ~2 - Site
----------------------------------------------------------------------------*/

body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	margin-inline: auto;
	max-width: var(--measure);
	padding: var(--space-l) var(--space-m);
	-webkit-font-smoothing: antialiased;
}

h1 {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.025em;

	em {
		color: var(--color-accent);
	}
}

p {
	color: var(--color-ink-muted);
}

footer {
	color: var(--color-ink-faint);
	font-family: var(--font-mono);
	font-size: 0.8125rem;

	.dash {
		font-family: var(--font-body);
	}

	time {
		font-style: italic;

		.de-em {
			font-style: normal;
		}
	}
}