/* ===== CSS Custom Properties ===== */
:root {
	/* Light Mode (default) */
	--scrollbar-track: #f4f4f5;
	--scrollbar-thumb: #d4d4d8;
	--scrollbar-thumb-hover: #a1a1aa;
}

[data-theme='dark'] {
	--scrollbar-track: #18181b;
	--scrollbar-thumb: #3f3f46;
	--scrollbar-thumb-hover: #52525b;
}

/* ===== Custom Scrollbar ===== */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 4px;
	transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
	background: var(--scrollbar-track);
}