@import "tailwindcss";

:root {
	--color-stucco: #f6efe4;
	--color-terracotta: #c46a4a;
	--color-olive: #7d8e6a;
	--color-coffee: #4a3628;
	--color-iron: #1a1a1a;
	--color-brass: #b08a57;
	--color-adobe: #9a3e2f;
	--color-sage: #c3d0ba;
	--color-parchment: #fdf8f1;
}

@theme inline {
	--color-background: var(--color-stucco);
	--color-foreground: var(--color-iron);
	--color-stucco: var(--color-stucco);
	--color-terracotta: var(--color-terracotta);
	--color-olive: var(--color-olive);
	--color-coffee: var(--color-coffee);
	--color-iron: var(--color-iron);
	--color-brass: var(--color-brass);
	--color-adobe: var(--color-adobe);
	--color-sage: var(--color-sage);
	--color-parchment: var(--color-parchment);
	--font-display: var(--font-display);
	--font-body: var(--font-body);
	--font-ui: var(--font-ui);
}

body {
	background-color: var(--color-stucco);
	background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.55), transparent 55%),
		linear-gradient(135deg, rgba(196, 106, 74, 0.15), transparent 45%);
	color: var(--color-iron);
	font-family: var(--font-body), serif;
	min-height: 100vh;
}

* {
	box-sizing: border-box;
}