/** * themes.css * ────────────────────────────────────────────── * theme.js aplica o atributo [data-stage] no . * Este arquivo apenas redireciona --accent para a cor * correta — nenhuma outra propriedade é sobrescrita aqui, * mantendo o restante do layout agnóstico ao tema. */ html[data-stage="etapa-1"] { --accent: var(--stage-1); } html[data-stage="etapa-2"] { --accent: var(--stage-2); } html[data-stage="etapa-3"] { --accent: var(--stage-3); } html[data-stage="etapa-4"] { --accent: var(--stage-4); } html[data-stage="etapa-5"] { --accent: var(--stage-5); } html[data-stage="etapa-6"] { --accent: var(--stage-6); } html[data-stage="final"] { --accent: var(--ink); } /* O plano de fundo ganha um traço muito sutil da cor ativa, como uma luz distante — nunca um bloco de cor. */ body { background: radial-gradient(circle at 50% 0%, var(--accent-softer), transparent 60%), var(--bg); transition: background var(--dur-slow) var(--ease-in-out); }