/* ========================================================================= VENUZ — tema.css · alternância claro/escuro Carregar em TODAS as telas, depois do CSS próprio de cada uma. POR QUE ISTO EXISTE E COMO NÃO QUEBRA O SISTEMA ----------------------------------------------- O DESIGN.md funda o escuro numa cena, não num hábito, e a razão é técnica: "âmbar sobre claro não é visor, é texto amarelo ilegível". Medido: âmbar #FFB000 dá 9,22:1 sobre o chassi escuro e despenca para 1,83:1 sobre branco. Inverter as cores destruiria os dois sinais do sistema. A saída não é gambiarra, é fidelidade ao mundo: um instrumento real num estúdio claro CONTINUA tendo o visor num poço escuro. A caixa muda de cor; a janela do display, não. Daí a separação de dois conceitos que antes eram um token só: --vz-well poço rebaixado (campo de input, berço de tecla) → clareia --vz-visor janela de display (visor, soquete de LED) → SEMPRE escura E o âmbar ganha duas formas, porque tem dois papéis: --vz-amber âmbar como texto/borda sobre a superfície da tela → escurece para #7F4600 no claro (4,63:1 no poco), continua significando "estado ao vivo" --vz-amber-led âmbar dentro do visor/LED escuro → #FFB000 nos dois temas O laranja não muda: só aparece como ÁREA preenchida com legenda escura em cima (5,89:1 nos dois temas). Nunca é texto nem borda. Especificidade: `:root[data-tema="claro"]` (0,2,0) vence os `:root` (0,1,0) das telas, que declaram os tokens inline. Por isso funciona sem tocar neles. ========================================================================= */ /* --- tokens novos, valores do tema ESCURO (o padrão) ------------------- */ :root { /* Janela de display: escura nos dois temas, é onde o âmbar vive. */ --vz-visor: #16181B; --vz-visor-borda: #3E4146; --vz-amber-led: #FFB000; /* Tarja de risco (ação destrutiva). Precisa contrastar com a face da tecla, então acompanha o tema em vez de ser sempre osso. */ --vz-tarja: #E6E2DA; /* Texto que as telas antigas cravaram como `white`. Existe para que uma troca mecanica resolva os 140 pontos sem reescrever cada regra. */ --vz-txt: #FFFFFF; /* Véu: realce sutil sobre a superfície. No escuro é branco a 3%; no claro branco some, então vira preto. Eram 70 rgba(255,255,255,α) fixos. */ --vz-veu: rgba(255, 255, 255, 0.03); --vz-veu-forte: rgba(255, 255, 255, 0.06); /* Sombra: preta nos dois, mas o claro pede menos peso. */ --vz-sombra: rgba(0, 0, 0, 0.55); --vz-sombra-suave: rgba(0, 0, 0, 0.30); color-scheme: dark; } /* ========================================================================= TEMA CLARO Painel de instrumento em creme, teclas brancas, visores ainda escuros. Todos os valores abaixo foram medidos contra AA antes de entrar. ========================================================================= */ :root[data-tema="claro"] { --vz-chassis: #DEDAD0; /* a caixa do aparelho */ --vz-panel: #EDEAE3; /* painel elevado */ --vz-well: #CFCAC0; /* rebaixo: mais escuro que o chassi */ --vz-gunmetal: #B0ABA0; /* bordas e divisores */ --vz-keycap: #FFFFFF; /* face da tecla: mais clara que o painel */ --vz-keycap-up: #FFFFFF; --vz-bone: #26292E; /* texto principal — 12,15:1 sobre painel */ --vz-muted: #4E5257; /* secundário — 6,55:1 no painel, 4,82:1 no poço */ --vz-amber: #7F4600; /* âmbar legível em TODAS as superfícies do claro (4,63:1 no poço) */ --vz-tarja: #26292E; /* listra escura sobre tecla clara */ --vz-txt: #26292E; /* NÃO mudam: */ /* --vz-legend #1B1D20 legenda escura sobre tecla clara */ /* --vz-orange #FF6A1A área preenchida, legenda escura em cima */ /* --vz-visor #16181B a janela do display */ /* --vz-amber-led #FFB000 o dígito dentro dela */ --vz-visor-borda: #8E8A80; --vz-veu: rgba(0, 0, 0, 0.04); --vz-veu-forte: rgba(0, 0, 0, 0.08); --vz-sombra: rgba(0, 0, 0, 0.22); --vz-sombra-suave: rgba(0, 0, 0, 0.12); color-scheme: light; } /* Tokens legados: as telas remapeiam --bg-* e --text-* para os --vz-*, então a maioria segue sozinha. Estes poucos são literais nas telas antigas. */ :root[data-tema="claro"] { --bg-body: #DEDAD0; --bg-sidebar: #EDEAE3; --bg-card: #EDEAE3; --bg-input: #CFCAC0; --text-main: #26292E; --text-muted: #4E5257; --border: #B0ABA0; --primary: #26292E; --accent: #26292E; --danger: #26292E; --success: #7F4600; } /* `color: white` cravado nas telas antigas vira texto branco sobre creme. Só no tema claro, e só onde não há cor explícita de token. */ :root[data-tema="claro"] body { background-color: var(--vz-chassis); color: var(--vz-bone); } /* ========================================================================= O BOTÃO DE ALTERNÂNCIA Uma tecla de duas posições, como no aparelho: a posição atual fica acesa. ========================================================================= */ .vz-tema-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--vz-well); border: 1px solid var(--vz-gunmetal); border-radius: 3px; padding: 0 12px; height: 44px; cursor: pointer; font-family: var(--vz-font-ui, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vz-muted); box-shadow: inset 0 2px 6px var(--vz-sombra); transition: border-color 120ms linear, color 120ms linear; flex-shrink: 0; } .vz-tema-btn:hover { border-color: var(--vz-muted); color: var(--vz-bone); } .vz-tema-btn:focus-visible { outline: 2px solid var(--vz-amber); outline-offset: 2px; } .vz-tema-btn i { font-size: 13px; } /* O rótulo diz PARA ONDE vai, não onde está: é o que o dedo decide. */ .vz-tema-btn .vz-tema-claro { display: none; } :root[data-tema="claro"] .vz-tema-btn .vz-tema-claro { display: inline-flex; align-items: center; gap: 8px; } :root[data-tema="claro"] .vz-tema-btn .vz-tema-escuro { display: none; } .vz-tema-btn .vz-tema-escuro { display: inline-flex; align-items: center; gap: 8px; } /* A troca não é animação: é estado. Sem transição de cor na página inteira, que ficaria com centenas de elementos piscando fora de sincronia. */ @media (prefers-reduced-motion: reduce) { .vz-tema-btn { transition: none; } }