/* SmartCartório — design tokens Cartório inteligente · notarial e registral. Todas as variáveis usam o prefixo --sc-*. Uso: Tema escuro: aplique data-theme="dark" no . */ :root { /* ========================================================= MARCA — as cinco cores que identificam o produto. ========================================================= */ /* Navy: gravidade, fé pública. Texto institucional, cabeçalho, marca reduzida, superfícies escuras de topo. */ --sc-navy: #012F8D; /* Azul-vivo: ação e IA em movimento. Botão primário, link, estado "em processamento". */ --sc-blue: #007FFF; /* Azul claro: usado para "Cartório" do logotipo e para o "NR" do bloco IA/NR SOBRE FUNDO ESCURO. Também serve de texto de apoio azul em superfície navy. */ --sc-blue-light: #7FC0FF; /* -------- LIMA — REGRA DURA -------------------------------- O lima é EXCLUSIVO daquilo que a IA produziu e que AINDA ESPERA VALIDAÇÃO humana. Ele marca "isto veio da máquina, confira antes de aceitar". NUNCA use lima como superfície (fundo de página, card, cabeçalho) e NUNCA como cor de botão comum. O lima puro (#AEDF45) tem apenas 1,7:1 sobre fundo claro: em fundo claro use SEMPRE --sc-lime-dark. ---------------------------------------------------------- */ --sc-lime: #AEDF45; /* output de IA sobre fundo ESCURO */ --sc-lime-dark: #5C7A18; /* output de IA sobre fundo CLARO */ /* Atalho contextual: aponta para o lima correto do tema ativo. Prefira --sc-ai no código de componente — assim o mesmo componente funciona nos dois temas sem condicional. */ --sc-ai: var(--sc-lime-dark); --sc-ai-soft: rgba(174, 223, 69, .16); /* fundo sutil de bloco de IA */ --sc-ai-line: rgba(92, 122, 24, .40); /* borda de bloco de IA */ /* ========================================================= NEUTROS — escala única, do branco ao quase-preto. n0 é o mais claro, n6 o mais escuro. ========================================================= */ --sc-n0: #FFFFFF; /* branco puro — cards, campos */ --sc-n1: #F7F8FA; /* fundo da aplicação */ --sc-n2: #EDF0F5; /* faixas, cabeçalho de tabela, hover */ --sc-n3: #D8DEE9; /* divisórias, bordas de campo */ --sc-n4: #8A93A6; /* texto de apoio, ícone secundário, placeholder */ --sc-n5: #3A4358; /* texto secundário, rótulo */ --sc-n6: #0B1220; /* texto principal, "Smart" do logotipo */ /* Papéis derivados dos neutros — use estes na UI. */ --sc-bg: var(--sc-n1); --sc-surface: var(--sc-n0); --sc-surface-alt: var(--sc-n2); --sc-border: var(--sc-n3); --sc-text: var(--sc-n6); --sc-text-secondary: var(--sc-n5); --sc-text-muted: var(--sc-n4); --sc-text-on-dark: var(--sc-n0); /* ========================================================= SEMÂNTICOS — estado do ato notarial/registral. ========================================================= */ --sc-registrado: #2E8B57; /* concluído, registrado, verde */ --sc-exigencia: #C77700; /* em exigência, pendência do usuário */ --sc-impeditivo: #B3261E; /* impeditivo, prazo estourado */ --sc-processamento: var(--sc-blue); /* em processamento (#007FFF) */ --sc-legado: #6E6E6E; /* sistema/dado legado, inativo */ /* ========================================================= TIPOGRAFIA display = Archivo → títulos, números, logotipo sans = IBM Plex Sans → corpo, UI mono = IBM Plex Mono → protocolos, dados, rótulos caixa alta com letter-spacing .16–.2em ========================================================= */ --sc-font-display: "Archivo", "Segoe UI", system-ui, Arial, sans-serif; --sc-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif; --sc-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Rótulo mono em caixa alta (protocolo, selo, matrícula). */ --sc-tracking-label: .18em; /* faixa aceita: .16em a .2em */ --sc-tracking-logo: -.03em; /* "Smart" do logotipo: -.03 a -.04em */ /* ========================================================= ESPAÇO — grade de 4px. Nada fora desta escala. ========================================================= */ --sc-space-1: 4px; --sc-space-2: 8px; --sc-space-3: 12px; --sc-space-4: 16px; --sc-space-5: 24px; --sc-space-6: 32px; --sc-space-7: 48px; /* ========================================================= RAIOS — quanto maior o elemento, maior o raio. ========================================================= */ --sc-radius-field: 4px; /* campo, input, badge */ --sc-radius-card: 8px; /* card, painel, botão largo */ --sc-radius-overlay: 12px; /* modal, popover, drawer (12px+) */ /* ========================================================= SOMBRAS — sempre tingidas de navy, nunca preto puro. ========================================================= */ --sc-shadow-sm: 0 1px 2px rgba(1, 47, 141, .08); --sc-shadow-md: 0 2px 4px rgba(1, 47, 141, .06), 0 8px 20px rgba(1, 47, 141, .08); --sc-shadow-lg: 0 4px 8px rgba(1, 47, 141, .08), 0 18px 40px rgba(1, 47, 141, .12); --sc-ring: 0 0 0 3px rgba(0, 127, 255, .32); /* foco de teclado */ } /* ========================================================= TEMA ESCURO Inverte os neutros (o fundo passa a ser #0B1220) e troca o lima de contexto: em fundo escuro o lima volta a ser o puro #AEDF45, que só ali tem contraste. ========================================================= */ [data-theme="dark"] { /* neutros invertidos — n0 passa a ser o mais escuro. Os tons intermediários são derivados do #0B1220 com tingimento navy, para manter a família de cor. */ --sc-n0: #0B1220; /* fundo da aplicação */ --sc-n1: #121B2E; /* superfície de card */ --sc-n2: #1A2643; /* faixa, hover, cabeçalho de tabela */ --sc-n3: #2B3757; /* divisórias, bordas */ --sc-n4: #8A93A6; /* texto de apoio (mesmo cinza dos dois temas) */ --sc-n5: #D8DEE9; /* texto secundário */ --sc-n6: #F7F8FA; /* texto principal */ --sc-bg: var(--sc-n0); --sc-surface: var(--sc-n1); --sc-surface-alt: var(--sc-n2); --sc-border: var(--sc-n3); --sc-text: var(--sc-n6); --sc-text-secondary: var(--sc-n5); --sc-text-muted: var(--sc-n4); --sc-text-on-dark: var(--sc-n6); /* lima de contexto: fundo escuro usa o lima puro */ --sc-ai: var(--sc-lime); --sc-ai-soft: rgba(174, 223, 69, .12); --sc-ai-line: rgba(174, 223, 69, .45); /* sombras mais fundas, já que a superfície é escura */ --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --sc-shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .45); --sc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .55); --sc-ring: 0 0 0 3px rgba(127, 192, 255, .38); }