/* Custom styles on top of Tailwind */

@font-face {
	font-family: 'Vazirmatn';
	src: url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('https://cdn.fontcdn.ir/Font/Persian/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

* {
	font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
}

html, body {
	background: #020617;
}

/* Gradient background animation */
.bg-gradient-mesh {
	background:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), transparent),
		radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.08), transparent),
		#020617;
}

/* Toast animations */
@keyframes toast-in {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
	to { transform: translateX(-100%); opacity: 0; }
}
.animate-toast-in { animation: toast-in 0.2s ease-out; }
.animate-toast-out { animation: toast-out 0.2s ease-in forwards; }

/* Modal animation */
@keyframes modal-in {
	from { transform: scale(0.95); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.animate-modal-in { animation: modal-in 0.15s ease-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Spinner */
.spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-bottom-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toggle switch */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: #334155;
	border-radius: 24px;
	transition: 0.2s;
}
.toggle-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	right: 3px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: 0.2s;
}
input:checked + .toggle-slider {
	background-color: #10b981;
}
input:checked + .toggle-slider:before {
	transform: translateX(-20px);
}
input:disabled + .toggle-slider {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Code block */
.code-block {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.85rem;
	background: #0f172a;
	border: 1px solid #1e293b;
	color: #e2e8f0;
	padding: 0.75rem;
	border-radius: 0.5rem;
}

/* Smooth fade-in for page content */
.fade-in {
	animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}