/* ============================================================================ THEME DARK — Inverte os tokens Trevo (creme -> dark) sob [data-theme="dark"]. ---------------------------------------------------------------------------- Carregado DEPOIS de trevo.css (vencer cascata). Padrão do sistema é white/creme (sem atributo). Dark se ativa via: Bootstrap inline (anti-FOUC) define o atributo antes do CSS pintar. ============================================================================ */ html[data-theme="dark"] { color-scheme: dark; /* ---- Surfaces (canvas creme -> charcoal) ---- */ --tv-canvas: #0E1014; --tv-paper: #161A21; --tv-white-pure: #1A1F28; /* ---- Ink (preto -> creme) ---- */ --tv-ink: #F5EFE0; --tv-ink-soft: #C8C3B8; --tv-on-ink: #0E1014; --tv-body: #F5EFE0; --tv-muted: #9CA3AF; --tv-muted-soft: #6B7280; --tv-ink-rgb: 245, 239, 224; /* ---- Hairlines ---- */ --tv-hairline: #F5EFE0; --tv-hairline-soft: #2A2F3A; /* ---- Named roles (mantém semântica) ---- */ --tv-blush-cheek: #2A2F3A; --tv-pearl-glove: #0E1014; --tv-halftone-dot: #F5EFE0; /* ---- Primary stays clover, mas afina o "on-primary" sobre fundo escuro ---- */ --tv-on-primary: #0E1014; /* ---- Shadow comic-offset — usa hairline cream sobre dark ---- */ --tv-shadow-modal: 4px 4px 0 var(--tv-hairline-soft); /* ---- Outline padrão usa o hairline cream ---- */ --tv-outline: 2px solid var(--tv-hairline-soft); } /* ---------------------------------------------------------------------------- Reaplica tokens --ck-* / --accent-* (trevo.css já remapeia, mas !important captura a cascata aqui também para vencer load_settings.php em browsers que recomputam --ck-bg etc. Sem isso, alguns elementos com style="" inline ainda leriam o valor antigo). ---------------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--tv-canvas) !important; color: var(--tv-ink); } /* ============================================================================ FIXES — onde trevo.css ou Tailwind hardcodaram cores que não passam por --tv-* ============================================================================ */ /* style.css define .bg-dark-base/.bg-dark-elevated/.bg-dark-card via --dark-*. Em dark mode reaponta para nossos tokens novos. */ html[data-theme="dark"] { --dark-base: #0E1014; --dark-elevated: #161A21; --dark-card: #161A21; --dark-border: #2A2F3A; --text-primary: #F5EFE0; --text-secondary:#C8C3B8; --text-muted: #9CA3AF; } /* Selection visual */ html[data-theme="dark"] ::selection { background: var(--tv-primary); color: var(--tv-on-primary); } /* Scrollbars dark */ html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--tv-hairline-soft); } html[data-theme="dark"] * { scrollbar-color: var(--tv-hairline-soft) transparent; } /* Cards: força .ck-card/.dark-card/.bg-dark-card a respeitar paper dark */ html[data-theme="dark"] body .ck-card, html[data-theme="dark"] body .cakto-card, html[data-theme="dark"] body .dark-card, html[data-theme="dark"] body .dashboard-card, html[data-theme="dark"] body .metric-card, html[data-theme="dark"] body .bg-dark-card, html[data-theme="dark"] body .ck-kpi, html[data-theme="dark"] body .ck-chart-card { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; border-color: var(--tv-hairline-soft) !important; } /* Inputs ficam levemente elevados para contraste */ html[data-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] body textarea, html[data-theme="dark"] body select, html[data-theme="dark"] body .dark-input, html[data-theme="dark"] body .form-input-style { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; border-color: var(--tv-hairline-soft) !important; } html[data-theme="dark"] body input::placeholder, html[data-theme="dark"] body textarea::placeholder { color: var(--tv-muted) !important; } html[data-theme="dark"] body input:focus, html[data-theme="dark"] body textarea:focus, html[data-theme="dark"] body select:focus { background-color: var(--tv-white-pure) !important; border-color: var(--tv-primary) !important; } /* Texto "text-white" em light mode é mapeado para ink (preto). No dark precisa continuar legível -> ink (cream) está OK já que --tv-ink inverteu. */ /* ---------------------------------------------------------------------------- FIX: Tailwind grays ESCUROS de TEXTO (text-gray-6/7/8/900, text-slate-..., text-black). Em light mode são legíveis sobre cream; em dark ficavam pretos sobre canvas escuro. Repinta como ink (cream) ou ink-soft. ---------------------------------------------------------------------------- */ html[data-theme="dark"] body .text-black, html[data-theme="dark"] body [class*="text-gray-7"], html[data-theme="dark"] body [class*="text-gray-8"], html[data-theme="dark"] body [class*="text-gray-9"], html[data-theme="dark"] body [class*="text-slate-7"], html[data-theme="dark"] body [class*="text-slate-8"], html[data-theme="dark"] body [class*="text-slate-9"], html[data-theme="dark"] body [class*="text-zinc-7"], html[data-theme="dark"] body [class*="text-zinc-8"], html[data-theme="dark"] body [class*="text-zinc-9"], html[data-theme="dark"] body [class*="text-neutral-7"], html[data-theme="dark"] body [class*="text-neutral-8"], html[data-theme="dark"] body [class*="text-neutral-9"], html[data-theme="dark"] body [class*="text-stone-7"], html[data-theme="dark"] body [class*="text-stone-8"], html[data-theme="dark"] body [class*="text-stone-9"] { color: var(--tv-ink) !important; } /* gray-600 e amigos são "texto secundário" no light. Em dark vira ink-soft (cream-ish, mas um pouco mais discreto) para manter a hierarquia. */ html[data-theme="dark"] body [class*="text-gray-6"], html[data-theme="dark"] body [class*="text-slate-6"], html[data-theme="dark"] body [class*="text-zinc-6"], html[data-theme="dark"] body [class*="text-neutral-6"], html[data-theme="dark"] body [class*="text-stone-6"] { color: var(--tv-ink-soft) !important; } /* SVG/icons com currentColor herdam o color, mas atributo `stroke` fica preso ao valor literal. Para ícones Lucide (stroke=currentColor é o padrão) já OK. */ /* Inline style colors com literais escuros: #000, #111, #1A1A1A, #222, #333, black. Em dark vira ink (cream). */ html[data-theme="dark"] body [style*="color:#000" i], html[data-theme="dark"] body [style*="color: #000" i], html[data-theme="dark"] body [style*="color:#111" i], html[data-theme="dark"] body [style*="color: #111" i], html[data-theme="dark"] body [style*="color:#1A1A1A" i], html[data-theme="dark"] body [style*="color: #1A1A1A" i], html[data-theme="dark"] body [style*="color:#222" i], html[data-theme="dark"] body [style*="color: #222" i], html[data-theme="dark"] body [style*="color:#333" i], html[data-theme="dark"] body [style*="color: #333" i], html[data-theme="dark"] body [style*="color:black" i], html[data-theme="dark"] body [style*="color: black" i] { color: var(--tv-ink) !important; } /* Tailwind grays neutros: bg-gray-50/100/200 ficam paper-dark ao invés de cream */ html[data-theme="dark"] body [class*="bg-gray-1"], html[data-theme="dark"] body [class*="bg-gray-2"], html[data-theme="dark"] body [class*="bg-slate-1"], html[data-theme="dark"] body [class*="bg-zinc-1"], html[data-theme="dark"] body [class*="bg-stone-1"] { background-color: var(--tv-paper) !important; } html[data-theme="dark"] body .bg-white, html[data-theme="dark"] body [class*="bg-white"] { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; } html[data-theme="dark"] body [class*="bg-gray-5"], html[data-theme="dark"] body [class*="bg-gray-6"], html[data-theme="dark"] body [class*="bg-gray-7"], html[data-theme="dark"] body [class*="bg-slate-5"], html[data-theme="dark"] body [class*="bg-slate-6"], html[data-theme="dark"] body [class*="bg-slate-7"] { background-color: var(--tv-paper) !important; } /* Inline style backgrounds que usam #fff/#ffffff/white literal */ html[data-theme="dark"] body [style*="background:#fff" i], html[data-theme="dark"] body [style*="background: #fff" i], html[data-theme="dark"] body [style*="background-color:#fff" i], html[data-theme="dark"] body [style*="background-color: #fff" i], html[data-theme="dark"] body [style*="background:white" i], html[data-theme="dark"] body [style*="background-color:white" i] { background-color: var(--tv-paper) !important; } /* Inline backgrounds com canvas/paper tokens (Trevo) -> já usam var(), OK */ /* Dropdowns (tv-dd-menu) — usam --tv-white-pure que já invertemos */ html[data-theme="dark"] body .tv-dd-menu { background-color: var(--tv-white-pure) !important; color: var(--tv-ink) !important; border-color: var(--tv-hairline-soft) !important; } /* Header bell — paper escuro com borda cream-soft */ html[data-theme="dark"] body .hb-btn { background: var(--tv-paper) !important; border-color: var(--tv-hairline-soft) !important; color: var(--tv-ink) !important; } /* Cards com fundo --tv-balance / spotlight: Forest Deep escuro continua legível, apenas garantir borda visível */ html[data-theme="dark"] body .tv-balance, html[data-theme="dark"] body .balance-card, html[data-theme="dark"] body .ck-spotlight { border-color: var(--tv-hairline-soft) !important; } /* Botões com contorno chunky ink — em dark a borda é cream */ html[data-theme="dark"] body .ck-btn, html[data-theme="dark"] body .ck-btn-sm, html[data-theme="dark"] body .ck-btn-lg, html[data-theme="dark"] body .ck-btn-outline, html[data-theme="dark"] body .ck-btn-ghost, html[data-theme="dark"] body .ck-btn-secondary, html[data-theme="dark"] body .a2-btn, html[data-theme="dark"] body .a2-btn-outline, html[data-theme="dark"] body button[class*="btn-outline"] { border-color: var(--tv-hairline-soft) !important; color: var(--tv-ink) !important; } html[data-theme="dark"] body .ck-btn-secondary { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; } /* Header sticky (member_area_dashboard) com style="background-color: var(--tv-canvas)" já segue --tv-canvas (escuro em dark). Só ajusta a borda inline. */ html[data-theme="dark"] body header[style*="border-bottom"] { border-bottom-color: var(--tv-hairline-soft) !important; } /* Texto de gray-400/500 ainda usa --tv-muted -> em dark fica gray-400 (#9CA3AF) */ /* Toggle button (sol/lua) — estilo igual ao header_bell */ .tv-theme-toggle { position: relative; width: 44px; height: 44px; background: var(--tv-paper); border: 2px solid var(--tv-ink); color: var(--tv-ink); border-radius: 9999px; cursor: pointer; transition: background .12s ease, transform .12s ease; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .tv-theme-toggle:hover { background: var(--tv-primary); } .tv-theme-toggle:active { transform: translateY(1px); } .tv-theme-toggle svg { width: 20px; height: 20px; } html[data-theme="dark"] .tv-theme-toggle { border-color: var(--tv-hairline-soft); } /* Mostra sol em dark mode, lua em light mode */ .tv-theme-toggle .tv-theme-toggle__moon { display: inline-flex; } .tv-theme-toggle .tv-theme-toggle__sun { display: none; } html[data-theme="dark"] .tv-theme-toggle .tv-theme-toggle__moon { display: none; } html[data-theme="dark"] .tv-theme-toggle .tv-theme-toggle__sun { display: inline-flex; } /* Transição global suave ao trocar de tema (mas sem afetar animações de página) */ html.tv-theme-switching * { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }