/* ==========================================================================
TOKENS DE DESIGN — BALDAN AGRO
==========================================================================
Fonte única dos valores visuais do site (cores, tipografia, espaçamento,
bordas, sombras e transições). Carregado PRIMEIRO em todas as páginas,
antes de global.css.
Como usar em qualquer CSS do projeto:
color: var(--color-brand);
padding: var(--space-md);
Origem dos valores: as cores da MARCA seguem o Sistema Visual Corporativo
Baldan Agro (v1.1, 2026). Os demais tokens nomeiam valores que o site já
usava (auditoria de 2026-09-29).
QUAL VERDE USAR (Fase 6, 2026-09-30):
--color-brand Verde Baldan. Padrão para títulos em destaque,
rótulos, linhas, números e botões sobre fundo claro.
--color-brand-dark Hover/pressionado dos botões verdes.
--color-brand-support Verde Apoio. SÓ sobre fundo escuro ou foto/vídeo,
onde o Verde Baldan não teria contraste (título do
hero, card "Visão", hover dos links sobre o vídeo).
--color-brand-brown Marrom Marca. Uso pontual: filete no topo do rodapé.
--color-brand-text Cor de texto do guia: links da navbar.
O HEADER é branco sempre (padrão do cabeçalho do guia), desde 2026-10-01.
O RODAPÉ usa esses mesmos tokens desde 2026-10-01 (fundo --color-brand-dark).
Os tokens --color-green-100, 800 e 900 continuam para usos funcionais
(fundo claro de ícones, títulos e superfícies escuras).
BREAKPOINTS (media queries não aceitam var(), por isso ficam documentados
aqui e escritos por extenso nos arquivos):
480px celular pequeno
768px celular / tablet em pé
1024px tablet deitado / notebook pequeno
1200px o menu do header vira hambúrguer (navbar.css e MENU_BREAKPOINT do index.js)
Rodapé usa 560px e 900px (grid de 1 e 2 colunas).
========================================================================== */
:root {
/* ------------------------------------------------------------------
CORES — VERDES DA MARCA (do mais claro ao mais escuro)
------------------------------------------------------------------ */
--color-brand: #00643C; /* Verde Baldan (oficial) — contraste 7,4:1 sobre branco */
--color-brand-dark: #063D2B; /* Verde Escuro (oficial) — hover dos botões verdes; fundo do rodapé */
--color-brand-support: #79B84E; /* Verde Apoio (oficial) — só sobre fundo escuro/foto */
--color-brand-brown: #6A371E; /* Marrom Marca (oficial) — filete no topo do rodapé */
--color-brand-text: #1D2822; /* Texto (oficial) — links da navbar, menu do Canal de Denúncia */
--color-green-100: #e9f2ec; /* fundo de ícones, selos claros */
--color-green-800: #1a2e1a; /* títulos escuros com fundo claro */
--color-green-900: #0e2200; /* superfície muito escura (card "Visão") */
/* ------------------------------------------------------------------
CORES — NEUTROS
------------------------------------------------------------------ */
--color-white: #ffffff;
--color-surface-alt: #f7f9fa; /* fundo de seção alternada (Valores) */
--color-border: #e2e8df; /* borda de cards */
--color-text: #1a1a1a; /* texto principal */
--color-text-muted: #5a6e5a; /* texto secundário esverdeado */
--color-text-soft: #999999; /* texto terciário (legendas) */
/* ------------------------------------------------------------------
TIPOGRAFIA
A fonte DM Sans é carregada pelo do Google Fonts no de
cada página, nos pesos 400, 500, 600, 700 e 800. Se usar um peso novo,
inclua-o também na URL do , senão o navegador "falsifica" o
negrito.
------------------------------------------------------------------ */
--font-body: 'DM Sans', Helvetica, Arial, sans-serif;
--font-quote: Georgia, serif; /* só as aspas decorativas da Palavra do CEO */
/* ------------------------------------------------------------------
ESPAÇAMENTO (escala de 8px)
------------------------------------------------------------------ */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 90px;
/* Espaço vertical (em cima e embaixo) de cada seção da Home. Muda
sozinho por largura de tela no fim deste arquivo: 80px no desktop,
64px até 1024px, 48px até 768px. Use sempre
padding: var(--section-space) ; nas seções. */
--section-space: 80px;
/* CONTAINER DA PÁGINA. Margem lateral comum ao header, ao topo (vídeo), às
seções Sobre e Valores e ao rodapé: 24–64px conforme a tela e, acima de
1440px, o que sobrar — o conteúdo nunca passa de 1312px de largura e
todos começam na mesma linha vertical do logo. Use em padding-inline ou
margin-inline. (O "100%" é a largura do elemento-pai de quem usa.) */
--container-pad: max(clamp(24px, 4vw, 64px), calc((100% - 1440px) / 2 + 64px));
/* Espaço entre o header e o conteúdo quando se chega a uma seção por um link
do menu (âncora). Ver scroll-padding-top no global.css. */
--anchor-gap: 48px;
/* Altura do header fixo. É a ÚNICA fonte dessa medida: o navbar.css usa o
token como altura da barra e o global.css usa para os links de âncora
(#section-...) pararem logo abaixo dela. Para mudar a altura, altere só
aqui (desktop) e nos @media do fim deste arquivo (tablet e celular). */
--navbar-height: 80px;
/* ------------------------------------------------------------------
BORDAS, SOMBRAS, TRANSIÇÕES
------------------------------------------------------------------ */
--radius-sm: 4px; /* botões da navbar e do hero */
--radius-md: 10px; /* botões e cards menores */
--radius-lg: 16px; /* cards grandes */
--radius-pill: 999px; /* selos e etiquetas */
--shadow-card-hover: 0 12px 40px rgba(45, 138, 78, 0.1);
--transition-fast: 0.2s ease;
--transition-default: 0.3s ease;
}
@media (max-width: 1024px) {
:root { --section-space: 64px; --navbar-height: 80px; }
}
@media (max-width: 768px) {
:root { --section-space: 48px; --navbar-height: 72px; }
}
@media (max-width: 480px) {
:root { --navbar-height: 68px; }
}