@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	color-scheme: light dark;

	--page-top: 2rem;
	--page-gutter: 1.5rem;
	--header-height: 80px;
	--content-height: calc(100vh - var(--header-height));
	--content-width: 44rem;

	--color-base: 250 250 250;
	--color-surface: 244 244 245;
	--color-overlay: 228 228 231;
	--color-subtle: 113 113 122;
	--color-text: 24 24 24;
	--color-primary: 253 126 20;
	--color-secondary: 250 176 5;
}

@media screen(sm) {
	:root {
		--page-top: 5rem;
		--page-gutter: 2rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-base: 24 24 27;
		--color-surface: 39 39 42;
		--color-overlay: 63 63 58;
		--color-subtle: 161 161 170;
		--color-text: 228 228 231;
	}
}

html {
	@apply motion-safe:scroll-smooth;
}

body {
	@apply bg-base text-text antialiased;
}

[id] {
	@apply scroll-mt-3;
}

pre {
	@apply overflow-x-auto rounded-md border bg-surface p-3;
}

code {
	@apply rounded bg-surface px-1 py-0.5 text-sm;
}

pre > code {
	@apply p-0;
}

pre > code.language-command::before {
	@apply text-subtle content-['$_'];
}

article > *:not(:first-child):not(pre) {
	@apply mt-8;
}
article > pre {
	@apply mt-5;
}
article h2,
article h2 > * {
	@apply border-b pb-3 text-xl font-bold;
}
article h3,
article h3 > * {
	@apply text-lg font-semibold;
}
article h2:not(:first-child),
article h3,
article h4,
article h5 {
	@apply mt-14;
}
.link,
article a {
	@apply inline text-primary underline-offset-2;
}
.link::after,
article a::after {
	@apply inline-block whitespace-pre;
}
.link[href^="http"]::after,
article a[href^="http"]::after {
	@apply content-['_↗'];
}
.link:hover,
article a:hover {
	@apply underline;
}
article blockquote {
	@apply border-l-[3px] pl-3 text-sm font-medium text-subtle;
}
article strong {
	@apply font-semibold;
}
article ul > li,
article ol > li {
	@apply pb-1;
}

.animate.fade-in-y,
.animate-kids.fade-in-y > * {
	opacity: 0;
	animation: fade-in-y var(--duration, 800ms) var(--direction, forwards);
	animation-delay: calc(var(--delay, 0) * 100ms);
}

@keyframes fade-in-y {
	from {
		opacity: 0;
		transform: translateY(var(--from, 20px));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}
