:root {
	--font-family-sans: Inter;
	--font-family-serif: PT Serif;
	--font-family-display: 'Playfair Display', var(--font-family-serif);
	--font-family-crimson: 'Crimson Text', var(--font-family-serif);

	--black: #101112;
	--white: #efece7;
	--brown: #2d251f;
	--darkbrown: #231e1a;
	--red: #8a2830;
	--redHover: #79242b;
	--muted-foreground: rgba(163, 156, 143, 1);
	--border-radius: 0.5rem;
	--border: rgb(73, 62, 54);
	--shadow-elegant: 0 10px 40px -10px rgba(59, 17, 21, 0.789);
	--transition-smooth: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
	--max-width-0: 320px;
	--max-width-1: 768px;

	--header-height: 45px;

	--padding-block: min(10vh, 10rem);
}

html {
	background-color: var(--darkbrown);
	color: var(--white);
	font-family: var(--font-family-sans), var(--font-family-serif), sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.outline-enabled * {
	outline: 1px dotted rgb(239, 4, 180);
}

button {
	cursor: pointer;
	background-color: var(--red);
	color: var(--white);
	padding: 1rem 2rem;
	border: none;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	font-weight: 500;
	font-size: 1.125rem;
	transition: var(--transition-smooth);
	box-shadow: var(--shadow-elegant);
}

button:hover {
	background: var(--redHover);
	scale: 1.02;
}

button:active {
	scale: 0.98;
}

.button:disabled {
	pointer-events: none;
	color: var(--muted-foreground);
	opacity: 0.5;
}

.card {
	border-radius: var(--border-radius);
	border: 1px solid var(--border);
	padding: 1rem;
	flex: 1;
	font-family: var(--font-family-crimson);
	font-size: 1.125rem;
}

h1 {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-optical-sizing: auto;
	font-size: clamp(3.5rem, 10vw, 4.5rem);
}

h2 {
	font-family: var(--font-family-display);
	font-weight: 700;
	font-optical-sizing: auto;
	font-size: 3rem;
}

p {
	font-family: var(--font-family-crimson);
}

a {
	font-family: var(--font-family-crimson);
	text-decoration: none;
	color: var(--white);
	font-weight: 700;
}

ul,
ol {
	list-style-position: inside;
	padding: 0.25rem;
}