:root {
	/* Softer light theme: light gray background, medium-gray text */
	--color-bg: 245 246 248; /* slate-100-ish */
	--color-text: 31 41 55; /* gray-800 */
	--color-surface: 255 255 255; /* white cards on gray bg */
	--color-border: 209 213 219; /* gray-300 */
    --color-accent: 20 184 166; /* teal-500 */
}

.dark {
	/* Dark theme: neutral grays */
	--color-bg: 23 23 23; /* neutral-900 */
	--color-text: 229 229 229; /* neutral-200 */
	--color-surface: 38 38 38; /* neutral-800 */
	--color-border: 82 82 82; /* neutral-600 */
	--color-accent: 13 148 136; /* teal-600 */
}

/* Theme Toggle Slider Styles */
.theme-toggle-container {
	display: flex;
	align-items: center;
}

.theme-toggle-slider {
	position: relative;
	width: 60px;
	height: 32px;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
}

.theme-toggle-track {
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
	border-radius: 16px;
	transition: all 0.3s ease;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark .theme-toggle-track {
	background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #475569 100%);
}

.theme-toggle-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 28px;
	height: 28px;
	background: #ffffff;
	border-radius: 50%;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dark .theme-toggle-knob {
	left: 30px;
	background: #1e293b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-toggle-icon {
	font-size: 14px;
	transition: all 0.3s ease;
}

.theme-toggle-slider:hover .theme-toggle-track {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.theme-toggle-slider:hover .theme-toggle-knob {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark .theme-toggle-slider:hover .theme-toggle-knob {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.theme-toggle-slider:focus {
	outline: none;
}

.theme-toggle-slider:focus .theme-toggle-track {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(20, 184, 166, 0.3);
}

/* Animation for theme transition */
.theme-toggle-slider.transitioning .theme-toggle-knob {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.theme-toggle-slider {
		width: 52px;
		height: 28px;
	}
	
	.theme-toggle-knob {
		width: 24px;
		height: 24px;
	}
	
	.dark .theme-toggle-knob {
		left: 26px;
	}
}