/**
 * Escala tipografica unica do site.
 * Carregada depois do style.css (Tailwind). Substitui os tamanhos soltos das paginas.
 *
 * Escala: h1 40px | h2 30px | h3 22px | corpo 18px | secundario 14px | menu e botoes 16px
 * Familia unica: pill_gothic (a marca). Trocar aqui os tokens muda o site inteiro.
 */

:root {
	--fs-h1: 40px;
	--lh-h1: 45px;
	--fs-h2: 30px;
	--lh-h2: 36px;
	--fs-h3: 22px;
	--lh-h3: 28px;
	--fs-body: 18px;
	--lh-body: 27px;
	--fs-small: 14px;
	--lh-small: 20px;
	--fs-ui: 16px;
	--lh-ui: 24px;
	--font-brand: 'pill_gothic_300mgregular', 'Helvetica Neue', Arial, sans-serif;
}

/*
 * Uma familia so, em dois cortes reais (sem negrito falso):
 *   texto comum  -> pill_gothic_300mgregular
 *   titulos e destaques -> pill_gothic_300mgbold
 * Substitui as ~8 variacoes (600mg, 300mglight, semibold...) que apareciam em cada bloco.
 */
:root {
	--font-regular: 'pill_gothic_300mgregular', 'Helvetica Neue', Arial, sans-serif;
	--font-bold: 'pill_gothic_300mgbold', 'pill_gothic_300mgregular', Arial, sans-serif;
}

/* 1. base: tudo regular */
body,
body * {
	font-family: var(--font-regular) !important;
	font-weight: 400 !important;
}

/* 2. classes de fonte do Tailwind (font-nunito, font-pill600rg...) vencem a regra de base */
body [class*="font-"] {
	font-family: var(--font-regular) !important;
	font-weight: 400 !important;
}

/* 3. negrito: titulos, destaques e classes de negrito (tambem vencem as classes de familia) */
body :is(h1, h2, h3, h4, h5, h6),
body strong,
body b,
body [class*="font-bold"],
body [class*="font-semibold"],
body [class*="font-extrabold"],
body [class*="font-black"],
body [class*="font-pill600bd"],
body [class*="font-pill300bd"],
body [class*="font-pill300semibd"],
body [class*="font-nunito"],
body :is(h1, h2, h3, h4, h5, h6)[class] {
	font-family: var(--font-bold) !important;
	font-weight: 400 !important;
}

h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-h1) !important; }

/* destaques dentro de titulos (ex.: "Experimento" no h2) seguem o tamanho do titulo */
:is(h1, h2, h3) span:not(.sr-only) {
	font-size: inherit !important;
	line-height: inherit !important;
}
h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-h2) !important; }
h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }

p,
li,
span:not(.sr-only),
label {
	font-size: var(--fs-body) !important;
	line-height: var(--lh-body) !important;
}

/* menu principal: altura de linha fixa (o markup tinha 5px) */
#menu a.menu,
#menu a.menu * {
	font-size: var(--fs-ui) !important;
	line-height: var(--lh-ui) !important;
}

button,
input,
select,
textarea {
	font-family: var(--font-brand);
}

a[class*="border-"],
button {
	font-size: var(--fs-ui) !important;
	line-height: var(--lh-ui) !important;
}

/* depoimentos (carrossel): texto no tamanho de interface, nao no corpo */
.slider-item,
.slider-item p,
.slider-item div {
	font-size: var(--fs-ui) !important;
	line-height: var(--lh-ui) !important;
}

/* textos pequenos de apoio (legendas, buscas, rodape) */
small,
.text-xs,
.text-sm {
	font-size: var(--fs-small) !important;
	line-height: var(--lh-small) !important;
}

/* titulos do conteudo das paginas em roxo da marca (fora de banners e blocos escuros) */
main :is(h2, h3):not([class*="text-white"]):not([class*="text-black"]):not(.slider-container *):not(.bg-purple *):not(.bg-black *):not([class*="bg-purple"] *):not(dialog *):not(.ebook-container *) {
	color: #812990;
}