@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Triodion&family=Young+Serif&display=swap');
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--font-triodion: "PT Serif", serif;
}

html, body {
	background: oklch(89.126% 0.06134 298.626);
	transition: background 0.3s ease;
}

@media (prefers-color-scheme: dark) {
	html:not(.light), body:not(.light) {
		background: oklch(18% 0.03 298.626);
	}
}

html.dark, html.dark body {
	background: oklch(18% 0.03 298.626);
}

html.light, html.light body {
	background: oklch(89.126% 0.06134 298.626);
}

.big-text {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgb(107 114 128);
	font-weight: 700;
}

@media (prefers-color-scheme: dark) {
	html:not(.light) .big-text {
		color: rgb(156 163 175);
	}
}

html.dark .big-text {
	color: rgb(156 163 175);
}

html.light .big-text {
	color: rgb(107 114 128);
}

/* Page load animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out both;
}

.animate-delay-200 {
	animation-delay: 0.2s;
}

.animate-delay-400 {
	animation-delay: 0.4s;
}

.animate-delay-600 {
	animation-delay: 0.6s;
}

.animate-delay-800 {
	animation-delay: 0.8s;
}