/*
 * Tokens do eComply.
 *
 * Todos os valores vêm da página Styleguide do protótipo
 * (design/Styleguide.dc.html), que lista a paleta com nome e hex. Nada aqui foi
 * inventado ou aproximado — se um valor não estiver no ref, ele não entra.
 *
 * O ref escreve as cores literais em cada elemento, porque é HTML gerado. Aqui
 * elas viram variável uma vez só, para que uma mudança de marca não vire uma
 * caçada por 197 ocorrências de #12233d.
 */

:root {
	/* Marca — a escada de azul */
	--ec-navy: #12233d;          /* Navy 900 — texto principal e fundos escuros */
	--ec-navy-950: #0a1830;      /* Navy 950 — degradê de fundo escuro */
	--ec-navy-800: #16314f;
	--ec-navy-700: #1a3350;
	--ec-blue: #1f5f95;          /* links e estado ativo em fundo claro */
	--ec-blue-600: #2f80c9;      /* Steel Blue */
	--ec-blue-400: #6fb3e0;      /* Sky */
	--ec-blue-800: #184a73;      /* hover de link */

	/* Marca — a escada quente */
	--ec-orange: #f2933f;        /* Orange */
	--ec-orange-300: #f7b073;
	--ec-red: #e0533f;           /* Red — colchetes da navbar, acento */
	--ec-red-700: #c93f2e;

	/* Texto */
	--ec-ink: #4b5563;           /* Ink — corpo de texto */
	--ec-ink-700: #374151;
	--ec-mute: #6b7280;          /* Mute — legenda, meta */
	--ec-mute-300: #9aa4b2;

	/* Fundos */
	--ec-white: #ffffff;
	--ec-fog: #eef1f6;           /* Fog */
	--ec-pale-blue: #e4eef8;     /* Pale Blue */
	--ec-cream: #fdf0e0;         /* Cream */
	--ec-cream-200: #fbe4c4;
	--ec-gray-50: #f4f6f8;

	/* Degradês assinatura (Styleguide → "Signature gradients") */
	--ec-grad-cta: linear-gradient(135deg, #f7b073, #f2933f 55%, #e0533f);
	--ec-grad-cta-hover: linear-gradient(135deg, #f2933f, #e0533f 55%, #c93f2e);
	--ec-grad-blue: linear-gradient(135deg, #6fb3e0, #2f80c9 55%, #1f5f95);
	--ec-grad-warm: linear-gradient(135deg, #f2933f, #e0533f 65%, #c93f2e);
	--ec-grad-cream: linear-gradient(135deg, #fdf0e0, #fbe4c4);
	--ec-grad-topbar: linear-gradient(90deg, #f2933f, #e0533f 50%, #c93f2e);

	/* Traços e sombras — sempre o navy com alpha, nunca cinza neutro */
	--ec-hairline: rgba(18, 35, 61, 0.08);
	--ec-hairline-strong: rgba(18, 35, 61, 0.12);
	--ec-border: rgba(18, 35, 61, 0.25);
	--ec-shadow-cta: 0 10px 24px rgba(224, 83, 63, 0.32);
	--ec-shadow-cta-hover: 0 14px 30px rgba(224, 83, 63, 0.45);
	--ec-shadow-soft: 0 10px 24px rgba(18, 35, 61, 0.12);
	--ec-shadow-lift: 0 14px 30px rgba(18, 35, 61, 0.22);

	/* Tipografia (Styleguide → "Typography") */
	--ec-font-display: Manrope, Inter, system-ui, sans-serif;
	--ec-font-body: Inter, system-ui, sans-serif;
	--ec-font-mono: ui-monospace, Menlo, monospace;

	--ec-size-hero: 56px;        /* Display / Hero — Manrope 900 */
	--ec-size-h1: 38px;          /* H1 / Section — Manrope 900 */
	--ec-size-h2: 22px;          /* H2 / Card title — Manrope 800 */
	--ec-size-body-lg: 18px;     /* Body large — Inter 400 */
	--ec-size-body: 15px;        /* Body — Inter 400 */
	--ec-size-label: 11.5px;     /* Label / Eyebrow — Inter 800, caixa alta */

	/* Layout */
	--ec-max: 1280px;            /* largura da barra e das seções */
	--ec-radius-pill: 9999px;
	--ec-radius-card: 18px;

	/* O ponto onde a navbar vira menu hambúrguer, do navbar.dc.js */
	--ec-bp-nav: 1040px;
}