@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@plugin 'tailwindcss-animate';

@source '../node_modules/@foxui';
@source '../node_modules/@atmo-dev/events-ui/dist';
@import '@foxui/core/theme.css';

/* Blento semantic design tokens. Each Tailwind theme value reads an overridable `--blento-*` CSS
   variable with a default that matches today's look, so components use normal utilities (e.g.
   `rounded-card`) that resolve through page-overridable tokens (set on <html> by ThemeScript from
   page.style). Colors stay on the @foxui accent/base mechanism above. */
@theme inline {
	--radius-card: var(--blento-radius-card, 1.5rem);
}

/* Body font token — defaults to `inherit` (the current stack), overridden per page/theme. */
body {
	font-family: var(--blento-font-body, inherit);
}

@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
@custom-variant accent (&:where(.accent, .accent *));

/* Hide @foxui/core Avatar fallback (person icon / initials) whenever an image
   is rendered, so partially transparent avatars don't show the icon behind them.
   Targets the Avatar root by its distinctive class combo. */
.not-prose.rounded-full.isolate:has(img) > svg,
.not-prose.rounded-full.isolate:has(img) > span {
	display: none;
}

.body::-webkit-scrollbar-track {
	background-color: transparent;
}

@supports (scrollbar-width: auto) {
	body {
		scrollbar-color: var(--color-base-400) transparent;
		scrollbar-width: thin;
	}

	.dark body {
		scrollbar-color: var(--color-base-800) transparent;
	}
}

@supports not (scrollbar-width: auto) {
	body::-webkit-scrollbar {
		width: 14px;
		height: 14px;
	}
}

body::-webkit-scrollbar-thumb {
	background-color: var(--color-base-400);
	border-radius: 20px;
	border: 4px solid transparent;
	background-clip: content-box;
}

body::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-base-500);
}

.dark body::-webkit-scrollbar-thumb {
	background-color: var(--color-base-800);
}

.dark body::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-base-700);
}