@layer base, layout, components, utlis;

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

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

	:root {
		/* 
		color palette 
		oklch(lightness chroma hue / alpha) 
		https://oklch.com
		https://harmonizer.evilmartians.com
		*/
		--aged-brass-100: oklch(0.97 0.01 68);
		--aged-brass-200: oklch(0.92 0.015 68);
		--aged-brass-300: oklch(0.86 0.024 68);
		--aged-brass-400: oklch(0.79 0.03 68);
		--aged-brass-500: oklch(0.71 0.045 68);
		--aged-brass-600: oklch(0.62 0.05 68);
		--aged-brass-700: oklch(0.53 0.05 68);
		--aged-brass-800: oklch(0.41 0.05 68);
		--aged-brass-900: oklch(0.3 0.05 68);

		--brass-100: oklch(0.97 0.13 68);
		--brass-200: oklch(0.92 0.14 68);
		--brass-300: oklch(0.86 0.14 68);
		--brass-400: oklch(0.79 0.15 68);
		--brass-500: oklch(0.71 0.14 68);
		--brass-600: oklch(0.62 0.11 68);
		--brass-700: oklch(0.53 0.09 68);
		--brass-800: oklch(0.47 0.07 68);
		--brass-900: oklch(0.41 0.05 68);

		--color-dark-sky: #000;
		--color-bg-content: #06060e;
		--color-fg1: var(--aged-brass-200);
		--color-fg2: var(--aged-brass-400);
		--color-strokes: var(--aged-brass-700);
		--color-bg-pressed: oklch(0.53 0.05 68 / 0.2);
		--color-accent: var(--aged-brass-600);
		--stroke-width: 2px;
	}

	::selection {
		background-color: var(--color-strokes);
	}

	:focus-visible {
		outline: var(--stroke-width) solid var(--color-accent);
		outline-offset: calc(2 * var(--stroke-width));
	}

	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		-webkit-font-smoothing: antialiased;
		-webkit-tap-highlight-color: var(--color-bg-pressed);
		min-height: 100%;
		overflow-x: hidden;
		background-image: radial-gradient(
			circle at 50% calc(34rem + 15vw),
			oklch(0.78 0.16 75.5 / 0.15) 0%,
			oklch(0.63 0.26 348.4 / 0.07) 30%,
			oklch(0.55 0.06 274.7 / 0.08) 55%,
			transparent 100%
		);
		background-attachment: fixed;
		background-color: var(--color-dark-sky);
		line-height: 1.75;
		/* https://modernfontstacks.com/ */
		font-family:
			"URWClassico", Optima, Candara, Calibri, "Noto Sans", source-sans-pro,
			sans-serif;
		scroll-behavior: smooth;
	}

	body {
		min-height: 100vh;
		margin: 0;
		color: var(--color-fg2);
		font-size: 130%;
	}

	.header {
		position: sticky;
		top: 2rem;
		margin-top: calc(1rem + 5vw);
	}

	.main {
		z-index: 1;
		position: relative;
		max-width: min(95%, calc(54ch + 4rem + 10vw));
		min-height: 70vh;
		margin: 0 auto 2rem;
		padding-inline: calc(5vw + 0.5rem);
		background-color: var(--color-bg-content);
		line-height: 1.75;
		view-transition-name: --vt-main;
	}

	.footer {
		display: block;
		margin: 6rem 1rem 2rem;
		color: var(--color-fg2);
		font-size: 0.8rem;
		text-align: center;
	}

	a {
		color: var(--color-accent);
		text-decoration-color: var(--color-strokes);
		text-decoration-thickness: var(--stroke-width);
		text-underline-offset: 0.2em;
		transition: text-underline-offset 0.2s ease;

		&:hover {
			text-underline-offset: 0.3em;
		}

		&:active {
			background-color: var(--color-bg-pressed);
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5 {
		text-wrap: balance;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	button,
	input,
	label {
		line-height: 1.4;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
	}

	a[href],
	button,
	select,
	input,
	label,
	summary {
		cursor: pointer;
	}
	input[type="text"] {
		cursor: text;
	}

	picture {
		display: contents;
	}

	img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}
}

@layer utils {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border-width: 0;
		white-space: nowrap;
	}
}