/* * Intranet PMLF — tokens do design system. * * Direção: ferramenta de trabalho institucional. Neutros frios predominam; uma única cor * primária marca ações e navegação, e ela vem da PALETA escolhida pelo usuário (paletas.css). * Cores semânticas (sucesso, atenção, erro) não mudam com a paleta: significam sempre a mesma coisa. * Tipografia IBM Plex: desenhada para interfaces corporativas, números tabulares nativos, * leitura confortável em tabelas densas; Plex Mono para nº de processo e documento. * * Dois eixos independentes no : * data-paleta="azul-marinho|verde|..." -> qual cor institucional (paletas.css) * data-tema="claro|escuro" -> claro/escuro (ausente = segue o sistema) */ :root { /* Tipografia */ --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* mesma pilha do transparencia */ --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --texto-xs: 0.75rem; /* 12 — metadados, rótulos de coluna */ --texto-sm: 0.85rem; /* 13,6 — rótulos, filtros */ --texto-md: 0.875rem; /* 14 — corpo */ --texto-lg: 1rem; /* 16 — títulos de seção */ --texto-xl: 1.3rem; /* 20,8 — título da página */ --texto-2xl: 1.5rem; /* 24 — números de destaque */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-titulo: 700; --altura-linha: 1.45; /* Espaçamento (base 4) */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; /* Forma */ --raio-sm: 6px; --raio: 10px; --raio-lg: 10px; --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --borda: 1px solid var(--cor-borda); /* Medidas estruturais */ --sidebar-largura: 250px; --sidebar-recolhida: 56px; --cabecalho-altura: 60px; --controle-altura: 40px; --linha-tabela: 45px; --conteudo-max: 1440px; /* Movimento */ --transicao: 150ms ease-out; /* ---------- Paleta (valor padrão; paletas.css sobrescreve) ---------- */ --pal-base: #1d4a73; --pal-escura: #14212f; /* ---------- Cores: tema claro ---------- */ --cor-fundo: #f4f5f8; --cor-superficie: #ffffff; --cor-superficie-2: #f4f5f8; --cor-superficie-hover: #eceef2; --cor-borda: #e5e7eb; --cor-borda-forte: #d1d5db; --cor-texto: #1f2430; --cor-texto-2: #6b7280; --cor-texto-3: #8a919c; --cor-texto-inverso: #ffffff; --cor-sobre-primaria: #ffffff; --cor-primaria: var(--pal-base); --cor-primaria-hover: color-mix(in srgb, var(--pal-base) 82%, black); --cor-primaria-suave: color-mix(in srgb, var(--pal-base) 9%, white); --cor-primaria-texto: var(--pal-base); --cor-foco: color-mix(in srgb, var(--pal-base) 35%, white); --cor-sucesso: #1b7a3d; --cor-sucesso-suave: #e7f3eb; --cor-atencao: #8a5a00; --cor-atencao-suave: #fbf1db; --cor-erro: #b42318; --cor-erro-suave: #fbeceb; --cor-info: var(--cor-primaria); --cor-info-suave: var(--cor-primaria-suave); /* Navegação: derivada da paleta, sempre escura, sem gradiente */ --nav-fundo: color-mix(in srgb, var(--pal-escura) 78%, black); --nav-borda: color-mix(in srgb, var(--pal-escura) 55%, black); --nav-texto: color-mix(in srgb, var(--pal-base) 22%, #c9d1da); --nav-texto-forte: #ffffff; --nav-grupo: color-mix(in srgb, var(--pal-base) 30%, #8190a3); --nav-hover: color-mix(in srgb, var(--pal-escura) 60%, black); --nav-ativo: color-mix(in srgb, var(--pal-base) 38%, var(--nav-fundo)); --nav-marcador: color-mix(in srgb, var(--pal-base) 45%, white); --sombra-sobreposicao: 0 8px 28px rgba(16, 24, 40, 0.16), 0 1px 3px rgba(16, 24, 40, 0.08); --veu: rgba(16, 24, 40, 0.32); color-scheme: light; } /* ---------- Tema escuro: automático (segue o sistema) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cor-fundo: #0e1217; --cor-superficie: #151a21; --cor-superficie-2: #1a2029; --cor-superficie-hover: #1f2631; --cor-borda: #29313c; --cor-borda-forte: #3a4452; --cor-texto: #e5e8ec; --cor-texto-2: #a3adb9; --cor-texto-3: #77818e; --cor-primaria: color-mix(in srgb, var(--pal-base) 62%, white); --cor-sobre-primaria: #0b1016; --cor-primaria-hover: color-mix(in srgb, var(--pal-base) 48%, white); --cor-primaria-suave: color-mix(in srgb, var(--pal-base) 22%, var(--cor-superficie)); --cor-primaria-texto: color-mix(in srgb, var(--pal-base) 40%, white); --cor-foco: color-mix(in srgb, var(--pal-base) 55%, white); --cor-sucesso: #4cb874; --cor-sucesso-suave: #14271c; --cor-atencao: #d9a640; --cor-atencao-suave: #2a2112; --cor-erro: #ef6b60; --cor-erro-suave: #2c1716; --nav-fundo: color-mix(in srgb, var(--pal-escura) 30%, #05080b); --nav-borda: color-mix(in srgb, var(--pal-escura) 40%, #05080b); --nav-hover: color-mix(in srgb, var(--pal-escura) 50%, #05080b); --nav-ativo: color-mix(in srgb, var(--pal-base) 30%, var(--nav-fundo)); --sombra-sobreposicao: 0 8px 28px rgba(0, 0, 0, 0.5); --veu: rgba(0, 0, 0, 0.5); color-scheme: dark; } } /* ---------- Tema escuro: escolhido pelo usuário ---------- */ :root[data-tema="escuro"] { --cor-fundo: #0e1217; --cor-superficie: #151a21; --cor-superficie-2: #1a2029; --cor-superficie-hover: #1f2631; --cor-borda: #29313c; --cor-borda-forte: #3a4452; --cor-texto: #e5e8ec; --cor-texto-2: #a3adb9; --cor-texto-3: #77818e; --cor-primaria: color-mix(in srgb, var(--pal-base) 62%, white); --cor-sobre-primaria: #0b1016; --cor-primaria-hover: color-mix(in srgb, var(--pal-base) 48%, white); --cor-primaria-suave: color-mix(in srgb, var(--pal-base) 22%, var(--cor-superficie)); --cor-primaria-texto: color-mix(in srgb, var(--pal-base) 40%, white); --cor-foco: color-mix(in srgb, var(--pal-base) 55%, white); --cor-sucesso: #4cb874; --cor-sucesso-suave: #14271c; --cor-atencao: #d9a640; --cor-atencao-suave: #2a2112; --cor-erro: #ef6b60; --cor-erro-suave: #2c1716; --nav-fundo: color-mix(in srgb, var(--pal-escura) 30%, #05080b); --nav-borda: color-mix(in srgb, var(--pal-escura) 40%, #05080b); --nav-hover: color-mix(in srgb, var(--pal-escura) 50%, #05080b); --nav-ativo: color-mix(in srgb, var(--pal-base) 30%, var(--nav-fundo)); --sombra-sobreposicao: 0 8px 28px rgba(0, 0, 0, 0.5); --veu: rgba(0, 0, 0, 0.5); color-scheme: dark; }