@import "tailwindcss";
@source '../node_modules/layerchart/dist';

@theme {
	--font-sans: "Inter Variable", "sans-serif";
	--font-mono: "JetBrains Mono Variable", "monospace";

	--animate-avoid: avoid 200ms infinite cubic-bezier(1, 1.65, 0, 1);

	@keyframes avoid {
		0% {
			transform: translateX(-5px);
		}
		50% {
			transform: translateX(5px);
		}
		100% {
			transform: translateX(-5px);
		}
	}

	/* Catppuccin Frappe */
	--color-rosewater: #f2d5cf;
	--color-flamingo: #eebebe;
	--color-pink: #f4b8e4;
	--color-mauve: #ca9ee6;
	--color-red: #e78284;
	--color-maroon: #ea999c;
	--color-peach: #ef9f76;
	--color-yellow: #e5c890;
	--color-green: #a6d189;
	--color-teal: #81c8be;
	--color-sky: #99d1db;
	--color-sapphire: #85c1dc;
	--color-blue: #8caaee;
	--color-lavender: #babbf1;
	--color-text: #c6d0f5;
	--color-subtext1: #b5bfe2;
	--color-subtext0: #a5adce;
	--color-overlay2: #949cbb;
	--color-overlay1: #838ba7;
	--color-overlay0: #737994;
	--color-surface2: #626880;
	--color-surface1: #51576d;
	--color-surface0: #414559;
	--color-base: #303446;
	--color-mantle: #292c3c;
	--color-crust: #232634;

	--color-base-darker: #2b2e3f;
	--color-peach-darker: #695454;
}

body {
	--swup-fade-theme-duration: 0.2s;
}

@utility animate-duration-30s {
	animation-duration: 30s;
}

@utility animate-duration-2s {
	animation-duration: 2s;
}

@utility animate-delay-2s {
	animation-delay: 2s;
}

@utility animate-running {
	animation-play-state: running;
}

@utility animate-pause {
	animation-play-state: paused;
}

section {
	@apply bg-base-darker p-4 rounded-lg relative border border-surface0 shadow-md h-min;
}

section.side {
	@apply w-40 font-mono py-2.5;
}

section:has(legend) {
	@apply rounded-tl-none mb-8;
}

section legend {
	@apply bg-base-darker absolute -left-[1px] bottom-full px-2 py-0.5 text-overlay2 font-medium text-xs rounded-t-md border border-surface0 border-b-0 font-sans;
}

.link {
	@apply text-peach underline decoration-peach hover:bg-peach hover:text-base;
}

[data-tooltip] {
	@apply relative z-10;
}

[data-tooltip]::before {
	@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-peach opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
}

[data-tooltip]::after {
	@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-peach-darker border border-peach rounded-md text-peach font-medium text-sm opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
	@apply opacity-100 scale-100;
}