@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500&family=Hind:wght@400;500;600;700&family=Nunito:wght@500;600;700&display=swap');

:root {
	--regular-weight: 400;
	--medium-weight: 500;
	--semibold-weight: 600;
	--bold-weight: 700;

	--radius: 15px;

	--font-body: 16px;
	--font-small: 14px;
	--font-verysmall: 12px;

	--primary: #2CD358;
	--primary-dark: #00BA2A;
	--primary-light: #97E6A2;
	--secondary: #D32CA6;
	--secondary-dark: #BA0094;
	--secondary-light: #E88DCA;
	--neutral-dark: #121212;
	--neutral-medium: #707070;
	--neutral-light: #aaaaaa;
	--neutral-verylight: #e7e7e7;
	--brand-blue: #00ACD7;
	--error: #E80000;
}

body {
	margin: 0;
}

h1 {
	font-family: 'Frank Ruhl Libre', serif;
	font-size: 40px;
}
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h2, h3, h4, h5, h6 {
	font-family: 'Nunito', sans-serif;
}

* {
	font-family: 'Hind', sans-serif;
	color: var(--neutral-dark);

	box-sizing: border-box;
}

.label-input,
.label-input-error {
	display: flex;
	flex-direction: column;
}

.label-input label,
.label-input-error label {
	font-size: var(--font-body);
	font-weight: var(--semibold-weight);
}

.label-input p,
.label-input-error p {
	color: var(--neutral-medium);
	font-size: var(--font-body);
	font-weight: var(--medium-weight);
	margin: 0;
}

.label-input input,
.label-input-error input {
	padding: 3px 16px;
	font-size: var(--font-body);

	border: solid 1.25px var(--neutral-light);
	border-radius: var(--radius);
}

.label-input-error input {
	border: solid 1.75px var(--error);
}

.label-input-error p {
	color: var(--error);
}

.button-primary,
.button-disabled {
	border-radius: var(--radius);
	border: none;
	
	padding: 3px 16px;
	font-size: var(--font-body);
	font-weight: var(--medium-weight);
	
	background-color: var(--primary);
	
	transition: background-color 150ms;

	cursor: pointer;
}

.button-primary:hover {
	background-color: var(--primary-light);
}

.button-primary:active {
	background-color: var(--primary-dark);
}

.button-disabled {
	color: var(--neutral-dark);
	background-color: var(--neutral-light);
	cursor: default;
}