/* ============================================================================ Camada de temas (claro/escuro). Carregada DEPOIS de site.css/support-chat.css, então suas regras vencem por ordem. Estratégia: tokens de aplicação com valores claros que espelham o visual atual (modo claro fica idêntico) e são invertidos no modo escuro; as superfícies estruturais passam a ler esses tokens, de forma que trocar o tema é apenas trocar os valores das variáveis. Preferência resolvida no servidor e aplicada em : - light -> tokens claros - dark -> tokens escuros - system -> segue prefers-color-scheme do SO ============================================================================ */ :root { /* Superfícies e texto (modo claro = aparência atual) */ --app-bg: #ffffff; /* fundo de página / workspace */ --app-bg-muted: #f4f7fb; /* fundos sutis (canvas cinza) */ --app-surface: #ffffff; /* cards, painéis, menus */ --app-surface-2: #f7f9fc; /* sidebar, cabeçalhos de painel */ --app-surface-hover: #edf2f7; /* hover de itens de navegação */ --app-text: #11233d; /* texto principal */ --app-text-muted: #617086; /* texto secundário */ --app-border: #dce5ef; /* bordas e divisórias */ --app-input-bg: #ffffff; --app-input-border: #cedae6; --app-shadow: 0 18px 50px rgba(12, 35, 65, .10); color-scheme: light; } /* ---- Paleta escura (aplicada por atributo explícito e por preferência do SO) ---- */ :root[data-theme="dark"] { --app-bg: #0e131a; --app-bg-muted: #10161f; --app-surface: #151c26; --app-surface-2: #121824; --app-surface-hover: #1d2634; --app-text: #e7ecf3; --app-text-muted: #9aa7b8; --app-border: #263140; --app-input-bg: #131a24; --app-input-border: #2c3746; --app-shadow: 0 18px 50px rgba(0, 0, 0, .45); /* Tokens legados de site.css consumidos por muitos componentes */ --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --surface: var(--app-surface); --canvas: var(--app-bg); --sidebar-bg: var(--app-surface-2); --sidebar-hover: var(--app-surface-hover); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --app-bg: #0e131a; --app-bg-muted: #10161f; --app-surface: #151c26; --app-surface-2: #121824; --app-surface-hover: #1d2634; --app-text: #e7ecf3; --app-text-muted: #9aa7b8; --app-border: #263140; --app-input-bg: #131a24; --app-input-border: #2c3746; --app-shadow: 0 18px 50px rgba(0, 0, 0, .45); --ink: var(--app-text); --muted: var(--app-text-muted); --line: var(--app-border); --surface: var(--app-surface); --canvas: var(--app-bg); --sidebar-bg: var(--app-surface-2); --sidebar-hover: var(--app-surface-hover); color-scheme: dark; } } /* ===== Superfícies estruturais re-apontadas para os tokens ===== */ body { background: var(--app-bg); color: var(--app-text); } .app-workspace, .admin-shell, .record-page { background: var(--app-bg); } .app-sidebar { background: var(--app-surface-2); border-right-color: var(--app-border); color: var(--app-text); } .sidebar-separator, .sidebar-footer { border-color: var(--app-border); background: transparent; } .app-footer { background: var(--app-surface); border-top-color: var(--app-border); } .mobile-header { background: color-mix(in srgb, var(--app-surface) 94%, transparent); border-bottom-color: var(--app-border); } .panel, .metric-card, .provider-usage-card, .capability-card, .detail-card, .execution-facts, .execution-metrics, .config-flow, .config-flow article { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } .panel-heading, .config-flow article { border-color: var(--app-border); } /* Texto */ .app-main h1, .app-main h2, .app-main h3, .sidebar-link, .account-copy strong { color: var(--app-text); } .muted-text, .page-header p, .section-heading > p { color: var(--app-text-muted); } /* Navegação */ .sidebar-link { color: color-mix(in srgb, var(--app-text) 78%, transparent); } .sidebar-link:hover, .sidebar-link:focus { background: var(--app-surface-hover); color: var(--app-text); } .account-chip:hover { background: var(--app-surface-hover); } /* Menu da conta / dropdown */ .account-menu-panel { background: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow); } .account-menu-panel a, .account-menu-panel button { color: color-mix(in srgb, var(--app-text) 80%, transparent); } .account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--app-surface-hover); color: var(--app-text); } .account-menu-panel form { border-top-color: var(--app-border); } /* Formulários */ .app-main .form-control, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { background: var(--app-input-bg); border-color: var(--app-input-border); color: var(--app-text); } :root[data-theme="dark"] .button-secondary, :root[data-theme="dark"] .app-main .btn-outline-secondary { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } /* Tabelas */ :root[data-theme="dark"] table, :root[data-theme="dark"] .table { color: var(--app-text); } :root[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--app-border); background: transparent; } :root[data-theme="dark"] thead th { color: var(--app-text-muted); } /* Diálogos/modais nativos */ dialog { box-sizing: border-box; margin: auto; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } /* Placeholder mais legível no escuro */ :root[data-theme="dark"] ::placeholder { color: color-mix(in srgb, var(--app-text-muted) 80%, transparent); }