/* ============================================================ Temas de cor — escolhidos por USUÁRIO (Minha Conta → Aparência) ============================================================ Cada tema só redefine a RAMPA DA MARCA (--marca-*, --acento-*) e o que deriva dela (borda, sombras, fundo do menu). O resto do sistema usa essas variáveis, então trocar o tema repinta tudo — telas, botões, gráficos e a tela de login — sem tocar em componente nenhum. Cores de STATUS (verde de sucesso, vermelho de erro, âmbar de alerta) não entram no tema de propósito: elas comunicam significado, não identidade. REGRA DE CONTRASTE: onde houver texto BRANCO por cima (botão primário, chip ativo, filtro selecionado, item de menu), use no máximo o tom 600 — do 500 para cima o branco não alcança 4,5:1. O verificador _tools/_check-contraste.mjs mede isso em todos os temas. Aplicado em pelo app.js. ============================================================ */ /* ---------- Azul corporativo (padrão) ---------- */ :root, [data-tema="azul"] { --marca-950: #0a1f4d; --marca-900: #16307a; --marca-800: #1e3a8a; --marca-700: #1d4ed8; --marca-600: #2563eb; --marca-500: #3b82f6; --marca-400: #60a5fa; --marca-nevoa: #e8effc; --marca-nevoa-2: #f3f7ff; --acento-700: #0369a1; --acento-600: #0ea5e9; --acento-500: #38bdf8; --acento-300: #bae6fd; --borda: rgba(30, 58, 138, 0.14); --sombra-alta: 0 12px 40px rgba(10, 31, 77, 0.22); --menu-fundo: linear-gradient(180deg, #16307a, #0a1f4d); --menu-titulo: #93a7d4; --menu-item: #cdd8f0; } /* ---------- Orquídea (rosa / pink / roxo) ---------- */ [data-tema="orquidea"] { --marca-950: #3b0764; --marca-900: #6b21a8; --marca-800: #7e22ce; --marca-700: #a21caf; --marca-600: #c026d3; --marca-500: #d946ef; --marca-400: #e879f9; --marca-nevoa: #fbe8fe; --marca-nevoa-2: #fdf4ff; --acento-700: #be185d; --acento-600: #db2777; --acento-500: #ec4899; --acento-300: #fbcfe8; --borda: rgba(112, 26, 117, 0.16); --sombra-alta: 0 12px 40px rgba(59, 7, 100, 0.24); --menu-fundo: linear-gradient(180deg, #4a044e, #3b0764); --menu-titulo: #e3b8ea; --menu-item: #f3dcf7; } /* ---------- Grafite (cinza / preto / metálico, acento cobre) ---------- */ [data-tema="grafite"] { --marca-950: #0b0f14; --marca-900: #111827; --marca-800: #1f2937; --marca-700: #334155; --marca-600: #475569; --marca-500: #64748b; --marca-400: #94a3b8; --marca-nevoa: #eef1f5; --marca-nevoa-2: #f6f8fa; --acento-700: #b45309; --acento-600: #d97706; --acento-500: #f59e0b; --acento-300: #fde68a; --borda: rgba(15, 23, 42, 0.16); --sombra-alta: 0 12px 40px rgba(2, 6, 23, 0.28); --menu-fundo: linear-gradient(180deg, #1f2937, #0b0f14); --menu-titulo: #9aa6b8; --menu-item: #dbe2ec; } /* ---------- Esmeralda (verde / teal) ---------- */ [data-tema="esmeralda"] { /* rampa deslocada um tom para baixo: o verde #059669 dava só 3,8:1 com texto branco, abaixo do mínimo de 4,5:1 */ --marca-950: #022c22; --marca-900: #064e3b; --marca-800: #065f46; --marca-700: #047857; --marca-600: #0b8276; --marca-500: #14b8a6; --marca-400: #5eead4; --marca-nevoa: #e2f6ef; --marca-nevoa-2: #f1fbf7; --acento-700: #0e7490; --acento-600: #0891b2; --acento-500: #06b6d4; --acento-300: #a5f3fc; --borda: rgba(6, 95, 70, 0.16); --sombra-alta: 0 12px 40px rgba(2, 44, 34, 0.24); --menu-fundo: linear-gradient(180deg, #065f46, #022c22); --menu-titulo: #8fd3bd; --menu-item: #d6f2e7; } /* ---------- amostras (Parâmetros → Visual) ---------- */ .wt-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .wt-tema { display: block; text-align: left; padding: 0; overflow: hidden; background: var(--superficie); border: 2px solid var(--borda); border-radius: 14px; transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao); } .wt-tema:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .1); } .wt-tema.sel { border-color: var(--marca-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-600) 18%, transparent); } .wt-tema-faixa { height: 54px; display: flex; } .wt-tema-faixa span { flex: 1; } .wt-tema-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; } .wt-tema-pe strong { font-size: 13.5px; color: var(--tinta); } .wt-tema-pe small { font-size: 11.5px; color: var(--muted); display: block; font-weight: 400; } .wt-tema-check { color: var(--marca-600); opacity: 0; transition: opacity var(--transicao); } .wt-tema.sel .wt-tema-check { opacity: 1; }