:root { --bg: #f3f3f3; --surface: #FFFFFF; --surface2: #f3f3f3; --surface3: #E8E6DF; --border: #D6D3CB; --border2: #C0BDB4; --divider: #EAE8E2; --text: #1E1D1A; --text2: #5A5955; --text3: #8C8A84; /* Paleta viva (mais saturada que a original) — testada primeiro só na página Ordens de Serviço, aprovada, e agora estendida pro site inteiro. */ --blue: #2563EB; --blue-bg: #DBEAFE; --blue-mid: #3B82F6; --blue-text: #1D4ED8; /* ── Cores customizáveis (Configurações → Cores, ver config-cores.js) ──── 5 pontos de destaque independentes da empresa, cada um com seu próprio tom + variantes derivadas (fundo claro/tom médio/escuro pra hover) — todas com fallback pro azul padrão do sistema (var(--blue) etc.) enquanto a empresa não personalizar nada. CoresCustom.aplicar() (shared/cores-custom.js) sobrescreve estas variáveis via document.documentElement.style a partir da config 'cores_site', chamado uma vez no boot (core/nav.js) e de novo ao salvar na aba Cores. */ --cor-menu-ativo: var(--blue); --cor-menu-ativo-bg: var(--blue-bg); --cor-aba-ativa: var(--blue); --cor-aba-ativa-bg: var(--blue-bg); --cor-aba-ativa-mid: var(--blue-mid); --cor-botao-primario: var(--blue); --cor-botao-primario-hover: var(--blue-text); --cor-guia-superior: var(--blue); --cor-guia-superior-bg: var(--blue-bg); --cor-guia-superior-mid: var(--blue-mid); --cor-guia-superior-text: var(--blue-text); --cor-checkbox: var(--blue); --cor-perfil-badge: var(--blue); --cor-perfil-badge-bg: var(--blue-bg); --cor-etiquetas-bg: var(--blue-bg); --cor-etiquetas-text: var(--blue-text); --green: #16A34A; --green-bg: #DCFCE7; --green-mid: #22C55E; --green-text:#15803D; --red: #DC2626; --red-bg: #FEE2E2; --red-mid: #EF4444; --red-text: #B91C1C; /* Tingimento sutil pra destacar linha inteira de tabela (ex.: item atrasado) sem competir com o texto colorido dentro dela — --red-bg é forte demais numa área grande, mais adequado a badge/ícone pequeno. */ --red-bg-row: rgba(220, 38, 38, 0.07); --amber: #D97706; --amber-bg: #FEF3C7; --amber-mid: #F59E0B; --amber-text:#B45309; --orange: #EA580C; --orange-bg: #FFEDD5; --orange-mid: #F97316; --orange-text: #C2410C; --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); --font: 'Inter', system-ui, -apple-system, sans-serif; } /* ── Modo escuro ────────────────────────────────────────────────────────── Ativado via atributo `data-theme="dark"` em (ver Tema.aplicar() em shared/tema.js) — aplicado o mais cedo possível (script inline no de index.html/login.html) pra não piscar claro antes de escurecer. Só redeclara as mesmas variáveis do :root acima; nenhum componente precisa saber que o tema mudou, todos já leem var(--bg)/var(--surface)/etc. Elevação de card aqui vem de --surface mais claro que --bg (não do --shadow, que em fundo escuro já começa quase invisível). Cada família de cor semântica desloca 1 degrau: o tom que era --X-mid no claro vira a base --X no escuro (mais vivo em cima de fundo escuro), --X-bg vira um preenchimento escuro tingido daquele matiz (em vez de quase-branco), e --X-text (usado em texto sobre --X-bg) vira um tom claro em vez de escuro. */ :root[data-theme="dark"] { /* Tons neutros (preto puro, sem tingimento azulado) — versão anterior, mais pro azul, comentada logo abaixo pra reverter rápido caso não agrade: basta trocar de bloco comentado sem precisar git revert. */ --bg: #131313; --surface: #1B1B1B; --surface2: #131313; --surface3: #262626; --border: #333333; --border2: #3D3D3D; --divider: #242424; --text: #EDEDED; --text2: #A3A3A3; --text3: #78787A; /* ── Versão anterior (tingida de azul) — descomente este bloco e comente o de cima pra reverter. --bg: #17181C; --surface: #1E2025; --surface2: #17181C; --surface3: #292B32; --border: #34363D; --border2: #3F424B; --divider: #2A2C33; --text: #EDEDEF; --text2: #A3A3AA; --text3: #78787F; */ --blue: #3B82F6; --blue-bg: #1E3A5F; --blue-mid: #60A5FA; --blue-text: #93C5FD; --green: #22C55E; --green-bg: #14432B; --green-mid: #4ADE80; --green-text:#86EFAC; --red: #EF4444; --red-bg: #5C1A1A; --red-mid: #F87171; --red-text: #FCA5A5; --red-bg-row: rgba(239, 68, 68, 0.12); --amber: #F59E0B; --amber-bg: #4A2E0B; --amber-mid: #FBBF24; --amber-text:#FCD34D; --orange: #F97316; --orange-bg: #4A2410; --orange-mid: #FB923C; --orange-text: #FDBA74; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); }