/* ── Design System ───────────────────────────────────────────
   CSS custom properties, global reset, and shared animations.
   Every other stylesheet depends on the variables defined here.
   ─────────────────────────────────────────────────────────── */

:root {
	--blue-50: #f2f7ff;
	--blue-100: #e6f0ff;
	--blue-200: #cfe1ff;
	--blue-300: #a6c6ff;
	--blue-500: #3b82f6;
	--blue-600: #2563eb;
	--blue-700: #1d4ed8;
	--blue-900: #1e3a8a;
	--green-500: #22c55e;
	--green-600: #16a34a;
	--red-500: #ef4444;
	--ink: #0f172a;
	--ink-soft: #374151;
	--card: #ffffff;
	--surface: #faf9f7;
	--border: rgba(37, 99, 235, 0.16);
	--shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
	--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07);
	--shadow-md: 0 6px 24px rgba(15, 23, 42, 0.10);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

@keyframes card-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes pp-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
	50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.04); }
}