@import "tailwindcss";

:root {
	--text-color: var(--color-zinc-950);
	--muted-text-color: var(--color-zinc-800);

	--background-color: var(--color-zinc-100);
	--surface-color: var(--color-zinc-300);
	--popover-color: var(--color-zinc-300);

	--primary-color: var(--color-emerald-600);
	--primary-hover-color: var(--color-emerald-700);
	--secondary-color: var(--color-zinc-400);
	--secondary-popover-color: var(--color-zinc-300);
	--secondary-hover-color: var(--color-zinc-500);

	--danger-color: var(--color-rose-900);

	@media (prefers-color-scheme: dark) {
		--text-color: var(--color-zinc-100);
		--muted-text-color: var(--color-zinc-400);

		--background-color: var(--color-zinc-900);
		--surface-color: var(--color-zinc-800);
		--popover-color: var(--color-zinc-700);

		--secondary-color: var(--color-zinc-700);
		--secondary-popover-color: var(--color-zinc-600);
		--secondary-hover-color: var(--color-zinc-600);
	}
}

@theme inline {
	--color-text: var(--text-color);
	--color-muted-text: var(--muted-text-color);

	--color-background: var(--background-color);
	--color-surface: var(--surface-color);
	--color-popover: var(--popover-color);

	--color-primary: var(--primary-color);
	--color-primary-hover: var(--primary-hover-color);
	--color-secondary: var(--secondary-color);
	--color-secondary-popover: var(--secondary-popover-color);
	--color-secondary-hover: var(--secondary-hover-color);

	--color-danger: var(--danger-color);
}

@keyframes hide {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes slideIn {
	from {
		transform: translateX(calc(100% + var(--viewport-padding)));
	}
	to {
		transform: translateX(0);
	}
}

@keyframes swipeOut {
	from {
		transform: translateX(var(--reka-toast-swipe-end-x));
	}
	to {
		transform: translateX(calc(100% + var(--viewport-padding)));
	}
}

@theme {
	--animate-hide: hide 100ms ease-in;
	--animate-slide-in: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
	--animate-swipe-out: swipeOut 100ms ease-out;
}

body {
	@apply bg-background text-text scrollbar-thumb-popover pointer-events-auto!;
}

@custom-variant floating (&:where([data-design="floating"] *));
@custom-variant pwa (&:where([data-pwa="true"] *));