/* ============================================================================= Nusa — Tokens de tela (CSS custom properties) Fonte da verdade: marca/nusa_referencia_visual.html (sistema APROVADO). Este arquivo NÃO inventa cor nenhuma: transcreve os mesmos valores da referência para um arquivo consumível por qualquer produto. COMO CONSUMIR ------------- Uma linha no , antes do seu CSS — funciona em qualquer stack, inclusive JS puro sem build (ex.: o Cockpit): Depois use as variáveis no seu CSS: color: var(--tinta); TEMA ---- O tema é escolhido no atributo `data-tema` do , exatamente como na referência aprovada: (padrão) Trocar de tema = trocar o atributo. Nenhum valor é duplicado aqui, então não há risco de os dois temas divergirem. Para seguir o tema do sistema operacional, o produto mapeia prefers-color-scheme para o atributo em uma linha de JS (bloco comentado no fim deste arquivo) — decisão do produto, não da marca. ARQUITETURA EM DUAS CAMADAS --------------------------- 1. TOKENS (este arquivo .css): distribuição imediata, sem build, funciona em todo produto. É o que permite o Cockpit colapsar suas ~61 cores soltas para este conjunto único SEM migrar para React. 2. COMPONENTES (React): botões, cartões, campos etc. dependem da decisão de código compartilhado que AINDA ESTÁ ABERTA. Não vivem aqui. Consumir os tokens não exige adotar os componentes. As duas camadas avançam em ritmos diferentes de propósito. O QUE VEM DA MARCA × O QUE É EXTENSÃO ------------------------------------- [MARCA] — normativo do brandbook, não se altera: --roxo (#5D30D8), preto (#000000), branco (#FFFFFF). [EXTENSÃO] — decisão da plataforma para produto digital (o manual foi escrito para material de apoio e não cobre tela): estados, temas, véus, tintas, brilho/halo, tipografia de interface. Ver marca/design-system.md para o porquê de cada extensão. ============================================================================= */ /* --------------------------------------------------------------------------- TEMA CLARO (padrão) --------------------------------------------------------------------------- */ :root, [data-tema="claro"] { /* --- MARCA (imutável) ---------------------------------------------------- */ --roxo: #5D30D8; /* [MARCA] Roxo Vibrante — brandbook, pág. paleta */ --preto: #000000; /* [MARCA] */ --branco: #FFFFFF; /* [MARCA] */ /* --- Roxo: variações de sistema (derivadas do roxo da marca) ------------- */ --roxo-alto: #7B52EE; /* [EXTENSÃO] hover/realce sobre o roxo */ --roxo-fundo: #4A24AE; /* [EXTENSÃO] roxo mais fundo, pressionado */ --roxo-veu: #EFE9FE; /* [EXTENSÃO] fundo de tom roxo (véu), texto escuro por cima */ /* --- Cores de estado (nunca mudam de significado entre produtos) --------- */ /* CRÍTICO — erro, bloqueio, ação destrutiva */ --critico: #F0264A; /* [EXTENSÃO] */ --critico-texto: #D6103A; /* [EXTENSÃO] legível sobre o véu */ --critico-veu: #FFECF0; /* [EXTENSÃO] fundo suave do estado */ /* ATENÇÃO — pendência, revisar, prazo próximo */ --atencao: #FF9A00; /* [EXTENSÃO] */ --atencao-texto: #C46E00; /* [EXTENSÃO] */ --atencao-veu: #FFF3DF; /* [EXTENSÃO] */ /* CONFORME — sucesso, aprovado, saudável (o "ok" da referência) */ --ok: #00B87C; /* [EXTENSÃO] */ --ok-texto: #00966A; /* [EXTENSÃO] */ --ok-veu: #DFF9EE; /* [EXTENSÃO] */ --conforme: var(--ok); /* alias semântico: "conforme" == "ok" */ --conforme-texto: var(--ok-texto); --conforme-veu: var(--ok-veu); /* INFORMAÇÃO — neutro informativo, dica, em andamento */ --info: #2E6BFF; /* [EXTENSÃO] */ --info-veu: #E8EFFF; /* [EXTENSÃO] */ /* --- Superfícies e tinta (texto) ----------------------------------------- */ --base: #FFFFFF; /* [EXTENSÃO] fundo da página */ --superficie: #FFFFFF; /* [EXTENSÃO] cartões, painéis */ --superficie-2: #FAFAFD; /* [EXTENSÃO] superfície secundária/sutil */ --tinta: #12101A; /* [EXTENSÃO] texto forte */ --tinta-media: #4A4758; /* [EXTENSÃO] texto secundário */ --tinta-fraca: #78758A; /* [EXTENSÃO] texto terciário, rótulos */ --borda: #EBEBF3; /* [EXTENSÃO] borda padrão */ --borda-forte: #D8D8E6; /* [EXTENSÃO] borda de maior contraste */ /* --- Profundidade e ambiente --------------------------------------------- */ --sombra: 0 1px 2px rgba(18,16,26,.05), 0 4px 12px rgba(18,16,26,.05), 0 14px 34px rgba(18,16,26,.06); --sombra-alta: 0 2px 4px rgba(18,16,26,.06), 0 10px 22px rgba(18,16,26,.09), 0 28px 60px rgba(18,16,26,.11); --atmosfera: radial-gradient(900px 480px at 88% -10%, #F3EFFE 0%, transparent 62%); /* --- Brilho / halo — SOMENTE em indicador de estado, NUNCA atrás da marca - O brandbook proíbe efeito, sombra e contorno no logo. No tema claro o halo é neutralizado (none). Ver design-system.md. */ --brilho-ok: none; --brilho-roxo: none; --grade: transparent; /* grade de fundo do ambiente escuro; apagada no claro */ --pulso: .55; /* intensidade de animação de estado (0–1) */ } /* --------------------------------------------------------------------------- TEMA ESCURO — "NOITE" (identidade de produto V2, fechada 01/08/2026) Grafite → violeta, grade quadriculada sutil e superfícies de VIDRO FOSCO. Substitui o quase-preto anterior (#080A0E). Referência aprovada: marca/referencias-v2/D2-noite-gradiente.html. O fundo é o --atmosfera (gradiente grafite→violeta opaco) sobre --base; superfícies são translúcidas. --------------------------------------------------------------------------- */ [data-tema="escuro"] { /* --- MARCA (imutável) — roxo clareado p/ contraste sobre grafite --- */ --roxo: #A78BFA; /* [MARCA/EXTENSÃO] roxo da noite V2 */ --preto: #000000; /* [MARCA] */ --branco: #FFFFFF; /* [MARCA] */ --roxo-alto: #C4B0FF; /* [EXTENSÃO] */ --roxo-fundo: #7451F5; /* [EXTENSÃO] */ --roxo-veu: rgba(167,139,250,.18); /* [EXTENSÃO] véu de vidro */ /* --- Cores de estado (texto = a própria cor sobre o véu translúcido) ----- */ --critico: #FF6B85; /* [EXTENSÃO] */ --critico-texto: #FF6B85; --critico-veu: rgba(255,107,133,.15); --atencao: #FFC24D; /* [EXTENSÃO] */ --atencao-texto: #FFC24D; --atencao-veu: rgba(255,194,77,.14); --ok: #2FE6A0; /* [EXTENSÃO] conforme = verde de ambiente (mesma cor, de propósito) */ --ok-texto: #2FE6A0; --ok-veu: rgba(47,230,160,.14); --conforme: var(--ok); --conforme-texto: var(--ok-texto); --conforme-veu: var(--ok-veu); --info: #4D8DFF; /* [EXTENSÃO] */ --info-veu: rgba(77,141,255,.14); /* --- Superfícies (vidro fosco) e tinta ---------------------------------- */ --base: #414755; /* [EXTENSÃO] grafite (fallback do gradiente --atmosfera) */ --superficie: rgba(255,255,255,.065); /* [EXTENSÃO] vidro fosco */ --superficie-2: rgba(255,255,255,.10); --tinta: #F4F5F8; /* [EXTENSÃO] */ --tinta-media: #C9CED8; /* [EXTENSÃO] */ --tinta-fraca: #9BA3B0; /* [EXTENSÃO] */ --borda: rgba(255,255,255,.16); /* [EXTENSÃO] */ --borda-forte: rgba(255,255,255,.28); /* [EXTENSÃO] */ /* --- Profundidade e ambiente -------------------------------------------- */ --sombra: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.30); --sombra-alta: 0 2px 6px rgba(0,0,0,.4), 0 24px 64px rgba(0,0,0,.45); /* Fundo da noite: grafite→violeta + brilho branco + halo do roxo da marca (#5D30D8=93,48,216). Aplicar em body (ou body::before) via var(--atmosfera). */ --atmosfera: linear-gradient(150deg, #4C5364 0%, #414755 48%, #3E3A54 100%), radial-gradient(700px 500px at -10% -20%, rgba(255,255,255,.10), transparent 55%), radial-gradient(900px 600px at 85% 110%, rgba(93,48,216,.30), transparent 60%); --grade: rgba(255,255,255,.04); /* grade quadriculada sutil */ /* --- Brilho / halo — só em estado, nunca atrás da marca ------------------ */ --brilho-ok: 0 0 0 1px rgba(47,230,160,.22), 0 0 24px rgba(47,230,160,.14); --brilho-roxo: 0 0 20px rgba(167,139,250,.35); --pulso: 1; } /* --------------------------------------------------------------------------- PRIMITIVAS DE INTERFACE (extensão — comuns aos dois temas) Não são cor; são medidas/fontes que as regras de interface exigem. Ver engenharia/06-regras-de-interface.md. --------------------------------------------------------------------------- */ :root { /* Tipografia. A interface usa uma face ESTREITA (Manrope), não Montserrat: tela de dado denso não suporta a largura de Montserrat. Montserrat fica para material de apoio, conforme o próprio manual. */ --fonte-interface: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fonte-titulo: 'Sora', var(--fonte-interface); /* Valor monetário: SEMPRE monoespaçada + algarismo de largura fixa. */ --fonte-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fonte-apoio: 'Montserrat', var(--fonte-interface); /* material de apoio, conforme o manual */ /* Foco por teclado — obrigatório e visível (regra de interface). */ --foco: 2px solid var(--roxo); --foco-offset: 2px; /* Alvo de toque mínimo no celular. */ --alvo-toque: 44px; /* Raio de canto padrão da referência aprovada. */ --raio: 14px; --raio-pequeno: 9px; /* Identidade de produto V2 (01/08). */ --grade-tamanho: 64px; /* passo da grade quadriculada sutil (fundo) */ --eclipse: conic-gradient(from 90deg, #12101A 0 50%, #F6C445 50% 100%); /* botão de tema "eclipse" (obrigatório em toda tela) */ } /* Valor monetário / numérico tabular — aplique esta classe onde alinhar números em coluna (regra 4 das regras de interface). */ .cifra, .valor-monetario { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; } /* Movimento reduzido respeitado (regra de interface). */ @media (prefers-reduced-motion: reduce) { :root { --pulso: 0; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------------------- TEMA AUTOMÁTICO (opcional — DECISÃO DO PRODUTO, não da marca) O mecanismo canônico é o atributo data-tema. Se o produto quiser seguir o sistema operacional, mapeie prefers-color-scheme para o atributo com uma linha, sem duplicar valores aqui: --------------------------------------------------------------------------- */