@import "tailwindcss";
@import "tw-animate-css";
@import "./shadcn.css";

@theme {
	--font-sans: var(--font-inter);
	--font-serif: var(--font-newsreader);
	--font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;
	--scrollbar-width: 16px;
	--scrollbar-height: 16px;
}

@layer utilities {
	.font-instrument-serif {
		font-family: var(--font-instrument-serif);
	}

	.container-wrapper {
		@apply max-w-[1400px] mx-auto w-full flex flex-col;
	}

	.container {
		@apply px-4 xl:px-6 mx-auto;
	}
}

button {
	cursor: pointer;
}

*::selection {
	background-color: var(--selection);
	color: var(--selection-foreground);
}

.sugar-high {
	--sh-class: #2d5e9d;
	--sh-identifier: #354150;
	--sh-sign: #8996a3;
	--sh-property: #0550ae;
	--sh-entity: #249a97;
	--sh-jsxliterals: #6266d1;
	--sh-string: #00a99a;
	--sh-keyword: #f47067;
	--sh-comment: #a19595;
}

/* Sugar-High token colors – dark theme */
.dark .sugar-high {
	--sh-class: #8d85ff;
	--sh-identifier: #cbd5e1;
	--sh-sign: #a0aec0;
	--sh-property: #4e8fdf;
	--sh-entity: #6eafad;
	--sh-jsxliterals: #bf7db6;
	--sh-string: #34d399;
	--sh-keyword: #f47067;
	--sh-comment: #6b7280;
}

@media (prefers-contrast: high) {
	*:focus-visible {
		outline: 2px solid black !important;
	}

	.dark *:focus-visible {
		outline: 2px solid white !important;
	}
}

::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
}

::-webkit-scrollbar-thumb {
	cursor: grab;
	background-color: var(--color-accent);
}

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

::-webkit-scrollbar-thumb:active {
	cursor: grabbing;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
	background-clip: content-box;
	border: 6px solid #0000;
	border-radius: 16px;
}

::-webkit-scrollbar-track {
	cursor: grab;
	background-color: var(--color-background);
}

::-webkit-scrollbar-track:active {
	cursor: grabbing;
}

::-webkit-scrollbar-corner {
	background-color: #0000;
}

textarea::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height);
}

textarea::-webkit-scrollbar-thumb {
	cursor: grab;
	background-color: var(--color-accent);
}

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

textarea::-webkit-scrollbar-thumb:active {
	cursor: grabbing;
}

textarea::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-track {
	background-clip: content-box;
	border: 6px solid #0000;
	border-radius: 16px;
}

textarea::-webkit-scrollbar-track {
	cursor: grab;
	background-color: var(--color-background);
	margin: 0.25rem 0;
}

textarea::-webkit-scrollbar-track:active {
	cursor: grabbing;
}

textarea::-webkit-scrollbar-corner {
	background: 0 0;
}