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

/* Use class-based dark mode instead of prefers-color-scheme */
@custom-variant dark (&:where(.dark, .dark *));

/* ------------------------------------------------------------------ */
/*  Wireframe base — remap all non-gray colors to grayscale            */
/*  Use var(--color-gray-N) so dark-mode inversion flows through       */
/* ------------------------------------------------------------------ */
@theme {
	--color-blue-50: var(--color-gray-100);
	--color-blue-100: var(--color-gray-200);
	--color-blue-200: var(--color-gray-300);
	--color-blue-300: var(--color-gray-400);
	--color-blue-400: var(--color-gray-500);
	--color-blue-500: var(--color-gray-500);
	--color-blue-600: var(--color-gray-600);
	--color-blue-700: var(--color-gray-700);
	--color-blue-800: var(--color-gray-800);
	--color-green-50: var(--color-gray-100);
	--color-green-100: var(--color-gray-200);
	--color-green-200: var(--color-gray-300);
	--color-green-300: var(--color-gray-400);
	--color-green-400: var(--color-gray-500);
	--color-green-500: var(--color-gray-500);
	--color-green-600: var(--color-gray-600);
	--color-green-700: var(--color-gray-700);
	--color-green-800: var(--color-gray-800);
	--color-red-50: var(--color-gray-100);
	--color-red-100: var(--color-gray-200);
	--color-red-200: var(--color-gray-300);
	--color-red-300: var(--color-gray-400);
	--color-red-400: var(--color-gray-500);
	--color-red-500: var(--color-gray-500);
	--color-red-600: var(--color-gray-600);
	--color-red-700: var(--color-gray-700);
	--color-red-800: var(--color-gray-800);
	--color-purple-50: var(--color-gray-100);
	--color-purple-100: var(--color-gray-200);
	--color-purple-200: var(--color-gray-300);
	--color-purple-300: var(--color-gray-400);
	--color-purple-400: var(--color-gray-500);
	--color-purple-500: var(--color-gray-500);
	--color-purple-600: var(--color-gray-600);
	--color-purple-700: var(--color-gray-700);
	--color-purple-800: var(--color-gray-800);
	--color-purple-900: var(--color-gray-900);
	--color-slate-50: var(--color-gray-50);
	--color-slate-100: var(--color-gray-100);
	--color-slate-200: var(--color-gray-200);
	--color-slate-300: var(--color-gray-300);
	--color-slate-400: var(--color-gray-400);
	--color-slate-500: var(--color-gray-500);
	--color-slate-600: var(--color-gray-600);
	--color-slate-700: var(--color-gray-700);
	--color-slate-800: var(--color-gray-800);
	--color-slate-900: var(--color-gray-900);

	--radius: 0px;
	--radius-sm: 0px;
	--radius-md: 0px;
	--radius-lg: 0px;
	--radius-xl: 0px;
	--radius-2xl: 0px;
	--radius-3xl: 0px;

	--shadow-sm: 0 0 #0000;
	--shadow: 0 0 #0000;
	--shadow-md: 0 0 #0000;
	--shadow-lg: 0 0 #0000;
	--shadow-xl: 0 0 #0000;
	--shadow-2xl: 0 0 #0000;
}

/* ------------------------------------------------------------------ */
/*  Dark mode form elements                                            */
/* ------------------------------------------------------------------ */
.dark input,
.dark select,
.dark textarea {
	background-color: #1f2937;
	color: #f9fafb;
	border-color: #374151;
}

/* ------------------------------------------------------------------ */
/*  Force-disable transitions, animations, and remaining decoration    */
/* ------------------------------------------------------------------ */
*,
::before,
::after {
	transition: none !important;
	animation: none !important;
}