/* #####################################
	Tokens de design — fonte única de cores, tipografia e espaçamentos.
	Carregado no front-end e dentro do editor de blocos.

	A escala parte do layout do cliente, desenhado para viewport de 1920px, mas
	foi reduzida para a proporção usual de um site institucional: corpo de texto
	em 16px e títulos numa razão próxima de 1.25. Como o container é fixo, a
	tipografia também é fixa no desktop e só reduz abaixo de 1200px.
##################################### */

:root {
	/* Tipografia */
	--font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* font size */
	--size-display: 36px;      /* planos, segmentos, faixa de conversão, blog */
	--size-title: 24px;        /* título de seção */
	--size-subtitle: 18px;     /* subtítulo de seção e títulos internos de texto */
	--size-hero: 22px;         /* chamada do destaque principal */
	--size-lead: 18px;         /* texto de abertura */
	--size-card-label: 17px;   /* legendas dos cartões de diferenciais */
	--size-highlight: 16px;    /* caixas escuras de destaque */
	--size-nav: 15px;          /* menu e divisores de seção */
	--size-button: 14px;
	--size-body: 16px;
	--size-small: 14px;
	--size-label: 12px;

	/* line height */
	--line-display: 1.05;
	--line-title: 1.3;
	--line-hero: 1.44;
	--line-lead: 1.65;
	--line-body: 1.8;
	--line-caps: 2.2;          /* blocos em caixa alta com muito espaçamento */

	/* letter spacing */
	--tracking-label: .16em;
	--tracking-caps: .1em;
	--tracking-title: .04em;
	--tracking-display: .05em;

	/* Cores */
	--color-dark: #231F20;
	--color-yellow: #FABA14;
	--color-yellow-alt: #F8A517;
	--color-orange: #CA7614;
	--color-wine: #7F143D;
	--color-red: #BF1B2C;
	--color-red-bright: #EF2E32;
	--color-green: #80CC28;
	--color-bg: #E9E9E9;
	--color-bg-alt: #BDBCBC;
	--color-white: #FFF;
	--color-text: #3C3A3B;
	--color-muted: #6E6B6C;
	--color-line: #D3D2D2;

	/* Layout */
	--container: 1180px;
	--container-narrow: 1080px;
	--container-wide: 1413px;
	--gutter: 24px;
	--gap: 24px;
	--section-space: 36px;     /* seções vizinhas somam ~72px */
	--radius: 0;
	--skew: -18deg;
	--header-height: 112px;
}

/* Abaixo da largura do container a escala acompanha a tela. */
@media (max-width: 1199px) {
	:root {
		--size-display: 30px;
		--size-title: 22px;
		--size-subtitle: 17px;
		--size-hero: 20px;
		--size-lead: 17px;
		--size-card-label: 16px;
		--size-highlight: 15px;
		--size-nav: 14px;
		--size-button: 13px;
		--size-body: 16px;
		--size-small: 14px;
		--size-label: 12px;
		--section-space: 32px;
		--header-height: 96px;
	}
}

@media (max-width: 767px) {
	:root {
		--size-display: 26px;
		--size-title: 20px;
		--size-subtitle: 16px;
		--size-hero: 18px;
		--size-lead: 16px;
		--size-card-label: 15px;
		--size-highlight: 14px;
		--size-nav: 14px;
		--size-button: 13px;
		--size-body: 15px;
		--size-small: 13px;
		--size-label: 12px;
		--gutter: 18px;
		--section-space: 28px;
		--header-height: 84px;
	}
}