@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
	--color-theme-primary: #8BA888;
	--color-theme-secondary: #4f46e5;
	--color-theme-text: #1f2937;
	--color-theme-bg: #e5e7eb;
	--color-theme-success: #10b981;
	--color-theme-error: #ef4444;
}

html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Poppins', sans-serif;
	color: var(--color-theme-text);
	background-color: var(--color-theme-bg);
}

.tab-button {
	transition: all 0.3s ease;
}

.tab-button.active {
	background-color: var(--color-theme-primary);
	color: white;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.accordion-button {
	transition: all 0.3s ease;
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.accordion-content.active {
	max-height: 500px;
}

.progress-bar {
	transition: width 1s ease;
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 5px;
	background: #e5e7eb;
	outline: none;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-theme-primary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
	background: #6A8367;
	transform: scale(1.1);
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-theme-primary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.slider::-moz-range-thumb:hover {
	background: #6A8367;
	transform: scale(1.1);
}

.badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.alert {
	border-radius: 0.5rem;
	padding: 1rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.alert-icon {
	margin-right: 0.75rem;
	flex-shrink: 0;
}