/* TEMA CLARO - Portal do Cliente Mesmas variáveis de tokens.css, valores diferentes (cinza claro em vez de navy escuro). Aplicado via classe "tema-claro" no - só nas páginas /portal (o admin continua no tema escuro padrão). Especificidade html.tema-claro (0,1,1) vence :root (0,1,0) independente da ordem de carga. */ html.tema-claro { --bg: #F1F2F5; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F8FA; --border: #E3E5EA; --border-light: #D4D7DE; --text: #1A1D29; --text-dim: #667085; --text-muted: #98A2B3; /* Acento sobre fundo claro = navy da M&A (mesma convenção do Portal MEI: links, foco de input e estado ativo usam a cor primária, não o dourado - o dourado fica pra combinações navy+dourado, ver --gold em tokens.css). */ --accent: #0B2447; --accent-hover: #123568; --accent-soft: rgba(11, 36, 71, 0.08); --accent-dark: rgba(11, 36, 71, 0.04); --green: #059669; --green-soft: rgba(5, 150, 105, 0.10); --success: #059669; --danger: #DC2626; --warning: #D97706; --info: #2563EB; --success-soft: rgba(5, 150, 105, 0.08); --danger-soft: rgba(220, 38, 38, 0.08); --warning-soft: rgba(217, 119, 6, 0.08); --shadow-sm: 0 1px 3px rgba(16,24,40,0.08); --shadow: 0 4px 12px rgba(16,24,40,0.10); --shadow-lg: 0 12px 32px rgba(16,24,40,0.14); } /* .topbar usa uma cor fixa (rgba navy) em vez de var() em layout.css - sem isso a barra do topo ficaria escura sobre o fundo claro. */ html.tema-claro .topbar { background: rgba(255, 255, 255, 0.85); } /* Sidebar continua escura mesmo no tema claro (âncora visual, como a maioria dos dashboards claros) - só o conteúdo principal vira claro. .sidebar lê --bg-elev pro próprio fundo (ver layout.css); redefinir aqui recolore só a sidebar e tudo dentro dela, sem vazar pro resto da página. Cores = navy da M&A (igual ao Portal MEI). --accent também é redefinido aqui pra dourado: dentro da sidebar escura o acento precisa ser dourado (item ativo, hover), não navy - senão fica navy sobre navy, invisível. */ html.tema-claro .sidebar { --bg: #071A35; --bg-elev: #0B2447; --surface: #12305E; --surface-2: #19376D; --border: #234070; --border-light: #2C4D85; --text: #F3F4F6; --text-dim: #C8CEE0; --text-muted: #8A93AD; --accent: #F5C518; --accent-hover: #FFD84D; --accent-soft: rgba(245, 197, 24, 0.14); }