@import "tailwindcss";
@plugin "tw-easing-gradients";
@import "./markup.css";
@import "./pierre.css";
@import "./logs.css";
@import "./theme.css";
@import "./fonts.css";

/* UA widgets - scrollbars first among them - paint from color-scheme, not from
   our var theme, so any scroller would carry a light system track over a dark
   surface. one declaration at the root keeps every scrollbar - file tree, code
   scroller, rails - matching the surface it sits on */
html {
	color-scheme: light;
	@variant dark {
		color-scheme: dark;
	}
}

@layer base {
	html {
		font-size: 16px;
		scrollbar-gutter: stable;
	}

	body {
		@apply flex min-h-screen flex-col bg-background-canvas typography-paragraph-regular text-foreground-default transition-colors duration-150;
	}

	a {
		@apply text-foreground-default no-underline;
	}

	::selection {
		background-color: var(--color-background-info-subtle-hover);
		color: var(--color-foreground-default);
	}
}

/* chromium doesn't break links so we have to set it explicitely */
p > a {
	line-break: anywhere;
}