/* Custom CSS variables for gray colors using oklch values */
:root {
	--color-gray-50: oklch(0.985 0 0);
	--color-gray-100: oklch(0.97 0 0);
	--color-gray-200: oklch(0.922 0 0);
	--color-gray-300: oklch(0.87 0 0);
	--color-gray-400: oklch(0.708 0 0);
	--color-gray-500: oklch(0.556 0 0);
	--color-gray-600: oklch(0.439 0 0);
	--color-gray-700: oklch(0.371 0 0);
	--color-gray-800: oklch(0.269 0 0);
	--color-gray-900: oklch(0.205 0 0);
	--color-gray-950: oklch(0.145 0 0);
}

/* Override Tailwind's default gray colors with !important to ensure they are applied */
.bg-gray-50 {
	background-color: var(--color-gray-50) !important;
}

.bg-gray-100 {
	background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
	background-color: var(--color-gray-200) !important;
}

.bg-gray-300 {
	background-color: var(--color-gray-300) !important;
}

.bg-gray-400 {
	background-color: var(--color-gray-400) !important;
}

.bg-gray-500 {
	background-color: var(--color-gray-500) !important;
}

.bg-gray-600 {
	background-color: var(--color-gray-600) !important;
}

.bg-gray-700 {
	background-color: var(--color-gray-700) !important;
}

.bg-gray-800 {
	background-color: var(--color-gray-800) !important;
}

.bg-gray-900 {
	background-color: var(--color-gray-900) !important;
}

.bg-gray-950 {
	background-color: var(--color-gray-950) !important;
}

.text-gray-50 {
	color: var(--color-gray-50) !important;
}

.text-gray-100 {
	color: var(--color-gray-100) !important;
}

.text-gray-200 {
	color: var(--color-gray-200) !important;
}

.text-gray-300 {
	color: var(--color-gray-300) !important;
}

.text-gray-400 {
	color: var(--color-gray-400) !important;
}

.text-gray-500 {
	color: var(--color-gray-500) !important;
}

.text-gray-600 {
	color: var(--color-gray-600) !important;
}

.text-gray-700 {
	color: var(--color-gray-700) !important;
}

.text-gray-800 {
	color: var(--color-gray-800) !important;
}

.text-gray-900 {
	color: var(--color-gray-900) !important;
}

.text-gray-950 {
	color: var(--color-gray-950) !important;
}

.stroke-gray-300 {
	stroke: var(--color-gray-300) !important;
}

.stroke-gray-700 {
	stroke: var(--color-gray-700) !important;
}

.stroke-gray-900 {
	stroke: var(--color-gray-900) !important;
}

.stroke-gray-600 {
	stroke: var(--color-gray-600) !important;
}

/* Specific override for translucent backgrounds with oklch and transparency */
.bg-gray-200\/50 {
	background-color: oklch(0.922 0 0 / 0.5) !important;
}

.bg-gray-300\/60 {
	background-color: oklch(0.87 0 0 / 0.6) !important;
}

/* Handle specific SVG fill/stroke colors that were hardcoded in the original JSX */
/* #D4D4D4 is very close to gray-300 (oklch(0.87 0 0)) */
svg [stroke="#D4D4D4"] {
	stroke: var(--color-gray-300) !important;
}

/* #A3A3A3 is between gray-400 and gray-500, using gray-500 (oklch(0.556 0 0)) as a close match */
svg [fill="#A3A3A3"] {
	fill: var(--color-gray-500) !important;
}

svg [stroke="#A3A3A3"] {
	stroke: var(--color-gray-500) !important;
}

/* Custom keyframes for animations from your theme */
@keyframes spin-slow {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes spin-reverse-slower {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

.animate-spin-slow {
	animation: spin-slow 10s linear infinite;
	/* Adjusted duration from original */
}

.animate-spin-reverse-slower {
	animation: spin-reverse-slower 15s linear infinite;
	/* Adjusted duration from original */
}

/* Ensure Inter font is used if available, otherwise fallback to sans-serif */
body {
	font-family: "Inter", sans-serif;
}