/* ============================================================================ denvo-vars.css: fonte única de tokens visuais do Denvo. IDENTIDADE OFICIAL (07/08/2026, Agência Liberatus). Duas cores de marca: grafite #0D242B é a tinta (navegação, texto, botão de ação, tema escuro) e âmbar #E19742 é o acento (bloco de foco, aba ativa, anel de foco). Mais uma escala neutra de 9 tons, papel morno no topo e tinta de radiografia no pé. Nenhum verde do SeuNutricionista, nenhum coral do GinecoLab, nenhum azul de hospital, nenhum teal (a paleta teal de 06/08 foi APOSENTADA aqui). Fonte de verdade da paleta: docs/marca/ (manual em seis folhas) e a prova de contraste em docs/marca/prova_contraste.json: os 23 pares de texto sobre fundo previstos no sistema passam WCAG AA. Arquivo INERTE em quase tudo: define variáveis em :root e só carrega as fontes. Carregar em todo shell com ?v=filemtime (o Cloudflare cacheia CSS por 7 dias). Regras da casa que este arquivo materializa: - profundidade por BORDA, sombra só em camada flutuante; - raio em escala, nunca canto grande em elemento pequeno; - número em IBM Plex Mono com tabular-nums, senão a coluna do financeiro dança; - texto corrido nunca abaixo de 14px, em tela nenhuma e em PDF nenhum. ========================================================================== */ /* --------------------------------------------------------------------------- Fontes auto-hospedadas. Instrument Sans (interface) e IBM Plex Mono (número e voz do sistema), as duas em SIL Open Font License 1.1: uso comercial e embarque no produto liberados. Local em vez de Google Fonts porque a CSP já libera font-src 'self' e porque tira um preconnect do caminho crítico. --------------------------------------------------------------------------- */ @font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Regular.woff2') format('woff2'), url('/assets/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Italic.woff2') format('woff2'), url('/assets/fonts/InstrumentSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Bold.woff2') format('woff2'), url('/assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* 500 e 600 existem espalhados no CSS legado: apontam para o Bold em vez de deixar o navegador sintetizar peso falso, que engorda o traço. */ @font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Bold.woff2') format('woff2'), url('/assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/assets/fonts/InstrumentSans-Bold.woff2') format('woff2'), url('/assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight: 800 900; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'), url('/assets/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/IBMPlexMono-Bold.woff2') format('woff2'), url('/assets/fonts/IBMPlexMono-Bold.ttf') format('truetype'); font-weight: 600 700; font-style: normal; font-display: swap; } /* Fallback métrico: evita CLS enquanto a Instrument Sans não chega. Os overrides foram ajustados às métricas da família (mesma técnica que derrubou o CLS de 0,325 no GinecoLab). */ @font-face { font-family: 'Instrument Fallback'; src: local('Segoe UI'), local('Arial'); ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; size-adjust: 100%; } :root { /* ================= MARCA: duas cores, e só duas ================= */ --dv-grafite: #0D242B; /* a tinta: navegação, texto, ação, tema escuro */ --dv-ambar: #E19742; /* o acento: bloco de foco, aba ativa, marcador */ /* tints derivadas da MESMA matiz do âmbar. Não são cores novas. */ --dv-ambar-tinta: #9C6320; /* âmbar em texto, link e foco no claro (AA) */ --dv-ambar-claro: #ECB073; /* âmbar em texto no escuro (AA) */ --dv-ambar-veu: #FFEDDB; /* faixa de seleção e realce de linha */ --dv-ambar-escuro: #7A4D19; /* âmbar pressionado / link visitado */ /* ============ ESCALA NEUTRA: 9 tons ============ papel morno em cima, tinta de radiografia embaixo. */ --dv-neutro-01: #FCFAF8; /* L* 98 fundo da aplicação */ --dv-neutro-02: #F6F4F0; /* L* 96 superfície de cartão e campo */ --dv-neutro-03: #EBE9E5; /* L* 92 borda suave, divisória, hover */ --dv-neutro-04: #CED6D7; /* L* 85 borda forte, contorno de campo */ --dv-neutro-05: #99A4A6; /* L* 67 ícone secundário, texto desabilitado */ --dv-neutro-06: #657276; /* L* 47 texto terciário (AA) */ --dv-neutro-07: #455459; /* L* 35 texto secundário (AA) */ --dv-neutro-08: #26393E; /* L* 23 superfície escura elevada */ --dv-neutro-09: #0D242B; /* L* 13 texto primário e fundo escuro */ /* ============ PAPÉIS NO TEMA CLARO ============ o padrão da clínica é sala com luz. */ --dv-fundo: var(--dv-neutro-01); --dv-superficie: var(--dv-neutro-02); --dv-superficie-alta: #FFFFFF; --dv-borda: var(--dv-neutro-03); --dv-borda-forte: var(--dv-neutro-04); --dv-texto: var(--dv-neutro-09); --dv-texto-2: var(--dv-neutro-07); --dv-texto-3: var(--dv-neutro-06); --dv-texto-desabilitado: var(--dv-neutro-05); --dv-acao: var(--dv-neutro-09); /* botão primário: grafite, NÃO âmbar */ --dv-acao-hover: var(--dv-neutro-08); --dv-acao-texto: #FFFFFF; --dv-foco: var(--dv-ambar-tinta); /* anel de foco, 3:1 garantido */ --dv-link: var(--dv-ambar-tinta); --dv-link-hover: var(--dv-ambar-escuro); --dv-selecao: var(--dv-ambar-veu); /* linha selecionada, aba ativa */ --dv-campo: #FFFFFF; /* campo mais claro que a superfície */ --dv-campo-borda: var(--dv-neutro-04); /* ============ DEZ ESTADOS CLÍNICOS DO ODONTOGRAMA ============ Cor E desenho, sempre. O desenho vem no atributo data-dv-desenho da célula porque matiz sozinha não distingue para deuteranopia nem para protanopia, e o odontograma é leitura de diagnóstico. As provas por tipo de visão estão em docs/marca/. */ --dv-estado-higido: #EBE8E4; /* Hígido desenho: vazio */ --dv-estado-carie: #8A1426; /* Cárie desenho: cheio */ --dv-estado-restauracao: #3371B2; /* Restauração desenho: quadrado */ --dv-estado-fratura: #DC7B4D; /* Fratura desenho: diagonal */ --dv-estado-canal: #5D3584; /* Canal tratado desenho: barra-v */ --dv-estado-coroa: #587430; /* Coroa desenho: moldura */ --dv-estado-protese: #59696C; /* Prótese desenho: barra-h */ --dv-estado-implante: #2F454C; /* Implante desenho: círculo */ --dv-estado-ausente: #8E9293; /* Ausente desenho: tracejado */ --dv-estado-extracao: #891325; /* Extração indicada desenho: xis */ /* ============ ESTADOS SEMÂNTICOS DA INTERFACE ============ Derivados da placa clínica, que já é provada para daltonismo, em vez de inventar uma quinta família de cor. Nunca green/emerald do Tailwind. INFO é NEUTRO (decisão 08/08/2026): o manual em docs/marca não tem família info azul. Folha 02: "a marca tem duas cores e nada mais: uma tinta e um acento. Toda a hierarquia restante é feita com a escala neutra". LEIA-ME: "nenhum azul de hospital". O azul #3371B2 existe SÓ como estado clínico Restauração (estados.json) e fica no token --dv-estado-restauracao; a dupla azul-marinho/azul-claro era do fork. Contraste (método de prova_contraste.json): neutro-08 sobre neutro-03 = 9,97 (AAA); neutro-07 sobre neutro-03 = 6,50 (AA). */ --dv-ok: #587430; /* mesmo tom de Coroa */ --dv-ok-bg: #EEF2E6; --dv-ok-ink: #3E5322; --dv-warn: var(--dv-ambar-tinta); --dv-warn-bg: var(--dv-ambar-veu); --dv-warn-ink: var(--dv-ambar-escuro); --dv-err: #8A1426; /* mesmo tom de Cárie */ --dv-err-bg: #FBE9EC; --dv-err-ink: #6B0F1D; --dv-info: var(--dv-neutro-07); /* informação é neutra na marca */ --dv-info-bg: var(--dv-neutro-03); --dv-info-ink: var(--dv-neutro-08); /* ============ TIPOGRAFIA ============ Instrument Sans na interface, IBM Plex Mono no número. Mono no número não é estilo: é algarismo tabular de largura fixa, que é o que mantém a coluna de valores alinhada no financeiro. */ --dv-fonte-ui: 'Instrument Sans', 'Instrument Fallback', -apple-system, 'Segoe UI', Roboto, sans-serif; --dv-fonte-num: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --dv-num-tabular: tabular-nums; /* composições canônicas (font shorthand pronto) */ --dv-txt-rotulo: 700 13px/16px var(--dv-fonte-ui); /* caixa-alta: rótulo de campo, cabeçalho de tabela */ --dv-tr-rotulo: 0.06em; --dv-txt-corpo-sm: 400 14px/20px var(--dv-fonte-ui); /* piso de leitura: célula de tabela, texto de apoio */ --dv-tr-corpo-sm: 0; --dv-txt-corpo: 400 16px/24px var(--dv-fonte-ui); /* texto corrido, campo de formulário */ --dv-tr-corpo: 0; --dv-txt-titulo-4: 700 20px/28px var(--dv-fonte-ui); /* título de cartão */ --dv-tr-titulo-4: -0.005em; --dv-txt-titulo-3: 700 24px/32px var(--dv-fonte-ui); /* título de seção */ --dv-tr-titulo-3: -0.01em; --dv-txt-titulo-2: 700 30px/38px var(--dv-fonte-ui); /* título de tela */ --dv-tr-titulo-2: -0.015em; --dv-txt-titulo-1: 700 36px/44px var(--dv-fonte-ui); /* título de página e de PDF */ --dv-tr-titulo-1: -0.02em; --dv-txt-display: 700 44px/52px var(--dv-fonte-ui); /* só login e capa */ --dv-tr-display: -0.025em; --dv-num-valor-sm: 400 14px/20px var(--dv-fonte-num); /* valor em célula de tabela */ --dv-num-valor: 400 20px/28px var(--dv-fonte-num); /* total de orçamento, saldo do dia */ --dv-num-valor-hero: 700 30px/38px var(--dv-fonte-num); /* número dominante do financeiro e total de PDF */ /* ============ ESPAÇO: base 4px, só múltiplos ============ */ --dv-esp-1: 4px; --dv-esp-2: 8px; --dv-esp-3: 12px; --dv-esp-4: 16px; --dv-esp-5: 24px; --dv-esp-6: 32px; --dv-esp-7: 48px; --dv-esp-8: 64px; /* ============ RAIO: escala ============ nunca canto grande em elemento pequeno. */ --dv-raio-0: 0px; /* célula do odontograma: canto vivo, é grade de medida */ --dv-raio-1: 2px; /* campo, botão, seletor */ --dv-raio-2: 4px; /* cartão e painel */ --dv-raio-3: 8px; /* diálogo e menu suspenso */ --dv-raio-pill: 999px; /* só chip e trilha de barra */ /* ============ PROFUNDIDADE ============ UMA estratégia: borda. Sombra só em camada flutuante. */ --dv-elevacao-1: 0 0 0 1px rgba(13, 36, 43, .07), 0 1px 2px -1px rgba(13, 36, 43, .10); --dv-elevacao-2: 0 0 0 1px rgba(13, 36, 43, .08), 0 4px 12px -4px rgba(13, 36, 43, .16); --dv-elevacao-3: 0 0 0 1px rgba(13, 36, 43, .08), 0 16px 40px -12px rgba(13, 36, 43, .28); --dv-anel-foco: 0 0 0 2px var(--dv-fundo), 0 0 0 4px var(--dv-foco); /* ============ MOVIMENTO ============ curto e só onde ajuda. O odontograma não anima. */ --dv-mov-rapido: 120ms cubic-bezier(.23, 1, .32, 1); --dv-mov-normal: 180ms cubic-bezier(.23, 1, .32, 1); /* ============ GEOMETRIA DA MARCA E DOS ÍCONES ============ */ --dv-marca-canal: 6%; /* vão dos eixos no símbolo */ --dv-marca-razao: 1.618; /* bloco grande / bloco de foco */ --dv-icone-grade: 24px; --dv-icone-traco: 2px; --dv-icone-min: 20px; /* abaixo disso o desenho entope */ /* ======================================================================= COMPATIBILIDADE. Daqui para baixo é só remapeamento: nome antigo que o CSS legado consome, apontando para a paleta oficial. Não criar cor nova aqui. Quando uma tela for revista, troca-se o nome antigo pelo token oficial acima e a linha correspondente pode sair. ======================================================================= */ /* -- nomes de 06/08 (paleta teal, aposentada). O nome sobrevive, a cor não. -- */ --dv-teal: var(--dv-grafite); --dv-teal-dark: var(--dv-neutro-08); --dv-teal-darker: var(--dv-grafite); --dv-teal-soft: var(--dv-ambar); --dv-teal-tint: var(--dv-ambar-veu); --dv-teal-tint-2: var(--dv-neutro-02); --dv-azul: var(--dv-ambar-tinta); --dv-azul-dark: var(--dv-ambar-escuro); --dv-azul-tint: var(--dv-ambar-veu); /* -- neutros do shell -- */ --dv-app-bg: var(--dv-neutro-01); --dv-paper: #FFFFFF; --dv-paper-2: var(--dv-neutro-02); --dv-ink: var(--dv-neutro-09); --dv-ink-2: var(--dv-neutro-07); --dv-ink-3: var(--dv-neutro-06); --dv-ink-4: var(--dv-neutro-05); /* -- bordas e divisores: em rgba para não sumirem sobre fundo branco -- */ --dv-line: rgba(13, 36, 43, .16); --dv-line-soft: rgba(13, 36, 43, .10); --dv-line-strong: rgba(13, 36, 43, .30); /* -- aliases de intenção -- */ --dv-marca: var(--dv-grafite); /* --primary-rgb vivia SÓ em css/global.css, mas 73 usos escrevem rgba(var(--primary-rgb, 14,124,139), ...) com o TEAL APOSENTADO no fallback. Telas que carregam apenas este arquivo (patient_comparison, historico_de_avaliacoes_fisicas) caíam no fallback e pintavam anel de foco e sombra em #0E7C8B. Definido aqui, o fallback nunca dispara. */ --primary-rgb: 13, 36, 43; --primary: var(--dv-grafite); /* -- tipografia legada (escala antiga base 14). Piso subido para o mínimo de leitura da marca: o antigo 10.5px não passava. -- */ --dv-ff: var(--dv-fonte-ui); --dv-ff-num: var(--dv-fonte-num); --dv-fz-xxs: 11px; --dv-fz-xs: 12px; --dv-fz-sm: 13px; --dv-fz-md: 14px; --dv-fz-lg: 16px; --dv-fz-xl: 20px; --dv-fz-2xl: 24px; --dv-fz-3xl: 30px; /* -- espaçamento legado -- */ --dv-sp-1: 4px; --dv-sp-2: 8px; --dv-sp-3: 12px; --dv-sp-4: 16px; --dv-sp-5: 20px; --dv-sp-6: 24px; --dv-sp-8: 32px; /* -- superfície e contenção -- */ --dv-page-max: 1400px; --dv-page-gutter: clamp(14px, 2vw, 28px); --dv-radius-sm: var(--dv-raio-1); --dv-radius: var(--dv-raio-2); --dv-radius-lg: var(--dv-raio-3); --dv-shadow-1: var(--dv-elevacao-1); --dv-shadow-2: var(--dv-elevacao-2); /* -- tokens --odo-* herdados do fork odontológico -- */ --odo-primary: var(--dv-grafite); --odo-primary-dark: var(--dv-neutro-08); --odo-primary-darker: var(--dv-grafite); --odo-accent: var(--dv-ambar-tinta); --odo-accent-dark: var(--dv-ambar-escuro); --odo-accent-soft: var(--dv-ambar-veu); --odo-tint: var(--dv-ambar-veu); --odo-tint-soft: var(--dv-neutro-02); --odo-pastel: var(--dv-ambar); --odo-on-primary: #FFFFFF; } /* --------------------------------------------------------------------------- TEMA ESCURO: mesma hierarquia, valores invertidos. No escuro a sombra não aparece: quem separa é a borda. --------------------------------------------------------------------------- */ [data-dv-tema="escuro"] { --dv-fundo: var(--dv-neutro-09); --dv-superficie: var(--dv-neutro-08); --dv-superficie-alta: #2F454C; --dv-borda: rgba(255, 255, 255, .09); --dv-borda-forte: rgba(255, 255, 255, .16); --dv-texto: var(--dv-neutro-01); --dv-texto-2: var(--dv-neutro-04); --dv-texto-3: var(--dv-neutro-05); --dv-texto-desabilitado: var(--dv-neutro-06); --dv-acao: var(--dv-neutro-01); --dv-acao-hover: #FFFFFF; --dv-acao-texto: var(--dv-neutro-09); --dv-foco: var(--dv-ambar); --dv-link: var(--dv-ambar-claro); --dv-link-hover: var(--dv-ambar); --dv-selecao: rgba(225, 151, 66, .18); /* 08/08/2026: era #002E5C (azul-marinho fora da marca, quebrava a identidade grafite/âmbar). Campo escuro = grafite MAIS ESCURO que a superfície (simetria do claro, onde o campo é mais claro que a superfície). Texto claro (--dv-texto) sobre neutro-09 passa AA folgado; a borda rgba branca delimita o campo mesmo quando ele encosta no fundo. */ --dv-campo: var(--dv-neutro-09, #0D242B); --dv-campo-borda: rgba(255, 255, 255, .16); --dv-elevacao-1: 0 0 0 1px rgba(255, 255, 255, .08); --dv-elevacao-2: 0 0 0 1px rgba(255, 255, 255, .10); --dv-elevacao-3: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px -12px rgba(0, 0, 0, .55); /* compatibilidade no escuro */ --dv-app-bg: var(--dv-neutro-09); --dv-paper: var(--dv-neutro-08); --dv-paper-2: #2F454C; --dv-ink: var(--dv-neutro-01); --dv-ink-2: var(--dv-neutro-04); --dv-ink-3: var(--dv-neutro-05); --dv-ink-4: var(--dv-neutro-06); --dv-line: rgba(255, 255, 255, .12); --dv-line-soft: rgba(255, 255, 255, .07); --dv-line-strong: rgba(255, 255, 255, .22); --dv-shadow-1: var(--dv-elevacao-1); --dv-shadow-2: var(--dv-elevacao-2); --odo-primary: var(--dv-neutro-01); --odo-primary-dark: #FFFFFF; --odo-primary-darker: var(--dv-neutro-01); --odo-accent: var(--dv-ambar-claro); --odo-tint: rgba(225, 151, 66, .18); --odo-tint-soft: #2F454C; --odo-on-primary: var(--dv-neutro-09); --dv-warn-bg: rgba(225, 151, 66, .18); --dv-warn-ink: var(--dv-ambar-claro); --dv-ok-bg: rgba(88, 116, 48, .22); --dv-ok-ink: #ACC095; --dv-err-bg: rgba(138, 20, 38, .26); --dv-err-ink: #ED9F9F; /* info neutro também no escuro: véu do neutro-05 e tinta neutro-04 (neutro-04 sobre grafite = 10,91 e sobre neutro-08 = 8,19, ambos AAA em prova_contraste.json). O acento sobe para neutro-05 porque #455459 some sobre superfície escura (borda de chip exige 3:1). */ --dv-info: var(--dv-neutro-05); --dv-info-bg: rgba(153, 164, 166, .22); --dv-info-ink: var(--dv-neutro-04); } /* --------------------------------------------------------------------------- A PLACA CLÍNICA NÃO INVERTE. O odontograma é leitura de diagnóstico: se a cor de cárie mudar de fundo entre o dia e a noite, muda de significado, e o que sai impresso deixa de bater com o que estava na tela. Então a placa fica sempre clara, como negatoscópio, mesmo dentro do tema escuro. Aplique .dv-placa no painel. --------------------------------------------------------------------------- */ .dv-placa, [data-dv-tema="escuro"] .dv-placa { --dv-fundo: var(--dv-neutro-01); --dv-superficie: var(--dv-neutro-02); --dv-superficie-alta: #FFFFFF; --dv-borda: var(--dv-neutro-03); --dv-borda-forte: var(--dv-neutro-04); --dv-texto: var(--dv-neutro-09); --dv-texto-2: var(--dv-neutro-07); --dv-texto-3: var(--dv-neutro-06); --dv-link: var(--dv-ambar-tinta); --dv-foco: var(--dv-ambar-tinta); background: var(--dv-superficie-alta); color: var(--dv-texto); } /* --------------------------------------------------------------------------- Utilitários mínimos que a marca exige e que não cabem em nenhum CSS de página. Tudo mais é responsabilidade do global.css. --------------------------------------------------------------------------- */ /* Sem isto a coluna de valores dança a cada linha. Uso obrigatório em toda célula de dinheiro, data, CPF, telefone e número de prontuário. */ .dv-valor, .dv-num { font-family: var(--dv-fonte-num); font-variant-numeric: var(--dv-num-tabular); font-feature-settings: 'tnum' 1; } .dv-valor { font: var(--dv-num-valor); font-variant-numeric: var(--dv-num-tabular); } .dv-valor-sm { font: var(--dv-num-valor-sm); font-variant-numeric: var(--dv-num-tabular); } .dv-valor-hero { font: var(--dv-num-valor-hero); font-variant-numeric: var(--dv-num-tabular); } /* Rótulo de campo e cabeçalho de tabela. Sempre com ":" no texto. */ .dv-rotulo { font: var(--dv-txt-rotulo); letter-spacing: var(--dv-tr-rotulo); text-transform: uppercase; color: var(--dv-texto-3); }