@layer theme, base, components, utilities;

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

@custom-variant dark (&:where([data-thx=dark], [data-thx=dark] *));

@layer base {
	:root {
		--gray-1: #fcfcfc;
		--gray-2: #f9f9f9;
		--gray-3: #f0f0f0;
		--gray-4: #e8e8e8;
		--gray-5: #e0e0e0;
		--gray-6: #d9d9d9;
		--gray-7: #cecece;
		--gray-8: #bbbbbb;
		--gray-9: #8d8d8d;
		--gray-10: #838383;
		--gray-11: #646464;
		--gray-12: #202020;

		@variant dark {
			/* biome-ignore lint/suspicious/noDuplicateCustomProperties: tailwind feature */
			--gray-1: #111111;
			--gray-2: #191919;
			--gray-3: #222222;
			--gray-4: #2a2a2a;
			--gray-5: #313131;
			--gray-6: #3a3a3a;
			--gray-7: #484848;
			--gray-8: #606060;
			--gray-9: #6e6e6e;
			--gray-10: #7b7b7b;
			--gray-11: #b4b4b4;
			--gray-12: #eeeeee;
		}
	}
}

/* xn = neutral */

@theme {
	--font-sans: "Mona Sans Variable", ui-sans-serif, sans-serif;
	--font-serif: ui-serif, serif;
	--font-mono: "Geist Mono Variable", ui-monospace, monospace;

	--color-xn-1: var(--gray-1);
	--color-xn-2: var(--gray-2);
	--color-xn-3: var(--gray-3);
	--color-xn-4: var(--gray-4);
	--color-xn-5: var(--gray-5);
	--color-xn-6: var(--gray-6);
	--color-xn-7: var(--gray-7);
	--color-xn-8: var(--gray-8);
	--color-xn-9: var(--gray-9);
	--color-xn-10: var(--gray-10);
	--color-xn-11: var(--gray-11);
	--color-xn-12: var(--gray-12);
}

@layer base {
	body {
		@apply font-sans;
	}
}

@layer components {
	.lucide {
		@apply size-5 fill-none stroke-current;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}
