/* ============================================================================ corumba-tokens.css — v1.0 · 17/09/2026 Identidade visual da Corumba Soluções em T.I. como variáveis CSS. Fonte única da marca: https://assets.cdn.corumba.app.br/clientes/corumba/corumba.md Publicado em: https://assets.cdn.corumba.app.br/clientes/corumba/css/corumba-tokens.css Como usar: e depois só referenciar as variáveis: color: var(--cor-texto). Regra: não escrever HEX solto no projeto. Precisa de um tom que não existe aqui? Perguntar ao Webmaster antes de improvisar — a ficha manda. ========================================================================== */ :root { /* --- Cores oficiais (as três únicas da marca) ------------------------- */ --azul: #225DB4; /* primária: botão, link, ícone ativo */ --azul-escuro: #223047; /* texto principal, fundo escuro, header */ --ciano: #009EE0; /* apoio: hover, badge, gráfico, realce */ --branco: #FFFFFF; /* --- Papéis semânticos (use estes, não as cores diretas) ------------- */ --cor-fundo: var(--branco); --cor-fundo-escuro: var(--azul-escuro); --cor-texto: var(--azul-escuro); --cor-texto-invertido: var(--branco); --cor-acao: var(--azul); --cor-acao-hover: var(--ciano); --cor-link: var(--azul); --cor-destaque: var(--ciano); /* Superfícies e bordas derivadas por TRANSPARÊNCIA do azul-escuro. Não são cores novas: é a mesma cor com opacidade, o que mantém a regra de não clarear nem escurecer a paleta. */ --cor-superficie: rgba(34, 48, 71, 0.03); --cor-superficie-alt: rgba(34, 48, 71, 0.06); --cor-borda: rgba(34, 48, 71, 0.12); --cor-borda-forte: rgba(34, 48, 71, 0.24); --cor-texto-suave: rgba(34, 48, 71, 0.65); --cor-foco: var(--ciano); /* --- Estados (PROVISÓRIO) -------------------------------------------- */ /* A ficha da marca não define vermelho, amarelo nem verde. Estes valores são provisórios, só para não travar a interface, e estão pendentes de definição pelo Webmaster. Não usar em peça de marketing. */ --cor-critico: #C0392B; /* provisório */ --cor-atencao: #C87F0A; /* provisório */ --cor-ok: var(--ciano); --cor-neutro: var(--cor-texto-suave); /* --- Tipografia ------------------------------------------------------ */ /* Ubuntu auto-hospedada. Primetime é EXCLUSIVA da logomarca: nunca em UI. */ --fonte-texto: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-titulo: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --peso-normal: 400; --peso-forte: 700; --texto-xs: 0.75rem; --texto-sm: 0.875rem; --texto-base: 1rem; --texto-lg: 1.125rem; --texto-xl: 1.375rem; --texto-2xl: 1.75rem; --texto-3xl: 2.25rem; --altura-linha: 1.6; --altura-linha-titulo: 1.25; /* --- Espaçamento, raio, sombra --------------------------------------- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-6: 1.5rem; --esp-8: 2rem; --esp-12: 3rem; --raio-sm: 4px; --raio: 8px; --raio-lg: 12px; --raio-pill: 999px; --sombra-1: 0 1px 2px rgba(34, 48, 71, 0.08); --sombra-2: 0 4px 12px rgba(34, 48, 71, 0.10); --transicao: 160ms ease; /* --- Logomarca ------------------------------------------------------- */ --logo-positiva: url("https://assets.cdn.corumba.app.br/clientes/corumba/logo-principal.svg"); --logo-respiro: 1em; /* área de respiro mínima = altura do símbolo */ } /* --- Modo escuro: o fundo passa a ser o azul-escuro da marca ------------ */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cor-fundo: var(--azul-escuro); --cor-texto: var(--branco); --cor-texto-invertido: var(--azul-escuro); --cor-acao: var(--ciano); /* azul sobre azul-escuro reprova */ --cor-acao-hover: var(--branco); --cor-link: var(--ciano); --cor-superficie: rgba(255, 255, 255, 0.05); --cor-superficie-alt: rgba(255, 255, 255, 0.09); --cor-borda: rgba(255, 255, 255, 0.16); --cor-borda-forte: rgba(255, 255, 255, 0.28); --cor-texto-suave: rgba(255, 255, 255, 0.70); } } :root[data-tema="escuro"] { --cor-fundo: var(--azul-escuro); --cor-texto: var(--branco); --cor-texto-invertido: var(--azul-escuro); --cor-acao: var(--ciano); --cor-acao-hover: var(--branco); --cor-link: var(--ciano); --cor-superficie: rgba(255, 255, 255, 0.05); --cor-superficie-alt: rgba(255, 255, 255, 0.09); --cor-borda: rgba(255, 255, 255, 0.16); --cor-borda-forte: rgba(255, 255, 255, 0.28); --cor-texto-suave: rgba(255, 255, 255, 0.70); } /* ============================================================================ CONTRASTE MEDIDO (WCAG 2.1) — use para decidir onde cada cor pode aparecer azul-escuro sobre branco ....... 13,28 AAA texto de qualquer tamanho azul sobre branco .............. 6,38 AA texto, link, botão branco sobre azul .............. 6,38 AA botão primário branco sobre azul-escuro ....... 13,28 AAA menu, header, rodapé ciano sobre branco ............. 3,01 só texto grande (24px+) e ícone ciano sobre azul-escuro ........ 4,40 só texto grande e ícone azul sobre azul-escuro ......... 2,08 REPROVA — nunca Regra prática: ciano é acento, não cor de texto pequeno. ========================================================================== */ /* --- Base opcional ----------------------------------------------------- */ body.corumba { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-weight: var(--peso-normal); font-size: var(--texto-base); line-height: var(--altura-linha); -webkit-font-smoothing: antialiased; } .corumba h1, .corumba h2, .corumba h3, .corumba h4 { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); line-height: var(--altura-linha-titulo); color: var(--cor-texto); margin: 0 0 var(--esp-3); } .corumba h1 { font-size: var(--texto-3xl); } .corumba h2 { font-size: var(--texto-2xl); } .corumba h3 { font-size: var(--texto-xl); } .corumba a { color: var(--cor-link); text-decoration-thickness: 1px; text-underline-offset: 2px; } .corumba a:hover { color: var(--cor-acao-hover); } .corumba :focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; } .btn { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-6); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-sm); border: 1px solid transparent; border-radius: var(--raio); cursor: pointer; transition: background var(--transicao), color var(--transicao); } .btn-primario { background: var(--cor-acao); color: var(--branco); } .btn-primario:hover { background: var(--ciano); } .btn-secundario { background: transparent; color: var(--cor-acao); border-color: var(--cor-borda-forte); } .btn-secundario:hover { background: var(--cor-superficie-alt); } .cartao { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: var(--esp-6); } /* Indicador de estado. O ponto é decorativo: sempre acompanhado de texto, porque cor sozinha não comunica para quem não distingue as cores. */ .estado { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); } .estado::before { content: ""; width: 8px; height: 8px; border-radius: var(--raio-pill); background: currentColor; } .estado-ok { color: var(--cor-ok); } .estado-atencao { color: var(--cor-atencao); } .estado-critico { color: var(--cor-critico); } .estado-neutro { color: var(--cor-neutro); } /* Logomarca: respeita o respiro mínimo e nunca distorce. */ .logo-corumba { display: inline-block; height: 40px; width: auto; padding: var(--logo-respiro); object-fit: contain; }