@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/ubuntu-regular-webfont.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/ubuntu-medium-webfont.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Ubuntu";
	src: url("./assets/fonts/Ubuntu/ubuntu-bold-webfont.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans Pro";
	src: url("./assets/fonts/SourceSansPro/SourceSansPro-Regular.ttf.woff2") format('woff2');
	font-weight: normal;
  font-style: normal;
	font-display: swap;
}

@property --gradient-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes rotateGradient {
	0% {
		--gradient-angle: 0deg;
	}
	100% {
		--gradient-angle: 360deg;
	}
}

:root {
	--title-font: Ubuntu, system-ui, Avenir, Helvetica, Arial, sans-serif;
	--text-font: Source Sans Pro, system-ui, Avenir, Helvetica, Arial, sans-serif;
	--mono-font: Ubuntu Mono, monospace, system-ui, Avenir, Helvetica, Arial, sans-serif;

	--layout-horizontal-padding: 10%;
	--layout-vertical-padding: 64px;

	--navbar-height: 100px;
	--footer-height: 60px;

	--m-scrollbar-size: 1vh;
	--s-scrollbar-size: 0.5vh;

	--card-border-radius: 4px;

	--pass-color: #21ff8a;
	--warn-color: #ffd12c;
	--fail-color: #ff3333;
	--unknown-color: #dddddd;
}

:root[data-theme='dark'] {
	--read-primary-color: #FFFFFF;
	--read-secondary-color: #777986;
	--read-tertiary-color: #99a1aa;

	--background-color: #111315;
	--card-background-color: #1e2023;
	--message-bubble-color: #34373C;

	--scrollbar-background-color: rgba(255, 255, 255, 0.03);
	--scrollbar-background-color-hover: rgba(255, 255, 255, 0.07);

	--background-svg: url('/assets/backgrounds/blurred-dot.svg');
}

:root[data-theme='light'] {
	--read-primary-color: #222222;
	--read-secondary-color: #7d7e83;
	--read-tertiary-color: #585a66;

	--background-color: #f2f5f7;
	--card-background-color: #ffffff;
	--message-bubble-color: #009266;

	--scrollbar-background-color: rgba(0, 0, 0, 0.1);
	--scrollbar-background-color-hover: rgba(0, 0, 0, 0.1);

	--background-svg: url('/assets/backgrounds/blurred-dot-light.svg');
}

@media (max-width: 700px) {
	:root {
		--layout-vertical-padding: 5%;
	}
}

body {
	width: 100dvw;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
	color: var(--read-primary-color);
	font-family: var(--text-font);
}