/* ========================================================================== SOLUCIONE ENGENHARIA — TOKENS DE DESIGN Fase 1 do plano de modernização. Esta é a única fonte de verdade do visual. Nenhum outro arquivo deve escrever cor, tamanho de texto ou espaçamento em valor cru: sempre referencie um token daqui. Assim, ajustar a marca inteira é mexer neste arquivo, e não caçar valores espalhados por 800 linhas de HTML. As cores da marca foram amostradas dos pixels de images/logo/logo1 (fonte original em alta resolução), não escolhidas por aproximação. Documentação visual: guia-de-marca.html ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. CORES DA MARCA ---------------------------------------------------------------------- */ --marca-petroleo: #15544C; /* institucional — títulos, logo, fundos */ --marca-petroleo-esc: #0F423B; /* estado pressionado / hover em escuro */ --marca-sinal: #009C64; /* verde da logo — GRÁFICOS, não texto */ --marca-sinal-esc: #007E51; /* verde de ação — fundo de botão */ --marca-sinal-esc2: #00663F; /* hover de ação */ --marca-profundo: #0C3C30; /* rodapé e blocos muito escuros */ --marca-claro: #2ECC8F; /* SOMENTE sobre fundo escuro (5,9:1) */ /* Nota de acessibilidade: branco sobre --marca-sinal dá 3,5:1 — suficiente para elemento gráfico (mínimo 3:1), insuficiente para texto (4,5:1). Por isso o preenchimento de botão usa --marca-sinal-esc (5,1:1 com branco) e o verde da logo fica reservado a ícones, bordas e traços. */ /* ---------------------------------------------------------------------- 2. NEUTROS Cinzas com viés verde. Cinza puro ao lado de uma marca verde parece sujo; estes neutros pertencem à mesma família cromática. ---------------------------------------------------------------------- */ --neutro-0: #FFFFFF; --neutro-50: #F7F9F8; --neutro-100: #F1F4F2; /* fundo de seção alternada */ --neutro-200: #E4EAE7; --neutro-300: #D2DAD6; /* bordas */ --neutro-400: #A8B4AF; --neutro-500: #7C8985; --neutro-600: #5F6B67; /* texto secundário — 5,1:1 sobre --neutro-100 */ --neutro-700: #3D4845; --neutro-800: #22302B; --neutro-900: #101D19; /* texto principal */ /* ---------------------------------------------------------------------- 3. CORES SEMÂNTICAS Separadas da marca de propósito: verde de marca e verde de "deu certo" não podem ser a mesma coisa, ou o usuário lê status onde não há. ---------------------------------------------------------------------- */ --sucesso: #17703F; --sucesso-bg: #E8F5EE; --sucesso-bd: #A9D9C0; --atencao: #8A5806; --atencao-bg: #FBF3E4; --atencao-bd: #E8CE96; --erro: #B4322A; --erro-bg: #FBEDEC; --erro-bd: #E8B4AF; --info: #2A6076; --info-bg: #EAF2F6; --info-bd: #B4CFDC; /* ---------------------------------------------------------------------- 4. PAPÉIS Camada de apelido: os componentes usam estes, nunca as cores brutas. Trocar o tema no futuro é reapontar esta seção. ---------------------------------------------------------------------- */ --cor-fundo: var(--neutro-0); --cor-fundo-alt: var(--neutro-100); --cor-superficie: var(--neutro-0); --cor-superficie-alt: var(--neutro-50); --cor-borda: var(--neutro-300); --cor-borda-forte: var(--neutro-400); --cor-texto: var(--neutro-900); --cor-texto-suave: var(--neutro-600); --cor-texto-inverso: var(--neutro-0); --cor-titulo: var(--marca-petroleo); --cor-acao: var(--marca-sinal-esc); --cor-acao-hover: var(--marca-sinal-esc2); --cor-acao-grafica: var(--marca-sinal); /* ícones, bordas, traços */ --cor-link: var(--marca-petroleo); --cor-foco: var(--marca-sinal); /* Sobre fundo escuro */ --cor-escuro-fundo: var(--marca-petroleo); --cor-escuro-texto: #C7DCD5; --cor-escuro-titulo: var(--neutro-0); --cor-escuro-realce: #7FD9B4; /* ---------------------------------------------------------------------- 5. TIPOGRAFIA Pilha de fontes do sistema: zero requisição externa, zero salto de layout ao carregar. A Fase 2 avalia uma fonte própria hospedada aqui. ---------------------------------------------------------------------- */ --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace; /* Escala modular ~1,2 com limites fluidos. Base 17px: confortável para leitura longa em celular sem precisar de zoom. */ --texto-xs: 0.8125rem; /* 13px — legendas, notas de rodapé */ --texto-sm: 0.9375rem; /* 15px — apoio, rótulos */ --texto-base: 1.0625rem; /* 17px — corpo */ --texto-lg: 1.1875rem; /* 19px — destaque de leitura */ --texto-xl: clamp(1.25rem, 1.6vw, 1.4rem); --texto-2xl: clamp(1.45rem, 2.6vw, 1.85rem); --texto-3xl: clamp(1.75rem, 4vw, 2.4rem); --texto-4xl: clamp(2rem, 5.4vw, 3rem); --peso-normal: 400; --peso-medio: 600; --peso-forte: 700; --peso-extra: 800; --entrelinha-apertada: 1.14; /* títulos grandes */ --entrelinha-media: 1.35; /* títulos pequenos, botões */ --entrelinha-solta: 1.65; /* corpo de texto */ --tracking-apertado: -0.02em; /* títulos */ --tracking-normal: 0; --tracking-largo: 0.14em; /* sobrelinhas em caixa alta */ --medida-leitura: 68ch; /* largura máxima confortável de parágrafo */ /* ---------------------------------------------------------------------- 6. ESPAÇAMENTO — escala de 4px ---------------------------------------------------------------------- */ --e-1: 0.25rem; /* 4px */ --e-2: 0.5rem; /* 8px */ --e-3: 0.75rem; /* 12px */ --e-4: 1rem; /* 16px */ --e-5: 1.25rem; /* 20px */ --e-6: 1.5rem; /* 24px */ --e-8: 2rem; /* 32px */ --e-10: 2.5rem; /* 40px */ --e-12: 3rem; /* 48px */ --e-16: 4rem; /* 64px */ --e-20: 5rem; /* 80px */ --secao-y: clamp(3rem, 7vw, 5.5rem); /* respiro vertical entre seções */ /* ---------------------------------------------------------------------- 7. FORMA ---------------------------------------------------------------------- */ --raio-sm: 6px; --raio: 8px; --raio-lg: 14px; --raio-pill: 999px; --borda: 1px solid var(--cor-borda); --borda-forte: 2px solid var(--cor-borda-forte); --sombra-1: 0 1px 2px rgba(16,29,25,.06), 0 8px 24px rgba(16,29,25,.06); --sombra-2: 0 2px 4px rgba(16,29,25,.08), 0 16px 40px rgba(16,29,25,.12); --sombra-foco: 0 0 0 3px rgba(0,156,100,.22); /* ---------------------------------------------------------------------- 8. MOVIMENTO ---------------------------------------------------------------------- */ --transicao-rapida: 150ms ease; --transicao: 200ms ease; --transicao-lenta: 400ms ease; /* ---------------------------------------------------------------------- 9. ESTRUTURA ---------------------------------------------------------------------- */ --largura-container: 1170px; --largura-texto: 44rem; --padding-container: var(--e-5); --altura-cabecalho: 74px; --altura-cabecalho-sm: 62px; --alvo-toque: 44px; /* recomendação para uso com o dedo */ --alvo-toque-min: 24px; /* mínimo obrigatório — WCAG 2.2 AA */ --z-base: 1; --z-flutua: 50; --z-fixo: 100; --z-modal: 200; } @media (max-width: 575px) { :root { --padding-container: var(--e-4); } }