.tema-escuro {
  --cor-fundo: var(--obsidiana);
  --cor-superficie: var(--obsidiana-elevada);
  --cor-texto: var(--areia);
  --cor-texto-suave: var(--areia-suave);
  --cor-destaque: var(--magma);
  --cor-borda: var(--obsidiana-borda);
  --cor-foco: var(--magma);
}

.tema-escuro-elevado {
  --cor-fundo: var(--obsidiana-elevada);
  --cor-superficie: var(--obsidiana);
  --cor-texto: var(--areia);
  --cor-texto-suave: var(--areia-suave);
  --cor-destaque: var(--magma);
  --cor-borda: var(--obsidiana-borda);
  --cor-foco: var(--magma);
}

.tema-claro {
  --cor-fundo: var(--areia);
  --cor-superficie: var(--branco);
  --cor-texto: var(--obsidiana);
  --cor-texto-suave: var(--grafite);
  --cor-destaque: var(--magma-escuro);
  --cor-borda: var(--areia-borda);
  --cor-foco: var(--magma-escuro);
}

.tema-magma {
  --cor-fundo: var(--magma);
  --cor-texto: var(--obsidiana);
  --cor-texto-suave: var(--obsidiana);
  --cor-destaque: var(--obsidiana);
  --cor-foco: var(--obsidiana);
}

:is(.tema-escuro, .tema-escuro-elevado, .tema-claro, .tema-magma) {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}