:root {
	/* Colors */
	--white: rgba(255, 255, 255, 1);

	/* Brand */
	--brand-1: rgba(255, 218, 144, 1);
	--brand-2: rgba(255, 235, 195, 1);
	--brand-3: rgba(255, 246, 229, 1);

	/* Neutral */
	--neutral-1: rgba(30, 29, 27, 1);
	--neutral-2: rgba(85, 83, 78, 1);
	--neutral-3: rgba(174, 171, 165, 1);
	--neutral-4: rgba(216, 215, 212, 1);
	--neutral-5: rgba(238, 237, 236, 1);

	/* Indicator */
	--error-1: rgba(241, 94, 65, 1);
	--error-2: rgba(255, 217, 209, 1);
	--success-1: rgba(47, 114, 76, 1);
	--success-2: rgba(220, 235, 223, 1);
	--danger-1: rgba(229, 122, 0, 1);
	--danger-2: rgba(255, 231, 204, 1);

	/* backgrounds */
	--background-image-1: url('/bg-img-1.svg');
	--background-image-2: url('/bg-img-2.svg');

	/* general rules always applied */
	background-color: var(--brand-2);
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
strong {
	color: var(--neutral-1);
	font-weight: 500;
	margin: 0;
	padding: 0;
}

h5 {
	font-size: 0.875rem;
}

/* General rules */
html,
body {
	width: 100%;
	min-height: 100vh;
	font-family: 'Golos Text', sans-serif;
}

@supports (height: 100dvh) {
	html,
	body {
		min-height: 100dvh;
	}
}

p,
b {
	line-height: 1.4285;
	font-weight: 400;
	color: var(--neutral-1);
	font-size: 0.875rem;
}

a {
	line-height: 1.4285;
	font-weight: 400;
	font-size: 0.875rem;
}

ul,
ol {
	font-weight: 400;
	margin: 0;
	padding: 0 0 0 1.5em;
	font-size: 0.875rem;
}

button,
input[type='submit'] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;

	height: 2.5rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;

	cursor: pointer;
	border: none;

	background-color: var(--neutral-1);
	color: var(--white);

	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;

	:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.link-button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;

	height: 1.5rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;

	cursor: pointer;
	border: none;

	background-color: var(--neutral-1);
	color: var(--white);

	font-size: 0.875rem;
	font-weight: 500;

	text-decoration: none;
}

input {
	padding: 0.5rem 1rem;
	height: 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--neutral-4);
	font: inherit;
	font-weight: 400;
	font-size: 0.875rem;
}

input:focus {
	outline-color: var(--brand-1);
}

input:disabled {
	opacity: 0.5;
}

input:read-only {
	background-color: var(--neutral-5);
}

label {
	font-size: 0.875rem;
}

label:has(input:disabled),
input:disabled ~ label {
	opacity: 0.5;
}

.disabled {
	opacity: 0.5;
	pointer-events: none;
}

input[type='checkbox'] {
	padding: 0;
	margin: 0;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--brand-1);
}

.content-box {
	height: fit-content;
	padding: 2rem;
	border-radius: 0.5rem;
	background-color: white;
	display: grid;
	gap: 1rem;
}

.primary {
	background-color: var(--brand-1);
	color: var(--neutral-1);
}

.secondary {
	background-color: var(--neutral-1);
	color: var(--white);
}

.tertiary {
	background-color: var(--neutral-5);
	color: var(--neutral-1);
}

.danger {
	background-color: var(--danger-1);
	color: var(--white);
}

.ghost {
	background-color: transparent;
	border: 1px solid rgba(234, 233, 232, 1);
	color: var(--neutral-1);
	padding: 0.4375rem 0.9375rem;
}

.description,
.info-text {
	font-weight: 400;
	color: var(--neutral-2);
}

.flex {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: flex-start;
	align-items: flex-start;
}

.flex-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: flex-start;
	align-items: flex-start;
}