@import "tailwindcss";

@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

@theme {
	--font-sans:
		Geist Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-mono:
		Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
}

/*
	The default border color has changed to `currentColor` in Tailwind CSS v4,
	so we've added these compatibility styles to make sure everything still
	looks the same as it did with Tailwind CSS v3.

	If we ever want to remove these styles, we need to add an explicit border
	color utility to any element that depends on these defaults.
*/
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}
}

@layer utilities {
	html {
		overflow-y: auto;
		color-scheme: light;
		scroll-padding-top: 100px;
	}

	html.dark {
		color-scheme: dark;
	}

	html,
	body {
		@apply size-full;
	}

	body {
		@apply font-sans antialiased;
		@apply flex flex-col;
		@apply bg-neutral-100 dark:bg-neutral-900;
		@apply text-black/75 dark:text-white/75;
	}

	header {
		@apply fixed top-0 right-0 left-0 z-50 py-6;
		@apply bg-neutral-100/75 dark:bg-neutral-900/75;
		@apply saturate-200 backdrop-blur-xs;
	}

	main {
		@apply flex-1 py-32;
	}

	footer {
		@apply py-6 text-sm;
	}

	article {
		@apply prose prose-neutral dark:prose-invert prose-img:mx-auto prose-img:my-auto max-w-full;
		@apply prose-headings:font-semibold;
		@apply prose-headings:text-black dark:prose-headings:text-white;
	}
}

@layer utilities {
	article a {
		@apply font-sans text-current underline underline-offset-[3px];
		@apply decoration-black/30 dark:decoration-white/30;
		@apply transition-colors duration-300 ease-in-out;
	}
	article a:hover {
		@apply text-black dark:text-white;
		@apply decoration-black/50 dark:decoration-white/50;
	}
}

.animate {
	@apply -translate-y-3 opacity-0;
	@apply transition-all duration-300 ease-out;
}

.animate.show {
	@apply translate-y-0 opacity-100;
}

html #back-to-top {
	@apply pointer-events-none opacity-0;
}

html.scrolled #back-to-top {
	@apply pointer-events-auto opacity-100;
}

/* shiki config */
pre {
	@apply border border-black/15 py-5 dark:border-white/20;
}

:root {
	--astro-code-foreground: #09090b;
	--astro-code-background: #fafafa;
	--astro-code-token-comment: #a19595;
	--astro-code-token-keyword: #f47067;
	--astro-code-token-string: #00a99a;
	--astro-code-token-function: #429996;
	--astro-code-token-constant: #2b70c5;
	--astro-code-token-parameter: #4e8fdf;
	--astro-code-token-string-expression: #ae42a0;
	--astro-code-token-punctuation: #8996a3;
	--astro-code-token-link: #8d85ff;
	--astro-code-shine-background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 1) 40%,
		rgba(0, 0, 0, 1) 50%,
		rgba(255, 255, 255, 1) 60%
	);
}

.dark {
	--astro-code-foreground: #fafafa;
	--astro-code-background: #09090b;
	--astro-code-token-comment: #a19595;
	--astro-code-token-keyword: #f47067;
	--astro-code-token-string: #00a99a;
	--astro-code-token-function: #6eafad;
	--astro-code-token-constant: #b3cceb;
	--astro-code-token-parameter: #4e8fdf;
	--astro-code-token-string-expression: #bf7db6;
	--astro-code-token-punctuation: #8996a3;
	--astro-code-token-link: #8d85ff;
	--astro-code-shine-background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 60%
	);
}

/* copy code button on codeblocks */
.copy-code {
	@apply absolute top-3 right-3 grid size-9 place-content-center rounded-sm border border-black/15 bg-neutral-100 text-center duration-300 ease-in-out dark:border-white/20 dark:bg-neutral-900;
}

.copy-code:hover {
	@apply bg-[#E9E9E9] transition-colors dark:bg-[#232323];
}

.copy-code:active {
	@apply scale-90 transition-transform;
}

@keyframes animate-shine {
	0% {
		background-position: 100%;
	}
	100% {
		background-position: -100%;
	}
}

.animate-shine {
	animation: animate-shine 5s linear infinite;
}

.bg-shine {
	background-image: var(--astro-code-shine-background);
	background-size: 200% 100%;
}
