/* ==========================================================================
   EDMO JUNIOR — tokens de marca
   Direção 1c "Dois Apoios". Fonte da verdade: MASTER.md §11.2.
   Este arquivo só declara custom properties. Nenhum seletor de componente,
   nenhuma regra de layout. Carrega SEMPRE antes de main.css.
   ========================================================================== */

/* ==========================================================================
   REGRA DE COR — NÃO NEGOCIÁVEL (MASTER.md §11.2)

   --ej-coral (#FF6A3D) NUNCA PODE FICAR ATRÁS DE TEXTO.
   CREME SOBRE CORAL DÁ 2,67:1 E REPROVA NA WCAG 2.2.
   CORAL É GRAFISMO: FILETE, ÍCONE DECORATIVO, REALCE, FORMA, SUBLINHADO.

   TODO BOTÃO, TODO BADGE, TODO LINK DE TEXTO E TODA SUPERFÍCIE COM TEXTO
   EM CIMA USA --ej-coral-acao (#B33A14), QUE DÁ 5,57:1 COM CREME.

   SE VOCÊ ESTÁ ESCREVENDO background: var(--ej-coral) E EXISTE TEXTO
   DENTRO DO ELEMENTO, A REGRA ESTÁ ERRADA. TROQUE POR --ej-coral-acao.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------------
	   Paleta crua — hexadecimais aprovados em MASTER.md §11.2.
	   Não adicionar cor nova aqui sem ADR.
	   --------------------------------------------------------------- */
	--ej-petroleo: #0E3A4A;   /* base e texto */
	--ej-coral: #FF6A3D;      /* GRAFISMO APENAS — nunca atrás de texto */
	--ej-coral-acao: #B33A14; /* botão, badge, link, superfície com texto */
	--ej-creme: #FFF6EE;      /* fundo */
	--ej-menta: #CFE6DE;      /* bloco leve — nunca texto, nunca ícone sozinho */
	--ej-verde-ok: #1E6B63;   /* estado positivo */

	/* Derivadas. Contraste calculado sobre --ej-creme, recalcular se o hex mudar. */
	--ej-petroleo-80: #3E606B; /* texto de apoio — 6,35:1 sobre creme */
	--ej-petroleo-45: #7A8F94; /* borda de controle — 3,19:1 sobre creme */
	--ej-linha: #E8DCD1;       /* filete decorativo, divisória, borda de card */

	/* ---------------------------------------------------------------
	   Tokens semânticos. Componentes consomem SÓ estes.
	   O tema escuro redefine apenas este bloco, nunca a paleta crua.
	   --------------------------------------------------------------- */
	--ej-fundo: var(--ej-creme);
	--ej-fundo-bloco: var(--ej-menta);           /* bloco leve, sem texto longo */
	--ej-superficie: #FFFFFF;                    /* card sobre o fundo */
	--ej-superficie-forte: var(--ej-petroleo);   /* seção invertida */
	--ej-texto: var(--ej-petroleo);              /* 11,42:1 sobre creme */
	--ej-texto-apoio: var(--ej-petroleo-80);

	/* "Invertido" = oposto do texto do corpo. Serve para texto sobre superfície
	   de AÇÃO, que troca de claro para escuro junto com o tema. NÃO serve para a
	   seção forte: ela é escura nos DOIS temas, então o texto dela é sempre
	   claro. Confundir os dois deixou o rodapé em 1,41:1 no escuro — ver
	   --ej-forte-texto. */
	--ej-texto-invertido: var(--ej-creme);

	/* Texto sobre --ej-superficie-forte. Claro nos dois temas, de propósito:
	   11,42:1 sobre o petróleo do tema claro, 16,07:1 sobre o #071E27 do escuro.
	   Ambos calculados, não estimados. */
	--ej-forte-texto: var(--ej-creme);

	/* Texto de APOIO sobre a superfície forte. Sem isto, `.ej-steps__texto`
	   herdava --ej-texto-apoio, que é petróleo a 80% — escuro sobre escuro,
	   medido em 1,79:1 no tema CLARO, no site no ar. 9,30:1 sobre o petróleo e
	   13,09:1 sobre o #071E27. */
	--ej-forte-texto-apoio: var(--ej-menta);

	--ej-borda: var(--ej-linha);
	/* Borda de controle. Medido contra o que de fato fica ao lado dela:
	   3,40:1 sobre o preenchimento do input (--ej-superficie) e 3,18:1 sobre a
	   página (--ej-fundo). Mínimo de 3:1 do WCAG 1.4.11 atendido nos dois.
	   ATENÇÃO: sobre --ej-fundo-bloco dá 2,59:1 e REPROVA. Nenhum formulário
	   está nessa superfície hoje; se algum for, trocar a borda ali. */
	--ej-borda-controle: var(--ej-petroleo-45);  /* input, select, textarea */
	--ej-grafismo: var(--ej-coral);              /* SEM TEXTO EM CIMA */

	/* Ação: superfícies que carregam texto. */
	--ej-acao-fundo: var(--ej-coral-acao);
	--ej-acao-texto: var(--ej-creme);            /* 5,57:1 */
	--ej-acao-fundo-hover: #98300F;
	--ej-acao-secundaria-texto: var(--ej-petroleo);
	--ej-acao-secundaria-borda: var(--ej-petroleo);
	--ej-link: var(--ej-coral-acao);
	--ej-link-sublinhado: var(--ej-coral);       /* sublinhado é grafismo */

	/* Estados. Erro nunca é comunicado só por cor — ver main.css, .ej-field. */
	--ej-ok-fundo: var(--ej-verde-ok);
	--ej-ok-texto: var(--ej-creme);              /* 5,80:1 */
	--ej-erro-texto: var(--ej-coral-acao);       /* 5,57:1 sobre creme */
	--ej-erro-borda: var(--ej-coral-acao);
	/* Pastilha "!" do erro. Tem texto dentro, então precisa de par próprio:
	   usar --ej-erro-borda dava 2,66:1 no tema escuro, onde essa borda vira
	   coral puro — que a paleta marca como "SEM TEXTO EM CIMA". 5,57:1 aqui. */
	--ej-erro-pastilha-fundo: var(--ej-coral-acao);
	--ej-erro-pastilha-texto: var(--ej-creme);

	/* Foco — obrigatório e forte em tudo que é focável. */
	--ej-foco-cor: var(--ej-petroleo);
	--ej-foco-largura: 3px;
	--ej-foco-deslocamento: 2px;

	/* ---------------------------------------------------------------
	   Tipografia — MASTER.md §11.2
	   Plus Jakarta Sans (500/700/800): título e interface.
	   IBM Plex Sans: texto longo, contrato, proposta.
	   --------------------------------------------------------------- */
	--ej-fonte-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ej-fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--ej-peso-medio: 500;
	--ej-peso-forte: 700;
	--ej-peso-maximo: 800;

	/* Escala fluida. O piso é o tamanho no celular — é por onde o público chega. */
	--ej-fs-xs: 0.8125rem;                              /* 13px — rótulo, nota */
	--ej-fs-sm: 0.875rem;                               /* 14px */
	--ej-fs-base: 1rem;                                 /* 16px — mínimo de corpo */
	--ej-fs-md: 1.0625rem;                              /* 17px — corpo longo */
	--ej-fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--ej-fs-xl: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
	--ej-fs-2xl: clamp(1.5rem, 1.25rem + 1.3vw, 2.125rem);
	--ej-fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.875rem);
	--ej-fs-4xl: clamp(2.25rem, 1.55rem + 3.2vw, 3.75rem);

	--ej-lh-apertada: 1.1;
	--ej-lh-titulo: 1.2;
	--ej-lh-base: 1.55;
	--ej-lh-leitura: 1.7;
	--ej-tracking-titulo: -0.015em;
	--ej-tracking-rotulo: 0.06em;
	--ej-medida-leitura: 68ch;

	/* ---------------------------------------------------------------
	   Espaço — escala de 4px
	   --------------------------------------------------------------- */
	--ej-sp-1: 0.25rem;
	--ej-sp-2: 0.5rem;
	--ej-sp-3: 0.75rem;
	--ej-sp-4: 1rem;
	--ej-sp-5: 1.5rem;
	--ej-sp-6: 2rem;
	--ej-sp-7: 2.5rem;
	--ej-sp-8: 3rem;
	--ej-sp-9: 4rem;
	--ej-sp-10: 5rem;
	--ej-sp-secao: clamp(3rem, 2rem + 5vw, 6rem);

	--ej-largura-container: 72rem;
	--ej-largura-estreita: 46rem;
	--ej-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

	/* Alvo de toque mínimo. Vale para botão, link de menu, summary de FAQ e
	   qualquer controle de formulário.
	   48px, não 44px: a WCAG 2.2 exige 24 no nível AA e 44 no AAA, mas a lei de
	   marca (docs/brand/edmojunior.md §9) escreve 48 e é ela que manda aqui. O
	   valor estava em 44 e o botão "Menu" do celular media exatamente isso. */
	--ej-toque-min: 3rem; /* 48px */

	/* ---------------------------------------------------------------
	   Forma — a identidade é de formas cheias e canto macio.
	   Raio generoso é assinatura, não enfeite. Não reduzir sem ADR.
	   --------------------------------------------------------------- */
	--ej-raio-xs: 0.5rem;
	--ej-raio-sm: 0.75rem;
	--ej-raio-md: 1rem;
	--ej-raio-lg: 1.5rem;
	--ej-raio-xl: 2rem;
	--ej-raio-pill: 999px;
	--ej-traco-icone: 2px; /* ícone sempre acompanhado de palavra */

	/* ---------------------------------------------------------------
	   Sombra — suave, difusa, tingida de petróleo. Sem gradiente.
	   --------------------------------------------------------------- */
	--ej-sombra-0: none;
	--ej-sombra-1: 0 1px 2px rgba(14, 58, 74, 0.06), 0 2px 8px rgba(14, 58, 74, 0.05);
	--ej-sombra-2: 0 2px 4px rgba(14, 58, 74, 0.06), 0 8px 24px rgba(14, 58, 74, 0.08);
	--ej-sombra-3: 0 4px 8px rgba(14, 58, 74, 0.07), 0 18px 44px rgba(14, 58, 74, 0.12);

	/* ---------------------------------------------------------------
	   Movimento — curto e discreto. Anulado em prefers-reduced-motion.
	   --------------------------------------------------------------- */
	--ej-duracao-rapida: 120ms;
	--ej-duracao: 180ms;
	--ej-duracao-lenta: 280ms;
	--ej-curva: cubic-bezier(0.2, 0.7, 0.3, 1);
	--ej-transicao: var(--ej-duracao) var(--ej-curva);

	--ej-z-base: 1;
	--ej-z-header: 50;
	--ej-z-nav: 60;
	/* Barra de ação fixa do celular. Abaixo do menu aberto de propósito: com o
	   menu na tela, quem manda é o menu. */
	--ej-z-cta-fixo: 55;
	--ej-z-skip: 100;

	color-scheme: light dark;
}

/* ==========================================================================
   Tema escuro — SOMENTE redefinição de token semântico.
   Nenhuma regra de componente entra aqui.
   No escuro o botão principal inverte para creme com texto petróleo (11,4:1),
   porque --ej-coral-acao sobre fundo escuro não alcança 4,5:1.
   Coral continua proibido atrás de texto, aqui também.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--ej-fundo: #0B2A36;
		--ej-fundo-bloco: #13404F;
		--ej-superficie: #12384A;
		--ej-superficie-forte: #071E27;
		--ej-texto: var(--ej-creme);
		--ej-texto-apoio: #C4D3D8;
		--ej-texto-invertido: var(--ej-petroleo);
		--ej-borda: rgba(255, 246, 238, 0.16);
		/* Era #798689 com o comentário "3,86:1" — número que não correspondia a
		   nenhum fundo real: dava 3,99:1 sobre --ej-fundo, 3,30:1 sobre
		   --ej-superficie e 2,98:1 sobre --ej-fundo-bloco, que REPROVA. Clareado
		   para passar dos 3:1 em todas as três superfícies do tema escuro:
		   5,69:1 / 4,70:1 / 4,24:1. */
		--ej-borda-controle: #93A2A5;

		--ej-acao-fundo: var(--ej-creme);
		--ej-acao-texto: var(--ej-petroleo);
		--ej-acao-fundo-hover: #FFFFFF;
		--ej-acao-secundaria-texto: var(--ej-creme);
		--ej-acao-secundaria-borda: var(--ej-creme);
		--ej-link: var(--ej-creme);
		--ej-link-sublinhado: var(--ej-coral);

		--ej-ok-fundo: #7FD1C4;
		--ej-ok-texto: var(--ej-petroleo);
		--ej-erro-texto: var(--ej-creme); /* a palavra "Erro" carrega o significado */
		--ej-erro-borda: var(--ej-coral); /* borda é grafismo, 5,11:1 sobre o fundo */
		/* A pastilha NÃO segue a borda aqui: coral com creme em cima dá 2,66:1,
		   e a paleta marca o coral como grafismo sem texto. Invertida no escuro
		   — círculo claro com "!" vermelho — mantém 5,57:1. */
		--ej-erro-pastilha-fundo: var(--ej-creme);
		--ej-erro-pastilha-texto: var(--ej-coral-acao);

		--ej-foco-cor: var(--ej-creme);

		--ej-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
		--ej-sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45);
		--ej-sombra-3: 0 18px 44px rgba(0, 0, 0, 0.5);
	}
}