@import 'tailwindcss';
@config '../tailwind.config.ts';

/* Светлая */
:root,
[data-theme='light'] {
	--bg: 0 0% 100%;
	--bg-elevated: 0 0% 98%;
	--bg-muted: 0 0% 95%;
	--border: 0 0% 88%;
	--text: 0 0% 9%;
	--text-muted: 0 0% 45%;
	--text-subtle: 0 0% 60%;
	--primary: 221 83% 53%;
	--primary-fg: 0 0% 100%;
	--danger: 0 84% 60%;
	--success: 142 71% 45%;
	--chrome: 0 0% 98%;
	--canvas: 0 0% 100%;
	--shadow: 0 0% 0% / 0.08;
}

/* Тёмная (графит Lightroom) */
[data-theme='dark'] {
	--bg: 0 0% 9%;
	--bg-elevated: 0 0% 15%;
	--bg-muted: 0 0% 18%;
	--border: 0 0% 22%;
	--text: 0 0% 92%;
	--text-muted: 0 0% 65%;
	--text-subtle: 0 0% 45%;
	--primary: 217 91% 60%;
	--primary-fg: 0 0% 100%;
	--danger: 0 84% 65%;
	--success: 142 65% 50%;
	--chrome: 0 0% 13%;
	--canvas: 0 0% 9%;
	--shadow: 0 0% 0% / 0.4;
}

/* Нейтральная (тёплый графит) */
[data-theme='neutral'] {
	--bg: 30 12% 18%;
	--bg-elevated: 30 12% 23%;
	--bg-muted: 30 11% 28%;
	--border: 30 9% 34%;
	--text: 35 18% 93%;
	--text-muted: 32 10% 68%;
	--text-subtle: 30 7% 50%;
	--primary: 25 90% 55%;
	--primary-fg: 0 0% 100%;
	--danger: 0 72% 62%;
	--success: 142 45% 52%;
	--chrome: 30 12% 15%;
	--canvas: 30 12% 18%;
	--shadow: 30 30% 5% / 0.45;
}

html,
body {
	background: hsl(var(--bg));
	color: hsl(var(--text));
	transition:
		background-color 200ms ease,
		color 200ms ease;
	min-height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html,
	body {
		transition: none;
	}
}

/* Скроллбары в тон темы */
* {
	scrollbar-width: thin;
	scrollbar-color: hsl(var(--border)) transparent;
}

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

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: hsl(var(--border));
	border: 2px solid transparent;
	border-radius: 9999px;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: hsl(var(--text-subtle));
	background-clip: padding-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}