/* * TerraBrasilis Dashboard Design System: tokens * * Camadas: * 1. Primitivos (--tb-ref-*) valores brutos; nunca usados direto em componentes. * 2. Semânticos (--tb-*) papéis de interface; é o que os componentes consomem. * 3. Componentes (---*) ajustes locais declarados no próprio componente. * * Origem de cada valor: [obs] observado nos dashboards TerraBrasilis ou no símbolo SVG; * [proto] protótipo interativo do dashboard; [prop] definido por este guia. */ @font-face { font-family: "Roboto"; src: url("../fonts/Roboto.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Material Icons"; src: url("../fonts/MaterialIcons-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; } :root { /* --------------------------------------------------------------- 1. PRIMITIVOS --------------------------------------------------------------- */ /* Símbolo terrabrasilis.svg [obs]: cores extraídas do arquivo, sem nome oficial */ --tb-ref-symbol-mint: #49bc95; --tb-ref-symbol-leaf-dark: #568a1f; --tb-ref-symbol-leaf: #96c964; --tb-ref-symbol-earth: #a98273; --tb-ref-symbol-water: #bbe2ff; --tb-ref-symbol-sun: #f9c069; /* Dashboards TerraBrasilis em produção [obs] */ --tb-ref-teal-700: #00796b; /* barra superior, rodapé, títulos de caixa */ --tb-ref-teal-600: #108d6f; /* botão primário */ --tb-ref-lime-200: #bde397; /* item ativo do painel lateral */ --tb-ref-ink-sidebar: #33333d; --tb-ref-hover-sidebar: #f1f3f4; /* Rampa teal [prop]: estende #00796b para estados */ --tb-ref-teal-50: #e6f4f1; --tb-ref-teal-100: #c4e6df; --tb-ref-teal-300: #6cbcae; --tb-ref-teal-800: #005b4f; --tb-ref-teal-900: #0b3b33; /* Neutros esverdeados [proto, prop] */ --tb-ref-neutral-0: #ffffff; --tb-ref-neutral-25: #fbfcfb; --tb-ref-neutral-50: #f3f5f4; --tb-ref-neutral-75: #eef2f0; --tb-ref-neutral-100: #e7ece9; --tb-ref-neutral-200: #d9e2dc; --tb-ref-neutral-250: #d7dfda; --tb-ref-neutral-400: #a9b8af; --tb-ref-neutral-600: #5f6e66; --tb-ref-neutral-700: #4c5c53; --tb-ref-neutral-900: #1d2b24; /* Status [prop] */ --tb-ref-red-700: #a12d2d; --tb-ref-red-50: #fbeeee; --tb-ref-amber-700: #8a5a00; --tb-ref-amber-50: #fff6e0; --tb-ref-highlight: #ffe08a; /* termo encontrado na busca [proto] */ /* --------------------------------------------------------------- 2. SEMÂNTICOS: marca e interface --------------------------------------------------------------- */ --tb-color-brand: var(--tb-ref-teal-700); --tb-color-brand-strong: var(--tb-ref-teal-800); --tb-color-brand-subtle: var(--tb-ref-teal-50); --tb-color-on-brand: #ffffff; --tb-color-wordmark-terra: var(--tb-ref-symbol-sun); --tb-color-wordmark-brasilis: var(--tb-ref-symbol-leaf); --tb-color-page: var(--tb-ref-neutral-50); --tb-color-surface: var(--tb-ref-neutral-0); --tb-color-surface-sunken: var(--tb-ref-neutral-25); --tb-color-surface-hover: var(--tb-ref-hover-sidebar); --tb-color-border: var(--tb-ref-neutral-200); --tb-color-border-subtle: var(--tb-ref-neutral-100); --tb-color-border-control: var(--tb-ref-neutral-400); --tb-color-field: var(--tb-ref-neutral-75); /* fundo de campos */ --tb-color-field-hover: var(--tb-ref-neutral-100); --tb-color-row-a: var(--tb-ref-neutral-25); /* linhas alternadas de tabela */ --tb-color-row-b: var(--tb-ref-neutral-50); --tb-color-text: var(--tb-ref-neutral-900); /* 14,75:1 sobre branco */ --tb-color-text-secondary: var(--tb-ref-neutral-700); --tb-color-text-muted: var(--tb-ref-neutral-600); /* 5,37:1 sobre branco, 4,91:1 sobre o fundo da página */ --tb-color-text-disabled: #9aa59f; --tb-color-link: var(--tb-ref-teal-700); --tb-color-focus-ring: var(--tb-ref-teal-700); --tb-color-selected-bg: var(--tb-ref-teal-50); --tb-color-selected-border: var(--tb-ref-teal-300); --tb-color-danger: var(--tb-ref-red-700); --tb-color-danger-bg: var(--tb-ref-red-50); --tb-color-warning: var(--tb-ref-amber-700); --tb-color-warning-bg: var(--tb-ref-amber-50); --tb-color-search-match: var(--tb-ref-highlight); /* Painel lateral */ --tb-sidebar-bg: var(--tb-ref-neutral-0); --tb-sidebar-text: var(--tb-ref-ink-sidebar); --tb-sidebar-section-bg: var(--tb-ref-symbol-mint); /* [obs] faixa de seção */ --tb-sidebar-section-text: #ffffff; /* [prop] DES-05, decisão do dono: texto branco (2,4:1 sobre a faixa; guia, seção 6.9, item 5) */ --tb-sidebar-item-active-bg: var(--tb-ref-lime-200); /* [obs] */ --tb-sidebar-item-hover-bg: var(--tb-ref-hover-sidebar); --tb-sidebar-divider: var(--tb-ref-neutral-200); /* --------------------------------------------------------------- 2b. SEMÂNTICOS: dados --------------------------------------------------------------- */ /* Uma cor estável por dimensão [prop]; contraste mínimo de 3:1 sobre branco */ --tb-dim-biome: #568a1f; /* folha escura do símbolo, 4,16:1 */ --tb-dim-biome-text: #49751a; /* o mesmo verde para texto (área do cartão), 5,46:1 */ --tb-dim-state: #6a3d9a; /* família territorial, 7,64:1 */ --tb-dim-municipality: #8e5bb5; /* família territorial, 4,87:1 */ --tb-dim-hierarchy: #b85a1e; /* 4,65:1 */ --tb-dim-source: #a8326e; /* 6,28:1 */ --tb-dim-hydro: #1f4e8c; /* identidade do cartão de hidrografia, 8,31:1; os itens usam --tb-hydro-* */ --tb-dim-computo: #b85a1e; /* identidade do cartão da árvore do cômputo (DES-04); os itens usam --tb-computo-* */ --tb-dim-car-status: #a8326e; /* magenta: situação do CAR, 6,28:1 */ --tb-dim-territory: #8a6a00; /* ocre: identidade do cartão de territórios e unidades, 5,07:1 */ /* Visualizador de mapa (DES-06): medidas e cores dos componentes do mapa, usadas por components.css e pelo guia */ --tb-map-control-size: 34px; /* botões do Leaflet: 34 px (40 px abaixo de 600 px) */ --tb-map-edge: var(--tb-space-3); /* margem entre os painéis flutuantes e a borda do mapa */ --tb-map-popup-width: 320px; --tb-map-legend-width: 264px; --tb-map-group-header-height: 40px; /* cabeçalho do grupo de camadas */ --tb-map-band: var(--tb-sidebar-section-bg); /* cor do cabeçalho de grupo: a da faixa de seção */ --tb-map-band-hover: color-mix(in srgb, var(--tb-map-band), black 10%); --tb-map-generic: #5b6b73; /* tom neutro dos níveis do Cômputo nos exemplos do guia, até a definição das cores finais */ --tb-map-water: #cde6f0; /* água do mapa ilustrativo do guia */ --tb-map-land: #eaf0e6; /* terra do mapa ilustrativo do guia */ --tb-computo-projects: #b85a1e; /* Intencionalidade: projetos de recuperação, laranja-terra, 4,65:1 com texto branco */ --tb-computo-protected: #2a62b0; /* Governança: vegetação secundária legalmente protegida, azul, oposto ao laranja, 6,05:1 com texto branco */ --tb-computo-car: #705487; /* Cadastro Ambiental Rural, violeta escuro para distinguir o terceiro grupo */ --tb-computo-tint-first: 34%; /* mistura com branco no primeiro nível de cada grupo */ --tb-computo-tint-step: 8%; /* mistura a mais em cada nível seguinte */ /* Mapa (DES-07). Níveis do Cômputo (Anexo 1) em ordem de precedência. Os cinco níveis de Intencionalidade (1 a 5) são uma categoria só no mapa, "Projetos de recuperação" (DATA-22): têm uma cor, --tb-map-tier-projects (a do grupo, #b85a1e), e --tb-map-tier-01 a 05 são apelidos dela, para a feição de qualquer um deles achar a sua cor pelo nível. Governança (6 a 11) em tons frios, uma cor por nível. --tb-map-tier-NN é a cor do nível (contorno e preenchimento) e --tb-map-tier-NN-ink, a do texto sobre ela (mínimo de 4,5:1). A cor da Hidrografia (#1f4e8c) está no nível 6. Conferidos e escritos nos estilos do GeoServer por scripts/des07_estilos.py: não os repita no SLD. */ --tb-map-tier-projects: #b85a1e; --tb-map-tier-projects-ink: #ffffff; /* Projetos de recuperação (níveis 1 a 5) */ --tb-map-tier-01: var(--tb-map-tier-projects); --tb-map-tier-01-ink: var(--tb-map-tier-projects-ink); --tb-map-tier-02: var(--tb-map-tier-projects); --tb-map-tier-02-ink: var(--tb-map-tier-projects-ink); --tb-map-tier-03: var(--tb-map-tier-projects); --tb-map-tier-03-ink: var(--tb-map-tier-projects-ink); --tb-map-tier-04: var(--tb-map-tier-projects); --tb-map-tier-04-ink: var(--tb-map-tier-projects-ink); --tb-map-tier-05: var(--tb-map-tier-projects); --tb-map-tier-05-ink: var(--tb-map-tier-projects-ink); --tb-map-tier-06: #1f4e8c; --tb-map-tier-06-ink: #ffffff; /* TI */ --tb-map-tier-07: #067f7d; --tb-map-tier-07-ink: #ffffff; /* UCs */ --tb-map-tier-08: #8556db; --tb-map-tier-08-ink: #ffffff; /* Manguezais (APP) */ --tb-map-tier-09: #7791c5; --tb-map-tier-09-ink: #1d2b24; /* APP */ --tb-map-tier-10: #34d8b9; --tb-map-tier-10-ink: #1d2b24; /* AUR */ --tb-map-tier-11: #c8b7fa; --tb-map-tier-11-ink: #1d2b24; /* RL */ /* Camadas de sobreposição: uma cor por grupo, as das dimensões Fonte de entrada, Bioma e Estado; o grupo dos territórios é tracejado. */ --tb-map-group-projects: var(--tb-dim-source); --tb-map-group-protected: var(--tb-dim-biome); --tb-map-group-territories: var(--tb-dim-state); /* Camadas de limite (FEAT-23, DES-09): só contorno, sempre tracejado. Cada camada tem cor, espessura e padrão (--…-dash e --…-gap, em px) próprios, e a opacidade segue a escala. Cada grupo do painel tem o seu padrão de traço: divisão geográfica (traço longo), biomas (traço curto e largo) e hidrografia (traço fino); dentro do grupo, a cor e a espessura separam as camadas. As cores ficam fora dos níveis e dos grupos de sobreposição; a hidrografia clareia e afina da região à bacia. Conferidos e escritos nos estilos por scripts/des07_estilos.py. */ --tb-map-limit-state: #2f2f23; --tb-map-limit-state-width: 1.25px; --tb-map-limit-state-dash: 12px; --tb-map-limit-state-gap: 4px; /* divisão estadual: grafite */ --tb-map-limit-municipality: #aa929e; --tb-map-limit-municipality-width: 0.75px; --tb-map-limit-municipality-dash: 12px; --tb-map-limit-municipality-gap: 4px; /* divisão municipal: cinza-malva, mais fina */ --tb-map-limit-biome: #32673b; --tb-map-limit-biome-width: 2px; --tb-map-limit-biome-dash: 2px; --tb-map-limit-biome-gap: 3px; /* biomas: verde-floresta, grossa */ --tb-map-limit-hydro-region: #06174b; --tb-map-limit-hydro-region-width: 1.75px; --tb-map-limit-hydro-region-dash: 4px; --tb-map-limit-hydro-region-gap: 2px; /* região hidrográfica (macro): azul-marinho */ --tb-map-limit-hydro-meso: #2e61fa; --tb-map-limit-hydro-meso-width: 1.25px; --tb-map-limit-hydro-meso-dash: 4px; --tb-map-limit-hydro-meso-gap: 2px; /* bacia meso: azul-royal */ --tb-map-limit-hydro-basin: #2ea5fa; --tb-map-limit-hydro-basin-width: 0.9px; --tb-map-limit-hydro-basin-dash: 4px; --tb-map-limit-hydro-basin-gap: 2px; /* bacia (micro): azul-céu */ --tb-map-limit-casing: 1.5px; /* largura a mais do contorno branco por baixo das camadas de limite, para se lerem sobre qualquer mapa de fundo */ /* Popup das camadas de limite: cor do cabeçalho, do contorno, do véu e do sonar do polígono selecionado, e a do texto sobre ela (4,5:1 no mínimo) */ --tb-map-popup-state: #2f2f23; --tb-map-popup-state-ink: #ffffff; --tb-map-popup-municipality: #816f78; --tb-map-popup-municipality-ink: #ffffff; --tb-map-popup-biome: #32673b; --tb-map-popup-biome-ink: #ffffff; --tb-map-popup-hydro-region: #06174b; --tb-map-popup-hydro-region-ink: #ffffff; --tb-map-popup-hydro-meso: #2e61fa; --tb-map-popup-hydro-meso-ink: #ffffff; --tb-map-popup-hydro-basin: #227ab9; --tb-map-popup-hydro-basin-ink: #ffffff; --tb-map-fill-opacity: 0.10; /* preenchimento de níveis e sobreposições */ --tb-map-stroke-tier: 0.5px; /* contorno dos níveis do Cômputo */ --tb-map-stroke-overlay: 1px; /* contorno das sobreposições */ --tb-map-casing: 2.5px; /* contorno branco por baixo do contorno das sobreposições */ --tb-map-casing-opacity: 0.8; /* fração da opacidade do contorno que o contorno branco tem */ --tb-map-icon-size: 16px; /* ícone da camada, repetido em grade dentro do polígono */ --tb-map-icon-grid: 32px; /* passo da grade de ícones, de centro a centro; o quadro de 512 px do mapa é múltiplo dele */ /* Elemento selecionado: contorno, véu e sonar na cor do próprio elemento (o sonar é o radar dos gráficos, em ciclo de 1,8 s) */ --tb-map-select-width: 2px; --tb-map-select-veil: 0.28; --tb-map-sonar-width: 14px; --tb-map-sonar-veil: 0.35; --tb-map-sonar-cycle: 1.8s; --tb-data-muted: var(--tb-ref-neutral-250); /* itens atenuados [proto] */ --tb-data-muted-opacity: 0.22; /* barras e rosca [proto] */ --tb-data-muted-opacity-hydro: 0.24; /* sunburst [proto] */ --tb-data-unavailable-opacity: 0.7; /* sem área no recorte: contorno tracejado */ --tb-data-track: #f0f3f1; /* trilho das barras horizontais [proto] */ --tb-data-grid: #e7ece8; --tb-data-axis: #d8e1db; --tb-data-label: #4c5c53; --tb-data-outline: #243f30; /* contorno de destaque do ponteiro [proto] */ --tb-data-separator: #ffffff; /* entre fatias */ /* Sunburst hidrográfico: 13 regiões, atribuídas pelo índice estável da região */ --tb-hydro-01: #1f4e8c; --tb-hydro-02: #2a7fa8; --tb-hydro-03: #3c9a8f; --tb-hydro-04: #5a8f3a; --tb-hydro-05: #8a9a2b; --tb-hydro-06: #b08a2e; --tb-hydro-07: #b8682e; --tb-hydro-08: #a84f4f; --tb-hydro-09: #a3477f; --tb-hydro-10: #7d55a8; --tb-hydro-11: #5865b5; --tb-hydro-12: #3f7fc9; --tb-hydro-13: #6f7f8c; --tb-hydro-tint-meso: 30%; /* mistura com branco no 2º anel */ --tb-hydro-tint-basin: 55%; /* mistura com branco no 3º anel */ /* --------------------------------------------------------------- 3. TIPOGRAFIA --------------------------------------------------------------- */ --tb-font-ui: "Roboto", "Segoe UI", Arial, sans-serif; --tb-font-display: "Poppins", "Roboto", "Segoe UI", Arial, sans-serif; --tb-text-display: 700 clamp(1.375rem, 1rem + 1.6vw, 1.75rem)/1.2 var(--tb-font-display); /* 22 a 28, h1 */ --tb-text-title: 700 1.25rem/1.3 var(--tb-font-display); /* 20, h2 de seção */ --tb-text-card-title: 500 1rem/1.35 var(--tb-font-ui); /* 16, h3 do cartão */ --tb-text-kpi: 500 clamp(1.375rem, 1rem + 1.5vw, 2rem)/1.1 var(--tb-font-ui); /* 22 a 32, valor principal */ --tb-text-body: 400 0.875rem/1.5 var(--tb-font-ui); /* 14 */ --tb-text-body-strong: 500 0.875rem/1.5 var(--tb-font-ui); --tb-text-layer-name: 600 0.875rem/1.3 var(--tb-font-ui); /* 14, nome da camada no painel do mapa e título do popup */ --tb-text-panel-title: 500 0.875rem/1.35 var(--tb-font-ui); /* 14, faixa de seção e nome do grupo no painel lateral */ --tb-text-small: 400 0.8125rem/1.45 var(--tb-font-ui); /* 13 */ --tb-text-caption: 400 0.75rem/1.4 var(--tb-font-ui); /* 12, mínimo para texto */ --tb-text-label: 500 0.75rem/1.3 var(--tb-font-ui); /* 12, rótulos de campo */ --tb-text-eyebrow: 700 0.6875rem/1.2 var(--tb-font-ui); /* 11, caixa-alta */ --tb-text-axis: 400 0.6875rem/1 var(--tb-font-ui); /* 11, só ticks de eixo */ --tb-text-nav: 400 0.9rem/1.25 var(--tb-font-ui); /* 14,4, itens do painel [obs] */ --tb-tracking-eyebrow: 0.08em; /* --------------------------------------------------------------- 4. ESPAÇO, FORMA, ELEVAÇÃO, MOVIMENTO --------------------------------------------------------------- */ --tb-space-1: 4px; --tb-space-2: 8px; --tb-space-3: 12px; --tb-space-4: 16px; --tb-space-5: 20px; --tb-space-6: 24px; --tb-space-8: 32px; --tb-space-10: 40px; --tb-radius-sm: 4px; /* itens de lista */ --tb-radius-md: 6px; /* botões, campos, chips */ --tb-radius-lg: 8px; /* cartões, painéis, tooltip */ --tb-radius-xl: 12px; /* diálogos */ --tb-radius-pill: 999px; --tb-elevation-1: 0 1px 3px rgb(29 43 36 / 8%); /* cartão */ --tb-elevation-2: 0 4px 16px rgb(29 43 36 / 10%); /* resumo fixo, tooltip, submenu */ --tb-elevation-3: 0 16px 48px rgb(17 40 28 / 24%); /* diálogo, menu suspenso */ --tb-elevation-bar: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 20%); /* [obs] barra e painel */ --tb-duration-fast: 120ms; --tb-duration: 200ms; /* [prop] animações e transições de interface */ --tb-duration-slow: 250ms; --tb-easing: cubic-bezier(0.4, 0, 0.2, 1); /* [obs] */ --tb-focus-outline: 2px solid var(--tb-color-focus-ring); --tb-focus-offset: 2px; --tb-target-min: 32px; /* alvo mínimo (WCAG 2.2 pede 24px) com folga */ --tb-target-touch: 44px; /* --------------------------------------------------------------- 5. ESTRUTURA --------------------------------------------------------------- */ --tb-navbar-height: 64px; /* [obs] */ --tb-sidebar-width: 290px; /* [obs] */ --tb-sidebar-header-height: 210px; /* [obs] */ --tb-sidebar-section-height: 48px; /* [prop] DES-05: a mesma altura dos cabeçalhos de grupo do painel de camadas */ --tb-sidebar-item-height: 44px; /* [obs] */ --tb-footer-height: 45px; /* [obs] */ --tb-content-gutter: var(--tb-space-6); --tb-graph-gap: var(--tb-space-4); --tb-graph-card-height: 500px; /* [proto] */ --tb-graph-card-height-wide: 620px; /* hidrografia: sunburst de até 480 px */ --tb-summary-offset: 140px; /* fallback; JS mede a altura e subtrai 1 px */ --tb-z-sticky-card-header: 10; --tb-z-summary: 20; --tb-z-content-overlay: 25; /* camada de carregamento do conteúdo */ --tb-z-navbar: 30; --tb-z-sidebar: 40; --tb-z-overlay: 100; --tb-z-tooltip: 200; } @media (prefers-reduced-motion: reduce) { :root { --tb-duration-fast: 0ms; --tb-duration: 0ms; --tb-duration-slow: 0ms; } }