/** Utility CSS classes and variables **/

: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);
	--brand-4: rgba(255, 204, 102, 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);
	--neutral-6: rgba(245, 245, 244, 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);
	--accent-1: rgba(75, 12, 184, 1);
	--accent-2: rgba(249, 245, 254, 1);

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

:where(a).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;
}

:where(a).button:hover {
	background-color: var(--neutral-3);
}

.icon-button {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	height: auto;
}

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

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

.primary:hover {
	background-color: var(--brand-4);
}

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

.secondary:hover {
	background-color: var(--neutral-3);
}

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

.tertiary:hover {
	background-color: var(--neutral-4);
}

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

.danger:hover {
	background-color: var(--danger-2);
}

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

.ghost:hover {
	background-color: var(--neutral-5);
}

.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;
}