/* Imports & reset. */

@import '@fontsource/pt-sans/400.css';
@import '@fontsource/pt-sans/700.css';
@import '@fontsource/pt-mono';

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
}

/* Palette & themes. */

:root {
	--color-background: #fff;
	--color-foreground: #000;
	--color-adornment: #ccc;

	--color-control: #0083e1;
	--color-accents: #f40008;
	--color-dimmed: #ccc;

	--color-support: #f9f5e4;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #000;
		--color-foreground: #fff;

		--color-adornment: #333;
		--color-dimmed: #333;
		--color-support: #181a21;
	}
}

@supports (background: oklch(from #000 l c h)) {
	@media (color-gamut: p3) {
		:root {
			--color-control: oklch(57.22% 0.202 250.06);
			--color-accents: oklch(from var(--color-control) l c 30);
		}
	}
}

body {
	background-color: var(--color-background);
	color: var(--color-foreground);
}

/* Typography & vertical rhythm. */

:root {
	--ff-text: 'PT Sans', sans-serif;
	--ff-code: 'PT Mono', monospace;

	--fs-regular: 1rem;
	--fs-smaller: 0.75em;
	--fs-tiny: 0.5em;
}

body {
	font-family: var(--ff-text);
	font-size: var(--fs-regular);
	line-height: 1.6;
}

code,
pre {
	font-family: var(--ff-code);
	tab-size: 2;
}

h1,
h2,
h3 {
	margin-block: 1.5em -0.5em;
	text-wrap: balance;
}

h1 {
	margin: 0 0 -0.2em;
	font-size: 2.5em;
	line-height: 1.2;
}

h2 {
	font-size: 1.6em;
	line-height: 1.5;
}

h3 {
	margin-block-end: -1em;
	font-size: 1em;
}

p,
ul,
ol {
	margin-block: 1em;
}

p + ol,
p + ul {
	margin-block-start: -1em;
}

h1 > sup {
	line-height: 0.5;
}

/* Controls, and accents. */

a {
	--color: var(--color-control);

	color: var(--color);
	text-decoration-thickness: 0.5px;
}

a:hover,
a:focus {
	--color: var(--color-accents);
}

:is(.text, [aria-current='true']):not(:hover, :focus) {
	--color: var(--color-foreground);
}

/* Default element styles. */

img {
	display: block;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 65vh;
	box-shadow: 0 1px 3px var(--color-adornment);
}

ul,
ol {
	padding-inline-start: 1.5em;
}

ul ::marker {
	color: transparent;
}

/* Utility classes. */

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.reset,
.reset > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.caps {
	text-transform: uppercase;
	font-size: var(--fs-smaller);
}
