/* ==========================================================================
   Objecta LAB — tokens do design system
   ========================================================================== */

/* Fontes auto-hospedadas (subset latin, cobre o português). */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin.woff2") format("woff2");
	font-weight: 500 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Cores */
	--cor-creme: #ede6da;
	--cor-papel: #fdfbf6;
	--cor-areia: #d7c7b8;
	--cor-cafe: #2a1e14;
	--cor-cafe-profundo: #1e130c;
	--cor-texto-2: #5a4a3d;
	--cor-terracota: #b0442c;
	--cor-terracota-escuro: #8f3320;
	--cor-terracota-claro: #f3ddd5;
	--cor-terracota-texto: #7a2e1c;
	--cor-salvia: #62837c;          /* ícones, fundos e detalhes (não usar como texto pequeno) */
	--cor-salvia-texto: #3e5751;    /* sálvia para texto sobre fundos claros (AA) */
	--cor-salvia-sobre-cafe: #9db8b1; /* rótulos sobre fundo café (AA) */
	--cor-salvia-claro: #dde6e2;
	--cor-destaque-cafe: #d9785e;
	--cor-whatsapp: #25d366;

	/* Tipografia */
	--fonte-titulo: "Fraunces", Georgia, serif;
	--fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* 34→52px, 28→38px, 20→22px e 16→17px entre 360 e 1180px */
	--fs-h1: clamp(2.125rem, 1.631rem + 2.195vw, 3.25rem);
	--fs-h2: clamp(1.75rem, 1.476rem + 1.22vw, 2.375rem);
	--fs-h3: clamp(1.25rem, 1.195rem + 0.244vw, 1.375rem);
	--fs-corpo: clamp(1rem, 0.9725rem + 0.122vw, 1.0625rem);
	--fs-pequeno: 0.875rem;
	--fs-sobretitulo: 0.75rem;

	/* Espaçamento */
	--esp-1: 4px;
	--esp-2: 8px;
	--esp-3: 12px;
	--esp-4: 16px;
	--esp-5: 24px;
	--esp-6: 32px;
	--esp-7: 48px;
	--esp-8: 64px;
	--esp-9: 96px;

	/* Layout */
	--container: 1180px;
	--container-texto: 760px;
	--gutter: 20px;
	--secao-y: var(--esp-8);
	--altura-cabecalho: 68px;

	/* Forma */
	--raio-botao: 6px;
	--raio-cartao: 10px;
	--raio-selo: 20px;
	--borda: 1px solid var(--cor-areia);
	--sombra-hover: 0 6px 20px rgb(42 30 20 / 0.08);

	/* Movimento */
	--transicao: 160ms ease-out;
}

@media (min-width: 900px) {
	:root {
		--gutter: 32px;
		--secao-y: var(--esp-9);
		--altura-cabecalho: 84px;
	}
}