/* SmartCartório — design tokens Importe este arquivo no seu projeto e use as variáveis var(--nf-*). =========================================================================== SKINS =========================================================================== A aparência é controlada por cinco atributos no , escritos pelo servidor em App.razor ANTES de a página chegar ao navegador (por isso a tela já nasce na skin certa, sem piscar do claro para o escuro): data-skin indigo | azul | verde | cinza | ambar (cor de acento) data-modo claro | escuro data-tamanho compacto | normal | grande (escala tipográfica) data-barra escura | colorida (preferência legada, sem efeito visual) data-fonte segoeui | sistema | tahoma | verdana | arial | calibri | georgia Regras de composição, nesta ordem: 1. :root neutros do modo claro + papéis da skin Indigo 2. [data-skin=...] troca os papéis de ação e shell 3. [data-modo=escuro] troca os neutros para a base escura 4. [data-modo=escuro][data-skin=...] clareia o acento para contrastar no escuro Por que o acento precisa de duas versões: uma cor que tem contraste suficiente sobre papel claro fica escura demais sobre fundo preto, e vice-versa. Não dá para usar o mesmo hex nos dois modos sem perder legibilidade. O ouro de fé pública (--nf-gold) NÃO é cor de marca: é semântica de ato oficial (selo, carimbo, borda da guia) e permanece dourado nas cinco skins. Só o tom muda no escuro, onde o dourado do modo claro fica sujo sobre fundo preto. */ @font-face { font-family: "Archivo"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 600; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; } :root { color-scheme: light; /* ----- neutros: base FRIA (vale para azul, verde, cinza e âmbar) ----- */ --nf-ink: #0B1220; /* Tinta — texto principal */ --nf-paper: #F7F8FA; /* fundo da aplicação */ --nf-surface: #FFFFFF; /* cartões, painéis */ --nf-mist: #EDF0F5; /* fundos sutis, colunas */ --nf-line: #D8DEE9; /* divisórias, bordas */ --nf-muted: #3A4358; /* texto secundário com contraste para corpos pequenos */ /* ----- escala neutra ----- */ --nf-50: #F7F8FA; --nf-100: #EDF0F5; --nf-200: #D8DEE9; --nf-300: #B9C1D0; --nf-400: #8A93A6; --nf-500: #6E6E6E; --nf-600: #3A4358; --nf-700: #243047; --nf-900: #0B1220; /* ----- marca fixa ----- */ --nf-brand-shell: #012F8D; --nf-brand-shell-on: #FFFFFF; --nf-brand-shell-muted: #D8E9FF; --nf-brand-shell-accent: #7FC0FF; --nf-brand-action: #007FFF; --nf-brand-action-on: #0B1220; --nf-brand-action-text: #0066CC; /* ----- shell e acao da skin Indigo ----- */ --nf-shell: #3730A3; --nf-shell-on: #FFFFFF; --nf-shell-ink: var(--nf-shell-on); --nf-shell-muted: #E0DEFF; --nf-shell-accent: #C7C2FF; --nf-shell-hover: #4A43BB; --nf-shell-selected: #5B53C7; --nf-shell-border: rgba(255, 255, 255, .18); --nf-action: #5246E6; --nf-action-on: #FFFFFF; --nf-action-hover: #4137B8; --nf-action-soft: #EEEDFF; --nf-action-line: #5246E6; --nf-focus: #5246E6; /* ----- selo / fé pública (não muda entre skins) ----- */ --nf-gold: #C28B2C; --nf-gold-soft: #F6ECD6; /* Aliases de compatibilidade para consumidores existentes. */ --nf-accent: var(--nf-action); --nf-accent-soft: var(--nf-action-soft); --nf-accent-line: var(--nf-action-line); --nf-accent-on-dark: var(--nf-shell-accent); --nf-secondary-accent: var(--nf-action); --nf-ai-pending: #AEDF45; --nf-on-action: var(--nf-action-on); --nf-black: #000000; --nf-doc-paper: #FFFFFF; --nf-doc-ink: #0B1220; --nf-auth-shadow: rgba(1, 47, 141, .22); /* ----- semânticos ----- */ --nf-ok: #2E8B57; /* sucesso, concluído */ --nf-warn: #C77700; /* aviso, prazo */ --nf-err: #B3261E; /* erro, vencido */ /* ----- tipografia ----- Nada é baixado de CDN. Archivo e IBM Plex são assets locais. A marca usa sempre Archivo; data-fonte substitui apenas as pilhas da interface pela preferência persistida do usuário. Cada pilha traz alternativas de macOS e Linux, porque o cartório pode ter máquina fora do Windows e o nome da fonte não existe lá. ARMADILHA (vale para Verdana, Tahoma e Arial): essas fontes têm só DOIS pesos reais, 400 e 700. Qualquer peso a partir de 500 cai no bold de 700 — 600 e 800 renderizam idênticos. Não adianta usar peso intermediário para criar hierarquia; use tamanho, cor ou caixa alta. Verdana é LARGA: no mesmo corpo ocupa mais espaço horizontal que Segoe UI ou Tahoma. Se uma tabela apertar, o caminho é o tamanho "Compacto", não reduzir fonte no CSS. */ --nf-font-brand: Archivo, "Segoe UI", system-ui, sans-serif; /* marca fixa */ --nf-font-display: Archivo, "Segoe UI", system-ui, sans-serif; /* títulos */ --nf-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; /* UI, corpo */ --nf-font-mono: "IBM Plex Mono", Consolas, "Cascadia Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace; /* protocolo, selo, CPF */ /* ----- forma & elevação ----- */ --nf-radius: 12px; --nf-radius-sm: 8px; --nf-radius-xs: 4px; --nf-shadow: 0 1px 2px rgba(18,22,27,.05), 0 6px 16px rgba(18,22,27,.06); } /* =========================================================================== FAMÍLIA TIPOGRÁFICA Só troca as duas variáveis; quem as consome (app.css e o bloco do MudBlazor logo abaixo) não precisa saber que existe escolha de fonte. =========================================================================== */ [data-fonte="segoeui"] { --nf-font-display: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --nf-font-sans: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; } [data-fonte="sistema"] { --nf-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-fonte="tahoma"] { --nf-font-display: Tahoma, Verdana, "DejaVu Sans", system-ui, sans-serif; --nf-font-sans: Tahoma, Verdana, "DejaVu Sans", system-ui, sans-serif; } [data-fonte="verdana"] { --nf-font-display: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; --nf-font-sans: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; } [data-fonte="arial"] { --nf-font-display: Arial, Helvetica, "Liberation Sans", system-ui, sans-serif; --nf-font-sans: Arial, Helvetica, "Liberation Sans", system-ui, sans-serif; } [data-fonte="calibri"] { /* Carlito é a métrica-compatível livre do Calibri, presente em muitas distros Linux. */ --nf-font-display: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; --nf-font-sans: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; } [data-fonte="georgia"] { --nf-font-display: Georgia, "Times New Roman", "Liberation Serif", serif; --nf-font-sans: Georgia, "Times New Roman", "Liberation Serif", serif; } /* =========================================================================== ESCALA TIPOGRÁFICA Muda o font-size da RAIZ, não o do texto: como o resto do sistema (incluindo o MudBlazor) dimensiona em rem, espaçamento e altura de linha acompanham a fonte e a proporção da tela se mantém. Mexer só no tamanho da letra deixaria o texto grande espremido dentro de caixas do tamanho antigo. =========================================================================== */ html[data-tamanho="compacto"] { font-size: 15px; } html[data-tamanho="normal"] { font-size: 16px; } /* padrão do navegador */ html[data-tamanho="grande"] { font-size: 17.5px; } /* =========================================================================== COR DE ACENTO — MODO CLARO =========================================================================== */ /* A cor efetiva move acoes, foco, links e o shell. */ [data-skin="indigo"] { --nf-shell: #3730A3; --nf-shell-hover: #4A43BB; --nf-shell-selected: #5B53C7; --nf-action: #5246E6; --nf-action-hover: #4137B8; --nf-action-soft: #EEEDFF; --nf-action-line: #5246E6; --nf-focus: #5246E6; } [data-skin="azul"] { --nf-shell: #1E3A8A; --nf-shell-hover: #274AAB; --nf-shell-selected: #3158C3; --nf-action: #2563EB; --nf-action-hover: #1D4ED8; --nf-action-soft: #E8F0FF; --nf-action-line: #2563EB; --nf-focus: #2563EB; } [data-skin="verde"] { --nf-shell: #14532D; --nf-shell-hover: #196C3B; --nf-shell-selected: #217D48; --nf-action: #15803D; --nf-action-hover: #166534; --nf-action-soft: #E7F6EC; --nf-action-line: #15803D; --nf-focus: #15803D; } [data-skin="cinza"] { --nf-shell: #1F2937; --nf-shell-hover: #374151; --nf-shell-selected: #4B5563; --nf-action: #4B5563; --nf-action-hover: #374151; --nf-action-soft: #EEF0F3; --nf-action-line: #4B5563; --nf-focus: #4B5563; } [data-skin="ambar"] { --nf-shell: #78350F; --nf-shell-hover: #92400E; --nf-shell-selected: #A65210; --nf-action: #A16207; --nf-action-hover: #854D0E; --nf-action-soft: #FFF3D9; --nf-action-line: #A16207; --nf-focus: #A16207; } /* =========================================================================== MODO ESCURO Primeiro os neutros (iguais para todas as skins), depois o acento secundário clareado de cada uma. A ordem importa: as regras de acento abaixo precisam vir DEPOIS do bloco de neutros para vencer o [data-skin] do modo claro, que tem a mesma especificidade. =========================================================================== */ [data-modo="escuro"] { color-scheme: dark; --nf-paper: #14161A; --nf-surface: #1C1F25; --nf-mist: #23272E; --nf-line: #2E333B; --nf-ink: #E9EBEF; --nf-muted: #9BA1AC; --nf-50: #1C1F25; --nf-100: #23272E; --nf-200: #2E333B; --nf-300: #454C57; --nf-400: #6B7280; --nf-500: #9BA1AC; --nf-600: #C2C7CF; --nf-700: #DDE0E5; --nf-900: #E9EBEF; --nf-action-on: #12161B; --nf-brand-action-text: #7FC0FF; /* O dourado do modo claro fica sujo sobre fundo preto — clareia mantendo a semântica. */ --nf-gold: #D9A441; --nf-gold-soft: #3A2F1A; --nf-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35); } [data-modo="escuro"][data-skin="indigo"] { --nf-action: #8A80FF; --nf-action-hover: #A39BFF; --nf-action-soft: #312C5A; --nf-action-line: #8A80FF; --nf-focus: #A39BFF; } [data-modo="escuro"][data-skin="azul"] { --nf-action: #7BA5FF; --nf-action-hover: #A0BEFF; --nf-action-soft: #1D386C; --nf-action-line: #7BA5FF; --nf-focus: #A0BEFF; } [data-modo="escuro"][data-skin="verde"] { --nf-action: #55C083; --nf-action-hover: #7BD7A2; --nf-action-soft: #173F2A; --nf-action-line: #55C083; --nf-focus: #7BD7A2; } [data-modo="escuro"][data-skin="cinza"] { --nf-action: #A3ACBA; --nf-action-hover: #C2C8D2; --nf-action-soft: #303640; --nf-action-line: #A3ACBA; --nf-focus: #C2C8D2; } /* Âmbar no escuro é o único caso em que acento e ouro colidem: o dourado clareado do modo escuro (#D9A441) é exatamente o âmbar da skin, e o selo de fé pública ficaria com a mesma cor de um botão comum — perdendo a distinção que justifica manter o ouro separado. Resolvido afastando os dois: acento sobe em luminosidade, ouro desce e desatura. */ [data-modo="escuro"][data-skin="ambar"] { --nf-action: #F2B75C; --nf-action-hover: #FFD08A; --nf-action-soft: #4B3418; --nf-action-line: #F2B75C; --nf-focus: #FFD08A; --nf-gold: #BC8433; --nf-gold-soft: #2E2411; } /* =========================================================================== IMPRESSÃO Documento impresso sai SEMPRE claro, qualquer que seja a skin: fundo escuro gasta toner e sai ilegível em papel. Vale para a guia de emolumentos e o comprovante de firma. =========================================================================== */ @media print { :root, [data-modo="escuro"], [data-modo="escuro"][data-skin] { --nf-paper: #FFFFFF; --nf-surface: #FFFFFF; --nf-mist: #F2F2F2; --nf-line: #CCCCCC; --nf-ink: #000000; --nf-muted: #444444; --nf-gold: #8A6320; --nf-shadow: none; } }