/* would like to ignore ./src/pages/og-image/[slug].png.ts */
@import "tailwindcss";
/* config for tailwindcss-typography plugin */
@config "../../tailwind.config.ts";

/* use a selector-based strategy for dark mode */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* you could refactor below to use light-dark(), depending on your target audience */
@theme {
	--color-global-bg: oklch(98.48% 0 0);
	--color-global-text: oklch(26.99% 0.0096 235.05);
	--color-link: oklch(55.44% 0.0431 185.69);
	--color-accent: oklch(55.27% 0.195 19.06);
	--color-accent-2: oklch(18.15% 0 0);
	--color-quote: oklch(55.27% 0.195 19.06);
}

@layer base {
	html {
		color-scheme: light dark;
		accent-color: var(--color-accent);
		scrollbar-gutter: stable;

		&[data-theme="light"] {
			color-scheme: light;
		}

		&[data-theme="dark"] {
			color-scheme: dark;
			--color-global-bg: oklch(23.64% 0.0045 248);
			--color-global-text: oklch(83.54% 0 264);
			--color-link: oklch(70.44% 0.1133 349);
			--color-accent: oklch(70.91% 0.1415 163.7);
			--color-accent-2: oklch(94.66% 0 0);
			--color-quote: oklch(94.8% 0.106 136.49);
		}
	}

	:target {
		scroll-margin-block: 5ex;
	}

	@view-transition {
		navigation: auto;
	}

	/* Astro image responsive styles, modified from -> https://docs.astro.build/en/guides/images/#responsive-image-styles */
	:where([data-astro-image]) {
		object-fit: var(--fit);
		object-position: var(--pos);
	}
	[data-astro-image="full-width"] {
		width: 100%;
	}
	[data-astro-image="constrained"] {
		max-width: 100%;
	}
}

@layer components {
	@import "./components/admonition.css";
	@import "./components/github-card.css";

	.cactus-link {
		@apply hover:decoration-link underline underline-offset-2 hover:decoration-2;
	}

	.title {
		@apply text-accent-2 text-2xl font-semibold;
	}
}

@utility prose {
	--tw-prose-body: var(--color-global-text);
	--tw-prose-bold: var(--color-global-text);
	--tw-prose-bullets: var(--color-global-text);
	--tw-prose-code: var(--color-global-text);
	--tw-prose-headings: var(--color-accent-2);
	--tw-prose-hr: 0.5px dashed #666;
	--tw-prose-links: var(--color-global-text);
	--tw-prose-quotes: var(--color-quote);
	--tw-prose-th-borders: #666;
}
