@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

@source "../../";
@source "@foxui/social";
@source "@foxui/colors";
@source "@foxui/text";
@source "@foxui/time";
@source "@foxui/visual";
@source "@foxui/3d";

@theme inline {
	--color-base-50: var(--base-50);
	--color-base-100: var(--base-100);
	--color-base-200: var(--base-200);
	--color-base-300: var(--base-300);
	--color-base-400: var(--base-400);
	--color-base-500: var(--base-500);
	--color-base-600: var(--base-600);
	--color-base-700: var(--base-700);
	--color-base-800: var(--base-800);
	--color-base-900: var(--base-900);
	--color-base-950: var(--base-950);

	--color-accent-50: var(--accent-50);
	--color-accent-100: var(--accent-100);
	--color-accent-200: var(--accent-200);
	--color-accent-300: var(--accent-300);
	--color-accent-400: var(--accent-400);
	--color-accent-500: var(--accent-500);
	--color-accent-600: var(--accent-600);
	--color-accent-700: var(--accent-700);
	--color-accent-800: var(--accent-800);
	--color-accent-900: var(--accent-900);
	--color-accent-950: var(--accent-950);

	--radius-ui: var(--ui-radius);
	--radius-ui-lg: var(--ui-radius-lg);
	--radius-ui-sm: var(--ui-radius-sm);

	--font-sans: var(--ui-font-sans);
	--font-mono: var(--ui-font-mono);
}

@layer base {
	body {
		@apply bg-base-100 text-base-950 dark:bg-base-900 dark:text-base-50 font-sans;
	}

	:root {
		--accent-50: var(--color-pink-50);
		--accent-100: var(--color-pink-100);
		--accent-200: var(--color-pink-200);
		--accent-300: var(--color-pink-300);
		--accent-400: var(--color-pink-400);
		--accent-500: var(--color-pink-500);
		--accent-600: var(--color-pink-600);
		--accent-700: var(--color-pink-700);
		--accent-800: var(--color-pink-800);
		--accent-900: var(--color-pink-900);
		--accent-950: var(--color-pink-950);

		--base-50: var(--color-stone-50);
		--base-100: var(--color-stone-100);
		--base-200: var(--color-stone-200);
		--base-300: var(--color-stone-300);
		--base-400: var(--color-stone-400);
		--base-500: var(--color-stone-500);
		--base-600: var(--color-stone-600);
		--base-700: var(--color-stone-700);
		--base-800: var(--color-stone-800);
		--base-900: var(--color-stone-900);
		--base-950: var(--color-stone-950);

		--ui-radius: 1rem;
		--ui-radius-lg: 1.25rem;
		--ui-radius-sm: 0.75rem;

		--ui-font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
		--ui-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}

	.red {
		--accent-50: var(--color-red-50);
		--accent-100: var(--color-red-100);
		--accent-200: var(--color-red-200);
		--accent-300: var(--color-red-300);
		--accent-400: var(--color-red-400);
		--accent-500: var(--color-red-500);
		--accent-600: var(--color-red-600);
		--accent-700: var(--color-red-700);
		--accent-800: var(--color-red-800);
		--accent-900: var(--color-red-900);
		--accent-950: var(--color-red-950);
	}

	.orange {
		--accent-50: var(--color-orange-50);
		--accent-100: var(--color-orange-100);
		--accent-200: var(--color-orange-200);
		--accent-300: var(--color-orange-300);
		--accent-400: var(--color-orange-400);
		--accent-500: var(--color-orange-500);
		--accent-600: var(--color-orange-600);
		--accent-700: var(--color-orange-700);
		--accent-800: var(--color-orange-800);
		--accent-900: var(--color-orange-900);
		--accent-950: var(--color-orange-950);
	}

	.amber {
		--accent-50: var(--color-amber-50);
		--accent-100: var(--color-amber-100);
		--accent-200: var(--color-amber-200);
		--accent-300: var(--color-amber-300);
		--accent-400: var(--color-amber-400);
		--accent-500: var(--color-amber-500);
		--accent-600: var(--color-amber-600);
		--accent-700: var(--color-amber-700);
		--accent-800: var(--color-amber-800);
		--accent-900: var(--color-amber-900);
		--accent-950: var(--color-amber-950);
	}

	.yellow {
		--accent-50: var(--color-yellow-50);
		--accent-100: var(--color-yellow-100);
		--accent-200: var(--color-yellow-200);
		--accent-300: var(--color-yellow-300);
		--accent-400: var(--color-yellow-400);
		--accent-500: var(--color-yellow-500);
		--accent-600: var(--color-yellow-600);
		--accent-700: var(--color-yellow-700);
		--accent-800: var(--color-yellow-800);
		--accent-900: var(--color-yellow-900);
		--accent-950: var(--color-yellow-950);
	}

	.lime {
		--accent-50: var(--color-lime-50);
		--accent-100: var(--color-lime-100);
		--accent-200: var(--color-lime-200);
		--accent-300: var(--color-lime-300);
		--accent-400: var(--color-lime-400);
		--accent-500: var(--color-lime-500);
		--accent-600: var(--color-lime-600);
		--accent-700: var(--color-lime-700);
		--accent-800: var(--color-lime-800);
		--accent-900: var(--color-lime-900);
		--accent-950: var(--color-lime-950);
	}

	.green {
		--accent-50: var(--color-green-50);
		--accent-100: var(--color-green-100);
		--accent-200: var(--color-green-200);
		--accent-300: var(--color-green-300);
		--accent-400: var(--color-green-400);
		--accent-500: var(--color-green-500);
		--accent-600: var(--color-green-600);
		--accent-700: var(--color-green-700);
		--accent-800: var(--color-green-800);
		--accent-900: var(--color-green-900);
		--accent-950: var(--color-green-950);
	}

	.emerald {
		--accent-50: var(--color-emerald-50);
		--accent-100: var(--color-emerald-100);
		--accent-200: var(--color-emerald-200);
		--accent-300: var(--color-emerald-300);
		--accent-400: var(--color-emerald-400);
		--accent-500: var(--color-emerald-500);
		--accent-600: var(--color-emerald-600);
		--accent-700: var(--color-emerald-700);
		--accent-800: var(--color-emerald-800);
		--accent-900: var(--color-emerald-900);
		--accent-950: var(--color-emerald-950);
	}

	.teal {
		--accent-50: var(--color-teal-50);
		--accent-100: var(--color-teal-100);
		--accent-200: var(--color-teal-200);
		--accent-300: var(--color-teal-300);
		--accent-400: var(--color-teal-400);
		--accent-500: var(--color-teal-500);
		--accent-600: var(--color-teal-600);
		--accent-700: var(--color-teal-700);
		--accent-800: var(--color-teal-800);
		--accent-900: var(--color-teal-900);
		--accent-950: var(--color-teal-950);
	}

	.cyan {
		--accent-50: var(--color-cyan-50);
		--accent-100: var(--color-cyan-100);
		--accent-200: var(--color-cyan-200);
		--accent-300: var(--color-cyan-300);
		--accent-400: var(--color-cyan-400);
		--accent-500: var(--color-cyan-500);
		--accent-600: var(--color-cyan-600);
		--accent-700: var(--color-cyan-700);
		--accent-800: var(--color-cyan-800);
		--accent-900: var(--color-cyan-900);
		--accent-950: var(--color-cyan-950);
	}

	.sky {
		--accent-50: var(--color-sky-50);
		--accent-100: var(--color-sky-100);
		--accent-200: var(--color-sky-200);
		--accent-300: var(--color-sky-300);
		--accent-400: var(--color-sky-400);
		--accent-500: var(--color-sky-500);
		--accent-600: var(--color-sky-600);
		--accent-700: var(--color-sky-700);
		--accent-800: var(--color-sky-800);
		--accent-900: var(--color-sky-900);
		--accent-950: var(--color-sky-950);
	}

	.blue {
		--accent-50: var(--color-blue-50);
		--accent-100: var(--color-blue-100);
		--accent-200: var(--color-blue-200);
		--accent-300: var(--color-blue-300);
		--accent-400: var(--color-blue-400);
		--accent-500: var(--color-blue-500);
		--accent-600: var(--color-blue-600);
		--accent-700: var(--color-blue-700);
		--accent-800: var(--color-blue-800);
		--accent-900: var(--color-blue-900);
		--accent-950: var(--color-blue-950);
	}

	.indigo {
		--accent-50: var(--color-indigo-50);
		--accent-100: var(--color-indigo-100);
		--accent-200: var(--color-indigo-200);
		--accent-300: var(--color-indigo-300);
		--accent-400: var(--color-indigo-400);
		--accent-500: var(--color-indigo-500);
		--accent-600: var(--color-indigo-600);
		--accent-700: var(--color-indigo-700);
		--accent-800: var(--color-indigo-800);
		--accent-900: var(--color-indigo-900);
		--accent-950: var(--color-indigo-950);
	}

	.violet {
		--accent-50: var(--color-violet-50);
		--accent-100: var(--color-violet-100);
		--accent-200: var(--color-violet-200);
		--accent-300: var(--color-violet-300);
		--accent-400: var(--color-violet-400);
		--accent-500: var(--color-violet-500);
		--accent-600: var(--color-violet-600);
		--accent-700: var(--color-violet-700);
		--accent-800: var(--color-violet-800);
		--accent-900: var(--color-violet-900);
		--accent-950: var(--color-violet-950);
	}

	.purple {
		--accent-50: var(--color-purple-50);
		--accent-100: var(--color-purple-100);
		--accent-200: var(--color-purple-200);
		--accent-300: var(--color-purple-300);
		--accent-400: var(--color-purple-400);
		--accent-500: var(--color-purple-500);
		--accent-600: var(--color-purple-600);
		--accent-700: var(--color-purple-700);
		--accent-800: var(--color-purple-800);
		--accent-900: var(--color-purple-900);
		--accent-950: var(--color-purple-950);
	}

	.fuchsia {
		--accent-50: var(--color-fuchsia-50);
		--accent-100: var(--color-fuchsia-100);
		--accent-200: var(--color-fuchsia-200);
		--accent-300: var(--color-fuchsia-300);
		--accent-400: var(--color-fuchsia-400);
		--accent-500: var(--color-fuchsia-500);
		--accent-600: var(--color-fuchsia-600);
		--accent-700: var(--color-fuchsia-700);
		--accent-800: var(--color-fuchsia-800);
		--accent-900: var(--color-fuchsia-900);
		--accent-950: var(--color-fuchsia-950);
	}

	.pink {
		--accent-50: var(--color-pink-50);
		--accent-100: var(--color-pink-100);
		--accent-200: var(--color-pink-200);
		--accent-300: var(--color-pink-300);
		--accent-400: var(--color-pink-400);
		--accent-500: var(--color-pink-500);
		--accent-600: var(--color-pink-600);
		--accent-700: var(--color-pink-700);
		--accent-800: var(--color-pink-800);
		--accent-900: var(--color-pink-900);
		--accent-950: var(--color-pink-950);
	}

	.rose {
		--accent-50: var(--color-rose-50);
		--accent-100: var(--color-rose-100);
		--accent-200: var(--color-rose-200);
		--accent-300: var(--color-rose-300);
		--accent-400: var(--color-rose-400);
		--accent-500: var(--color-rose-500);
		--accent-600: var(--color-rose-600);
		--accent-700: var(--color-rose-700);
		--accent-800: var(--color-rose-800);
		--accent-900: var(--color-rose-900);
		--accent-950: var(--color-rose-950);
	}

	.gray {
		--base-50: var(--color-gray-50);
		--base-100: var(--color-gray-100);
		--base-200: var(--color-gray-200);
		--base-300: var(--color-gray-300);
		--base-400: var(--color-gray-400);
		--base-500: var(--color-gray-500);
		--base-600: var(--color-gray-600);
		--base-700: var(--color-gray-700);
		--base-800: var(--color-gray-800);
		--base-900: var(--color-gray-900);
		--base-950: var(--color-gray-950);
	}

	.zinc {
		--base-50: var(--color-zinc-50);
		--base-100: var(--color-zinc-100);
		--base-200: var(--color-zinc-200);
		--base-300: var(--color-zinc-300);
		--base-400: var(--color-zinc-400);
		--base-500: var(--color-zinc-500);
		--base-600: var(--color-zinc-600);
		--base-700: var(--color-zinc-700);
		--base-800: var(--color-zinc-800);
		--base-900: var(--color-zinc-900);
		--base-950: var(--color-zinc-950);
	}

	.neutral {
		--base-50: var(--color-neutral-50);
		--base-100: var(--color-neutral-100);
		--base-200: var(--color-neutral-200);
		--base-300: var(--color-neutral-300);
		--base-400: var(--color-neutral-400);
		--base-500: var(--color-neutral-500);
		--base-600: var(--color-neutral-600);
		--base-700: var(--color-neutral-700);
		--base-800: var(--color-neutral-800);
		--base-900: var(--color-neutral-900);
		--base-950: var(--color-neutral-950);
	}

	.stone {
		--base-50: var(--color-stone-50);
		--base-100: var(--color-stone-100);
		--base-200: var(--color-stone-200);
		--base-300: var(--color-stone-300);
		--base-400: var(--color-stone-400);
		--base-500: var(--color-stone-500);
		--base-600: var(--color-stone-600);
		--base-700: var(--color-stone-700);
		--base-800: var(--color-stone-800);
		--base-900: var(--color-stone-900);
		--base-950: var(--color-stone-950);
	}

	.slate {
		--base-50: var(--color-slate-50);
		--base-100: var(--color-slate-100);
		--base-200: var(--color-slate-200);
		--base-300: var(--color-slate-300);
		--base-400: var(--color-slate-400);
		--base-500: var(--color-slate-500);
		--base-600: var(--color-slate-600);
		--base-700: var(--color-slate-700);
		--base-800: var(--color-slate-800);
		--base-900: var(--color-slate-900);
		--base-950: var(--color-slate-950);
	}

	.taupe {
		--base-50: var(--color-taupe-50);
		--base-100: var(--color-taupe-100);
		--base-200: var(--color-taupe-200);
		--base-300: var(--color-taupe-300);
		--base-400: var(--color-taupe-400);
		--base-500: var(--color-taupe-500);
		--base-600: var(--color-taupe-600);
		--base-700: var(--color-taupe-700);
		--base-800: var(--color-taupe-800);
		--base-900: var(--color-taupe-900);
		--base-950: var(--color-taupe-950);
	}

	.mist {
		--base-50: var(--color-mist-50);
		--base-100: var(--color-mist-100);
		--base-200: var(--color-mist-200);
		--base-300: var(--color-mist-300);
		--base-400: var(--color-mist-400);
		--base-500: var(--color-mist-500);
		--base-600: var(--color-mist-600);
		--base-700: var(--color-mist-700);
		--base-800: var(--color-mist-800);
		--base-900: var(--color-mist-900);
		--base-950: var(--color-mist-950);
	}

	.olive {
		--base-50: var(--color-olive-50);
		--base-100: var(--color-olive-100);
		--base-200: var(--color-olive-200);
		--base-300: var(--color-olive-300);
		--base-400: var(--color-olive-400);
		--base-500: var(--color-olive-500);
		--base-600: var(--color-olive-600);
		--base-700: var(--color-olive-700);
		--base-800: var(--color-olive-800);
		--base-900: var(--color-olive-900);
		--base-950: var(--color-olive-950);
	}

	.mauve {
		--base-50: var(--color-mauve-50);
		--base-100: var(--color-mauve-100);
		--base-200: var(--color-mauve-200);
		--base-300: var(--color-mauve-300);
		--base-400: var(--color-mauve-400);
		--base-500: var(--color-mauve-500);
		--base-600: var(--color-mauve-600);
		--base-700: var(--color-mauve-700);
		--base-800: var(--color-mauve-800);
		--base-900: var(--color-mauve-900);
		--base-950: var(--color-mauve-950);
	}

	.sharp {
		--ui-radius: 0.375rem;
		--ui-radius-lg: 0.5rem;
		--ui-radius-sm: 0.25rem;
	}

	.pill {
		--ui-radius: 9999px;
		--ui-radius-lg: 9999px;
		--ui-radius-sm: 9999px;
	}

	.geist {
		--ui-font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
		--ui-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}

	.system-font {
		--ui-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
		--ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}

	.serif-font {
		--ui-font-sans: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
	}

	.mono-font {
		--ui-font-sans: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}
}

@utility prose-base-color {
	--tw-prose-body: var(--color-base-800);
	--tw-prose-headings: var(--color-base-900);
	--tw-prose-lead: var(--color-base-700);
	--tw-prose-links: var(--color-base-900);
	--tw-prose-bold: var(--color-base-900);
	--tw-prose-counters: var(--color-base-600);
	--tw-prose-bullets: var(--color-base-400);
	--tw-prose-hr: var(--color-base-300);
	--tw-prose-quotes: var(--color-base-900);
	--tw-prose-quote-borders: var(--color-base-300);
	--tw-prose-captions: var(--color-base-700);
	--tw-prose-code: var(--color-base-900);
	--tw-prose-pre-code: var(--color-base-100);
	--tw-prose-pre-bg: var(--color-base-900);
	--tw-prose-th-borders: var(--color-base-300);
	--tw-prose-td-borders: var(--color-base-200);

	--tw-prose-invert-body: var(--color-base-200);
	--tw-prose-invert-headings: var(--color-white);
	--tw-prose-invert-lead: var(--color-base-300);
	--tw-prose-invert-links: var(--color-white);
	--tw-prose-invert-bold: var(--color-white);
	--tw-prose-invert-counters: var(--color-base-400);
	--tw-prose-invert-bullets: var(--color-base-600);
	--tw-prose-invert-hr: var(--color-base-700);
	--tw-prose-invert-quotes: var(--color-base-100);
	--tw-prose-invert-quote-borders: var(--color-base-700);
	--tw-prose-invert-captions: var(--color-base-400);
	--tw-prose-invert-code: var(--color-white);
	--tw-prose-invert-pre-code: var(--color-base-300);
	--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
	--tw-prose-invert-th-borders: var(--color-base-600);
	--tw-prose-invert-td-borders: var(--color-base-700);
}