@use 'fonts';
@use 'pico';
@use 'bytemd';

:root {
	--font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
		'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
		'Noto Color Emoji';
	--form-element-spacing-vertical: 0.3rem;
	--form-element-spacing-horizontal: 0.45rem;
	--neutral-color: hsl(205 30% 85%);
	--code-color: hsl(205 30% 30%);
	--secondary-alt: hsl(205, 15%, 27%);
	--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	accent-color: var(--primary);
}

[data-theme='light'],
:root:not([data-theme='dark']) {
	--background-color: hsl(202 18% 93%);
	--code-color: hsl(205 30% 30%);
}

html {
	min-height: 100vh;
	min-height: 100dvh;
	background-image: url('/favicon.svg');
	background-color: var(--card-sectionning-background-color);
	background-size: min(20vw, 150px);
	background-position: center center;
	background-repeat: no-repeat;
	scrollbar-color: var(--range-thumb-color) var(--range-border-color);

	&[data-theme] {
		background-image: none;
	}
}

body {
	background-color: var(--background-color);

	html[data-theme] & {
		min-height: 100vh;
		min-height: 100dvh;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	--typography-spacing-vertical: 0.3rem;
	color: inherit;
}

p {
	--typography-spacing-vertical: 1rem;
}

a,
[role='link'] {
	--color: hsl(240, 85%, 54%);
}

form {
	margin: 0;
}

button {
	touch-action: manipulation;
}

hr {
	border-top: 1px solid var(--form-element-border-color);
}

ul > li {
	list-style: disc;
}

ol > li {
	list-style: decimal;
}
