/* static/css/tokens.css
* ============================================================================
* FUNDAMENTOS DA DIRECAO VISUAL — "Serio. Digital. Confiavel." (v1)
* ============================================================================
*
* Este arquivo NAO estiliza nada. Ele so declara @font-face e custom properties.
* Carregue-o ANTES de shell.css:
*
*
*
*
*
* POR QUE AS FONTES SAO LOCAIS. A CSP do app (app.py, _CSP) tem
* `style-src 'self'` e `font-src 'self' data:`. Um para
* fonts.googleapis.com e os .woff2 de fonts.gstatic.com seriam BLOQUEADOS — e o
* bloqueio e SILENCIOSO: a pagina renderiza com a fonte de fallback e nada
* aparece como erro na tela. Nao afrouxe a CSP para acomodar um CDN de fonte:
* ha teste que trava a politica (tests/test_csp.py), fonte local e mais rapida e
* nao entrega o IP do visitante a um terceiro.
*
* VALORES: extraidos dos HTMLs interativos da entrega, nao dos PNGs — print tem
* compressao e mente no hex.
*
* DIVERGENCIA CONHECIDA: a folha de fundamentos rotula o azul de acao como
* #1855C4, mas esse valor NAO aparece uma unica vez nas telas; todas usam
* #1B55C4 (105 ocorrencias entre os dois arquivos). Adotado o que esta desenhado.
*/
/* --- Archivo: uma familia so, variavel (peso 100..900, largura 62..125) ------
* O design pede titulos em 800 com largura 115 ("Archivo Expanded"). Isso NAO
* existe como arquivo estatico separado: e a variavel no eixo wdth. Por isso a
* `font-stretch` de duas casas no @font-face — ela declara a FAIXA suportada, e
* e o que permite `font-stretch: 115%` funcionar nos titulos.
*/
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-latin-100-900.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-latin-ext-100-900.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- IBM Plex Mono: numeros, datas e status --------------------------------
* Estatica (nao tem variavel no Google Fonts). Dois pesos bastam: 400 no corpo
* e 600 nos rotulos em caixa alta.
*/
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ibmplexmono-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/ibmplexmono-latin-ext-400.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ibmplexmono-latin-600.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/ibmplexmono-latin-ext-600.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* --- Tipografia --------------------------------------------------------- */
--cd-fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--cd-fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
/* Largura expandida dos titulos. So funciona porque a Archivo e variavel. */
--cd-titulo-largura: 115%;
/* --- Cor: tinta e neutros ----------------------------------------------- */
--cd-tinta: #0e1b2e; /* titulos e texto forte */
--cd-texto: #3b4757; /* corpo */
--cd-texto-fraco: #6b7686; /* secundario — o neutro mais usado do sistema */
--cd-texto-apagado: #9aa3af; /* rotulos, placeholders */
/* --- Cor: superficies ---------------------------------------------------- */
--cd-superficie: #ffffff; /* cartoes e campos */
--cd-papel: #f5f5f2; /* fundo DENTRO do sistema */
--cd-papel-sutil: #fafaf8; /* faixas alternadas, cabecalho de tabela */
--cd-papel-editorial: #f3f1ec;/* SO na comunicacao externa (landing) */
/* --- Bordas -------------------------------------------------------------
* Nao ha cinza de borda: e a propria tinta em quatro opacidades. Isso mantem
* a borda sempre em harmonia com o texto, em qualquer superficie.
*/
--cd-borda-tenue: rgba(14, 27, 46, 0.08);
--cd-borda: rgba(14, 27, 46, 0.12);
--cd-borda-media: rgba(14, 27, 46, 0.15);
--cd-borda-forte: rgba(14, 27, 46, 0.2);
/* --- Cor: azul de acao --------------------------------------------------- */
--cd-azul: #1b55c4;
--cd-azul-hover: #123f8c;
--cd-azul-900: #0b2a5b;
--cd-azul-fundo: #e7eefb;
--cd-azul-borda: #cfddf7;
/* --- Estado: pago (verde) ------------------------------------------------ */
--cd-verde: #1e7f5c;
--cd-verde-texto: #0f5a3f;
/* Tint verde do guia de identidade e do mock de 03/09 (o selo "Sistema
ativo"). Os valores antigos vinham da entrega de 02/09 e ficaram meio
tom acima. */
--cd-verde-fundo: #e6f3ec;
--cd-verde-borda: #bfdfcf;
/* --- Estado: em aberto (cobre) ------------------------------------------
* O dourado saiu. Cobre aquece o azul sem parecer alerta bancario — e sinal
* de atencao, NUNCA de alarme.
*/
--cd-cobre: #b4562b;
--cd-cobre-texto: #7a3417;
--cd-cobre-fundo: #f6e7de;
--cd-cobre-borda: #e9c7b4;
/* --- Estado: parcial (dourado) ------------------------------------------
* Decisao do dono (10/09/2026): o PARCIAL tinha o MESMO fundo do EM ABERTO e
* so o marcador pela metade os separava — na tela real, um ao lado do outro,
* o escritorio confundia os dois. O dourado e o cobre puxado para o amarelo:
* continua quente (dinheiro que ainda falta), mas nao e a mesma cor. Vale
* SO para "entrou uma parte": nao e cor de aviso nem de decoracao.
*/
--cd-dourado: #a97a10;
--cd-dourado-texto: #6e4d05;
--cd-dourado-fundo: #f9edc8;
--cd-dourado-borda: #e6cf8a;
/* --- Categoria: regime tributario (11/09/2026) --------------------------
* NAO sao cores de estado. Verde e pago, cobre e em aberto, dourado e
* parcial, vermelho e falha — cada uma quer dizer UMA coisa, e regime nao e
* nenhuma delas: e uma classificacao do cliente, sem juizo de bom ou ruim.
* Por isso cinco tons proprios, sem parentesco com os de estado, para a
* sigla no chip nao ser lida como "este esta devendo". So se usam no chip
* de regime e onde mais o regime for exibido; nunca para outra coisa.
*/
--cd-regime-mei-texto: #1f4f8f; --cd-regime-mei-fundo: #e5eefb; --cd-regime-mei-borda: #c3d5f3; /* azul-marinho */
--cd-regime-sn-texto: #5a3a8f; --cd-regime-sn-fundo: #eee8f8; --cd-regime-sn-borda: #d3c5ec; /* roxo */
--cd-regime-lp-texto: #0f6a6a; --cd-regime-lp-fundo: #e2f2f1; --cd-regime-lp-borda: #b8dedc; /* verde-azulado */
--cd-regime-lr-texto: #8a3a5a; --cd-regime-lr-fundo: #f8e7ee; --cd-regime-lr-borda: #ebc4d4; /* vinho */
--cd-regime-outros-texto: #4f5a68; --cd-regime-outros-fundo: #eef0f2; --cd-regime-outros-borda: #d3d8de; /* cinza */
/* --- Estado: falha -------------------------------------------------------
* A familia vermelha inteira, como o guia de identidade a define: base para o
* ponto/icone, tint para o fundo, texto escuro para o que se le. So havia o
* texto aqui, e cada tela reinventava o resto (index.css tinha --alarme-*).
*/
--cd-falha: #b3261e;
--cd-falha-texto: #7c1d18;
--cd-falha-fundo: #f9e9e7;
--cd-falha-borda: #e5b9b5;
/* --- Raios ---------------------------------------------------------------
* Decisao final do design: 6px em controles, 8px em cartoes.
*/
--cd-raio-controle: 6px;
--cd-raio-cartao: 8px;
--cd-raio-chip: 4px;
/* --- Elevacao ------------------------------------------------------------
* "Nada salta." Uma sombra so no sistema; as maiores ficam na landing.
*/
--cd-sombra: 0 1px 2px rgba(14, 27, 46, 0.05);
--cd-sombra-foco: 0 0 0 3px rgba(27, 85, 196, 0.12);
/* --- Movimento ----------------------------------------------------------- */
/*
* A PERSONALIDADE: firme e precisa, nao "divertida". O produto cobra dinheiro
* de gente; movimento longo ou elastico faz parecer brinquedo.
*
* Tres duracoes, e nenhuma passa de 400ms:
* dur-1 estados (hover, foco, cor de fundo)
* dur-2 entrada e saida de elementos
* dur-3 coisas grandes: gaveta do celular, modal, barra de progresso
*
* Duas curvas, e so duas. Entrada desacelera (ease-out): o elemento chega e
* assenta. Saida acelera (ease-in): sai da frente. `ease-in-out` generico faz
* tudo parecer mole, e curva com bounce nao existe neste produto.
*/
--cd-dur-1: 150ms;
--cd-dur-2: 220ms;
--cd-dur-3: 320ms;
--cd-ease-out: cubic-bezier(.2, .8, .2, 1);
--cd-ease-in: cubic-bezier(.4, 0, 1, 1);
/* Deslocamento das entradas. 6px e o ponto em que o olho percebe que algo
CHEGOU sem perceber a viagem; 20px vira apresentacao de slides. */
--cd-shift: 6px;
/* Os dois de antes continuam: dezenas de regras ja os usam, e trocar todas
num PR de movimento misturaria refatoracao com o que se quer observar.
Passam a apontar para a mesma curva do sistema. */
--cd-transicao: var(--cd-dur-1) var(--cd-ease-out);
--cd-transicao-lenta: var(--cd-dur-2) var(--cd-ease-out);
}
/* Quem pediu menos movimento no sistema operacional nao recebe transicao
* nenhuma. Os tokens viram zero num lugar so, em vez de cada componente ter de
* lembrar de respeitar a preferencia. */
@media (prefers-reduced-motion: reduce) {
:root {
--cd-transicao: 0ms;
--cd-transicao-lenta: 0ms;
/* 1ms e nao 0: animacao com duracao zero nao dispara `animationend`, e ha
JS que remove a classe do pulso justamente nesse evento — com 0 a classe
ficaria grudada para sempre. */
--cd-dur-1: 1ms;
--cd-dur-2: 1ms;
--cd-dur-3: 1ms;
--cd-shift: 0px;
}
}