@import './vars';

html {
	--color-text-h: 0;
	--color-text-s: 0%;
	--color-text-l: 0%;
	--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
	--color-bg-h: 0;
	--color-bg-s: 0%;
	--color-bg-l: 100%;
	--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));

	--animation-speed: 0.2s;
	--animation-type: ease-in-out;

	--shadow-luminosity: calc(100% - var(--color-bg-l));
	--shadow-small: 0.5px 1px 1px
		hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
	--shadow-medium: 1px 2px 2px
			hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
		2px 4px 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
		3px 6px 6px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333);
	--shadow-large: 1px 2px 2px
			hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		2px 4px 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		4px 8px 8px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		8px 16px 16px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
		16px 32px 32px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2);

	--z-index-modal: 100;

	--clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
	--clip-path-button: polygon(0px 0px, calc(100% - 10px) 0px, 100% 40px, 10px 40px);

	background-color: var(--color-bg);
	color: var(--color-text);

	min-width: $min-w-supported;
}

/* Reset */
body {
	font-size: 16px;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
	padding: 0;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		avenir next,
		avenir,
		segoe ui,
		helvetica neue,
		helvetica,
		Cantarell,
		Ubuntu,
		roboto,
		noto,
		arial,
		sans-serif;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}
button {
	background: none;
	border: none;
	cursor: pointer;
}
input,
button,
textarea,
select {
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

body {
	min-height: 100vh;
	flex-direction: column;
}