@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 210 18% 97%;
		--foreground: 220 20% 11%;
		--card: 0 0% 100%;
		--card-foreground: 220 18% 12%;
		--popover: 0 0% 100%;
		--popover-foreground: 220 18% 12%;
		--primary: 164 64% 27%;
		--primary-foreground: 0 0% 100%;
		--secondary: 210 16% 93%;
		--secondary-foreground: 220 16% 18%;
		--muted: 210 16% 94%;
		--muted-foreground: 215 12% 43%;
		--accent: 38 92% 52%;
		--accent-foreground: 30 30% 12%;
		--destructive: 0 72% 48%;
		--destructive-foreground: 0 0% 100%;
		--border: 214 16% 86%;
		--input: 214 16% 78%;
		--ring: 164 64% 27%;
		--surface-1: 210 18% 97%;
		--surface-2: 0 0% 100%;
		--surface-3: 210 17% 94%;
		--surface-4: 214 16% 86%;
		--surface-5: 214 15% 72%;
		--chart-green: #17845f;
		--chart-gold: #d19213;
		--chart-coral: #d85d4a;
		--chart-cyan: #278ba8;
	}

	.dark {
		--background: 220 16% 8%;
		--foreground: 210 16% 92%;
		--card: 220 15% 12%;
		--card-foreground: 210 16% 92%;
		--popover: 220 16% 12%;
		--popover-foreground: 210 16% 92%;
		--primary: 160 54% 48%;
		--primary-foreground: 220 18% 8%;
		--secondary: 218 14% 17%;
		--secondary-foreground: 210 16% 90%;
		--muted: 218 14% 16%;
		--muted-foreground: 215 12% 64%;
		--accent: 40 88% 56%;
		--accent-foreground: 30 32% 10%;
		--destructive: 0 62% 51%;
		--destructive-foreground: 0 0% 100%;
		--border: 218 13% 23%;
		--input: 218 13% 27%;
		--ring: 160 54% 48%;
		--surface-1: 220 16% 8%;
		--surface-2: 220 15% 11%;
		--surface-3: 218 14% 15%;
		--surface-4: 218 13% 23%;
		--surface-5: 216 12% 34%;
		--chart-green: #40c995;
		--chart-gold: #e6ad3e;
		--chart-coral: #ef7b68;
		--chart-cyan: #52b6d0;
	}

	* {
		@apply border-border;
	}

	html,
	body,
	#__nuxt {
		@apply min-h-full;
	}

	body {
		@apply m-0 overflow-x-hidden bg-surface-1 font-sans text-foreground antialiased;
		letter-spacing: 0;
	}

	button,
	input,
	select {
		letter-spacing: 0;
	}
}

@layer utilities {
	.tabular-nums {
		font-variant-numeric: tabular-nums;
	}
}

.dashboard-page-enter-active,
.dashboard-page-leave-active {
	transition:
		opacity 160ms ease,
		transform 160ms ease;
}

.dashboard-page-enter-from {
	opacity: 0;
	transform: translateY(4px);
}

.dashboard-page-leave-to {
	opacity: 0;
	transform: translateY(-2px);
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 160ms ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.sheet-overlay[data-state='open'] {
	animation: overlay-in 180ms ease-out;
}

.sheet-panel[data-state='open'] {
	animation: sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes overlay-in {
	from {
		opacity: 0;
	}
}

@keyframes sheet-in {
	from {
		transform: translateX(20px);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dashboard-page-enter-active,
	.dashboard-page-leave-active,
	.sheet-overlay[data-state='open'],
	.sheet-panel[data-state='open'] {
		animation: none;
		transition: none;
	}
}

.unovis-xy-container text {
	fill: hsl(var(--muted-foreground));
	font-size: 11px;
}

.unovis-xy-container .axis line,
.unovis-xy-container .axis path {
	stroke: hsl(var(--surface-4));
}