/* ============================================================ VARIABLES — Design tokens centralizados Todas as cores de tema, tipografia, radii e sombras vivem aqui. Cores de categoria (fauna=#4caf50, etc.) sao dados, nao tema, e continuam hardcoded nos seus contextos. ============================================================ */ :root { --cor-primaria: #1b5e20; --cor-primaria-hover: #2e7d32; --cor-erro: #c62828; --cor-info: #1565c0; --cor-sucesso: #1b5e20; --cor-aviso: #e65100; --cor-aviso-fundo: #fff3e0; --cor-texto: #1a1a1a; --cor-texto-secundario: #666; --cor-texto-terciario: #888; --cor-fundo: #f5f5f5; --cor-fundo-card: #ffffff; --cor-fundo-input: #f9f9f9; --cor-borda: #ddd; --cor-borda-leve: #eee; --cor-borda-forte: #ccc; --font-principal: "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Consolas", "Courier New", monospace; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04); --shadow-md: 0 2px 8px rgba(0, 0, 0, .08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .12); } /* ============================================================ Tema escuro — mesmos tokens, valores invertidos. Ativado via data-theme="dark" no (js/tema.js). ============================================================ */ [data-theme="dark"] { --cor-primaria: #4caf50; --cor-primaria-hover: #66bb6a; --cor-erro: #ef5350; --cor-info: #64b5f6; --cor-sucesso: #66bb6a; --cor-aviso: #ffb74d; --cor-aviso-fundo: #3a2b16; --cor-texto: #e8e8e8; --cor-texto-secundario: #b0b0b0; --cor-texto-terciario: #8a8a8a; --cor-fundo: #161b18; --cor-fundo-card: #1f2622; --cor-fundo-input: #262e29; --cor-borda: #3a423d; --cor-borda-leve: #2c332f; --cor-borda-forte: #4a524d; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3); --shadow-md: 0 2px 8px rgba(0, 0, 0, .4); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5); } /* Suaviza os tiles do mapa no tema escuro para não ofuscar */ [data-theme="dark"] .leaflet-tile { filter: brightness(.85) saturate(.9); }