/* ACR. Tokens da identidade visual MICMAS BRANDS 2026.
   Este arquivo e a unica fonte de verdade de cor, tipo e espaco.
   Nao redeclare hex dentro de bloco de pagina. */

:root {
	/* Marca */
	--acr-navy: #0C1238;
	--acr-periwinkle: #789BFF;
	--acr-royal: #4368E0;   /* exclusivo de Lifting */
	--acr-coral: #F56C4E;   /* exclusivo de Handling */
	--acr-offwhite: #FAFAFF;
	--acr-gray-light: #D1D1DC;
	--acr-gray-med: #6B7391;

	/* Texto sobre fundo claro */
	--acr-titulo-claro: #0C1238;
	--acr-corpo-claro: #4A4C5C;
	--acr-secundario-claro: #8A8C9C;
	--acr-rodape-claro: #A1A1AC;

	/* Texto sobre fundo escuro */
	--acr-titulo-escuro: #FAFAFF;
	--acr-corpo-escuro: #DCE0FA;
	--acr-secundario-escuro: #A4ABD5;
	--acr-rodape-escuro: #6A7099;

	/* Superficies */
	--acr-card-escuro: #131A46;
	--acr-filete-escuro: #232B5E;
	--acr-card-claro: #FFFFFF;
	--acr-filete-claro: #E8EEFE;

	/* Acento do contexto.
	   Neutro e o periwinkle, a cor de destaque da marca.
	   Royal so em Lifting, coral so em Handling, via as classes fam- no
	   wrapper da pagina. Nunca escrever royal ou coral direto num
	   componente generico: use sempre --acr-acento. */
	--acr-acento: var(--acr-periwinkle);
	--acr-acento-texto: var(--acr-navy);

	/* Cores semanticas de interface. Nao sao cores de marca: existem para
	   erro e sucesso, onde a paleta nao oferece equivalente e o coral esta
	   reservado ao Handling. */
	--acr-erro: #C4342A;
	--acr-ok: #1F7A4D;

	/* Tipografia */
	--acr-fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--acr-t-xs: 0.8125rem;

	/* Rotulo: caixa alta com tracking. Usado em eyebrow, titulo de coluna
	   do rodape e qualquer etiqueta de secao. Escala unica no site inteiro. */
	--acr-rotulo: 0.6875rem;
	--acr-rotulo-track: 0.18em;

	--acr-t-sm: 0.9375rem;
	--acr-t-base: 1.0625rem;
	--acr-t-lg: 1.25rem;
	--acr-t-xl: 1.5rem;
	--acr-t-2xl: 2rem;
	--acr-t-3xl: 2.75rem;
	--acr-t-4xl: 3.5rem;

	/* Espaco */
	--acr-wrap: 1240px;
	--acr-gutter: 24px;
	--acr-s1: 8px;
	--acr-s2: 16px;
	--acr-s3: 24px;
	--acr-s4: 40px;
	--acr-s5: 64px;
	--acr-s6: 96px;

	/* Forma */
	--acr-radius: 16px;
	--acr-radius-sm: 10px;
	--acr-topbar-h: 40px;
	/* Altura das caixas pequenas: chips de regiao, icones sociais.
	   Fica nos tokens porque header e rodape usam os mesmos. */
	--acr-chip-h: 24px;
	--acr-header-h: 76px;
	/* Altura somada da topbar mais a barra principal. Usada para ancoras
	   e para qualquer elemento sticky abaixo do header. */
	--acr-header-total: calc(var(--acr-topbar-h) + var(--acr-header-h));
	--acr-transicao: 180ms ease;
}

/* As duas familias redefinem o acento. Coral nunca aparece fora de
   Handling, royal nunca aparece fora de Lifting. */
.fam-lifting {
	--acr-acento: var(--acr-royal);
	--acr-acento-texto: #FFFFFF;
}

.fam-handling {
	--acr-acento: var(--acr-coral);
	--acr-acento-texto: var(--acr-navy);
}