initiative/apps/web/src/index.css

@import "tailwindcss";

@theme {
	--color-background: #0f172a;
	--color-foreground: #e2e8f0;
	--color-muted: #64748b;
	--color-muted-foreground: #94a3b8;
	--color-card: #1e293b;
	--color-card-foreground: #e2e8f0;
	--color-border: #334155;
	--color-input: #334155;
	--color-primary: #3b82f6;
	--color-primary-foreground: #ffffff;
	--color-accent: #3b82f6;
	--color-destructive: #ef4444;
	--color-hover-neutral: var(--color-primary);
	--color-hover-action: var(--color-primary);
	--color-hover-destructive: var(--color-destructive);
	--color-hover-neutral-bg: oklch(0.623 0.214 259 / 0.15);
	--color-hover-action-bg: var(--color-muted);
	--color-hover-destructive-bg: transparent;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

@keyframes concentration-shake {
	0% {
		translate: 0;
	}
	20% {
		translate: -3px;
	}
	40% {
		translate: 3px;
	}
	60% {
		translate: -2px;
	}
	80% {
		translate: 1px;
	}
	100% {
		translate: 0;
	}
}

@keyframes concentration-glow {
	0% {
		box-shadow: 0 0 4px 2px #c084fc;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@keyframes slide-in-right {
	from {
		translate: 100%;
	}
	to {
		translate: 0;
	}
}

@utility animate-slide-in-right {
	animation: slide-in-right 200ms ease-out;
}

@keyframes confirm-pulse {
	0% {
		scale: 1;
	}
	50% {
		scale: 1.15;
	}
	100% {
		scale: 1;
	}
}

@keyframes settle-to-bottom {
	from {
		transform: translateY(-40vh);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@utility animate-settle-to-bottom {
	animation: settle-to-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes rise-to-center {
	from {
		transform: translateY(40vh);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@utility animate-rise-to-center {
	animation: rise-to-center 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes slide-down-in {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@utility animate-slide-down-in {
	animation: slide-down-in 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes slide-up-out {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}

@utility animate-slide-up-out {
	animation: slide-up-out 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@custom-variant pointer-coarse (@media (pointer: coarse));

@utility animate-confirm-pulse {
	animation: confirm-pulse 300ms ease-out;
}

@utility transition-slide-panel {
	transition: translate 200ms ease-out;
}

@utility writing-vertical-rl {
	writing-mode: vertical-rl;
}

@utility animate-concentration-pulse {
	animation:
		concentration-shake 450ms ease-out,
		concentration-glow 1200ms ease-out;
}

* {
	scrollbar-color: var(--color-border) transparent;
	scrollbar-width: thin;
}

body {
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-sans);
}