/* =====================================================================
   Allium — Base resets + styled scrollbars
   Primary-tinted scroll thumb, transparent track.
   ===================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: var(--body-background);
	color: var(--foreground);
	font-family: var(--font-app-sans);
	font-size: var(--text-body, 14px);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Styled scrollbar — primary-tinted thumb (default 12px) */
.scroll {
	overflow: auto;
	scrollbar-color: color-mix(in oklch, var(--primary) 40%, transparent) transparent;
	scrollbar-width: auto;
}
.scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
	background: color-mix(in oklch, var(--primary) 40%, transparent);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover {
	background: color-mix(in oklch, var(--primary) 65%, transparent);
	background-clip: padding-box;
}

/* Thin variant — dense surfaces (sidebars, code blocks, popovers) */
.scroll--thin { scrollbar-width: thin; }
.scroll--thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll--thin::-webkit-scrollbar-thumb { border: 2px solid transparent; }

/* Overlay variant — thumb hidden until hover */
.scroll--overlay { scrollbar-color: transparent transparent; }
.scroll--overlay::-webkit-scrollbar-thumb { background: transparent; }
.scroll--overlay:hover { scrollbar-color: color-mix(in oklch, var(--primary) 50%, transparent) transparent; }
.scroll--overlay:hover::-webkit-scrollbar-thumb {
	background: color-mix(in oklch, var(--primary) 50%, transparent);
	background-clip: padding-box;
}