@import url('plain-theme.scss');

@font-face {
	font-family: 'Public Sans';
	src: url('/fonts/PublicSans-VariableFont_wght.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--color-success: #2f9126;
	--color-urgent: #e90000;
}

*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-paragraph);
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background: var(--background);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

input,
textarea,
button,
select {
	font: inherit;
	font-size: 1rem;
}

img,
svg,
video,
iframe,
picture,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
	flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
	font-family: var(--font-heading);
	font-weight: 500;
	color: var(--color-heading);
}

.darken {
	color: var(--color-heading);
}

p,
.subtext {
	font-size: 15px;
	color: var(--color-paragraph);
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, var(--color-paragraph) 50%, transparent);

	&:hover {
		text-decoration-color: var(--color-paragraph);
	}
}

code,
pre {
	font-size: 1rem;
}
