@import 'tailwindcss';

:root {
	/* Base */
	--page-bg: #eef3ff;
	--surface-muted: #f2f5fb;

	/* Text */
	--text-strong: #0f1f3a;
	--text: #2b3a55;
	--text-muted: #60708a;

	/* Brand accents (inspirado nas logomarcas anexadas) */
	--accent-blue: #2f6fd4;
	--accent-yellow: #f4d01d;
	--accent-green: #2bb34a;
	--accent-red: #e0382f;

	/* UI */
	--link: #2f6fd4;
	--focus-ring: #2f6fd4;
}

html,
body {
	height: 100%;
}

body {
	color: var(--text);
	background:
		radial-gradient(1000px 500px at 10% 0%, rgba(31, 74, 134, 0.14), transparent 60%),
		radial-gradient(900px 480px at 90% 10%, rgba(244, 208, 29, 0.16), transparent 55%),
		radial-gradient(800px 420px at 30% 100%, rgba(43, 179, 74, 0.12), transparent 55%),
		var(--page-bg);
}

a {
	color: inherit;
}

/* Pequenos utilitários locais (sem depender de plugins do Tailwind) */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 0.5rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 1px 0 rgba(15, 31, 58, 0.04);
	border: 1px solid rgba(15, 31, 58, 0.06);
}

::selection {
	background: rgba(31, 74, 134, 0.2);
}
