/**
 * Tokens do tema Valemam
 *
 * Este é o único arquivo que o design precisa tocar. Todo o resto do tema lê
 * daqui — nenhum valor de cor, tamanho ou espaçamento é escrito direto em
 * componente. Trocar a direção visual do site é trocar estes valores.
 *
 * Direção aprovada em 14/10/2026: catálogo industrial em papel claro.
 * Fio de 1px como único separador, raio zero, sem sombra, acento variável
 * por linha de produto, rótulo em monoespaçada, respiro largo entre seções.
 *
 * Cores institucionais conforme o manual "DOs e DONTs Valemam" e o PDF
 * "Logo Valemam": vermelho #ee162d (CMYK 0,100,100,0) e grafite #222328.
 *
 * Projeto GDS # 2612G:2026
 */

:root {

	/* ---------------------------------------------------------------
	 * Marca
	 * ------------------------------------------------------------- */

	--vlm-vermelho: #ee162d;
	--vlm-grafite: #222328;

	/* ---------------------------------------------------------------
	 * Linhas de produto — valores do manual, intocados
	 *
	 * O manual determina usar a cor própria de cada linha quando se fala
	 * dela. Estes são os valores de identidade: valem para preenchimento,
	 * amostra de cor e área gráfica, onde contraste de texto não se aplica.
	 * ------------------------------------------------------------- */

	--linha-frog-1: #1e5b45;
	--linha-frog-2: #573059;
	--linha-frog-quadra-1: #82a391;
	--linha-frog-quadra-2: #99899b;
	--linha-tuca-1: #b1d355;
	--linha-tuca-2: #3799b1;
	--linha-tuca-3: #ea8936;
	--linha-ema-1: #004a8a;
	--linha-ema-2: #c03733;
	--linha-apis-1: #fcb940;
	--linha-apis-2: #792145;
	--linha-zigus-1: #c11c76;
	--linha-zigus-2: #bfd730;
	--linha-umi-1: #4fb4e7;
	--linha-umi-2: #6264ab;

	/* ---------------------------------------------------------------
	 * Variantes legíveis
	 *
	 * ATENÇÃO — isto não é liberdade criativa, é correção de acessibilidade.
	 *
	 * Medido contra o papel #fbfbfa, quatro das sete cores de linha ficam
	 * abaixo do mínimo de 4,5:1 exigido pela WCAG para texto pequeno:
	 *
	 *   Frog Quadra  #82a391 = 2,67:1
	 *   Tuca         #3799b1 = 3,19:1
	 *   Apis         #fcb940 = 1,67:1
	 *   Umi          #4fb4e7 = 2,25:1
	 *   (o vermelho institucional #ee162d = 4,24:1, também abaixo)
	 *
	 * Usar a cor do manual em rótulo de 11px deixaria o texto ilegível para
	 * quem enxerga pouco — e reprovaria em qualquer auditoria. A saída não é
	 * mudar a marca: é manter a cor de identidade acima e derivar aqui uma
	 * variante só para TEXTO PEQUENO, com o mesmo matiz e luminosidade
	 * ajustada até bater 4,5:1. A cor da marca continua aparecendo em cheio
	 * nas áreas onde ela é identidade.
	 *
	 * No fundo escuro o problema se inverte: os tons fechados somem. Por isso
	 * cada linha tem um par — um valor para papel claro, outro para escuro.
	 *
	 * Valores conferidos no cálculo de contraste, não no olho.
	 * ------------------------------------------------------------- */

	--txt-frog-claro: #1e5b45;         /* 7,69:1 — o do manual já passa */
	--txt-frog-escuro: #30916e;        /* 4,70:1 */
	--txt-frog-quadra-claro: #5a7a68;  /* 4,59:1 */
	--txt-frog-quadra-escuro: #82a391; /* 6,60:1 — o do manual já passa */
	--txt-tuca-claro: #2c7b8e;         /* 4,68:1 */
	--txt-tuca-escuro: #3799b1;        /* 5,52:1 */
	--txt-ema-claro: #004a8a;          /* 8,64:1 */
	--txt-ema-escuro: #007eeb;         /* 4,51:1 */
	--txt-apis-claro: #a06803;         /* 4,53:1 */
	--txt-apis-escuro: #fcb940;        /* 10,57:1 */
	--txt-zigus-claro: #c11c76;        /* 5,49:1 */
	--txt-zigus-escuro: #e23895;       /* 4,55:1 */
	--txt-umi-claro: #1778aa;          /* 4,71:1 */
	--txt-umi-escuro: #4fb4e7;         /* 7,84:1 */
	--txt-vermelho-claro: #e41127;     /* 4,60:1 */
	--txt-vermelho-escuro: #f03347;    /* 4,58:1 */

	/* ---------------------------------------------------------------
	 * Acento da página
	 *
	 * --acento        preenchimento, amostra, área gráfica (cor da marca)
	 * --acento-texto  rótulo, link e qualquer texto pequeno (variante legível)
	 *
	 * Sobrescritos pela classe de linha, aplicada no body pela ficha.
	 * ------------------------------------------------------------- */

	--acento: var(--vlm-vermelho);
	--acento-2: var(--vlm-grafite);
	--acento-texto: var(--txt-vermelho-claro);
	--sobre-acento: #ffffff;

	/* ---------------------------------------------------------------
	 * Superfícies e texto — papel claro
	 * ------------------------------------------------------------- */

	--fundo: #fbfbfa;        /* papel: quase branco, nunca branco puro */
	--fundo-2: #f3f3f1;
	--fundo-3: #ebebea;
	--superficie: #ffffff;   /* placa: onde a foto de produto se apoia */

	--texto: #222328;
	--texto-2: #4d4f57;
	--texto-3: #80828a;
	--texto-inverso: #ffffff;

	--linha-divisoria: rgba(34, 35, 40, 0.08);        /* o fio padrão */
	--linha-divisoria-forte: rgba(34, 35, 40, 0.14);
	--grade: rgba(34, 35, 40, 0.05);                  /* grade de prancha */

	/* Banda invertida: a seção de obras vira o contrário do resto. */
	--contra-fundo: #17181b;
	--contra-texto: #f2f2f0;
	--contra-mudo: #8b8d94;

	color-scheme: light;

	/* ---------------------------------------------------------------
	 * Semântica
	 * ------------------------------------------------------------- */

	--ok: #0a7a0a;
	--atencao: #8a5200;
	--erro: #c62828;

	/* ---------------------------------------------------------------
	 * Tipografia
	 *
	 * Três papéis, não mais:
	 *   título  Archivo — grotesca industrial, fundição latino-americana
	 *   texto   Archivo — a mesma família, para o site ter uma voz só
	 *   dado    IBM Plex Mono — rótulo, código VLQ, cabeçalho de tabela
	 *
	 * Os fallbacks garantem que o site nunca fique sem tipo legível se o
	 * Google Fonts cair.
	 * ------------------------------------------------------------- */

	--fonte-titulo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fonte-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fonte-dado: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* Escala tipográfica fluida. Cresce com a tela sem salto. */
	--t-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
	--t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.925rem);
	--t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--t-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--t-lg: clamp(1.375rem, 1.28rem + 0.48vw, 1.75rem);
	--t-xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
	--t-2xl: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
	--t-3xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.75rem);

	--peso-normal: 400;
	--peso-medio: 500;
	--peso-forte: 600;
	--peso-maximo: 700;

	--altura-apertada: 1.1;
	--altura-titulo: 1.2;
	--altura-texto: 1.6;
	--altura-solta: 1.75;

	--espaco-letra-titulo: -0.025em;
	--espaco-letra-rotulo: 0.14em;

	/* ---------------------------------------------------------------
	 * Espaçamento
	 *
	 * Escala de base 4px. Os espaços de seção são fluidos para que a
	 * página respire igual no celular e no monitor grande.
	 * ------------------------------------------------------------- */

	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 2.5rem;
	--e-8: 3rem;
	--e-9: 4rem;
	--e-10: 5rem;

	--secao-y: clamp(3.75rem, 2.5rem + 5vw, 7rem);
	--bloco-y: clamp(2rem, 1.5rem + 2.5vw, 4rem);

	/* ---------------------------------------------------------------
	 * Medidas de página
	 * ------------------------------------------------------------- */

	--largura-maxima: 1240px;
	--largura-texto: 62ch;
	--largura-estreita: 760px;
	--gutter: clamp(1rem, 0.6rem + 1.8vw, 2.25rem);

	/* ---------------------------------------------------------------
	 * Forma
	 *
	 * Raio zero e sombra zero são decisão de direção, não omissão.
	 * A profundidade vem do fio de 1px e do contraste entre papel e placa.
	 * Os valores de sombra ficam como zero para que nenhum componente
	 * antigo reintroduza elevação sem passar por aqui.
	 * ------------------------------------------------------------- */

	--raio-0: 0;
	--raio-1: 0;
	--raio-2: 0;
	--raio-3: 0;
	--raio-pilula: 999px;   /* só para o seletor de idioma e amostras */

	--borda-fina: 1px;
	--borda-media: 2px;
	--borda-forte: 3px;

	--sombra-1: none;
	--sombra-2: none;
	--sombra-3: none;

	/* O fio interno: é assim que placa e cartão se separam do papel. */
	--fio-interno: inset 0 0 0 1px var(--linha-divisoria);

	/* ---------------------------------------------------------------
	 * Movimento
	 * ------------------------------------------------------------- */

	--transicao-rapida: 120ms ease;
	--transicao: 220ms cubic-bezier(0.2, 0, 0.2, 1);
	--transicao-lenta: 420ms cubic-bezier(0.2, 0, 0.2, 1);

	/* Camadas */
	--z-base: 1;
	--z-sticky: 50;
	--z-cabecalho: 100;
	--z-overlay: 500;
	--z-modal: 1000;
}

/* -------------------------------------------------------------------
 * Modo escuro
 *
 * Duas portas para o mesmo lugar: a preferência do sistema operacional e
 * a escolha explícita no botão. A regra do sistema é anulada quando a
 * pessoa escolheu claro à mão — por isso o :not([data-theme="light"]).
 *
 * NOTA PARA A VALEMAM: o modo escuro exige variantes clareadas das cores
 * de linha, que não existem no manual da marca. Os valores estão no bloco
 * --txt-*-escuro acima e precisam de aprovação antes do site ir ao ar.
 * ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--fundo: #141518;
		--fundo-2: #1b1c20;
		--fundo-3: #212228;
		--superficie: #1b1c20;

		--texto: #f1f1ef;
		--texto-2: #bdbec3;
		--texto-3: #8b8d95;

		--linha-divisoria: rgba(241, 241, 239, 0.09);
		--linha-divisoria-forte: rgba(241, 241, 239, 0.18);
		--grade: rgba(241, 241, 239, 0.05);

		--contra-fundo: #f1f1ef;
		--contra-texto: #222328;
		--contra-mudo: #6c6e76;

		--acento-texto: var(--txt-vermelho-escuro);

		--ok: #4caf50;
		--atencao: #e0a33c;
		--erro: #ef5350;

		color-scheme: dark;
	}
}

:root[data-theme='dark'] {
	--fundo: #141518;
	--fundo-2: #1b1c20;
	--fundo-3: #212228;
	--superficie: #1b1c20;

	--texto: #f1f1ef;
	--texto-2: #bdbec3;
	--texto-3: #8b8d95;

	--linha-divisoria: rgba(241, 241, 239, 0.09);
	--linha-divisoria-forte: rgba(241, 241, 239, 0.18);
	--grade: rgba(241, 241, 239, 0.05);

	--contra-fundo: #f1f1ef;
	--contra-texto: #222328;
	--contra-mudo: #6c6e76;

	--acento-texto: var(--txt-vermelho-escuro);

	--ok: #4caf50;
	--atencao: #e0a33c;
	--erro: #ef5350;

	color-scheme: dark;
}

/* -------------------------------------------------------------------
 * Acento por linha de produto
 *
 * A classe entra no body da ficha de solução, a partir do slug.
 * Cada linha define as três coisas: a cor de preenchimento, a cor de
 * apoio e a variante legível para texto pequeno.
 * ---------------------------------------------------------------- */

.linha-frog {
	--acento: var(--linha-frog-1);
	--acento-2: var(--linha-frog-2);
	--acento-texto: var(--txt-frog-claro);
}
.linha-frog-quadra {
	--acento: var(--linha-frog-quadra-1);
	--acento-2: var(--linha-frog-quadra-2);
	--acento-texto: var(--txt-frog-quadra-claro);
}
.linha-tuca {
	--acento: var(--linha-tuca-2);
	--acento-2: var(--linha-tuca-3);
	--acento-texto: var(--txt-tuca-claro);
}
.linha-ema {
	--acento: var(--linha-ema-1);
	--acento-2: var(--linha-ema-2);
	--acento-texto: var(--txt-ema-claro);
}
.linha-apis {
	--acento: var(--linha-apis-1);
	--acento-2: var(--linha-apis-2);
	--acento-texto: var(--txt-apis-claro);
}
.linha-zigus {
	--acento: var(--linha-zigus-1);
	--acento-2: var(--linha-zigus-2);
	--acento-texto: var(--txt-zigus-claro);
}
.linha-umi {
	--acento: var(--linha-umi-1);
	--acento-2: var(--linha-umi-2);
	--acento-texto: var(--txt-umi-claro);
}

/* A variante legível troca no escuro; a cor de identidade não. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .linha-frog        { --acento-texto: var(--txt-frog-escuro); }
	:root:not([data-theme='light']) .linha-frog-quadra { --acento-texto: var(--txt-frog-quadra-escuro); }
	:root:not([data-theme='light']) .linha-tuca        { --acento-texto: var(--txt-tuca-escuro); }
	:root:not([data-theme='light']) .linha-ema         { --acento-texto: var(--txt-ema-escuro); }
	:root:not([data-theme='light']) .linha-apis        { --acento-texto: var(--txt-apis-escuro); }
	:root:not([data-theme='light']) .linha-zigus       { --acento-texto: var(--txt-zigus-escuro); }
	:root:not([data-theme='light']) .linha-umi         { --acento-texto: var(--txt-umi-escuro); }
}

:root[data-theme='dark'] .linha-frog        { --acento-texto: var(--txt-frog-escuro); }
:root[data-theme='dark'] .linha-frog-quadra { --acento-texto: var(--txt-frog-quadra-escuro); }
:root[data-theme='dark'] .linha-tuca        { --acento-texto: var(--txt-tuca-escuro); }
:root[data-theme='dark'] .linha-ema         { --acento-texto: var(--txt-ema-escuro); }
:root[data-theme='dark'] .linha-apis        { --acento-texto: var(--txt-apis-escuro); }
:root[data-theme='dark'] .linha-zigus       { --acento-texto: var(--txt-zigus-escuro); }
:root[data-theme='dark'] .linha-umi         { --acento-texto: var(--txt-umi-escuro); }

/* -------------------------------------------------------------------
 * Movimento reduzido
 *
 * Respeita quem pediu menos animação no sistema. Não é opcional.
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--transicao-rapida: 1ms;
		--transicao: 1ms;
		--transicao-lenta: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}