@layer theme, base, pagefind, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

/* tailwind to ignore satori generated og-image */
@source not "../pages/og-image";
/* config for tailwindcss-typography plugin */
@config "../../tailwind.config.ts";

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

/* register custom colour properties */
@property --color-global-bg {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(98.48% 0 0);
}
@property --color-global-text {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(26.99% 0.0096 235.05);
}
@property --color-muted {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(44.6% 0.03 256.802);
}
@property --color-link {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(55.44% 0.0431 185.69);
}
@property --color-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(55.27% 0.195 19.06);
}
@property --color-accent-2 {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(18.15% 0 0);
}
@property --color-quote {
	syntax: "<color>";
	inherits: true;
	initial-value: oklch(55.27% 0.195 19.06);
}

/* 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-muted: oklch(44.6% 0.03 256.802);
	--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-muted: oklch(70.7% 0.022 261.325);
			--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);
		}

		--color-mode-transition-duration: 300ms;
		--color-mode-transition-easing: ease-in-out;

		transition:
			--color-global-bg var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-global-text var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-muted var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-link var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-accent var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-accent-2 var(--color-mode-transition-duration) var(--color-mode-transition-easing),
			--color-quote var(--color-mode-transition-duration) var(--color-mode-transition-easing);
	}

	: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;
}