/**
 * * Tailwind theme settings
 * 
 * These are in a separate file so it can be imported into <style> tags in .astro components
 */
@theme {
	/* primary colors */
	--color-primary-50: var(--color-blue-50);
	--color-primary-100: var(--color-blue-100);
	--color-primary-200: var(--color-blue-200);
	--color-primary-300: var(--color-blue-300);
	--color-primary-400: var(--color-blue-400);
	--color-primary-500: var(--color-blue-500);
	--color-primary-600: var(--color-blue-600);
	--color-primary-700: var(--color-blue-700);
	--color-primary-800: var(--color-blue-800);
	--color-primary-900: var(--color-blue-900);
	--color-primary-950: var(--color-blue-950);

	/* base colors */
	--color-base-50: var(--color-gray-50);
	--color-base-100: var(--color-gray-100);
	--color-base-200: var(--color-gray-200);
	--color-base-300: var(--color-gray-300);
	--color-base-400: var(--color-gray-400);
	--color-base-500: var(--color-gray-500);
	--color-base-600: var(--color-gray-600);
	--color-base-700: var(--color-gray-700);
	--color-base-800: var(--color-gray-800);
	--color-base-900: var(--color-gray-900);
	--color-base-950: var(--color-gray-950);

	/* other colors */
	--color-info: var(--color-sky-300);
	--color-info-foreground: var(--color-sky-950);
	--color-success: var(--color-green-300);
	--color-success-foreground: var(--color-green-950);
	--color-warning: var(--color-amber-300);
	--color-warning-foreground: var(--color-amber-950);
	--color-error: var(--color-red-700);
	--color-error-foreground: var(--color-base-50);

	/* layout settings */
	--breakpoint-xs: 400px;
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	/* font families */
	--font-fallback:
		"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif",
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-sans: "Inter Variable", var(--font-fallback);
	--font-mono:
		"SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace";
}
