/* PORQUE EXISTE: presets de tema com contraste legível (claro/escuro/alto). Troca via data-tema no — sem forçar o look neon nos outros. */ html[data-tema="contraste"] { color-scheme: dark; --fundo-app: #000; --fundo-painel: #0a0a0a; --fundo-editor: #111; --fundo-caixa: #1a1a1a; --fundo-hover: rgba(255, 255, 255, 0.12); --fundo-selecao: rgba(255, 220, 0, 0.22); --borda: rgba(255, 255, 255, 0.28); --borda-forte: rgba(255, 255, 255, 0.45); --texto: #ffffff; --texto-fraco: rgba(255, 255, 255, 0.82); --texto-apagado: rgba(255, 255, 255, 0.55); --destaque: #ffe566; --destaque-2: #7dffb3; --azul-link: #8ec8ff; --ok: #5dff8a; --aviso: #ffd24a; --erro: #ff6b6b; --glass: #0a0a0a; --glass-borda: rgba(255, 255, 255, 0.35); --glass-borda-fraca: rgba(255, 255, 255, 0.2); --neon: #ffe566; --neon-2: #7dffb3; } html[data-tema="claro"] { color-scheme: light; --fundo-app: #e8eef5; --fundo-painel: #f4f7fb; --fundo-editor: #ffffff; --fundo-caixa: #ffffff; --fundo-hover: rgba(15, 40, 70, 0.06); --fundo-selecao: rgba(0, 120, 140, 0.14); --borda: rgba(20, 40, 70, 0.18); --borda-forte: rgba(20, 40, 70, 0.32); --texto: #121820; --texto-fraco: rgba(18, 24, 32, 0.72); --texto-apagado: rgba(18, 24, 32, 0.45); --destaque: #0d7a72; --destaque-2: #1a5f9e; --azul-link: #0b5cab; --ok: #1a7f45; --aviso: #9a6b00; --erro: #b42318; --glass: #f4f7fb; --glass-borda: rgba(20, 40, 70, 0.22); --glass-borda-fraca: rgba(20, 40, 70, 0.14); --neon: #0d7a72; --neon-2: #1a5f9e; } html[data-tema="oceano"] { color-scheme: dark; --fundo-app: #061018; --fundo-painel: #0a1822; --fundo-editor: #0e2030; --fundo-caixa: #122a3c; --fundo-hover: rgba(80, 200, 255, 0.1); --fundo-selecao: rgba(0, 200, 180, 0.2); --borda: rgba(140, 210, 255, 0.2); --borda-forte: rgba(140, 210, 255, 0.35); --texto: #e8f4ff; --texto-fraco: rgba(232, 244, 255, 0.75); --texto-apagado: rgba(232, 244, 255, 0.45); --destaque: #3dffa8; --destaque-2: #4db8ff; --azul-link: #7ec8ff; --ok: #3dffa8; --aviso: #ffd166; --erro: #ff7a7a; --glass: #0a1822; --glass-borda: rgba(140, 210, 255, 0.3); --glass-borda-fraca: rgba(140, 210, 255, 0.16); --neon: #3dffa8; --neon-2: #4db8ff; } html[data-tema="grafite"] { color-scheme: dark; --fundo-app: #1c1c1e; --fundo-painel: #2c2c2e; --fundo-editor: #3a3a3c; --fundo-caixa: #48484a; --fundo-hover: rgba(255, 255, 255, 0.08); --fundo-selecao: rgba(100, 210, 255, 0.2); --borda: rgba(255, 255, 255, 0.22); --borda-forte: rgba(255, 255, 255, 0.38); --texto: #f2f2f7; --texto-fraco: rgba(242, 242, 247, 0.78); --texto-apagado: rgba(242, 242, 247, 0.5); --destaque: #64d2ff; --destaque-2: #bf5af2; --azul-link: #64d2ff; --ok: #30d158; --aviso: #ffd60a; --erro: #ff453a; --glass: #2c2c2e; --glass-borda: rgba(255, 255, 255, 0.28); --glass-borda-fraca: rgba(255, 255, 255, 0.16); --neon: #64d2ff; --neon-2: #bf5af2; } html[data-tema="pro"] { color-scheme: dark; } /* Sem grelha/scanline fora do Neon */ html[data-tema="pro"] body::before, html[data-tema="contraste"] body::before, html[data-tema="claro"] body::before, html[data-tema="oceano"] body::before, html[data-tema="grafite"] body::before, html[data-tema="pro"] body::after, html[data-tema="contraste"] body::after, html[data-tema="claro"] body::after, html[data-tema="oceano"] body::after, html[data-tema="grafite"] body::after { content: none !important; display: none !important; } html[data-tema="pro"] body, html[data-tema="contraste"] body, html[data-tema="claro"] body, html[data-tema="oceano"] body, html[data-tema="grafite"] body { background: var(--fundo-app); color: var(--texto); font-family: var(--fonte-ui); } /* Painéis sólidos (sem vidro neon) nos outros temas */ html[data-tema="pro"] .sidebar, html[data-tema="pro"] .editor, html[data-tema="pro"] .painel-chat, html[data-tema="contraste"] .sidebar, html[data-tema="contraste"] .editor, html[data-tema="contraste"] .painel-chat, html[data-tema="claro"] .sidebar, html[data-tema="claro"] .editor, html[data-tema="claro"] .painel-chat, html[data-tema="oceano"] .sidebar, html[data-tema="oceano"] .editor, html[data-tema="oceano"] .painel-chat, html[data-tema="grafite"] .sidebar, html[data-tema="grafite"] .editor, html[data-tema="grafite"] .painel-chat { background: var(--fundo-painel) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-color: var(--borda) !important; } html[data-tema="claro"] .btn-primario { color: #fff; } html[data-tema="contraste"] ::selection, html[data-tema="claro"] ::selection, html[data-tema="oceano"] ::selection, html[data-tema="grafite"] ::selection { background: var(--fundo-selecao); color: var(--texto); } html[data-tema="contraste"] *::-webkit-scrollbar-thumb, html[data-tema="claro"] *::-webkit-scrollbar-thumb, html[data-tema="oceano"] *::-webkit-scrollbar-thumb, html[data-tema="grafite"] *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto) 35%, transparent); box-shadow: none; }