@import "tailwindcss";
@import "react-tooltip/dist/react-tooltip.css";

@config "../tailwind.config.js";

@layer base {
	:root {
		--color-primary-background: #1a1a1a;
		--color-primary-surface: #2a2a2a;
		--color-primary-surface-elevated: #3a3a3a;
		--color-text-primary: #ffffff;
		--color-text-secondary: #b0b0b0;
		--color-text-muted: #808080;
		--color-accent-blue: #4a9eff;
		--color-accent-blue-hover: #3a8eff;
		--color-accent-green: #00c851;
		--color-accent-green-hover: #00b041;
		--color-accent-orange: #ff8800;
		--color-accent-red: #ff4444;
		--color-accent-red-hover: #ff2222;
		--color-accent-purple: #9c27b0;
		--color-status-active: #00c851;
		--color-status-pending: #ff8800;
		--color-status-inactive: #808080;
		--radius-sm: 4px;
		--radius-base: 6px;
		--radius-lg: 8px;
		--spacing-xs: 4px;
		--spacing-sm: 8px;
		--spacing-base: 16px;
		--spacing-lg: 24px;
		--spacing-xl: 32px;
	}

	body {
		@apply bg-brand-black text-brand-white font-sans;
	}

	* {
		@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-[#4a9eff] focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1a1a];
	}

	input[type="text"],
	input[type="tel"],
	textarea,
	select {
		@apply w-full py-3 px-4 rounded-xl bg-brand-gray text-brand-white border border-transparent focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange placeholder:text-neutral-500 transition-all;
	}
}

.custom-scrollbar::-webkit-scrollbar {
	width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background: #2a2a2a;
	border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #3a3a3a;
	border-radius: 4px;
	border: 1px solid #2a2a2a;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #4a4a4a;
}
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* For framer motion details[open] arrow rotation */
details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}

/* Smooth transitions for interactive elements */
button,
[role="button"],
.cursor-pointer {
	@apply transition-all duration-150 ease-out;
}

@keyframes pulse-glow {
	0%,
	100% {
		opacity: 0.8;
		box-shadow: 0 0 4px var(--color-accent-blue);
	}
	50% {
		opacity: 1;
		box-shadow: 0 0 12px var(--color-accent-blue);
	}
}
.pulse-glow-animation {
	animation: pulse-glow 2.5s infinite ease-in-out;
}

@keyframes sparkle {
	0%,
	100% {
		box-shadow:
			0 0 5px #f1a21d,
			0 0 10px #f1a21d;
		opacity: 0;
	}
	50% {
		box-shadow:
			0 0 15px #ffc947,
			0 0 25px #ffc947;
		opacity: 1;
	}
}
.sparkle-on-complete {
	animation: sparkle 1.5s ease-in-out;
}

.network-grid-background {
	background-color: var(--color-primary-background); /* Or #000000 */
	background-image:
		linear-gradient(rgba(241, 162, 29, 0.05) 1px, transparent 1px),
		linear-gradient(to right, rgba(241, 162, 29, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(
		ellipse 100% 80% at 50% 50%,
		black,
		transparent 95%
	);
}

.highlight-message > div { /* Target the inner ChatBubble div */
  animation: highlight-animation 3s ease-out;
}

@keyframes highlight-animation {
  0% { background-color: rgba(241, 162, 29, 0.5); }
  100% { background-color: transparent; }
}