@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@plugin 'tailwindcss-animate';

@source '../node_modules/@foxui';

@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
@custom-variant accent (&:where(.accent, .accent *));

.body::-webkit-scrollbar-track {
	background-color: transparent;
}

@supports (scrollbar-width: auto) {
	body {
		scrollbar-color: var(--color-base-400) transparent;
		scrollbar-width: thin;
	}

	.dark body {
		scrollbar-color: var(--color-base-800) transparent;
	}
}

@supports not (scrollbar-width: auto) {
	body::-webkit-scrollbar {
		width: 14px;
		height: 14px;
	}
}

body::-webkit-scrollbar-thumb {
	background-color: var(--color-base-400);
	border-radius: 20px;
	border: 4px solid transparent;
	background-clip: content-box;
}

body::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-base-500);
}

.dark body::-webkit-scrollbar-thumb {
	background-color: var(--color-base-800);
}

.dark body::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-base-700);
}

@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);
}

@layer base {
	: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-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);
	}

	.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);
	}
}